From 1a21466c7e3f8c18c4c35df56c270546ae8e6434 Mon Sep 17 00:00:00 2001 From: Chip Black Date: Sun, 17 Nov 2013 15:14:17 -0800 Subject: [PATCH] Make new page layout responsive; fix ticker --- www/css/blerg.css | 27 +++++++++++++++++++++++---- www/jssrc/blerg/Welcome.js | 21 ++++++++++++++------- 2 files changed, 37 insertions(+), 11 deletions(-) diff --git a/www/css/blerg.css b/www/css/blerg.css index eb34757..9149194 100644 --- a/www/css/blerg.css +++ b/www/css/blerg.css @@ -295,7 +295,6 @@ h1, h2, h3 { display: table; margin: 0 auto; border-spacing: 10px; - height: 600px; } .latest h2 { @@ -304,7 +303,7 @@ h1, h2, h3 { } .latest-scroller { - max-height: 600px; + height: 600px; padding: 12px; overflow-y: auto; } @@ -338,15 +337,35 @@ h1, h2, h3 { } @media screen and (max-width: 1100px) { - .latest { display: block; } + .latest { + display: block; + margin-top: 15px; + } .latest-posts { display: block; width: auto; margin-right: 0; overflow: auto; + } + .latest-tags { + display: block; + width: auto; + margin-top: 10px; + } + .latest-tags .latest-scroller { + height: auto; + } +} + +@media screen and (max-width: 800px) { + .latest-posts, .latest-tags { + border: none; + background-color: inherit; + } + .latest-scroller { height: auto; + padding: 0; } - .latest-tags { display: block; width: auto; } } .author { diff --git a/www/jssrc/blerg/Welcome.js b/www/jssrc/blerg/Welcome.js index 6b7f2ad..ece3d6f 100644 --- a/www/jssrc/blerg/Welcome.js +++ b/www/jssrc/blerg/Welcome.js @@ -21,9 +21,9 @@ enyo.kind({ {name: "contentBox", allowHtml: true}, {classes: "latest", components: [ {classes: "latest-posts", components: [ - {classes: "latest-scroller", components: [ + {name: "latestPostsScroller", classes: "latest-scroller", onmouseover: "pauseTicker", onmouseout: "startTicker", components: [ {tag: "h2", content: "Latest posts"}, - {name: "latestPosts", onmouseover: "pauseTicker", onmouseout: "startTicker"} + {name: "latestPosts"} ]} ]}, {classes: "latest-tags", components: [ @@ -87,10 +87,17 @@ enyo.kind({ req.go(); }, startTickerCycle: function() { - this.tickerTimeout = setTimeout(function() { - this.$.latestPosts.node.scrollTop = 0; - this.startTicker(); - }.bind(this), 2500); + var starter = function() { + if (this.$.latestPostsScroller.hasNode()) { + var n = this.$.latestPostsScroller.node; + if (n.scrollTop >= n.scrollHeight - n.clientHeight) + n.scrollTop = 0; + this.startTicker(); + } else { + this.tickerTimeout = setTimeout(starter, 1000); + } + }.bind(this) + this.tickerTimeout = setTimeout(starter, 2500); }, startTicker: function() { if (this.tickerInterval) @@ -108,7 +115,7 @@ enyo.kind({ this.tickerInterval = null; }, ticker: function() { - var n = this.$.latestPosts.node; + var n = this.$.latestPostsScroller.node; if (n.scrollTop < n.scrollHeight - n.clientHeight) { n.scrollTop += 2; } else { -- 2.25.1