Gallery interface and styling per #64

Author: scottgarner

_layouts/default.html

@@ -6,8 +6,7 @@
   <title>{{ site.name }} | {{ page.title }}</title>
   <meta name="description" content="">
 
-<meta name="viewport" content="width=1024,
-user-scalable=yes, target-densitydpi=device-dpi">
+<meta name="viewport" content="width=1024, user-scalable=yes">
 
   <link rel="stylesheet" href="/css/bootstrap.min.css">
   <link rel="stylesheet" href="/css/spectrum.css">

css/main.scss

@@ -646,6 +646,15 @@ div#displayEditor {
 	box-shadow: 4px 4px 1px rgba(0,0,0,.25);
 }
 
+#loadMore {
+	background: $light-color;
+}
+
+#loadMore:hover {
+	background: $mid-color;
+	text-decoration: none;
+}
+
 #galleryFilter {
 	background: $secondary-color;
 	height: 32px;
@@ -675,12 +684,6 @@ div#displayEditor {
 	border-bottom: 2px solid white;
 }
 
-#galleryControls {
-	width: 100%;
-	text-align: center;
-	padding-bottom: 12px;
-}
-
 /* Hints Preview */
 
 .hintPreview {

gallery/index.html

@@ -6,7 +6,7 @@
 
 <script id="template" type="text/html">
 {% raw  %}
-<div class="galleryImage">
+<div class="galleryImage" data-index="0">
   <a href="{{link}}"><img src="{{image}}" width="250" height="200"/></a>
 </div>
 {% endraw %}
@@ -34,12 +34,12 @@
 	      </a>
     </div>
 
-	<div id="galleryView"></div>
+	<div id="galleryView">
+		
+	<button id="loadMore" class="galleryImage btn btn-link" data-loading-text="Loading..."  data-index="1">
+		<span class="glyphicon glyphicon-plus"></span> Load More
+	</button>
 
-	<div id="galleryControls">
-		<button id="loadMore" class="btn btn-default btn-sm" data-loading-text="Loading...">
-			<span class="glyphicon glyphicon-plus"></span> Load More
-		</button>
 	</div>
 
 </div>

js/gallery.js

@@ -25,7 +25,7 @@ var helloGallery = {
 
             helloGallery.pageNumber = 0;
             $('#galleryView').isotope('destroy');            
-            $('#galleryView').html("");
+            $('.galleryImage').not("#loadMore").remove();
             $("#loadMore").show();
 
             helloGallery.loadInitial();
@@ -50,30 +50,29 @@ var helloGallery = {
 
     loadInitial: function() {
 
-        helloGallery.loadElements( function(elements){
-
-          var container = $('#galleryView'); 
-          container.append( elements );
+        $('#galleryView').isotope({
+          itemSelector: '.galleryImage',
+          sortBy : 'index',
+          getSortData: {
+            index: '[data-index]'
+          }, 
+          masonry: {
+            gutter: 12,
+            isFitWidth: true
+          }
+        });  
 
-          container.isotope({
-            itemSelector: '.galleryImage',
-              masonry: {
-                gutter: 12,
-                isFitWidth: true
-              }
-          });  
-       });
+        helloGallery.loadMore();
     },
 
     loadMore: function() {
 
       helloGallery.loadElements(function(elements){
-
         for (var element in elements) {
           var item = $(elements[element]);
 
-          $('#galleryView').append(item);
-          $('#galleryView').isotope('appended', item);
+          //$('#galleryView').append(item);
+          $('#galleryView').isotope('insert', item);
         }
       });
 
@@ -90,17 +89,17 @@ var helloGallery = {
 
         switch (helloGallery.sortMode) {
           case 0:
-            console.log("Featured");
+            //console.log("Featured");
             query.descending("featureScore");
             query.addDescending("createdAt");
             break;
           case 1:
-            console.log("Popular");
+            //console.log("Popular");
             query.descending("viewCount");
             query.addDescending("createdAt");
             break;
           case 2:
-            console.log("Recent");
+            //console.log("Recent");
             query.descending("createdAt");
             break;
         }