From 52002042d55a2c23890186bdb5583e677d2e91f3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jos=C3=A9=20Carlos=20Cuevas?= <jose@mp2p.net>
Date: Tue, 4 Jun 2013 16:19:46 +0200
Subject: [PATCH] Changed to Bootstrap css framework

---
 views/layout.html     | 103 ++++++++++++++++++++++++++++++++++++------
 views/sidebar.html    |  18 +++-----
 views/statistics.html |  12 ++---
 3 files changed, 103 insertions(+), 30 deletions(-)
diff --git a/views/layout.html b/views/layout.html
index ad4f08c..7cb2ffe 100644
--- a/views/layout.html
+++ b/views/layout.html
@@ -2,24 +2,101 @@ $def with (main_block, sidebar_block, game_name)
 <!DOCTYPE html>
 <html>
     <head>
+        <meta charset="utf-8">
         <title>TyeDye control panel for $game_name</title>
-        <link rel='stylesheet' type='text/css' href='/static/main.css'>
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <!-- <link rel='stylesheet' type='text/css' href='/static/main.css'> -->
+        <link href="/static/css/bootstrap.css" rel="stylesheet">
+        <style type="text/css">
+          body {
+            padding-top: 60px;
+            padding-bottom: 40px;
+          }
+          .sidebar-nav {
+            padding: 9px 0;
+          }
+
+          @media (max-width: 980px) {
+            /* Enable use of floated navbar text */
+            .navbar-text.pull-right {
+              float: none;
+              padding-left: 5px;
+              padding-right: 5px;
+            }
+          }
+        </style>
+        <link href="/static/css/bootstrap-responsive.css" rel="stylesheet">
+
+        <!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
+        <!--[if lt IE 9]>
+          <script src="../assets/js/html5shiv.js"></script>
+        <![endif]-->
+
+        <!-- Fav and touch icons -->
+        <link rel="apple-touch-icon-precomposed" sizes="144x144" href="/static/ico/apple-touch-icon-144-precomposed.png">
+        <link rel="apple-touch-icon-precomposed" sizes="114x114" href="/static/ico/apple-touch-icon-114-precomposed.png">
+          <link rel="apple-touch-icon-precomposed" sizes="72x72" href="/static/ico/apple-touch-icon-72-precomposed.png">
+                        <link rel="apple-touch-icon-precomposed" href="/static/ico/apple-touch-icon-57-precomposed.png">
+                                       <link rel="shortcut icon" href="/static/ico/favicon.png">
     </head>
     <body>
-        <header>
-            <h1>TyeDye: $game_name control panel</h1>
-        </header>
-        <div class='container'>
-            <div class='main-content'>
-                $:main_block
-            </div>
-            <div class='sidebar'>
-                $:sidebar_block
+        <!-- begin navbar -->
+        <div class="navbar navbar-fixed-top">
+            <div class="navbar-inner">
+                <div class="container-fluid">
+                    <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
+                        <span class="icon-bar"></span>
+                        <span class="icon-bar"></span>
+                        <span class="icon-bar"></span>
+                    </button>
+                    <a class="brand" href="#">TyeDye: $game_name control panel</a>
+                    <div class="navbar-collapse collapse">
+                        <p class="navbar-text pull-right">
+                            Logged in as <a href="#" class="navbar-link">username</a>
+                        </p>
+                        <ul class="nav">
+                            <li class="active"><a href="#">Control Panel</a></li>
+                            <li><a href="#about">About</a></li>
+                            <li><a href="#contact">Contact</a></li>
+                        </ul>
+                    </div>
+                </div>
             </div>
         </div>
-        <footer>
-            <p>Under GPL License v3</p>
-        </footer>
+        <!-- end navbar -->
+        <!-- begin blocks -->
+        <div class="container-fluid">
+            <div class="row-fluid">
+                <div class='span3'>
+                    <div class="well sidebar-nav">
+                        $:sidebar_block
+                    </div>
+                </div>
+                <div class='span9'>
+                    $:main_block
+                </div>
+            </div>
+            <hr />
+            <footer>
+                <p>Under GPL License v3</p>
+            </footer>
+        </div>
+        <!-- Le javascript
+        ================================================== -->
+        <!-- Placed at the end of the document so the pages load faster -->
+        <script src="/static/js/jquery.js"></script>
+        <script src="/static/js/bootstrap-transition.js"></script>
+        <script src="/static/js/bootstrap-alert.js"></script>
+        <script src="/static/js/bootstrap-modal.js"></script>
+        <script src="/static/js/bootstrap-dropdown.js"></script>
+        <script src="/static/js/bootstrap-scrollspy.js"></script>
+        <script src="/static/js/bootstrap-tab.js"></script>
+        <script src="/static/js/bootstrap-tooltip.js"></script>
+        <script src="/static/js/bootstrap-popover.js"></script>
+        <script src="/static/js/bootstrap-button.js"></script>
+        <script src="/static/js/bootstrap-collapse.js"></script>
+        <script src="/static/js/bootstrap-carousel.js"></script>
+        <script src="/static/js/bootstrap-typeahead.js"></script>
     </body>
 </html>
 
diff --git a/views/sidebar.html b/views/sidebar.html
index 69a8f8a..277a6a9 100644
--- a/views/sidebar.html
+++ b/views/sidebar.html
@@ -1,11 +1,7 @@
-<div class='widget'>
-    <h1>Access</h1>
-    <div class="cssmenu">
-        <ul class="cssmenu">
-            <li class="cssmenu"><a href='/app' class="cssmenu">Main</a></li>
-            <li class="cssmenu"><a href='/app/register' class="cssmenu">Register New Player</a></li>
-            <li class="cssmenu"><a href='/app/config' class="cssmenu">Configuration</a></li>
-            <li class="cssmenu"><a href='/app/stats' class="cssmenu">Statistics</a></li>
-        </ul>
-    </div>
-</div>
+<ul class="nav nav-list">
+    <li class="nav-header">Access</li>
+    <li><a href='/app'>Main</a></li>
+    <li><a href='/app/register'>Register New Player</a></li>
+    <li><a href='/app/config'>Configuration</a></li>
+    <li><a href='/app/stats'>Statistics</a></li>
+</ul>
diff --git a/views/statistics.html b/views/statistics.html
index cb87293..95a0b06 100644
--- a/views/statistics.html
+++ b/views/statistics.html
@@ -1,12 +1,12 @@
 $def with (game_name, stats, add_stat_form)
 <h2>$game_name stat list</h2>
-<ul>
 $for stat in stats:
-    <li>$stat.name (default: $stat.default_value)
-        <a href="/app/stats/edit/$stat.id">[edit]</a>&nbsp;
-        <a href="/app/stats/remove/$stat.id">[remove]</a>
-    </li>
-</ul>
+    <div class="row">
+    <div class="span1">$stat.name</div>
+    <div class="span2">(default: $stat.default_value)</div>
+    <div class="span1"><a href="/app/stats/edit/$stat.id">[edit]</a></div>
+    <div class="span1"><a href="/app/stats/remove/$stat.id">[remove]</a></div>
+    </div>
 <div class="stat_form">
     <form name="add_stat_form" method="post" action="stats/add">
         $:add_stat_form
