more css on hub and story

6 files changed, 136 insertions, 5 deletions

diff --git a/StoneIsland/www/css/blogs.css b/StoneIsland/www/css/blogs.css
index c83ed355..f3552bc7 100644
--- a/StoneIsland/www/css/blogs.css
+++ b/StoneIsland/www/css/blogs.css
@@ -3,8 +3,9 @@
   display: none;
 }
 #story .links {
-  margin: 0;
+  margin: 15px 0 0;
   text-align: center;
+  text-transform:uppercase;
 }
 #story .links li {
   padding: 10px;
@@ -48,4 +49,118 @@
 
 .page .content {
   padding: 10px;
+}
+
+#content .content .body {
+  letter-spacing:0.35px;
+  font-size:12px;
+  width:calc(100vw - 40px);
+  box-sizing:border-box;
+  margin:10px auto 20px;
+}
+
+.content-header {
+  width:calc(100vw - 40px);
+  box-sizing:border-box;
+  margin:20px auto 0px;
+}
+
+.content-header .title, .content-header .subtitle {
+  display:block;
+  font-weight:bold;
+  font-size:14px;
+  text-transform:uppercase
+}
+
+.content-header .title {
+  margin:0;
+  padding:0;
+  line-height:13px;
+}
+
+.content-header .subtitle {
+  padding-bottom:10px
+}
+
+.content-share {
+  border:1px solid black;
+  padding:4px 8px;
+  float:right
+}
+
+.content-header span.date, .content-header span.store {
+  font-size:10px;
+}
+
+/* NOTE: optional arrows */
+
+.gallery-multiple-images::before {
+  border:1px solid black;
+  top:50%;
+  transform:scale(.5,1) translateY(-50%);
+  transform-origin:top left;
+  left:20px;
+  content:'\25C0';
+  font-size:18px;
+  padding:6px 14px;
+  z-index:999;
+  position:absolute;
+  display:block;
+  background:rgba(255,255,255,1);
+}
+
+.gallery-multiple-images::after {
+  border:1px solid black;
+  top:50%;
+  transform:scale(.5,1) translateY(-50%);
+  transform-origin:top right;
+  right:20px;
+  content:'\25B6';
+  font-size:18px;
+  padding:6px 14px;
+  z-index:999;
+  position:absolute;
+  display:block;
+  background:rgba(255,255,255,1);
+}
+
+/* NOTE: not sure if this down arrow is necessary.. the fade
+         might do..? what do you think? it can be removed
+         with javascript when the body hits the bottom of
+         the page */
+
+.fade-cover {
+  background: linear-gradient(rgba(255,255,255,0), rgba(255,255,255,1));
+  position:fixed;
+  bottom:0;
+  width:100vw;
+  height:100px;
+  box-sizing:border-box
+}
+
+.fade-cover::before {
+  border:1px solid black;
+  top:50%;
+  left:50%;
+  margin-left:-24px;
+  transform:scale(1,.5) translateY(-50%);
+  transform-origin:bottom right;
+  content:'\25BC';
+  font-size:17px;
+  padding:9px 11px;
+  z-index:999;
+  position:absolute;
+  display:block;
+  background:rgba(255,255,255,1);
+}
+
+#story img {
+box-sizing:border-box;
+width:calc(100vw + 150px);
+position:relative;
+left:-75px;
+}
+
+ul.links {
+-webkit-padding-start: 0px!important
 }
\ No newline at end of file
diff --git a/StoneIsland/www/index.html b/StoneIsland/www/index.html
index 4b09a631..edbad059 100644
--- a/StoneIsland/www/index.html
+++ b/StoneIsland/www/index.html
@@ -125,7 +125,8 @@
       <div class="content">
         <script type="text/html" class="template">
           <div data-id="{{id}}">
-            <span class="title">{{title}}</span>
+            <!-- NOTE: span.title removed since latest update
+            <!-- <span class="title">{{title}}</span> -->
             <div class="body">{{body}}</div>
           </div>
         </script>
@@ -140,19 +141,25 @@
         <script type="text/html" class="template">
           <div>
             <div class="gallery gallery-{{id}}"></div>
+            <div class="content-header">
+            <div class="content-share">
+            SHARE +
+            </div>
             <span class="title">{{title}}</span>
             <span class="subtitle">{{subtitle}}</span>
             <span class="date">
               {{date}}
               <span class="store">
-                | <b><u>Store</u></b>
+                | <b><u>STORE</u></b>
               </span>
             </span>
+            </div>
             <div class="body">{{body}}</div>
           </div>
         </script>
       </div>
     </div>
+    <div class="fade-cover"></div>
   </div>
 
   <div id="archive">
diff --git a/StoneIsland/www/js/index.js b/StoneIsland/www/js/index.js
index dec2d0cd..44146e65 100644
--- a/StoneIsland/www/js/index.js
+++ b/StoneIsland/www/js/index.js
@@ -30,7 +30,6 @@ var app = (function(){
 	  app.archive = new ArchiveView ()
 	  app.hub = new HubView ()
 	  app.story = new StoryView ()
-	  
 	  app.cart = new CartView ()
 
 	  app.intro = new IntroView ()
diff --git a/StoneIsland/www/js/lib/blogs/BlogView.js b/StoneIsland/www/js/lib/blogs/BlogView.js
index 9cb2afbe..19666f8b 100644
--- a/StoneIsland/www/js/lib/blogs/BlogView.js
+++ b/StoneIsland/www/js/lib/blogs/BlogView.js
@@ -17,9 +17,12 @@ var BlogView = View.extend({
   },
   
   success: function(data){
+
     if (this.loaded) return
+
     this.loaded = true
     this.data = data
+
     this.loader.preloadImage(data.archive[0].images[0].uri, function(img){
       app.archive.populate(data.archive)
     })
@@ -31,6 +34,7 @@ var BlogView = View.extend({
     })
     data.page.forEach(function(page){
       app[page.tag].populate(page)
+      
     })
     app.collection.setCollectionName( data.store[0].collection )
 
diff --git a/StoneIsland/www/js/lib/blogs/StoryView.js b/StoneIsland/www/js/lib/blogs/StoryView.js
index 88a56392..70ac061f 100644
--- a/StoneIsland/www/js/lib/blogs/StoryView.js
+++ b/StoneIsland/www/js/lib/blogs/StoryView.js
@@ -35,7 +35,7 @@ var StoryView = ScrollableView.extend({
       li.dataset.id = row.id
       li.innerHTML = row.title
       this.sections[row.id] = row
-
+      //console.log("ok");
       this.$links.append(li)
       this.$content.append(t)
     }.bind(this))
diff --git a/StoneIsland/www/js/vendor/loader.js b/StoneIsland/www/js/vendor/loader.js
index cc9644f8..eeb4337e 100644
--- a/StoneIsland/www/js/vendor/loader.js
+++ b/StoneIsland/www/js/vendor/loader.js
@@ -3,7 +3,13 @@ var Loader = Loader || (function(){
     this.assets = {};
     this.images = [];
     this.readyCallback = readyCallback;
+    //
+    // NOTE: there is some sort of race condition happening here.. the 'Story' page has duplicate
+    //       title links as 'app.story.populate(data.story)' is being triggered twice in BlogView.js.. 
+    //       i changed 'this.count' below to 1 just to test it and it fixed it for a second.. but then it
+    //       quit working again.. so something is awry
     this.count = 0
+    //
     this.view = view
     this.loaded = false
   }