Fauxton: better styling for the logs

- small columns (pid, date, loglevel) get less width, so there
  is more space for the message

- padding around the view

2 files changed, 47 insertions, 36 deletions

diff --git a/src/fauxton/app/addons/logs/assets/less/logs.less b/src/fauxton/app/addons/logs/assets/less/logs.less
index e50f903f5..a988a4653 100644
--- a/src/fauxton/app/addons/logs/assets/less/logs.less
+++ b/src/fauxton/app/addons/logs/assets/less/logs.less
@@ -11,14 +11,23 @@
  *  the License.
  */
 
+.logs {
+  padding: 0 15px;
+  .log-table {
+    width: auto;
+    white-space: nowrap;
+    .args {
+      width: 100%;
+      white-space: normal;
+    }
+  }
+}
+
 #log-sidebar {
-  
   ul {
     margin-left: 0px;
-    list-style: none;
   }
-
-  .remove-filter {
-     opacity: 0.2;
+  li {
+    list-style-type: none;
   }
 }
diff --git a/src/fauxton/app/addons/logs/templates/dashboard.html b/src/fauxton/app/addons/logs/templates/dashboard.html
index 199794c96..95bee252d 100644
--- a/src/fauxton/app/addons/logs/templates/dashboard.html
+++ b/src/fauxton/app/addons/logs/templates/dashboard.html
@@ -12,35 +12,37 @@ License for the specific language governing permissions and limitations under
 the License.
 -->
 
- <h2> CouchDB Logs </h2>
-  <table class="table table-bordered" >
-  <thead>
-    <tr>
-      <th class="Date">Date</th>
-      <th class="Log Level">Log Value</th>
-      <th class="Pid">Pid</th>
-      <th class="Args">Url</th>
-    </tr>
-  </thead>
+<div class="logs">
+  <h2>CouchDB Logs</h2>
+  <table class="table table-bordered log-table">
+    <thead>
+      <tr>
+        <th class="date">Date</th>
+        <th class="level">Log Value</th>
+        <th class="pid">Pid</th>
+        <th class="args">Url</th>
+      </tr>
+    </thead>
 
-  <tbody>
-    <% logs.each(function (log) { %>
-    <tr class="<%= log.logLevel() %>">
-      <td>
-        <!-- TODO: better format the date -->
-        <%= log.date() %>
-      </td>
-      <td>
-        <%= log.logLevel() %>
-      </td>
-      <td>
-        <%= log.pid() %>
-      </td>
-      <td>
-        <!-- TODO: split the line, maybe put method in it's own column -->
-        <%= log.args() %>
-      </td>
-    </tr>
-    <% }); %>
-  </tbody>
-</table>
+    <tbody>
+      <% logs.each(function (log) { %>
+      <tr class="<%= log.logLevel() %>">
+        <td>
+          <!-- TODO: better format the date -->
+          <%= log.date() %>
+        </td>
+        <td>
+          <%= log.logLevel() %>
+        </td>
+        <td class="pid">
+          <%= log.pid() %>
+        </td>
+        <td class="args">
+          <!-- TODO: split the line, maybe put method in it's own column -->
+          <%= log.args() %>
+        </td>
+      </tr>
+      <% }); %>
+    </tbody>
+  </table>
+</div>