Add mobile-only nav bar

Author: dittos

logviewer/static/style.css

@@ -8,7 +8,6 @@
 }
 .navbar-log {
     width: 100%;
-    z-index: 100;
 }
 .navbar-log.affix-top {
     position: absolute;
@@ -17,16 +16,11 @@
     position: fixed;
     top: 0;
 }
-.navbar-log .nav > li { float: left; }
 .navbar-log .current-channel,
 .navbar-log .date {
 	font-size: 1.2em;
 	font-weight: bold;
 }
-.navbar-log .date.navbar-text {
-	margin-top: 13px;
-	margin-bottom: 13px;
-}
 #content.with-navbar-log {
     padding-top: 50px;
 }
@@ -108,7 +102,6 @@ html.js tr .nickname span { padding: 4px; border-radius: 8px; cursor: pointer; }
 }
 
 @media (max-width: 767px) {
-    #flags { position: static; border: none; margin: 0; width: 100%; }
     .time { display: none; }
     .nickname, .message { padding-left: 5px; }
     .message { word-wrap: break-word; }

logviewer/templates/log.html

@@ -3,8 +3,23 @@
 {% block title %}{{ log.date }}{% endblock %}
 
 {% block content %}
-<div class="navbar navbar-default navbar-log" data-spy="affix" data-offset-top="50">
-    <ul class="nav navbar-nav">
+<div class="navbar navbar-default navbar-static-top navbar-log" data-spy="affix" data-offset-top="50">
+    <div class="navbar-header visible-xs">
+        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-log">
+          <span class="sr-only">Toggle navigation</span>
+          <span class="icon-bar"></span>
+          <span class="icon-bar"></span>
+          <span class="icon-bar"></span>
+        </button>
+        <span class="navbar-brand">
+        #{{ log.name }} / {{ log.date }}
+        <a href="#bottom"><i class="glyphicon glyphicon-arrow-down"></i></a>
+        </span>
+    </div>
+
+    <div class="collapse navbar-collapse" id="navbar-log">
+
+    <ul class="nav navbar-nav navbar-left">
         <li class="dropdown">
             <a href="#" class="dropdown-toggle current-channel" data-toggle="dropdown">#{{ log.name }} <b class="caret"></b></a>
             <ul class="dropdown-menu">
@@ -13,26 +28,32 @@
             {% endfor -%}
             </ul>
         </li>
-        <li class="navbar-text date">{{ log.date }}</li>
+        <li><a href="{{ log.url() }}" class="date">{{ log.date }}</a></li>
+        <li><a href="#bottom"><i class="glyphicon glyphicon-arrow-down"></i> 맨 아래로</a></li>
+    </ul>
+
+    <ul class="nav navbar-nav navbar-left">
         <li class="dropdown">
             <a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="glyphicon glyphicon-flag"></i> 깃발 <b class="caret"></b></a>
             <ul class="dropdown-menu" id="flags"></ul>
         </li>
-        <li><a href="#bottom"><i class="glyphicon glyphicon-arrow-down"></i> 맨 아래로</a></li>
         <li><a href="http://links.langdev.org/{{ log.date.strftime('%Y/%m/%d') }}"><i class="glyphicon glyphicon-link"></i> 링크 모아보기</a></li>
     </ul>
 
-    <form method="get" action="{{ url_for('search') }}" class="navbar-form navbar-right hidden-xs">
+    <form method="get" action="{{ url_for('search') }}" class="navbar-form navbar-right">
         <div class="form-group">
             <input type="text" name="q" value="" class="form-control">
         </div>
         <button type="submit" class="btn btn-default">찾기</button>
     </form>
+    
     <ul class="nav navbar-nav navbar-right">
         <li><a href="{{ today.yesterday.url() }}">어제</a></li>
         <li><a href="{{ today.url() }}">오늘</a></li>
         <li><a href="{{ url_for('random') }}"><i class="glyphicon glyphicon-random"></i></a></li>
     </ul>
+
+    </div>
 </div>
 
 <div id="content" class="with-navbar-log">