Merge pull request #34 from GingerBear/layout-update

mobile layout update

.gitignore

@@ -31,5 +31,6 @@ node_modules
 # Users Environment Variables
 .lock-wscript
 
-# sass cache
-public/.sass-cache/
+# cache
+public/.sass-cache/
+.build/

app.js

@@ -4,6 +4,8 @@ var favicon = require('serve-favicon');
 var logger = require('morgan');
 var cookieParser = require('cookie-parser');
 var bodyParser = require('body-parser');
+var nib          = require('nib');
+var hbs  = require('express-hbs');
 
 var routes = require('./routes/index');
 var dailyZap = require('./routes/dailyZap');
@@ -17,9 +19,14 @@ var live = require('./routes/live');
 var app = express();
 
 // view engine setup
-app.set('views', path.join(__dirname, 'views'));
-app.set('view options', {layout: 'layout'});
+app.engine('hbs', hbs.express4({
+    partialsDir:    __dirname + '/views/partials',
+    defaultLayout:  __dirname + '/views/layouts/default.hbs',
+    layoutsDir:     __dirname + '/views/layouts'
+}));
 app.set('view engine', 'hbs');
+app.set('views', 'views');
+app.hbs = hbs;
 
 // uncomment after placing your favicon in /public
 app.use(favicon(__dirname + '/public/favicon.ico'));
@@ -29,6 +36,26 @@ app.use(bodyParser.urlencoded({ extended: false }));
 app.use(cookieParser());
 app.use(express.static(path.join(__dirname, 'public')));
 
+
+
+app.use(require("connect-assets")({
+    paths: [
+        __dirname + '/assets/js',
+        __dirname + '/assets/css'
+    ],
+    buildDir: '.built'
+}, function (assetsInstance) {
+    assetsInstance.environment.getEngines('.styl').configure(function (stylus) {
+        stylus.use(nib()).import('nib');
+        if (app.settings.env === 'development') {
+            stylus.set('sourcemap', {inline: true});
+        }
+    });
+}));
+
+require('./lib/hbs-helpers')(app);
+
+
 app.use('/', routes);
 app.use('/daily-zap', dailyZap);
 app.use('/top-10', topTen);
@@ -45,11 +72,6 @@ app.use(function(req, res, next) {
     next(err);
 });
 
-// load compass only on development
-if (app.get('env') === 'development') {
-    app.use(require('node-compass')({mode: 'expanded'}));
-}
-
 // error handlers
 
 // development error handler

public/sass/style.scss → assets/css/style.styl

@@ -1,27 +1,29 @@
-@import "compass/css3";
-
 body {
   padding: 50px;
   font: 14px "Lucida Grande", Helvetica, Arial, sans-serif;
 }
 
+* {
+  box-sizing: border-box;
+}
+
 a {
   color: #666;
   text-decoration: none;
 }
 
 nav {
-  float: right;
+  width: 100%;
+  float: left;
+  background: white;
+  border-bottom: 1px solid #eee;
   a {
     color: #00B7FF;
-    &:after {
-      content: '|';
-      color: #aaa;
-      margin-left: 5px;
-    }
-    &:last-child:after {
-      content: '';
-    }
+    padding: 10px;
+    display: inline-block;
+  }
+  [href="/standings"] {
+    display: none;
   }
 }
 
@@ -33,6 +35,7 @@ ul {
 .videos {
   display: flex;
   flex-flow: row wrap;
+  padding-right: 25%;
 }
 
 .video {
@@ -54,8 +57,14 @@ ul {
 }
 
 .standings {
-  float: right;
-  width: 220px;
+  float: none;
+  overflow: hidden;
+  background: #fff;
+  width: 25%;
+  position: absolute;
+  right: 25px;
+  top: 35px;
+
   h2 {
     margin-top: 0;
   }
@@ -81,18 +90,75 @@ ul {
 .video-player {
   width: 100%;
 }
+.header {
+  width: 100%;
+  position: fixed;
+  top: 0;
+  z-index: 1;
+}
+
+activeNav() {
+  background: #eee;
+  color: #555;
+}
 
 @media only screen and (max-width: 500px) {
   body {
-    padding: 10px;
+    margin: 0;
+    padding: 0;
+    padding-top: 35px;
   }
   h1 {
-    margin-bottom: 0;
+    display: none;
+  }
+  nav {
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    background: white;
+    border-bottom: 1px solid #eee;
+    &.highlights {
+      .highlights {
+        activeNav();
+      }
+    }
+    &.top-10 {
+      .top-10 {
+        activeNav();
+      }
+    }
+    &.score {
+      .score {
+        activeNav();
+      }
+    }
+    a {
+      flex: 1;
+      padding: 10px;
+      text-align: center;
+      border-right: 1px solid #eee;
+      color: #999;
+      &:after {
+        display: none;
+      }
+      &:last-of-type {
+        border-right: none;
+      }
+    }
+    [href="/standings"] {
+      display: block;
+    }
+  }
+  .date-header {
+    padding: 0 10px;
   }
   .standings {
     float: none;
-    width: auto;
     overflow: hidden;
+    width: 100%;
+    background: #fff;
+    position: static;
+
     h2 {
       font-size: 1rem;
       text-align: right;
@@ -101,12 +167,16 @@ ul {
       cursor: pointer;
       color: #00B7FF;
     }
+    h4 {
+      margin: 5px 0;
+    }
     .content.show {
       display: block;
     }
     .content {
       display: none;
       font-size: 0.7rem;
+      padding: 10px;
       ol {
         padding-left: 20px;
       }
@@ -127,11 +197,35 @@ ul {
   }
   .videos {
     display: block;
+    padding-right: 0;
   }
   .video {
-    width: 48%;
-    display: inline-block;
-    margin: 0 2% 20px 0;
+    width: 100%;
+    margin: 0;
+    overflow: hidden;
+    position: relative;
+    img {
+      float: left;
+    }
+    a {
+      display: block;
+    }
+    .title {
+      font-size: 16px;
+      color: white;
+      font-weight: bold;
+    }
+    .date {
+      font-size: 13px;
+      color: white;
+    }
+    .info {
+      position: absolute;
+      background: rgba(0,0,0,0.3);
+      bottom: 0;
+      left: 0;
+      padding: 5px;
+    }
   }
   .video:nth-child(even) {
     margin-right: 0;

assets/js/app.js

@@ -0,0 +1,60 @@
+(function() {
+
+  var isMobile = /Mobile|iP(hone|od|ad)|Android|BlackBerry|IEMobile/.test(window.navigator.userAgent);
+
+  $.ajax('/standings').done(showStandings);
+
+  function showStandings(json) {
+    var template = Handlebars.compile($('[data-template-name="standings"]').html());
+    var html = template(json);
+    $('.standings .content').html(html);
+  }
+
+
+  if (isMobile) {
+    $('.standing-toggle').click(function(e) {
+      e.preventDefault();
+      $('.standings .content').toggleClass('show');
+    });
+  }
+
+  if (isMobile) {
+    initScrollPreload();
+  }
+
+  function initVideo($link) {
+    var img = $link.find('img');
+    var href = $link.attr('href');
+    $link.addClass('preloading');
+    $.get(href).done(function(data) {
+      if (data.video) {
+        $link.replaceWith('<video class="video-player" controls poster="' + data.thumbnailUrl + '" src="' + data.video + '"></video>');
+      }
+    });
+  }
+
+  function getVideosByScroll(y) {
+    return $('li.video').filter(function() {
+      return $(this).offset().top > y
+    }).slice(0, 5);
+  }
+
+  function initScrollPreload() {
+    var timer;
+    tryPreload();
+
+    function tryPreload() {
+      var videos = getVideosByScroll(window.scrollY);
+      videos.each(function() {
+        var videoLink = $(this).find('[data-preload="true"]:not(.preloading)');
+        initVideo(videoLink);
+      });
+    }
+
+    window.onscroll = function() {
+      clearTimeout(timer);
+      timer = setTimeout(tryPreload, 100);
+    };
+  }
+
+})();

lib/hbs-helpers.js

@@ -0,0 +1,17 @@
+// Custom handlebar helpers
+
+module.exports = function(app) {
+
+  var hbs = app.hbs;
+
+  // css helper for getting paths to compiled assets
+  hbs.registerHelper('css', function(file, options) {
+    return css(file);
+  });
+
+  // js helper for getting paths to compiled assets
+  hbs.registerHelper('js', function(file, options) {
+    return js(file);
+  });
+
+};

lib/utils.js

@@ -1,4 +1,5 @@
-
+var moment = require('moment');
+require('moment-timezone');
 var week = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
 
 module.exports = {
@@ -8,8 +9,8 @@ module.exports = {
 }
 
 function formatDate(item) {
-  var date = new Date(+(item.mediaDateUts + '000'));
-  item.date = week[date.getDay()] + ', ' + (date.getMonth()+1) + '/' + date.getDate() + '/' + date.getFullYear();
+  var date = moment.unix(item.mediaDateUts);
+  item.date = date.tz('America/New_York').format('dddd, MM/DD/YYYY');
 }
 
 function whitelister(whitelist) {