Improve mobile layout

* more densely packed channel switching buttons (increased their size to better match android design guidelines)
* disable zooming
* disable scrolling to the side
This commit is contained in:
Lorenz H-S 2013-12-14 22:35:10 +00:00 committed by Tor Hveem
parent f7e0001ca3
commit 9b755be7fd
2 changed files with 21 additions and 11 deletions

View file

@ -76,6 +76,7 @@ td.prefix {
}
td.message {
word-wrap: break-word;
word-break: break-word;
vertical-align: top;
width: 100%;
padding-left: 5px;
@ -87,15 +88,6 @@ hr {
.text {
white-space: pre-wrap;
}
/* Lastly, apply responsive CSS fixes as necessary */
@media (max-width: 767px) {
#footer {
margin-left: -20px;
margin-right: -20px;
padding-left: 20px;
padding-right: 20px;
}
}
body {
color: #ddd;
@ -268,6 +260,7 @@ input[type=text], input[type=password], .badge {
}
#bufferlines {
padding-bottom: 38px; /* navbar fixed bottom */
top: 10px;
}
.navbar-fixed-bottom {
margin: 0;
@ -294,6 +287,23 @@ input[type=text], input[type=password], .badge {
#bufferlines td.prefix:after {
content: ">";
}
.nav li.bufferfilter {
margin-top: 2px;
height: 47px;
}
.nav li form, .nav li form input {
height: 100%;
}
.nav-stacked li {
float: left;
}
.nav-stacked li a {
min-width: 80px;
padding: 15px;
}
.hide-mobile {
display: none;
}
}
.color-light-green {
color: chartreuse;

View file

@ -3,7 +3,7 @@
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title ng-bind-template="WeeChat {{ pageTitle}}"></title>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" media="screen">
<link rel="shortcut icon" type="image/png" href="img/favicon.png" >
@ -262,7 +262,7 @@ $ openssl req -nodes -newkey rsa:2048 -keyout relay.pem -x509 -days 365 -out rel
<a href="#" ng-click="setActiveBuffer(content.id)" title="{{ content.fullName }}">
<span class="badge pull-right" ng-hide="content.notification" ng-if="content.unread" ng-bind="content.unread"></span>
<span class="badge pull-right danger" ng-show="content.notification" ng-bind="content.notification"></span>
{{ content.indentedName(predicate) }}<span ng-hide="content.shortName">{{ content.fullName }}</span>
<span class="hide-mobile">{{ content.indentedName(predicate) }}</span>{{ content.shortName }}<span ng-hide="content.shortName">{{ content.fullName }}</span>
</a>
</li>
</ul>