Merge branch 'monika_animation' of https://github.com/browngraphicslab/Dash-Web into animationtimeline_two

1 files changed, 98 insertions, 37 deletions

diff --git a/src/client/views/animationtimeline/Timeline.scss b/src/client/views/animationtimeline/Timeline.scss
index 76c8475d1..a8dd9b9e7 100644
--- a/src/client/views/animationtimeline/Timeline.scss
+++ b/src/client/views/animationtimeline/Timeline.scss
@@ -1,6 +1,7 @@
 @import "./../globalCssVariables.scss";
 
-
+$timelineColor: #9acedf;
+$timelineDark: #77a1aa;
 
 .timeline-toolbox {
     position: absolute;
@@ -9,35 +10,79 @@
     display: flex;
     align-items: flex-start;
     flex-direction: row;
-    justify-content: space-evenly;
+    // justify-content: space-evenly;
     align-items: center;
-    top: 20px;
+    top: 3px;
+    width: 100%;
 
-    div {
-        padding: 0px;
+    .overview-tool {
+        display: flex;
+        justify-content: center;
+    }
+
+    .playbackControls {
+        display: flex;
+        margin-left: 30px;
+        max-width: 84px;
+        width: 84px;
+
+        .timeline-icon {
+            color: $timelineColor;
+            margin-left: 3px;
+        }
+
+    }
+
+    .grid-box {
+        display: grid;
+        grid-template-columns: [first] 50% [line2] 25% [line3] 25%;
+        width: calc(100% - 150px);
+        // width: 100%;
         margin-left: 10px;
+
+        .time-box {
+            margin-left: 5px;
+            display: flex;
+        }
+
+        .mode-box {
+            display: flex;
+            margin-left: 5px;
+        }
+
+        .overview-box {
+            width: 100%;
+            display: flex;
+        }
+
+        div {
+            padding: 0px;
+            // margin-left: 10px;
+        }
     }
 
     .animation-text {
-        font-size: 20px;
+        // font-size: 16px;
         height: auto;
         width: auto;
         white-space: nowrap;
-        font-size: 16px;
-        color: grey;
+        font-size: 14px;
+        color: black;
         letter-spacing: 2px;
         text-transform: uppercase;
     }
 
     .round-toggle {
-        height: 40px;
-        width: 80px;
+        height: 20px;
+        width: 40px;
+        min-width: 40px;
         background-color: white;
-        border: 2px solid grey;
+        border: 2px solid $timelineDark;
         border-radius: 20px;
         animation-fill-mode: forwards;
         animation-duration: 500ms;
         top: 30px;
+        margin-left: 5px;
 
         input {
             position: absolute;
@@ -47,35 +92,43 @@
         }
 
         .round-toggle-slider {
-            height: 35px;
-            width: 35px;
+            height: 17px;
+            width: 17px;
             background-color: white;
-            border: 1px solid grey;
-            border-radius: 20px;
+            border: 2px solid $timelineDark;
+            border-radius: 50%;
             transition: transform 500ms ease-in-out;
             margin-left: 0px;
-            margin-top: 0.5px;
+            // margin-top: 0.5px;
         }
     }
 
 }
 
 .time-input {
-    height: 40px;
-    width: 120px;
+    height: 20px;
+    // width: 120px;
+    width: 100%;
     white-space: nowrap;
-    font-size: 16px;
-    color: grey;
+    font-size: 12px;
+    color: black;
     letter-spacing: 2px;
     text-transform: uppercase;
     padding-left: 5px;
-
+    margin-left: 5px;
 }
 
 .tick {
     height: 100%;
-    width: 1px;
+    width: 2px;
     background-color: black;
+    color: black;
+}
+
+.number-label {
+    color: black;
+    transform: rotate(-90deg) translate(-15px, 8px);
+    font-size: .85em;
 }
 
 .timeline-container {
@@ -83,11 +136,11 @@
     height: 300px;
     position: absolute;
     background-color: $light-color-secondary;
-    box-shadow: 0px 10px 20px;
+    border-bottom: 2px solid $timelineDark;
     transition: transform 500ms ease;
 
     .info-container {
-        margin-top: 80px;
+        margin-top: 50px;
         right: 20px;
         position: absolute;
         height: calc(100% - 100px);
@@ -112,13 +165,13 @@
             pointer-events: none;
 
             .scrubberhead {
-                top: -30px;
-                height: 30px;
-                width: 30px;
-                background-color: transparent;
+                top: -20px;
+                height: 20px;
+                width: 20px;
+                background-color: white;
                 border-radius: 50%;
-                border: 5px solid black;
-                left: -15px;
+                border: 3px solid black;
+                left: -9px;
                 position: absolute;
                 pointer-events: all;
             }
@@ -126,24 +179,31 @@
 
         .trackbox {
             top: 30px;
+            // TODO: where is this 30px coming from?
             height: calc(100% - 30px);
+            // height: 100%;
             width: 100%;
-            border: 1px;
+            border-top: 2px solid black;
+            border-bottom: 2px solid black;
             overflow: hidden;
             background-color: white;
             position: absolute;
-            box-shadow: -10px 0px 10px 10px grey;
+            // box-shadow: -10px 0px 10px 10px red;
         }
 
     }
 
     .title-container {
-        margin-top: 110px;
+        margin-top: 80px;
         margin-left: 20px;
         height: calc(100% - 100px - 30px);
         width: 100px;
         background-color: white;
         overflow: hidden;
+        border-left: 2px solid black;
+        border-top: 2px solid black;
+        border-bottom: 2px solid black;
+        border-right: 2px solid $timelineDark;
 
         .datapane {
             top: 0px;
@@ -156,16 +216,17 @@
             float: left;
             border-style: solid;
             overflow-y: scroll;
-            overflow-x: hidden; 
+            overflow-x: hidden;
         }
     }
 
     .resize {
-        bottom: 5px;
+        bottom: 0px;
         position: absolute;
-        height: 30px;
-        width: 50px;
+        height: 20px;
+        width: 40px;
         left: calc(50% - 25px);
+        color: $timelineDark;
     }
 }