Incorporate bootstrap, fix nav and search.

This rigs up the bootstrap files into the templates. The style
definitions have to change to fit the new setup.

diff --git a/xonstat/static/css/app.css b/xonstat/static/css/app.css
new file mode 100644 (file)
index 0000000..7356638
--- /dev/null
+++ b/xonstat/static/css/app.css
@@ -0,0 +1,23 @@
+/* Primary elements */
+body {
+    background: url("img/web_background_4.jpg") no-repeat fixed center center / cover  black;
+    color: #D0D0D0;
+}
+
+/* Navigation bar */
+.navbar-brand {
+    padding-bottom: 0px;
+    padding-top: 10px;
+}
+.navbar-inverse {
+    background: none repeat scroll 0 0 rgba(0, 0, 0, 0.6);
+}
+.navbar-inverse .nav>.active>a, .navbar-inverse .nav>.active>a:hover, .navbar-inverse .nav>.active>a:focus {
+    background: none repeat scroll 0 0 rgba(49, 49, 49, 0.6);
+}
+.search, input[type="search"] {
+    background-color: #606060;
+    border: 1px solid #202020;
+    color: #AAAAAA;
+    width: 100px;
+}

diff --git a/xonstat/templates/base.mako b/xonstat/templates/base.mako
index c935dc6563011b5f250928319c479f69c3ceb735..5a48696524d37d20abd57a3072bc26f2a29760b9 100644 (file)
--- a/xonstat/templates/base.mako
+++ b/xonstat/templates/base.mako
@@ -12,11 +12,12 @@
     <![endif]-->
 
     <%block name="css">
-    <!-- <link href="/static/css/style.min.css" rel="stylesheet"> -->
-    <link href="/static/css/style.css" rel="stylesheet">
-    <link type="images/vnd.microsoft.icon" rel="shortcut icon" href="/static/favicon.ico">
+    <link href="/static/css/bootstrap.min.css" rel="stylesheet">
+    <link href="/static/css/bootstrap-responsive.min.css" rel="stylesheet">
+    <link href="/static/css/app.css" rel="stylesheet">
+    <link rel="shortcut icon" href="/static/favicon.ico">
     </%block>
-    
+
     <script src="/static/js/jquery-1.7.1.min.js"></script>
   </head>
 

diff --git a/xonstat/templates/nav.mako b/xonstat/templates/nav.mako
index 568ddae8efbde724c0bb75d629ce5e85788b2f33..81823e10de11a6b8ebaba9df6a1414b4761a81e5 100644 (file)
--- a/xonstat/templates/nav.mako
+++ b/xonstat/templates/nav.mako
@@ -1,19 +1,16 @@
 <%def name="nav(active)">
-    <div class="navbar navbar-top">
+    <div class="navbar navbar-inverse navbar-top">
       <div class="navbar-inner">
         <div class="container">
-          <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
-            <span class="i-bar"></span>
-            <span class="i-bar"></span>
-            <span class="i-bar"></span>
+          <a class="navbar-toggle" data-toggle="collapse" data-target=".nav-collapse">
+            <span class="icon-bar"></span>
+            <span class="icon-bar"></span>
+            <span class="icon-bar"></span>
           </a>
-          <header>
-            <a class="brand" href="${request.route_url('main_index')}">
-             <img src="/static/css/img/Xonotic_icon.png" /><h1>Xonotic Game Statistics</h1>
-            </a>
-            <h2>Xonotic is a fast-paced open-source GPL first person shooter</h2>
-          </header>
-          <div class="nav-collapse">
+          <a class="navbar-brand" href="${request.route_url('main_index')}">
+           <img src="/static/css/img/Xonotic_icon.png" />
+          </a>
+          <div class="nav-collapse collapse">
             <ul class="nav">
               <li 
                 % if active=="leaderboard":
@@ -41,17 +38,19 @@
                 % endif
                 ><a href="${request.route_url('map_index')}" title="Map Index">Maps</a></li>
             </ul>
-            <form id="navsearch" action="${request.route_url('search')}" method="get">
-              <input type="hidden" name="fs" />
-              <input type="search" class="input-small" placeholder="search" name="sval"/>
-              <select name="stype">
-                <option>players</option>
-                <option>servers</option>
-                <option>maps</option>
-              </select>
-            [<a href="${request.route_url('search')}" title="Advanced search">+</a>]
-            </form>
-          </div><!--/.nav-collapse -->
+          </div>
+
+          <form class="navbar-form pull-right" action="${request.route_url('search')}" method="get">
+            <input type="hidden" name="fs" />
+            <input type="search" class="input-small search" placeholder="search" name="sval"/>
+            <select class="search" name="stype">
+              <option>players</option>
+              <option>servers</option>
+              <option>maps</option>
+            </select>
+          [<a href="${request.route_url('search')}" title="Advanced search">+</a>]
+          </form>
+
         </div>
       </div>
     </div>