added captions

.gitignore

@@ -5,3 +5,5 @@ mup.json
 .DS_Store
 */.DS_Store
 ssl/
+node_modules/
+*.swp

client/main.scss

@@ -1,6 +1,7 @@
 @import '{}/node_modules/photoswipe/src/css/main.scss';
 @import '{}/node_modules/photoswipe/src/css/default-skin/default-skin.scss';
 
+@import '{}/imports/ui/stylesheets/global.scss';
 @import '{}/imports/ui/stylesheets/layout.scss';
 @import '{}/imports/ui/stylesheets/autocomplete.scss';
 

imports/ui/blaze-helpers.js

@@ -3,3 +3,5 @@ import { Template } from 'meteor/templating';
 Template.registerHelper('$and', (a, b) => {
   return a && b;
 });
+
+Template.registerHelper('$not', a => !a);

imports/ui/components/loading_overlay.scss

@@ -1,14 +1,3 @@
-.overlay {
-  position: fixed;
-  left: 0;
-  top: 0;
-  height: 100%;
-  width: 100%;
-  opacity: 0.7;
-  z-index: 500;
-  background-color: #000000;
-}
-
 .loader {
   color: #ffffff;
   font-size: 90px;

imports/ui/pages/results.html

@@ -2,9 +2,9 @@
   <div id="results">
     {{#if moduleChosen "camera"}}
       <h3>{{experience.name}}</h3>
-      <h5>View only photos from:
-        <select id="pic-dropdown">
-          <option value="anywhere" selected>Anywhere</option>
+      <h5>Filter by: 
+        <select id="pic-dropdown" class="form-control">
+          <option value="anywhere" selected>Location</option>
           <option value="north-campus">NU North Campus</option>
           <option value="south-campus">NU South Campus</option>
           <option value="offcampus-evanston">Off-campus Evanston</option>
@@ -14,16 +14,20 @@ <h5>View only photos from:
           <option value="greater-st-louis">Greater St. Louis, MO Area</option>
         </select>
       </h5>
-      <br/>
       <div class="row">
         {{#each image in images}}
-          <div class="col-xs-6 col-sm-4 col-md-2 col">
+          <div class="image-grid col-xs-6 col-sm-4 col-md-2 col">
             <img src="{{image.url store="thumbs"}}" alt="" data-index="{{@index}}">
+            {{#if moduleChosen "text"}}
+              <div class="caption">
+                {{image.caption}}, from {{image.location}}
+              </div>
+            {{/if}}
           </div>
         {{/each}}
       </div>
     {{/if}}
-    {{#if moduleChosen "text"}}
+    {{#if $and (moduleChosen "text") ($not (moduleChosen "camera"))}}
       <h3>Here's what everyone wrote for {{experience.name}}</h3>
       <!--<h5>View only submissions from:-->
         <!--<select id="text-dropdown">-->
@@ -47,25 +51,17 @@ <h3>Here's what everyone wrote for {{experience.name}}</h3>
     {{/if}}
     {{#if moduleChosen "camera"}}
       <div id="gallery" class="pswp" tabindex="-1" role="dialog" aria-hidden="true">
-        <!-- Background of PhotoSwipe.
-             It's a separate element as animating opacity is faster than rgba(). -->
         <div class="pswp__bg"></div>
-        <!-- Slides wrapper with overflow:hidden. -->
         <div class="pswp__scroll-wrap">
 
-          <!-- Container that holds slides.
-              PhotoSwipe keeps only 3 of them in the DOM to save memory.
-              Don't modify these 3 pswp__item elements, data is added later on. -->
           <div class="pswp__container">
             <div class="pswp__item"></div>
             <div class="pswp__item"></div>
             <div class="pswp__item"></div>
           </div>
 
-          <!-- Default (PhotoSwipeUI_Default) interface on top of sliding area. Can be changed. -->
           <div class="pswp__ui pswp__ui--hidden">
             <div class="pswp__top-bar">
-              <!--  Controls are self-explanatory. Order can be changed. -->
               <div class="pswp__counter"></div>
               <button class="pswp__button pswp__button--close" title="Close (Esc)"></button>
               <button class="pswp__button pswp__button--share" title="Share"></button>

imports/ui/pages/results.js

@@ -86,11 +86,12 @@ Template.results.events({
         return {
           src: image.url(),
           w: image.metadata.width,
-          h: image.metadata.height
+          h: image.metadata.height,
+          title: `${ image.caption } from ${ image.location }`
         };
       });
     const options = {
-      index: event.target.getAttribute('data-index')
+      index: parseInt(event.target.getAttribute('data-index'))
     };
     const gallery = new PhotoSwipe(galleryElement, PhotoSwipeUI_Default, items, options);
     gallery.init();

imports/ui/pages/results.scss

@@ -1,43 +1,36 @@
 
 #results {
+  select.form-control {
+    display: inline-block;
+    width: auto;
+  }
 
   img {
     width: 100%;
+    padding: 0px;
   }
 
   .col {
     padding: 0;
   }
 
-//    display: flex;
-//    flex-wrap: wrap;
-//    font-size: 0;
+  .pswp__caption__center {
+    text-align: center;
+  }
+
+  .image-grid {
+    position: relative;
 
-//    li {
-//      display: inline-block;
-//      font-size: 16px;
-//      margin-left: 4px;
-//      margin-right: 4px;
-//      margin-bottom: 8px;
-//    }
-    //li {
-    //  margin: 4px;
-    //  width: 400px;
-    //  height: 400px;
-    //  overflow: hidden;
-    //  position: relative;
-    //}
-    //img {
-    //  position: absolute;
-    //  margin: auto;
-    //  min-height: 100%;
-    //  max-width: 100%;
-    //
-    //  /* For the following settings we set 100%, but it can be higher if needed
-    //  See the answer's update */
-    //  left: -100%;
-    //  right: -100%;
-    //  top: -100%;
-    //  bottom: -100%;
-    //}
+    .caption {
+      position: absolute;
+      width: 100%;
+      text-align: center;
+      background-color: rgba(0, 0, 0, 0.6);
+      bottom: 0;
+      height: 48px;
+      color: rgba(255, 255, 255, 0.8);
+      text-overflow: ellipsis;
+      overflow: hidden;
+    }
+  }
 }

imports/ui/stylesheets/global.scss

@@ -0,0 +1,11 @@
+.overlay {
+  position: fixed;
+  left: 0;
+  top: 0;
+  height: 100%;
+  width: 100%;
+  opacity: 0.7;
+  z-index: 500;
+  background-color: #000000;
+}
+

package.json

@@ -9,8 +9,7 @@
     "photoswipe": "4.1.1"
   },
   "devDependencies": {},
-  "scripts": {
-  },
+  "scripts": {},
   "repository": {
     "type": "git",
     "url": "git+https://github.com/NUDelta/ce-platform.git"