Always show header on mobile

This commit is contained in:
Mattias Erming 2014-06-23 21:01:28 +02:00
parent a690395086
commit 8b9572b00b
3 changed files with 75 additions and 58 deletions

View File

@ -84,7 +84,7 @@ button {
height: 100%; height: 100%;
position: relative; position: relative;
width: 100%; width: 100%;
transition: all .5s; transition: all .4s;
-webkit-transform: translateZ(0); -webkit-transform: translateZ(0);
transform: translateZ(0); transform: translateZ(0);
-webkit-perspective: 1000; -webkit-perspective: 1000;
@ -242,9 +242,50 @@ button {
margin: 0 auto; margin: 0 auto;
max-width: 480px; max-width: 480px;
overflow: auto; overflow: auto;
-webkit-overflow-scrolling: touch;
padding: 0 20px; padding: 0 20px;
} }
#header {
background: #fff;
border-bottom: 1px solid #eee;
display: none;
left: 0;
font-size: 13px;
height: 40px;
line-height: 40px;
position: absolute;
right: 0;
text-align: center;
top: 0px;
z-index: 999;
}
#header button {
color: #aaa;
height: 32px;
opacity: .5;
top: 4px;
transition: opacity .2s;
width: 32px;
}
#header button:hover {
opacity: 1;
}
#header h1 {
color: #222;
display: inline;
font-size: 15px;
}
#header .channel #rt {
display: block;
}
#header #lt {
left: 4px;
position: absolute;
}
#header #rt {
display: none;
position: absolute;
right: 4px;
}
#windows a { #windows a {
color: inherit; color: inherit;
transition: all .2s; transition: all .2s;
@ -304,6 +345,7 @@ button {
#windows .window { #windows .window {
padding: 12% 0; padding: 12% 0;
overflow: auto; overflow: auto;
-webkit-overflow-scrolling: touch;
} }
#settings section { #settings section {
margin-top: 20px; margin-top: 20px;
@ -350,45 +392,6 @@ button {
#chat a:hover { #chat a:hover {
opacity: .6; opacity: .6;
} }
#chat .header {
background: #fff;
border-bottom: 1px solid #eee;
color: #ccc;
display: none;
font-size: 13px;
height: 40px;
line-height: 40px;
position: relative;
text-align: center;
}
#chat .header h1 {
color: #222;
display: inline;
font-size: 15px;
}
#chat .header button {
color: #aaa;
height: 32px;
font-size: 18px !important;
opacity: .5;
top: 1px;
transition: opacity .2s;
width: 32px;
}
#chat .header button:hover {
opacity: 1;
}
#chat .header .lt {
left: 4px;
position: absolute;
}
#chat .header .rt {
position: absolute;
right: 4px;
}
#chat .header .type {
text-transform: capitalize;
}
#chat .chat { #chat .chat {
background: #fff; background: #fff;
border-bottom: 1px solid #eee; border-bottom: 1px solid #eee;
@ -421,7 +424,7 @@ button {
} }
#chat .messages { #chat .messages {
display: table; display: table;
margin: 5px 0; margin: 3px 0;
width: 100%; width: 100%;
} }
#chat .row { #chat .row {
@ -606,7 +609,6 @@ button {
} }
#chat .chat { #chat .chat {
box-shadow: none; box-shadow: none;
top: 40px;
} }
#chat .chat, #chat .chat,
#chat .form { #chat .form {
@ -614,6 +616,7 @@ button {
} }
#chat .sidebar { #chat .sidebar {
margin-right: -180px; margin-right: -180px;
top: -40px;
} }
#chat .messages { #chat .messages {
display: block; display: block;
@ -630,6 +633,20 @@ button {
#chat .row .time { #chat .row .time {
display: none; display: none;
} }
#header {
display: block;
}
#windows,
#chat {
bottom: 0;
left: 0;
position: absolute;
right: 0;
top: 40px;
}
#windows .window {
padding-top: 6%;
}
} }
@media (max-device-width: 767px) { @media (max-device-width: 767px) {

View File

@ -45,6 +45,11 @@
</footer> </footer>
</aside> </aside>
<div id="main"> <div id="main">
<header id="header">
<button id="lt" class="mega-octicon octicon-three-bars"></button>
<button id="rt" class="mega-octicon octicon-three-bars"></button>
<h1></h1>
</header>
<div id="windows"> <div id="windows">
<div id="settings" class="window"> <div id="settings" class="window">
<div class="wrap"> <div class="wrap">
@ -150,15 +155,6 @@
{{partial "messages"}} {{partial "messages"}}
</div> </div>
</div> </div>
<header class="header">
<button class="lt">
<i class="mega-octicon octicon-three-bars"></i>
</button>
<button class="rt">
<i class="mega-octicon octicon-three-bars"></i>
</button>
{{partial "meta"}}
</header>
<form class="form" data-target="{{id}}"> <form class="form" data-target="{{id}}">
<input class="submit" tabindex="-1" type="submit" > <input class="submit" tabindex="-1" type="submit" >
<input class="input"> <input class="input">

View File

@ -244,8 +244,12 @@ $(function() {
.removeClass("highlight") .removeClass("highlight")
.empty(); .empty();
var title = link.data("name");
var header = $("#header");
header.find("h1").html(title).end().find("#rt").toggle(title.charAt(0) == "#");
$.cookie("current", target); $.cookie("current", target);
document.title = link.data("name") + " — Shout"; document.title = title + " — Shout";
if (sidebar.find(".highlight").length == 0) { if (sidebar.find(".highlight").length == 0) {
favicon.badge(""); favicon.badge("");
@ -402,13 +406,13 @@ $(function() {
toggle = "touchstart"; toggle = "touchstart";
} }
chat.on(toggle, ".lt, .rt", function(e) { $("#rt, #lt").on(toggle, function(e) {
var btn = $(this); var btn = $(this);
viewport.toggleClass(btn.attr("class")); viewport.toggleClass(btn.attr("id").replace("#", ""));
if (viewport.hasClass("lt")) { if (viewport.is(".lt, .rt")) {
e.stopPropagation(); e.stopPropagation();
viewport.find("#main").one(toggle, function(e) { chat.find(".chat").one(toggle, function(e) {
viewport.removeClass("lt"); viewport.removeClass("lt rt");
}); });
} }
}); });