Make new page layout responsive; fix ticker
display: table;
margin: 0 auto;
border-spacing: 10px;
- height: 600px;
}
.latest h2 {
}
.latest-scroller {
- max-height: 600px;
+ height: 600px;
padding: 12px;
overflow-y: auto;
}
}
@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 {
{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: [
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)
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 {