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
12 years ago · 9b755be7fd
parent f7e0001ca3
commit 9b755be7fd
2 changed files with 21 additions and 11 deletions
--- a/css/glowingbear.css
+++ b/css/glowingbear.css
@ -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;
--- a/index.html
+++ b/index.html
@ -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>