Athena/TopBarPrototype
< Athena
(Redirected from User:Yair rand/AthenaSmartphone)So I was looking at [[Athena]], and that thing looks really cool, and I felt like fiddling with some css and js, so... ...fiddles with css and js... ...So now I've gotten as far as the pics at [[Athena]] let. I plan to try to maintain this and keep it up to date with whatever design documents and images get uploaded, as well as fiddle with it whenever I get an idea of my own. Summary of content: HTML, CSS, and JS for the top-bar, the bottom-bar, the "You" menu, and the footer. JS handles section expanding, the "sliding" of the top and bottom bars (with "locking" the bottom bar at the bottom of the page), search suggestions (with history suggestions), menu expanding. CSS also for non-signed-in-view. CSS background-images are limited to those uploaded by Jorm so far. No JS libraries used, assumed HTML is minimal. (Total JS 1.78Kb, CSS 1.7Kb) Additional things at the bottom: JS for handling if there's ever a way to pull section content from the api based on an element's id in the page, and CSS and HTML for the login page. I'm not in any position to be able to make this stuff go anywhere by myself (I don't know PHP, and don't have SVN access or whatever), but I'm going to keep fiddling with it anyway, even if it's probably useless. Meh.
So the CSS, HTML, and JS is below. If you want to sort of see what it looks like by viewing it on a desktop
browser, go to a random mobile page (say, http://en.wikipedia.org/w/index.php?title=Zebra&useformat=mobile ),
(make sure you're not using the "beta", you can use ?mobileaction=opt_out_mobile_site to opt-out)
and copy the following line into a javascript console:
document.body.onmousedown=document.body.ontouchstart=window.onload=null;for(var i=0,h=document.getElementsByTagName('h2');i<h.length;i++){h[i].removeAttribute("onclick");h[i].removeAttribute("class")}document.body.innerHTML += '<style>#mw-top-bar{top:0px;height:45px;}#mw-bottom-bar{bottom:0px;height:40px;}#mw-top-bar,#mw-bottom-bar{position:fixed;width:100%;color:#FFFFFF;-webkit-transition:all 0.3s;border-spacing:0px;}#mw-top-bar,#bottom-bar-left,#bottom-bar-right{background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#3E3E3E),color-stop(14%,#393939),color-stop(32%,2E2E2E),color-stop(64%,#151515),color-stop(84%,#080808),color-stop(100%,#000000));background:-webkit-linear-gradient(top,#3E3E3E 0%,#393939 14%,#2E2E2E 32%,#151515 64%,#080808 84%,#010101 100%);background-color:#000000;}#mw-bottom-bar div{position:absolute;bottom:0px;font-size:10px;font-weight:bold;}#bottom-bar-left{left:0px;width:58px;height:45px;}#bottom-bar-center{background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#6D6D6D),color-stop(15%,#676767),color-stop(36%,#5A5A5A),color-stop(77%,#494949),color-stop(100%,#282828));background:-webkit-linear-gradient(top,#6D6D6D 0%,#676767 15%,#5A5A5A 36%,#494949 77%,#282828 100%);background-color:#6D6D6D;left:58px;right:112px;height:40px;box-shadow:0px -15px 15px #3A3A3A inset;-webkit-box-shadow:0px -15px 15px #3A3A3A inset;}#bottom-bar-right{right:0px;width:112px;height:45px;}#mw-bottom-bar.closed{bottom:-45px;}#mw-top-bar.closed{top:-50px;}#mw-you,#mw-logo,#mw-signin{font-size:10px;font-weight:bold;height:45px;width:63px;padding:0px;text-align:center;}#mw-logo a,#mw-bottom-bar span,#mw-interwiki,#mw-you a,#mw-signin a{display:block;color:#FFFFFF;height:15px;padding-top:30px;}#mw-bottom-bar a{float:right;width:50px;text-align:center;color:#FFFFFF;}#bottom-bar-center a{float:left;padding-top:22px;height:18px;}div #mw-interwiki{float:right;width:62px;}#mw-you,#mw-signin{height:15px;width:50px;padding-right:8px;padding-left:5px;}#mw-you.active div,#mw-signin div{background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#3964C0),color-stop(23%,#335FBE),color-stop(100%,#1044B5));background:-webkit-linear-gradient(top,#3964C0 0%,#335FBE 23%,#1044B5 100%);background-color:#3964C0;}#mw-you.active:after{position:absolute;right:28px; top:45px;z-index:2;content:"";border-top:#0E42B4 5px solid;border-left:transparent 5px solid;border-right:transparent 5px solid;}#mw-signin div{position:absolute;top:0px;right:8px;width:50px;height:50px;padding-top:0px;}#mw-signin a{height:20px;padding-top:30px;background:url(//svn.wikimedia.org/viewvc/mediawiki/trunk/mockups/athena/images/icons/athena_icon_efefef_key.png?pathrev=103083&view=co&revision=103083);background-position:10px 3px;}#mw-signin:after{position:absolute;right:58px;top:45px;z-index:1;content:"";height:0px;width:0px;border-top:#09338E 5px solid;border-left:transparent 5px solid;}#mw-searchtd{padding:2px 30px 2px 0px;}#mw-search{border:1px solid #787878;border-radius:3px;width:100%;font-size:18px;padding-left:5px;padding-right:25px;box-shadow:0px 3px 7px #BBBBBB inset;-webkit-box-shadow:0px 3px 7px #BBBBBB inset;}#mw-results{display:none;position:absolute;top:35px;left:67px;right:64px;background-color:#FFFFFF;border:1px solid #AAAAAA;color:#000000;}#mw-searchbutton{border:0px;position:absolute;right:65px;top:10px;width:25px;height:25px;}.selectedSlider{background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#3964C0),color-stop(20%,#335FBE),color-stop(68%,#194BB7),color-stop(100%,#0D41B4));background:-webkit-linear-gradient(top,#3964C0 0%,#335FBE 20%,#194BB7 68%,#0D41B4 100%); background-color:#3964C0;}#bottom-bar-left a:after,#bottom-bar-right a+a:after{position:absolute;bottom:40px;height:0px;width:0px;content:"";border-top:transparent solid 5px;}#bottom-bar-left a:after{left:58px;border-left:#000000 solid 5px;}#bottom-bar-right a+a:after{right:112px;border-right:#000000 solid 5px;}#bottom-bar-left a.selectedSlider:after{border-left-color:#09338E;}#bottom-bar-right a+a.selectedSlider:after{border-right-color:#09338E;}#mw-youmenu{background:-webkit-gradient(linear,left bottom,right top,color-stop(0%,#000000),color-stop(50%,#4A4A4A),color-stop(100%,#000000));background:-webkit-linear-gradient(60deg,#000000 0%,#4A4A4A 50%,#000000 100%);background-color:#000000;position:fixed;top:45px;right:0px;z-index:1;height:346px;width:188px;border:2px solid #323232;border-top:0;box-shadow:2px 4px 5px rgba(0,0,0,0.7);-webkit-box-shadow:2px 4px 5px rgba(0,0,0,0.7);display:none;}#mw-youmenu a{color:#FFFFFF;display:block;padding:15px;padding-left:60px;font-weight:bold;font-size:12px;}#mw-youmenu a#mw-logout{margin-top:25px;padding-right:40px;float:right;}#mw-results .suggestions-results a{display:block;margin:0;line-height:2.7em;padding:0.01em 0.25em;text-decoration:none;color:#000000;border-top:1px #888888 solid;font-size:15px;}.suggestions-results div{float:right;margin:0;line-height:1.8em;padding:0.01em 0.25em;font-size:20px;}.suggestions-results a:hover{background-color:#ACD1E9;}#mw-footer{background-color:#000000;color:#888888;padding:8px 0px;font-size:11px;margin-top:60px;}#mw-footer a{color:#FFFFFF;}#mw-footer .footerUpper{font-size:12px;padding:5px 8px;}#mw-footer .footerUpper b{color:#DDDDDD;}#mw-footer .footerLower{line-height:13px;padding:0px 8px;}#mw-footer .footerLower a{font-weight:bold;}#mw-footer #mw-bottom-bar{height:0px;top:-8px;position:relative;-webkit-transition:all 0s;}#mw-top-bar a,#mw-bottom-bar a,#mw-bottom-bar span{background-repeat:no-repeat !important;}#bottom-bar-right a:first-child{background:url(//svn.wikimedia.org/viewvc/mediawiki/trunk/mockups/athena/images/icons/athena_icon_efefef_globe.png?pathrev=103083&view=co&revision=103083);background-position:13px 2px;}#bottom-bar-right a+a span{background:url(//svn.wikimedia.org/viewvc/mediawiki/trunk/mockups/athena/images/icons/athena_icon_efefef_discussion.png?pathrev=103083&view=co&revision=103083);background-position:8px 2px;}#bottom-bar-left span{background-image:url(//svn.wikimedia.org/viewvc/mediawiki/trunk/mockups/athena/images/icons/athena_icon_efefef_puzzle.png?pathrev=103083&view=co&revision=103083);background-position:9px 2px;}#mw-logo a{background:url(//svn.wikimedia.org/viewvc/mediawiki/trunk/mockups/athena/images/icons/athena_icon_efefef_w.png?pathrev=103083&view=co&revision=103083);background-position:15px 3px;}#mw-top-bar #mw-you a{background-image:url(//svn.wikimedia.org/viewvc/mediawiki/trunk/mockups/athena/images/icons/athena_icon_efefef_user.png?pathrev=103083&view=co&revision=103083);background-position:9px 2px;}h2{font-size:1.4em;margin-left:1.3em;padding-bottom:3px;}h2+div{display:none;}h2.expanded+div{display:block;}h2:before{content:"+";color:#676D79;border:1px solid #676D79;border-radius:20px;width:20px;height:20px;display:inline-block;text-align:center;font-size:22px;position:absolute;left:5px;}h2.expanded:before{content:"−";}#mw-top-bar td, #mw-bottom-bar td{border:0 !important}#mw-top-bar{border:0 !important}#header,h2 button,#footer{display:none !important;}#mw-youmenu a{line-height:normal}h2.expanded+div{display:block !important}</style><table id="mw-top-bar"><tbody><tr><td id="mw-logo"><a href="MAINPAGE">Main</a></td><td id="mw-searchtd"><form action="/w/index.php" method="get"><input type="hidden" value="Special:Search" name="title"><input id="mw-search" name="search" type="text" autocomplete="off" placeholder="Search Wikipedia"><div id="mw-results"></div><input id="mw-searchbutton" type="submit" value=""></form></td><td id="mw-you"><div><a>You</a></div></td></tr></tbody></table><div id="mw-bottom-bar"><div id="bottom-bar-left"><a href="/wiki/ARTICLE" class="selectedSlider"><span>Article</span></a></div><div id="bottom-bar-center"><a href="/wiki/ARTICLE?action=history">History</a><a>More</a></div><div id="bottom-bar-right"><a id="mw-interwiki" onclick="interwiki()">Language</a><a href="/wiki/Talk:ARTICLE"><span>Discuss</span></a></div></div><div id="mw-youmenu"><a>(User Name)</a><a>Your Notifications</a><a>Your Talk Page</a><a>Your Watchlist</a><a>Your Contributions</a><a>Your Preferences</a><a id="mw-logout">Log Out</a></div><div id="mw-footer"><div class="footerUpper"><a>About</a> • <a>Contact</a> • <a>Privacy policy</a> • <a>Disclaimers</a></div><div class="footerUpper"><a>Disable images</a> • <a>Mobile site feedback</a></div><div class="footerUpper"><b>View Wikipedia as:</b> <b>Mobile</b> • <a>Classic</a></div><div class="footerLower">Text is available under the <a>Creative Commons Attribution-ShareAlike License</a>; additional terms may apply. See <a>Terms of use</a> for details.<br />Wikipedia is a registered trademark of the <a>Wikimedia Foundation, Inc.</a>, a non-profit organization.</div></div>';document.onclick=function(a){function c(){if(youmenu&&"block"==youmenu.style.display&&(!a||"mw-youmenu"!=a.id&&"mw-you"!=a.id))youmenu.style.display="none",document.getElementById("mw-you").className=""}a=a||event;a=a.target||a.srcElement;if("mw-search"==a.id&&withSliders())focusSlider(),search.onblur=closeSlider,c();else{for(var b={"mw-results":1,"mw-top-bar":1,"mw-bottom-bar":1,"mw-youmenu":1,"mw-you":1};a&&!a.hash&&"H2"!=a.nodeName&&!b[a.id];)a=a.parentNode;if(a&&"H2"==a.nodeName&&"xxnotsectionheader"!=
a.className)toggleSection(a);else if(a&&a.hash&&0==a.hash.indexOf("#"))revealForHash(a.hash);else if(withSliders()&&(!a||b[a.id]))topSlider.className=bottomSlider.className="open",closeSlider();a&&b[a.id]&&focusSlider();c();if(a&&"mw-you"==a.id&&(youmenu=document.getElementById("mw-youmenu")))youmenu.style.display="block"==youmenu.style.display?(closeSlider(),a.className="","none"):(focusSlider(),a.className="active","block");if((!a||"mw-results"!=a.id)&&results)results.style.display="none"}};
document.onkeyup=function(a){a=a||event;a=a.target||a.srcElement;if("mw-search"==a.id&&withSliders()){if(0==search.value.length)results.style.display="none";clearTimeout(searchTimer);var c=a.value;1>c.length?results.innerHTML="":searchTimer=setTimeout(function(){searchApi(c)},typingDelay)}};var sliderFocused=!1,sliderTimer=-1,searchTimer=-1,topSlider,bottomSlider,results,search,youmenu,typingDelay=500,apiUrl=(window.scriptPath||"/w")+"/api.php",numResults=5,maxHistSpace=10;
function closeSlider(){sliderFocused=!1;clearTimeout(sliderTimer);sliderTimer=setTimeout(function(){if(!sliderFocused&&withSliders())topSlider.className=bottomSlider.className="closed",results.style.display="none"},2E3)}function withSliders(){if(bottomSlider)return!0;bottomSlider=document.getElementById("mw-bottom-bar");topSlider=document.getElementById("mw-top-bar");search=document.getElementById("mw-search");results=document.getElementById("mw-results");return!!bottomSlider}
function focusSlider(){sliderFocused=!0;clearTimeout(sliderTimer);topSlider.className=bottomSlider.className="open"}
function pageLoaded(){sliderFocused||closeSlider();withSliders();search.parentNode.onsubmit=function(){newHistSuggestion(search.value)};window.scrollTo(0,1);0==document.location.hash.indexOf("#")&&revealForHash(document.location.hash);var a=!1,c=document.getElementById("mw-footer"),b,d;window.updateFooterScroll=function(){b=Math.max(document.documentElement.clientHeight,document.body.scrollHeight,document.documentElement.scrollHeight,document.body.offsetHeight,document.documentElement.offsetHeight)-
screen.availHeight-c.offsetHeight+30;window.onscroll()};window.onscroll=function(){if((window.pageYOffset||"CSS1Compat"==document.compatMode&&document.documentElement.scrollTop||document.body.scrollTop)>b!=a)(a=!a)?c.insertBefore(bottomSlider,c.firstChild):document.body.appendChild(bottomSlider)};updateFooterScroll();window.onorientationchange=function(){switch(window.orientation){case 0:case 90:case 180:case -90:if(d!=window.orientation)d=window.orientation,updateFooterScroll()}}}
function toggleSection(a){a.className=a.className?"":"expanded";window.updateFooterScroll&&updateFooterScroll()}function revealForHash(a){if(a=document.getElementById(a.substr(1))){for(;a&&"H2"!=a.nodeName;)a=a.previousSibling||a.parentNode;a&&"expanded"!=a.className&&toggleSection(a)}}function histSuggestions(){var a=document.cookie.split("histsugg=");return 2>a.length?"":"|"+a[1].split(";")[0]}
function newHistSuggestion(a){if(-1==(histSuggestions()+"|").indexOf("|"+a+"|")&&a)document.cookie="histsugg="+a+histSuggestions().split("|").slice(0,maxHistSpace).join("|")+";path=/;expires="+(new Date(+new Date+2592E6)).toGMTString()}
function searchApi(a){for(var c=window.XMLHttpRequest?new XMLHttpRequest:new ActiveXObject("Microsoft.XMLHTTP"),b=histSuggestions().split("|").slice(1),d=[];b.length;b.shift())0==b[0].toLowerCase().indexOf(a.toLowerCase())&&d.push(b[0]);focusSlider();d.splice(numResults);c.onreadystatechange=function(){if(4==c.readyState&&200==c.status){var b=d.concat((window.JSON&&JSON.parse?JSON.parse:eval)(c.responseText)[1]),f={};for(results.style.display="block";results.firstChild;)results.removeChild(results.firstChild);
if(0===b.length)results.appendChild(document.createTextNode("No results"));else{results.appendChild(document.createElement("div")).className="suggestions-results";for(var e=0;e<b.length;e++)f[b[e]]||(f[b[e]]=!0,function(b){var c=results.lastChild.appendChild(document.createElement("div")),d=results.lastChild.appendChild(document.createElement("a"));c.appendChild(document.createTextNode(" + "));c.onmousedown=function(){search.value=b+" ";searchApi(b);return!1};d.title=b;d.href="/wiki/"+b;d.onclick=
function(){newHistSuggestion(b)};0==b.toLowerCase().indexOf(a.toLowerCase())?(d.appendChild(document.createElement("b")).appendChild(document.createTextNode(b.substr(0,a.length))),d.appendChild(document.createTextNode(b.substr(a.length)))):d.appendChild(document.createTextNode(b))}(b[e]))}}};c.open("GET",apiUrl+"?action=opensearch&limit="+(numResults-d.length)+"&format=json&search="+a,!0);c.send()};pageLoaded();
Note that the "Languages" and "More" buttons won't work because I don't know what the menu is supposed to look like.
Also, I didn't bother to duplicate the css prefixes for every major browser, so this will only work for Webkit browsers.
And of course, the links won't actually go to the correct pages.
CSS:
#mw-top-bar {
top: 0px;
height: 45px;
}
#mw-bottom-bar {
bottom: 0px;
height: 40px;
}
#mw-top-bar, #mw-bottom-bar {
position: fixed;
width: 100%;
color: #FFFFFF;
-webkit-transition: all 0.3s;
border-spacing: 0px;
}
#mw-top-bar, #bottom-bar-left, #bottom-bar-right {
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#3E3E3E), color-stop(14%,#393939), color-stop(32%,2E2E2E), color-stop(64%,#151515), color-stop(84%,#080808), color-stop(100%,#000000));
background: -webkit-linear-gradient(top, #3E3E3E 0%,#393939 14%,#2E2E2E 32%,#151515 64%,#080808 84%,#010101 100%);
background-color: #000000;
}
#mw-bottom-bar div {
position: absolute;
bottom: 0px;
font-size: 10px;
font-weight: bold;
}
#bottom-bar-left {
left: 0px;
width: 58px;
height: 45px;
}
#bottom-bar-center {
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#6D6D6D), color-stop(15%,#676767), color-stop(36%,#5A5A5A), color-stop(77%,#494949), color-stop(100%,#282828));
background: -webkit-linear-gradient(top, #6D6D6D 0%,#676767 15%,#5A5A5A 36%,#494949 77%,#282828 100%);
background-color: #6D6D6D;
left: 58px;
right: 112px;
height: 40px;
box-shadow: 0px -15px 15px #3A3A3A inset;
-webkit-box-shadow: 0px -15px 15px #3A3A3A inset;
}
#bottom-bar-right {
right: 0px;
width: 112px;
height: 45px;
}
#mw-bottom-bar.closed {
bottom: -45px;
}
#mw-top-bar.closed {
top: -50px;
}
#mw-you, #mw-logo, #mw-signin {
font-size: 10px;
font-weight: bold;
height: 45px;
width: 63px;
padding: 0px;
text-align: center;
}
#mw-logo a, #mw-bottom-bar span, #mw-interwiki, #mw-you a, #mw-signin a {
display: block;
color: #FFFFFF;
height: 15px;
padding-top: 30px;
}
#mw-bottom-bar a {
float: right;
width: 50px;
text-align: center;
color: #FFFFFF;
}
#bottom-bar-center a {
float: left;
padding-top: 22px;
height: 18px;
}
div #mw-interwiki {
float: right;
width: 62px;
}
#mw-you, #mw-signin {
height: 15px;
width: 50px;
padding-right: 8px;
padding-left: 5px;
}
#mw-you.active div, #mw-signin div {
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#3964C0), color-stop(23%,#335FBE), color-stop(100%,#1044B5));
background: -webkit-linear-gradient(top, #3964C0 0%,#335FBE 23%,#1044B5 100%);
background-color: #3964C0;
}
#mw-you.active:after {
position: absolute;
right: 28px;
top: 45px;
z-index: 2;
content: "";
border-top: #0E42B4 5px solid;
border-left: transparent 5px solid;
border-right: transparent 5px solid;
}
#mw-signin div {
position: absolute;
top: 0px;
right: 8px;
width: 50px;
height: 50px;
padding-top: 0px;
}
#mw-signin a {
height: 20px;
padding-top: 30px;
background: url(//svn.wikimedia.org/viewvc/mediawiki/trunk/mockups/athena/images/icons/athena_icon_efefef_key.png?pathrev=103083&view=co&revision=103083);
background-position: 10px 3px;
}
#mw-signin:after {
position: absolute;
right: 58px;
top: 45px;
z-index: 1;
content: "";
height: 0px;
width: 0px;
border-top: #09338E 5px solid;
border-left: transparent 5px solid;
}
#mw-searchtd {
padding: 2px 30px 2px 0px;
}
#mw-search {
border: 1px solid #787878;
border-radius: 3px;
width: 100%;
font-size: 18px;
padding-left: 5px;
padding-right: 25px;
box-shadow: 0px 3px 7px #BBBBBB inset;
-webkit-box-shadow: 0px 3px 7px #BBBBBB inset;
}
#mw-results {
display: none;
position: absolute;
top: 35px;
left: 67px;
right: 64px;
background-color: #FFFFFF;
border: 1px solid #AAAAAA;
color: #000000;
}
#mw-searchbutton {
border:0px;
position: absolute;
right: 65px;
top: 10px;
width: 25px;
height: 25px;
}
.selectedSlider {
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#3964C0), color-stop(20%,#335FBE), color-stop(68%,#194BB7), color-stop(100%,#0D41B4));
background: -webkit-linear-gradient(top, #3964C0 0%,#335FBE 20%,#194BB7 68%,#0D41B4 100%);
background-color: #3964C0;
}
#bottom-bar-left a:after, #bottom-bar-right a+a:after {
position: absolute;
bottom: 40px;
height: 0px;
width: 0px;
content: "";
border-top: transparent solid 5px;
}
#bottom-bar-left a:after {
left: 58px;
border-left: #000000 solid 5px;
}
#bottom-bar-right a+a:after {
right: 112px;
border-right: #000000 solid 5px;
}
#bottom-bar-left a.selectedSlider:after {
border-left-color: #09338E;
}
#bottom-bar-right a+a.selectedSlider:after {
border-right-color: #09338E;
}
#mw-youmenu {
background: -webkit-gradient(linear, left bottom, right top, color-stop(0%,#000000), color-stop(50%,#4A4A4A), color-stop(100%,#000000));
background: -webkit-linear-gradient(60deg, #000000 0%,#4A4A4A 50%,#000000 100%);
background-color: #000000;
position: fixed;
top: 45px;
right: 0px;
z-index: 1;
height: 346px;
width: 188px;
border: 2px solid #323232;
border-top:0;
box-shadow: 2px 4px 5px rgba(0,0,0,0.7);
-webkit-box-shadow: 2px 4px 5px rgba(0,0,0,0.7);
display: none;
}
#mw-youmenu a {
color: #FFFFFF;
display: block;
padding: 15px;
padding-left: 60px;
font-weight: bold;
font-size: 12px;
}
#mw-youmenu a#mw-logout {
margin-top: 25px;
padding-right: 40px;
float: right;
}
#mw-results .suggestions-results a {
display: block;
margin: 0;
line-height: 2.7em;
padding: 0.01em 0.25em;
text-decoration: none;
color: #000000;
border-top: 1px #888888 solid;
font-size: 15px;
}
.suggestions-results div{
float: right;
margin: 0;
line-height: 1.8em;
padding: 0.01em 0.25em;
font-size: 20px;
}
.suggestions-results a:hover{
background-color: #ACD1E9;
}
#mw-footer {
background-color: #000000;
color: #888888;
padding: 8px 0px;
font-size: 11px;
margin-top: 60px;
}
#mw-footer a {
color: #FFFFFF;
}
#mw-footer .footerUpper {
font-size: 12px;
padding: 5px 8px;
}
#mw-footer .footerUpper b {
color: #DDDDDD;
}
#mw-footer .footerLower {
line-height: 13px;
padding: 0px 8px;
}
#mw-footer .footerLower a {
font-weight: bold;
}
#mw-footer #mw-bottom-bar {
height: 0px;
top: -8px;
position: relative;
-webkit-transition: all 0s;
}
#mw-top-bar a, #mw-bottom-bar a, #mw-bottom-bar span {
background-repeat: no-repeat !important;
}
#bottom-bar-right a:first-child {
background: url(//svn.wikimedia.org/viewvc/mediawiki/trunk/mockups/athena/images/icons/athena_icon_efefef_globe.png?pathrev=103083&view=co&revision=103083);
background-position: 13px 2px;
}
#bottom-bar-right a+a span {
background: url(//svn.wikimedia.org/viewvc/mediawiki/trunk/mockups/athena/images/icons/athena_icon_efefef_discussion.png?pathrev=103083&view=co&revision=103083);
background-position: 8px 2px;
}
#bottom-bar-left span {
background-image: url(//svn.wikimedia.org/viewvc/mediawiki/trunk/mockups/athena/images/icons/athena_icon_efefef_puzzle.png?pathrev=103083&view=co&revision=103083);
background-position: 9px 2px;
}
#mw-logo a {
background: url(//svn.wikimedia.org/viewvc/mediawiki/trunk/mockups/athena/images/icons/athena_icon_efefef_w.png?pathrev=103083&view=co&revision=103083);
background-position: 15px 3px;
}
#mw-top-bar #mw-you a {
background-image: url(//svn.wikimedia.org/viewvc/mediawiki/trunk/mockups/athena/images/icons/athena_icon_efefef_user.png?pathrev=103083&view=co&revision=103083);
background-position: 9px 2px;
}
h2 {
font-size: 1.4em;
margin-left: 1.3em;
padding-bottom: 3px;
}
h2+div {
display: none;
}
h2.expanded+div{
display: block;
}
h2:before {
content: "+";
color: #676D79;
border: 1px solid #676D79;
border-radius: 20px;
width: 20px;
height: 20px;
display: inline-block;
text-align: center;
font-size: 22px;
position: absolute;
left: 5px;
}
h2.expanded:before {
content: "−";
}
HTML (at the top, footer at the bottom):
<table id="mw-top-bar">
<tbody>
<tr>
<td id="mw-logo">
<a href="MAINPAGE">Main</a>
</td>
<td id="mw-searchtd">
<form action="/w/index.php" method="get">
<input type="hidden" value="Special:Search" name="title">
<input id="mw-search" name="search" type="text" autocomplete="off" placeholder="Search Wikipedia">
<div id="mw-results"></div>
<input id="mw-searchbutton" type="submit" value="">
</form>
</td>
<td id="mw-you">
<div><a>You</a></div>
</td>
</tr>
</tbody>
</table>
<div id="mw-bottom-bar">
<div id="bottom-bar-left">
<a href="/wiki/ARTICLE" class="selectedSlider"><span>Article</span></a>
</div>
<div id="bottom-bar-center">
<a href="/wiki/ARTICLE?action=history">History</a>
<a>More</a>
</div>
<div id="bottom-bar-right">
<a id="mw-interwiki" onclick="interwiki()">Language</a>
<a href="/wiki/Talk:ARTICLE"><span>Discuss</span></a>
</div>
</div>
<div id="mw-youmenu">
<a>(User Name)</a>
<a>Your Notifications</a>
<a>Your Talk Page</a>
<a>Your Watchlist</a>
<a>Your Contributions</a>
<a>Your Preferences</a>
<a id="mw-logout">Log Out</a>
</div>
<div id="mw-footer">
<div class="footerUpper"><a>About</a> • <a>Contact</a> • <a>Privacy policy</a> • <a>Disclaimers</a></div>
<div class="footerUpper"><a>Disable images</a> • <a>Mobile site feedback</a></div>
<div class="footerUpper"><b>View Wikipedia as:</b> <b>Mobile</b> • <a>Classic</a></div>
<div class="footerLower">
Text is available under the <a>Creative Commons Attribution-ShareAlike License</a>; additional terms may apply. See <a>Terms of use</a> for details.
<br />
Wikipedia is a registered trademark of the <a>Wikimedia Foundation, Inc.</a>, a non-profit organization.
</div>
</div>
JS (in the head):
document.onclick = function(e) {
function hideYouMenu() {
if( youmenu && youmenu.style.display == 'block' && (!e || e.id != "mw-youmenu" && e.id != "mw-you") ) {
youmenu.style.display = 'none';
document.getElementById("mw-you").className = '';
}
}
e = e || event; e = e.target || e.srcElement;
if(e.id == "mw-search" && withSliders() ) {
focusSlider()
search.onblur = closeSlider;
hideYouMenu();
return;
}
var stopIds = {'mw-results':1,'mw-top-bar':1,'mw-bottom-bar':1,'mw-youmenu':1,'mw-you':1}
for( ; e && !e.hash && e.nodeName != "H2" && !stopIds[e.id]; ) {
e = e.parentNode;
}
if( e && e.nodeName == "H2" && e.className != "xxnotsectionheader") { // headers
toggleSection( e );
} else if( e && e.hash && e.hash.indexOf( '#' ) == 0 ) { // links
revealForHash( e.hash );
} else if ( withSliders() && !(e && !stopIds[e.id] ) ) {
topSlider.className = bottomSlider.className = "open";
closeSlider();
}
if( e && stopIds[e.id] ) {
focusSlider();
}
hideYouMenu()
if( e && e.id == "mw-you" ) {
youmenu = document.getElementById("mw-youmenu");
if(youmenu) {
youmenu.style.display = youmenu.style.display == "block" ? (closeSlider(), e.className='', "none") : (focusSlider(), e.className='active', "block");
}
}
if( (!e || e.id != "mw-results") && results ) {
results.style.display = 'none';
}
}
document.onkeyup = function(e) {
e = e || event; e = e.target || e.srcElement;
if( e.id == "mw-search") {
if ( !withSliders() ){ // not yet loaded?
return;
}
if ( search.value.length == 0 ) {
results.style.display = 'none';
}
// from bottom
clearTimeout( searchTimer );
var term = e.value;
if ( term.length < 1 ) {
results.innerHTML = '';
} else {
searchTimer = setTimeout( function () { searchApi( term ); }, typingDelay );
}
}
}
var sliderFocused = false, sliderTimer = -1, searchTimer = -1,
topSlider, bottomSlider, results, search, youmenu,
typingDelay = 500, apiUrl = (window.scriptPath || "/w")+"/api.php",
numResults = 5, maxHistSpace = 10;
function closeSlider() {
sliderFocused = false;
clearTimeout(sliderTimer);
sliderTimer = setTimeout(function(){
if(!sliderFocused && withSliders() ){
topSlider.className = bottomSlider.className = "closed";
results.style.display = "none";
}
}, 2000)
}
function withSliders() {
if(bottomSlider) {
return true;
}
bottomSlider = document.getElementById("mw-bottom-bar");
topSlider = document.getElementById("mw-top-bar");
search = document.getElementById("mw-search");
results = document.getElementById("mw-results");
return !!bottomSlider;
}
function focusSlider() {
sliderFocused = true;
clearTimeout(sliderTimer);
topSlider.className = bottomSlider.className = "open";
}
function pageLoaded() {
sliderFocused || closeSlider();
withSliders();
search.parentNode.onsubmit = function(){
newHistSuggestion(search.value)
}
// Try to scroll and hide URL bar
window.scrollTo( 0, 1 );
document.location.hash.indexOf( '#' ) == 0 && revealForHash( document.location.hash );
var isSliderLocked = false, footer = document.getElementById("mw-footer"), toScroll, oldOrientation;
window.updateFooterScroll = function(){
toScroll = Math.max(document.documentElement.clientHeight,document.body.scrollHeight,document.documentElement.scrollHeight,document.body.offsetHeight,document.documentElement.offsetHeight) - screen.availHeight - footer.offsetHeight + 30;
window.onscroll();
};
window.onscroll = function(){
if( (window.pageYOffset || document.compatMode == "CSS1Compat" && document.documentElement.scrollTop || document.body.scrollTop) > toScroll != isSliderLocked ) {
if (isSliderLocked = !isSliderLocked) {
footer.insertBefore(bottomSlider, footer.firstChild);
} else {
document.body.appendChild(bottomSlider);
}
}
};
updateFooterScroll();
window.onorientationchange = function() {
switch(window.orientation) {
case 0:
case 90:
case 180:
case -90:
if( oldOrientation != window.orientation ) {
oldOrientation = window.orientation;
updateFooterScroll();
}
break;
}
}
}
function toggleSection( header ) {
header.className = header.className ? '' : 'expanded';
window.updateFooterScroll && updateFooterScroll();
}
function revealForHash( hash ) {
hash = document.getElementById( hash.substr(1) );
if( hash ) {
for( ; hash && hash.nodeName != "H2"; ) {
hash = hash.previousSibling || hash.parentNode;
}
if( hash && hash.className != "expanded" ) {
toggleSection( hash );
}
}
}
function histSuggestions() {
var a=document.cookie.split("histsugg=");
return a.length < 2?'':'|'+a[1].split(";")[0];
}
function newHistSuggestion(term) {
if((histSuggestions()+"|").indexOf("|"+term+"|") == -1 && term){
document.cookie = "histsugg="+term+histSuggestions().split("|").slice(0, maxHistSpace ).join("|")+";path=/;expires="+(new Date(+new Date()+(3600000*24*30)).toGMTString())
}
};
function searchApi( term ) {
var xmlHttp = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject( 'Microsoft.XMLHTTP' );
for(var hist = histSuggestions().split("|").slice(1), histS = []; hist.length; hist.shift()) {
if(hist[0].toLowerCase().indexOf(term.toLowerCase()) == 0) {
histS.push(hist[0]);
}
}
focusSlider();
histS.splice( numResults );
xmlHttp.onreadystatechange = function() {
if ( xmlHttp.readyState == 4 && xmlHttp.status == 200 ) {
var response = histS.concat((window.JSON && JSON.parse ? JSON.parse : eval)( xmlHttp.responseText )[1]), dontDuplicate={};
results.style.display = 'block';
for(;results.firstChild;){results.removeChild(results.firstChild)}
if(response.length === 0){
results.appendChild( document.createTextNode( "No results" ) );
} else {
results.appendChild( document.createElement('div') ).className = "suggestions-results";
for( var i = 0; i < response.length; i++ ){
if( dontDuplicate[ response[i] ] ){
continue;
}
dontDuplicate[response[i]] = true;
(function(re){
var newdiv = results.lastChild.appendChild( document.createElement('div') ),
newlink = results.lastChild.appendChild( document.createElement('a') );
newdiv.appendChild( document.createTextNode(' + ') );
newdiv.onmousedown = function(){
search.value = re + ' ';
searchApi(re);
return false;
}
newlink.title = re;
newlink.href = '/wiki/' + re;
newlink.onclick = function(){ newHistSuggestion( re ) };
if( re.toLowerCase().indexOf( term.toLowerCase() ) == 0 ){
newlink.appendChild( document.createElement('b') ).appendChild(document.createTextNode(re.substr(0, term.length)));
newlink.appendChild( document.createTextNode( re.substr( term.length ) ) );
} else {
newlink.appendChild( document.createTextNode( re ) );
}
})(response[i])
}
}
}
}
var url = apiUrl + '?action=opensearch&limit=' + (numResults - histS.length) + '&format=json&search=' + term;
xmlHttp.open( 'GET', url, true );
xmlHttp.send();
}
and JS and the bottom:
pageLoaded()
----
Other stuff:
1: Load section content from the api. Assumes simple <h2 id="foo">Title</h2><h2 id="...etc...
API action=query&prop=sectioncontent returns [h2.id, section html]
JS:
var sectionLoaded = {};
function toggleSection( header ) {
header.className = header.className ? '' : 'expanded';
if( !sectionLoaded[ header.id ] ) {
header.parentNode.insertBefore( document.createElement("div"), header.nextSibling )
.appendChild( document.createElement("img") )
.src = "loading.png"; // not a real file
// Alternatively:
// .appendChild( document.createTextNode("Loading...") );
requestSection( header.id )
}
window.updateFooterScroll && updateFooterScroll();
}
function requestSection( id, isAnchor ) {
sectionLoaded[ id ] = true;
var xmlHttp = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject( 'Microsoft.XMLHTTP' );
xmlHttp.onreadystatechange = function() {
if ( xmlHttp.readyState == 4 && xmlHttp.status == 200 ) {
var response = (window.JSON && JSON.parse ? JSON.parse : eval)( xmlHttp.responseText );
if(!response || response.length === 0) {
return;
}
var h = document.getElementById( response[0] );
if( h && h.nodeName == "H2" ){
if( isAnchor ) {
h.className = 'expanded';
h = h.parentNode.insertBefore( document.createElement("div"), h.nextSibling);
h.innerHTML = response[1];
var a = document.getElementById( id );
a && a.scrollIntoView();
} else {
h = h.nextSibling;
h.innerHTML = response[1];
}
sectionLoaded[ response[0] ] = true;
window.updateFooterScroll && updateFooterScroll();
}
}
}
xmlHttp.open( 'GET', apiUrl + '?action=query&titles='+wgPageName+'&format=json&prop=sectioncontent§ionid='+id, true ); // mw escapes ids automatically, so no need to worry afaik
xmlHttp.send();
}
function revealForHash( hash ) {
var node = document.getElementById( hash = hash.substr(1) );
if( node ) {
for( ; node && node.nodeName != "H2" ; node = node.previousSibling ) {
while( node && !node.previousSibling ) {
node = node.parentNode;
}
}
if( node && node.className != 'expanded' ) {
toggleSection( node );
}
} else {
sectionLoaded[ hash ] || requestSection( hash, true );
}
}
2: Login screen styles:
<style>
label {
display: block;
font-weight: bold;
font-size: 13px;
margin: 4px;
}
#mw-login-username, #mw-login-password {
border: #7E7E7E solid 1px;
height: 26px;
width: 217px;
padding: 0px 5px;
box-shadow: 0px 3px 5px #BBB inset;
margin-left: 13px;
margin-bottom: 5px;
}
</style>
<form style="padding: 10px;">
<label for="mw-login-username">Username:</label>
<input id="mw-login-username" />
<label for="mw-login-password">Password:</label>
<input id="mw-login-password" />
<input type="submit" style="line-height:1em;display:block;padding:9px 7px;color:white;font-size:14px;font-weight:bold;border:#545454 solid 1px;border-radius:3px;margin-top: 15px;background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#5277C7), color-stop(19%,#4C72C5), color-stop(72%,#315DBE), color-stop(100%,#2756BB)); background: -webkit-linear-gradient(top, #5277C7 0%,#4C72C5 19%,#315DBE 72%,#2756BB 100%)" value="Login ►" />
</form>
3: Search box stretches to max width on focus:
CSS:
#mw-searchbutton, #mw-logo, #mw-you, #mw-logo a, #mw-you a {
-webkit-transition: width 1s,max-width 1s,color 1s,right 1s;
}
.searchfocused #mw-logo, .searchfocused #mw-you {
width: 5px;
max-width: 0px;
}
.searchfocused #mw-logo a, .searchfocused #mw-you a {
width: 0px;
color: transparent;
}
.searchfocused #mw-searchbutton {
right: 20px;
}
#mw-results {
left: 8px;
right: 16px;
}
JS:
(in document.onclick)
- search.onblur = closeSlider;
+ document.body.className="searchfocused";
+ search.onblur = function(){
+ closeSlider();
+ document.body.className="";
+ };
4: Logged out view HTML: (CSS is in main CSS area above)
- <td id="mw-you">
- <div><a>You</a></div>
- </td>
+ <td id="mw-signin">
+ <div><a>Sign In</a></div>
+ </td>