From 92668bfb0fa5db6f298e5b986ee37de11730c271 Mon Sep 17 00:00:00 2001
From: Adrian Sampson <adrian@radbox.org>
Date: Wed, 30 May 2012 17:12:28 -0700
Subject: [PATCH] use responsive CSS features of Bootstrap

---
 static/loglet.css   |  7 ++++++
 static/mobile.css   | 57 ---------------------------------------------
 templates/base.html |  6 ++---
 templates/log.html  |  2 +-
 4 files changed, 11 insertions(+), 61 deletions(-)
 delete mode 100644 static/mobile.css

diff --git a/static/loglet.css b/static/loglet.css
index c4642de..c915d80 100644
--- a/static/loglet.css
+++ b/static/loglet.css
@@ -52,3 +52,10 @@ label.after {
     display: inline-block;
     margin-left: 0.5em;
 }
+
+/* For small screens. */
+@media (max-width: 767px) {
+    .level {
+        text-align: left;
+    }
+}
diff --git a/static/mobile.css b/static/mobile.css
deleted file mode 100644
index 6d8d337..0000000
--- a/static/mobile.css
+++ /dev/null
@@ -1,57 +0,0 @@
-.container {
-    width: 320px !important;
-}
-.main {
-    width: 100% !important;
-    overflow: hidden;
-}
-.intro {
-    padding: 0 7px;
-}
-.sidebar, .detail {
-    display: none;
-}
-pre {
-    overflow: hidden;
-}
-
-h1 {
-    margin: 0 0 0 10px;
-    font-size: 1.2em;
-}
-h1 small {
-    font-size: 1em;
-}
-
-thead {
-    display: none;
-}
-table, tr, td {
-    /* Don't format as a table. */
-    display: block;
-}
-td {
-    border: none !important;
-    padding-top: 0 !important;
-    padding-bottom: 0 !important;
-}
-tr {
-    border-bottom: 1px solid #ddd;
-    padding-top: 4px;
-    padding-bottom: 4px;
-}
-td.time {
-    float: left;
-}
-td.level {
-    float: left;
-    width: 2em;
-    text-align: center;
-    padding-left: 4px !important;
-    padding-right: 4px !important;
-}
-td.message {
-    clear: both;
-    font-size: 13px;
-    padding-top: 4px !important;
-}
diff --git a/templates/base.html b/templates/base.html
index 12246ed..a29c127 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -6,10 +6,10 @@
         <link rel="stylesheet" type="text/css"
               href="{{ url_for('static', filename='bootstrap.css') }}">
         <link rel="stylesheet" type="text/css"
-              href="{{ url_for('static', filename='loglet.css') }}">
+              href="{{ url_for('static',
+                               filename='bootstrap-responsive.css') }}">
         <link rel="stylesheet" type="text/css"
-              media="screen and (max-device-width: 480px)"
-              href="{{ url_for('static', filename='mobile.css') }}">
+              href="{{ url_for('static', filename='loglet.css') }}">
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
         {%- endblock %}
     </head>
diff --git a/templates/log.html b/templates/log.html
index 4d3d67c..d7ce299 100644
--- a/templates/log.html
+++ b/templates/log.html
@@ -65,7 +65,7 @@ <h1>{{ title }}</h1>
     <div class="row">
         <div class="span9 main">
             <div class="logtable">
-                <div class="row thead">
+                <div class="row thead visible-desktop">
                     <div class="span2">
                         <a href="{{ reversed_url }}">
                             Time