Add auto-floating to article headers in detail view #1

Merged
merged 6 commits into from Jul 6, 2012

Projects

None yet

2 participants

@BYK
Contributor
BYK commented Jul 6, 2012

These two changes auto-floats article titles in detail view when a user scrolls past them just like in the GMail application on Android does with e-mail headers. Uses a small inline script for now.

BYK added some commits Jul 6, 2012
@BYK BYK Add float class to header
Add a float class to article headers to make them fixed position when the user scrolls past the header.
8c3876b
@BYK BYK Add auto-floating to article titles
Add auto-floating to article titles in detail pages using a small inline JS.
4a477d4
@BYK BYK Wrap inline script in closure
Wrap the inline script used to create auto-float effect in a function closure
to prevent global variable space pollution.
e2e435c
@berkerpeksag berkerpeksag commented on an outdated diff Jul 6, 2012
blog/static/style/screen.css
@@ -51,6 +51,18 @@ header .logo {
padding-top: 11px;
}
+header.float {
+ border-radius: 3px/0 0 3px 3px;
+ background: none repeat scroll 0 0 #FFFFFF;
+ box-shadow: 0px 7px 10px #999;
@berkerpeksag berkerpeksag commented on an outdated diff Jul 6, 2012
blog/static/style/screen.css
@@ -51,6 +51,18 @@ header .logo {
padding-top: 11px;
}
+header.float {
+ border-radius: 3px/0 0 3px 3px;
+ background: none repeat scroll 0 0 #FFFFFF;
@berkerpeksag
berkerpeksag Jul 6, 2012 Owner

#FFFFFF -> #fff

@berkerpeksag berkerpeksag commented on an outdated diff Jul 6, 2012
templates/blog/detail.html
@@ -20,4 +20,20 @@
</div>
</article>
+<script>
+ (function () {
+ "use strict";
+ var titleElm = document.querySelectorAll('article>div.info')[0];
+ if (!titleElm) return;
@berkerpeksag
berkerpeksag Jul 6, 2012 Owner
if (!titleElm)
    return;
@berkerpeksag berkerpeksag commented on an outdated diff Jul 6, 2012
templates/blog/detail.html
@@ -20,4 +20,20 @@
</div>
</article>
+<script>
+ (function () {
+ "use strict";
+ var titleElm = document.querySelectorAll('article>div.info')[0];
+ if (!titleElm) return;
+
+ var limit = titleElm.offsetTop;
+ window.onscroll = function (evt) {
@berkerpeksag
berkerpeksag Jul 6, 2012 Owner
var titleCls = titleElm.classList;
window.onscroll = function (evt) { 
    if (limit < document.documentElement.scrollTop)
        titleCls.add('float');
    else
        titleCls.remove('float');
 };
@berkerpeksag berkerpeksag merged commit 92bf5fa into berkerpeksag:master Jul 6, 2012
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment