Always show header on mobile
This commit is contained in:
Mattias Erming
parent
a690395086
commit
8b9572b00b
|
|
@ -84,7 +84,7 @@ button {
|
|||
height: 100%;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
transition: all .5s;
|
||||
transition: all .4s;
|
||||
-webkit-transform: translateZ(0);
|
||||
transform: translateZ(0);
|
||||
-webkit-perspective: 1000;
|
||||
|
|
@ -242,9 +242,50 @@ button {
|
|||
margin: 0 auto;
|
||||
max-width: 480px;
|
||||
overflow: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
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 {
|
||||
color: inherit;
|
||||
transition: all .2s;
|
||||
|
|
@ -304,6 +345,7 @@ button {
|
|||
#windows .window {
|
||||
padding: 12% 0;
|
||||
overflow: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
#settings section {
|
||||
margin-top: 20px;
|
||||
|
|
@ -350,45 +392,6 @@ button {
|
|||
#chat a:hover {
|
||||
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 {
|
||||
background: #fff;
|
||||
border-bottom: 1px solid #eee;
|
||||
|
|
@ -421,7 +424,7 @@ button {
|
|||
}
|
||||
#chat .messages {
|
||||
display: table;
|
||||
margin: 5px 0;
|
||||
margin: 3px 0;
|
||||
width: 100%;
|
||||
}
|
||||
#chat .row {
|
||||
|
|
@ -606,7 +609,6 @@ button {
|
|||
}
|
||||
#chat .chat {
|
||||
box-shadow: none;
|
||||
top: 40px;
|
||||
}
|
||||
#chat .chat,
|
||||
#chat .form {
|
||||
|
|
@ -614,6 +616,7 @@ button {
|
|||
}
|
||||
#chat .sidebar {
|
||||
margin-right: -180px;
|
||||
top: -40px;
|
||||
}
|
||||
#chat .messages {
|
||||
display: block;
|
||||
|
|
@ -630,6 +633,20 @@ button {
|
|||
#chat .row .time {
|
||||
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) {
|
||||
|
|
|
|||
|
|
@ -45,6 +45,11 @@
|
|||
</footer>
|
||||
</aside>
|
||||
<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="settings" class="window">
|
||||
<div class="wrap">
|
||||
|
|
@ -150,15 +155,6 @@
|
|||
{{partial "messages"}}
|
||||
</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}}">
|
||||
<input class="submit" tabindex="-1" type="submit" >
|
||||
<input class="input">
|
||||
|
|
|
|||
|
|
@ -244,8 +244,12 @@ $(function() {
|
|||
.removeClass("highlight")
|
||||
.empty();
|
||||
|
||||
var title = link.data("name");
|
||||
var header = $("#header");
|
||||
header.find("h1").html(title).end().find("#rt").toggle(title.charAt(0) == "#");
|
||||
|
||||
$.cookie("current", target);
|
||||
document.title = link.data("name") + " — Shout";
|
||||
document.title = title + " — Shout";
|
||||
|
||||
if (sidebar.find(".highlight").length == 0) {
|
||||
favicon.badge("");
|
||||
|
|
@ -402,13 +406,13 @@ $(function() {
|
|||
toggle = "touchstart";
|
||||
}
|
||||
|
||||
chat.on(toggle, ".lt, .rt", function(e) {
|
||||
$("#rt, #lt").on(toggle, function(e) {
|
||||
var btn = $(this);
|
||||
viewport.toggleClass(btn.attr("class"));
|
||||
if (viewport.hasClass("lt")) {
|
||||
viewport.toggleClass(btn.attr("id").replace("#", ""));
|
||||
if (viewport.is(".lt, .rt")) {
|
||||
e.stopPropagation();
|
||||
viewport.find("#main").one(toggle, function(e) {
|
||||
viewport.removeClass("lt");
|
||||
chat.find(".chat").one(toggle, function(e) {
|
||||
viewport.removeClass("lt rt");
|
||||
});
|
||||
}
|
||||
});
|
||||
|
|
|
|||
Loading…
Reference in New Issue