UI work for gallery page per #64

Author: scottgarner

css/main.scss

@@ -540,28 +540,36 @@ div#displayEditor {
 
 /* Gallery */
 
+#galleryContainer {
+	min-height: 100%;
+	position: relative;
+}
+
 #galleryView {
 	margin: 12px auto 0 auto;
 }
 
 .galleryImage {
 	float: left;
-	width: 240px;
-	height: 192px;		
+	width: 250px;
+	height: 200px;		
 	margin-bottom: 12px;
 }
 
 #galleryControls {
 	width: 100%;
 	text-align: center;
-	margin-bottom: 12px;
+	padding-bottom: 28px;
 }
 
 #galleryFooter {
-	clear: both;
-	text-align: center;
 	width: 100%;
+	height: 20px;
 	color: #fff;
+	position: absolute;
+	bottom: 0;
+	left: 0;
+	text-align: center;
 }
 
 /* Hints Preview */

gallery/index.html

@@ -4,28 +4,31 @@
 class: gallery
 ---
 
-{% include header.html %}
-
 <script id="template" type="text/html">
 {% raw  %}
 <div class="galleryImage">
-  <a href="{{link}}"><img src="{{image}}" width="240" height="192"/></a>
+  <a href="{{link}}"><img src="{{image}}" width="250" height="200"/></a>
 </div>
 {% endraw %}
 </script>
 
-<div id="galleryView">
+<div id="galleryContainer">
 
+	{% include header.html %}
 
-</div>
+	<div id="galleryView"></div>
 
-<div id="galleryControls">
-	<button id="loadMore" class="btn btn-default">Load More</button>
-</div>
+	<div id="galleryControls">
+		<button id="loadMore" class="btn btn-default" data-loading-text="Loading...">
+			<span class="glyphicon glyphicon-plus"></span> Load More
+		</button>
+	</div>
 
-<footer id="galleryFooter">
-  Processing Hour of Code // Computer Science Education Week // Code.org
-</footer>
+	<footer id="galleryFooter">
+	  Processing Hour of Code // Computer Science Education Week // Code.org
+	</footer>
+
+</div>
 
 <script src="//www.parsecdn.com/js/parse-1.3.1.min.js"></script>
 <script src="/js/vendor/mustache.min.js" type="text/javascript"></script>

js/gallery.js

@@ -36,7 +36,6 @@ var helloGallery = {
         query.count({
           success: function(number) {
             helloGallery.totalItems = number;
-            console.log(helloGallery.totalItems);
           },
           error: function(error) {
             // error is an instance of Parse.Error.
@@ -63,6 +62,8 @@ var helloGallery = {
 
     loadElements: function (callback) {
 
+        $("#loadMore").button('loading');
+
         var GalleryObject = Parse.Object.extend("Gallery");
         var query = new Parse.Query(GalleryObject);
         query.limit(helloGallery.itemsPerPage);
@@ -94,7 +95,7 @@ var helloGallery = {
 
             helloGallery.pageNumber++; 
 
-            console.log(helloGallery.pageNumber * helloGallery.itemsPerPage);
+            $("#loadMore").button('reset');
 
             if (helloGallery.totalItems != null && helloGallery.pageNumber * helloGallery.itemsPerPage >= helloGallery.totalItems) {
               $("#loadMore").hide();