Merge pull request #100 from google/99-ui-polish

UI polish before release

timesketch/ui/static/components/explore/explore-event-list.html

@@ -36,6 +36,8 @@ <h4>I will only show you the first 500 events</h4>
         </div>
     </div>
 
+    <br><br><br>
+
     <div ng-repeat="event in events">
         <ts-event event="event" meta="meta" sketch-id="sketchId"></ts-event>
     </div>

timesketch/ui/static/css/ts.css

@@ -26,6 +26,7 @@ header {
     top:0;
     z-index:9998;
     padding:11px 21px 11px 11px;
+    box-shadow: 0 -3px 30px rgba(0, 0, 0, 0.3)
 }
 
 table {
@@ -41,10 +42,11 @@ table {
     width:200px;
     height:65px;
     padding:20px;
-    background: #2c3e50;
+    background: #428bca;
     position: fixed;
     top:0;
     z-index:9999;
+    box-shadow: 0 -3px 30px rgba(0, 0, 0, 0.3)
 }
 
 #logo img {
@@ -62,6 +64,7 @@ table {
   background: #f1f1f1;
   top:65px;
   z-index:9998;
+  box-shadow: 0 0 15px rgba(0, 0, 0, 0.3)
 }
 
 #navigation .leftnav-title {
@@ -114,7 +117,7 @@ table {
     margin-bottom: 20px;
     background: #fff;
     padding: 20px;
-    box-shadow: -1px 0 #e5e5e5,0 0 2px rgba(0,0,0,.12),0 2px 4px rgba(0,0,0,.24);
+    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15)
 }
 
 .card-alert {

timesketch/ui/templates/sketch/timeline.html

@@ -59,14 +59,13 @@ <h4 class="modal-title" id="myModalLabel">Edit timeline</h4>
 <div class="card">
   <div class="row">
     <div class="col-md-6">
-      {% if sketch.has_permission(user=current_user, permission='write') %}
-      <div data-toggle="modal" data-target="#edit-timeline-modal" class="title-description">
-        {% else %}
-        <div>
-          {% endif %}
           <div class="pull-left" style="width:50px;height:50px;background:#{{ timeline.color }};"></div>
           <div style="margin-left:80px;">
-            <h2>{{ timeline.name }}</h2>
+            <h2>{{ timeline.name }}
+              {% if sketch.has_permission(user=current_user, permission='write') %}
+                  <button class="btn btn-default" data-toggle="modal" data-target="#edit-timeline-modal" style="margin-left:10px;width:50px;"><i class="fa fa-pencil"></i></button>
+              {% endif %}
+            </h2>
             <p style="white-space: pre-wrap;word-wrap: break-word;">{{ timeline.description }}</p>
           </div>
         </div>

timesketch/ui/templates/user/login.html

@@ -23,12 +23,12 @@
   <link rel="stylesheet" href="/static/css/timesketch.css">
   <style>
     body {
-      background: #2c3e50;
+        background: #428bca;
     }
     #center-logo img {
-      width:200px;
-      height:36px;
-      margin-bottom: 10px;
+        width:200px;
+        height:36px;
+        margin-bottom: 10px;
     }
   </style>
 </head>
@@ -37,9 +37,10 @@
 
 <div id="main">
   <div class="container">
+    <div class="row" style="height:100px;"></div>
     <div class="row" style="height:100px;"></div>
     <div class="row">
-      <div class="col-md-6 col-md-offset-3">
+      <div class="col-md-6 col-md-offset-4">
         <div id="center-logo">
           <img src="/static/img/logo.png" />
         </div>