Added new classes for the tiles in collection overview. They should now be easily reusable for Databases and Applications

js/apps/system/aardvark/frontend/css/collectionsItemView.css

@@ -29,13 +29,6 @@
   margin:0;
 }
 
-.collectionName {
-  text-align:left;
-  font-weight: 300 !important;
-  position:absolute;
-  bottom:0px;
-}
-
 .thumbnail {
   padding:0;
   box-shadow: 0 0 0  !important;

js/apps/system/aardvark/frontend/js/templates/collectionsItemView.ejs

@@ -1,15 +1,14 @@
+<div class="iconSet">
+  <span id="editCollection" class="icon_arangodb_settings2" alt="Edit collection properties" title="Edit collection properties"></span>
+  <% if(attributes.status === "loaded") { %>
+    <span class="icon_arangodb_info" title="Show collection properties"></span>
+  <%} else {%>
+    <span class="icon_arangodb_info disabled" alt="disabled"></span>
+  <%}%>
+</div>
 
-  <div class="pull-right">
+<div class="plain">                                                                                                                                    
-    <span id="editCollection" class="ICON icon_arangodb_settings2" alt="Edit collection properties" title="Edit collection properties"></span>
+  <img src="<%= attributes.picture %>" height="50" width="50" alt="" class="icon">
-  </div>
+  <span class="badge badge-success <%= attributes.status %>"><div class="cornered"><%= attributes.status %></div></span>
-
+  <h5 class="collectionName"><%= attributes.name %></h5>
-  <div class="plain">                                                                                                                                    
+</div>
-    <img src="<%= attributes.picture %>" height="50" width="50" alt="" class="icon">
-    <span class="badge badge-success <%= attributes.status %>"><div class="cornered"><%= attributes.status %></div></span>
-
-    <h5 class="collectionName">
-      <div class="pull-left"><%= attributes.name %></div>
-    </h5>
-
-  </div>
-

js/apps/system/aardvark/frontend/js/views/collectionsItemView.js

@@ -7,7 +7,8 @@
   window.CollectionListItemView = Backbone.View.extend({
 
     tagName: "li",
-    className: "span3",
+//    className: "span3",
+    className: "tile",
     template: templateEngine.createTemplate("collectionsItemView.ejs"),
 
     initialize: function () {

js/apps/system/aardvark/frontend/js/views/collectionsView.js

@@ -31,7 +31,7 @@
       var searchOptions = this.collection.searchOptions;
 
       $('#collectionsThumbnailsIn', this.el).append(
-        '<li class="span3"><a href="#new" class="add">' +
+        '<li class="tile"><a href="#new" class="add">' +
         '<span id="newCollection" class="pull-left icon_arangodb_roundplus arangoicon" />' +
         'Add Collection</a></li>'
       );
@@ -43,6 +43,7 @@
       }, this);
 
       //append info icon for loaded collections
+      /*
       $('.loaded').parent().prev().append(
         '<span class="icon_arangodb_info spanInfo ICON" ' + 
         'title="Show collection properties"</span>'
@@ -50,6 +51,7 @@
       $('.unloaded').parent().prev().append(
         '<span class="icon_arangodb_info spanDisabled ICON" alt="disabled"</span>'
       );
+      */
 
       $('#searchInput').val(searchOptions.searchPhrase);
       $('#searchInput').focus();

js/apps/system/aardvark/frontend/scss/_resizing.scss

@@ -1,13 +1,14 @@
 div.resizecontainer {
   margin: 0px auto;
-}
+
-div.resizecontainer:after {
+  &:after {
-  clear: both;
+    clear: both;
-  content: ".";
+    content: ".";
-  display: block;
+    display: block;
-  font-size: 0px;
+    font-size: 0px;
-  height: 0px;
+    height: 0px;
-  visibility: hidden;
+    visibility: hidden;
+  }
 }
 
 @media (max-width: 798px) {
@@ -35,8 +36,8 @@ div.resizecontainer:after {
   }
 }
 
-@for $i from 0 through 10 {
+@for $i from 0 through 11 {
-  $min: 241px + $i * 243;
+  $min: 242px * $i;
   @media (min-width: $min + 72) and (max-width: $min + 243 + 71) {
     div.resizecontainer {
       width: $min;

js/apps/system/aardvark/frontend/scss/_tiles.scss

@@ -0,0 +1,73 @@
+div#collectionsThumbnailsIn {
+  margin-left: 0px;
+}
+
+
+li.tile {
+  @extend %pull-left;
+  position:relative;
+  text-align:center;
+  height:100px;
+  width: 230px;
+  margin: {
+    left: 6px;
+    right: 6px;
+    bottom: 13px;
+  }
+  @include box-shadow(none);
+
+  h5 {
+    font-size: 12px;
+    white-space: nowrap !important;
+    overflow: hidden !important;
+    text-overflow: ellipsis !important;
+    color: $c_white;
+    background: $c_bar_bg;
+    padding: 4px 8px;
+    margin: 0;
+  }
+
+  div.iconSet {
+    position: absolute; 
+    top: 5px;
+    right: 5px;
+
+    span {
+      @extend %clickable;
+      @extend %pull-right;
+      opacity: 0.5;
+      font-size: 18px;
+      padding-left: 7px;
+
+      &:hover {
+        opacity: 1.0;
+      }
+      &.disabled {
+        opacity: 0.2;
+        cursor: default;
+      }
+    }
+  }
+
+  .badge-success {
+    font-weight: 300;
+  }
+
+  .unloaded div {
+    border-bottom: 16px solid #FF8F35;
+  }
+
+  .deleted div {
+    border-bottom: 16px solid red;
+  }
+}
+
+.collectionName {
+  text-align:left;
+  font-weight: 300;
+  position: absolute;
+  bottom: 0px;
+  left: 0px;
+  right: 0px;
+}
+

js/apps/system/aardvark/frontend/scss/generated.css

@@ -3,12 +3,15 @@ body, input, textarea, .page-title span, .pingback a.url {
   font-family: 'Open Sans', sans-serif !important;
   font-weight: 400; }
 
-div.navlogo, ul.navlist li, ul.link-dropdown-menu, div.footer-left {
+div.navlogo, ul.navlist li, ul.link-dropdown-menu, div.footer-left, li.tile {
   float: left; }
 
-div.navmenu, div.footer-right {
+div.navmenu, div.footer-right, li.tile div.iconSet span {
   float: right; }
 
+li.tile div.iconSet span {
+  cursor: pointer; }
+
 nav.navbar, footer.footer {
   position: fixed;
   left: 0px;
@@ -20,14 +23,13 @@ nav.navbar, footer.footer {
 
 div.resizecontainer {
   margin: 0px auto; }
-
+  div.resizecontainer:after {
-div.resizecontainer:after {
+    clear: both;
-  clear: both;
+    content: ".";
-  content: ".";
+    display: block;
-  display: block;
+    font-size: 0px;
-  font-size: 0px;
+    height: 0px;
-  height: 0px;
+    visibility: hidden; }
-  visibility: hidden; }
 
 @media (max-width: 798px) {
   #arangoCollectionUl {
@@ -45,39 +47,42 @@ div.resizecontainer:after {
 @media (min-width: 1042px) and (max-width: 1284px) {
   #arangoCollectionUl a {
     font-size: 13px; } }
-@media (min-width: 313px) and (max-width: 555px) {
+@media (min-width: 72px) and (max-width: 314px) {
   div.resizecontainer {
-    width: 241px; } }
+    width: 0px; } }
+@media (min-width: 314px) and (max-width: 556px) {
+  div.resizecontainer {
+    width: 242px; } }
 @media (min-width: 556px) and (max-width: 798px) {
   div.resizecontainer {
     width: 484px; } }
-@media (min-width: 799px) and (max-width: 1041px) {
+@media (min-width: 798px) and (max-width: 1040px) {
   div.resizecontainer {
-    width: 727px; } }
+    width: 726px; } }
-@media (min-width: 1042px) and (max-width: 1284px) {
+@media (min-width: 1040px) and (max-width: 1282px) {
   div.resizecontainer {
-    width: 970px; } }
+    width: 968px; } }
-@media (min-width: 1285px) and (max-width: 1527px) {
+@media (min-width: 1282px) and (max-width: 1524px) {
   div.resizecontainer {
-    width: 1213px; } }
+    width: 1210px; } }
-@media (min-width: 1528px) and (max-width: 1770px) {
+@media (min-width: 1524px) and (max-width: 1766px) {
   div.resizecontainer {
-    width: 1456px; } }
+    width: 1452px; } }
-@media (min-width: 1771px) and (max-width: 2013px) {
+@media (min-width: 1766px) and (max-width: 2008px) {
   div.resizecontainer {
-    width: 1699px; } }
+    width: 1694px; } }
-@media (min-width: 2014px) and (max-width: 2256px) {
+@media (min-width: 2008px) and (max-width: 2250px) {
   div.resizecontainer {
-    width: 1942px; } }
+    width: 1936px; } }
-@media (min-width: 2257px) and (max-width: 2499px) {
+@media (min-width: 2250px) and (max-width: 2492px) {
   div.resizecontainer {
-    width: 2185px; } }
+    width: 2178px; } }
-@media (min-width: 2500px) and (max-width: 2742px) {
+@media (min-width: 2492px) and (max-width: 2734px) {
   div.resizecontainer {
-    width: 2428px; } }
+    width: 2420px; } }
-@media (min-width: 2743px) and (max-width: 2985px) {
+@media (min-width: 2734px) and (max-width: 2976px) {
   div.resizecontainer {
-    width: 2671px; } }
+    width: 2662px; } }
 div.centralRow {
   margin-top: 65px;
   margin-bottom: 65px; }
@@ -177,3 +182,54 @@ footer.footer {
     padding-top: 10px;
     padding-bottom: 10px;
     margin-bottom: 0; }
+
+div#collectionsThumbnailsIn {
+  margin-left: 0px; }
+
+li.tile {
+  position: relative;
+  text-align: center;
+  height: 100px;
+  width: 230px;
+  margin-left: 6px;
+  margin-right: 6px;
+  margin-bottom: 13px;
+  -webkit-box-shadow: none;
+  -moz-box-shadow: none;
+  box-shadow: none; }
+  li.tile h5 {
+    font-size: 12px;
+    white-space: nowrap !important;
+    overflow: hidden !important;
+    text-overflow: ellipsis !important;
+    color: white;
+    background: #686766;
+    padding: 4px 8px;
+    margin: 0; }
+  li.tile div.iconSet {
+    position: absolute;
+    top: 5px;
+    right: 5px; }
+    li.tile div.iconSet span {
+      opacity: 0.5;
+      font-size: 18px;
+      padding-left: 7px; }
+      li.tile div.iconSet span:hover {
+        opacity: 1.0; }
+      li.tile div.iconSet span.disabled {
+        opacity: 0.2;
+        cursor: default; }
+  li.tile .badge-success {
+    font-weight: 300; }
+  li.tile .unloaded div {
+    border-bottom: 16px solid #FF8F35; }
+  li.tile .deleted div {
+    border-bottom: 16px solid red; }
+
+.collectionName {
+  text-align: left;
+  font-weight: 300;
+  position: absolute;
+  bottom: 0px;
+  left: 0px;
+  right: 0px; }

js/apps/system/aardvark/frontend/scss/style.scss

@@ -14,3 +14,5 @@
 @import "navbar";
 // Footer
 @import "footer";
+// List tiles
+@import "tiles";