responsive ui

1 files changed, 147 insertions, 129 deletions

diff --git a/src/client/views/animationtimeline/Timeline.scss b/src/client/views/animationtimeline/Timeline.scss
index 88d602d76..493b084a8 100644
--- a/src/client/views/animationtimeline/Timeline.scss
+++ b/src/client/views/animationtimeline/Timeline.scss
@@ -1,191 +1,209 @@
-@import "./../globalCssVariables.scss"; 
+@import "./../globalCssVariables.scss";
 
 
 
-.timeline-toolbox{
-    position:absolute; 
-    margin: 0px; 
-    padding: 0px; 
-    display:flex;
-    align-items: flex-start; 
+.timeline-toolbox {
+    position: absolute;
+    margin: 0px;
+    padding: 0px;
+    display: flex;
+    align-items: flex-start;
     flex-direction: row;
     justify-content: space-evenly;
     align-items: center;
     top: 20px;
-    div{
-        padding: 0px; 
-        margin-left:10px; 
+
+    div {
+        padding: 0px;
+        margin-left: 10px;
     }
-    .animation-text{
-        font-size: 20px; 
-        height: auto; 
-        width: auto; 
+
+    .animation-text {
+        font-size: 20px;
+        height: auto;
+        width: auto;
         white-space: nowrap;
         font-size: 16px;
         color: grey;
         letter-spacing: 2px;
         text-transform: uppercase;
     }
+
     .round-toggle {
         height: 40px;
         width: 80px;
         background-color: white;
         border: 2px solid grey;
         border-radius: 20px;
-        animation-fill-mode: forwards; 
+        animation-fill-mode: forwards;
         animation-duration: 500ms;
-        top: 30px; 
-        input{
-            position:absolute; 
-            opacity: 0; 
-            height: 0; 
-            width: 0; 
+        top: 30px;
+
+        input {
+            position: absolute;
+            opacity: 0;
+            height: 0;
+            width: 0;
         }
-        .round-toggle-slider{
-            height: 35px; 
-            width: 35px; 
+
+        .round-toggle-slider {
+            height: 35px;
+            width: 35px;
             background-color: white;
-            border:1px solid grey;
-            border-radius: 20px; 
-            transition: transform 500ms ease-in-out; 
-            margin-left: 0px; 
-            margin-top: 0.5px; 
-        } 
+            border: 1px solid grey;
+            border-radius: 20px;
+            transition: transform 500ms ease-in-out;
+            margin-left: 0px;
+            margin-top: 0.5px;
+        }
     }
-    
+
 }
-.time-input{
-    height: 40px; 
-    width: 120px; 
+
+.time-input {
+    height: 40px;
+    width: 120px;
     white-space: nowrap;
     font-size: 16px;
     color: grey;
     letter-spacing: 2px;
     text-transform: uppercase;
-    padding-left: 5px; 
-    
+    padding-left: 5px;
+
 }
-.tick{
-    height:100%; 
-    width: 1px; 
-    background-color:black; 
-}   
-.timeline-container{
-    width:100%;
-    height:300px; 
-    position:absolute;
+
+.tick {
+    height: 100%;
+    width: 1px;
+    background-color: black;
+}
+
+.timeline-container {
+    width: 100%;
+    height: 300px;
+    position: absolute;
     background-color: $light-color-secondary;
-    box-shadow: 0px 10px 20px; 
-    transition: transform 500ms ease; 
-
-    .info-container{ 
-        margin-top: 80px; 
-        right:20px; 
-        position:absolute; 
-        height: calc(100% - 100px); 
-        width: calc(100% - 140px); 
+    box-shadow: 0px 10px 20px;
+    transition: transform 500ms ease;
+
+    .info-container {
+        margin-top: 80px;
+        right: 20px;
+        position: absolute;
+        height: calc(100% - 100px);
+        width: calc(100% - 140px);
         overflow: hidden;
 
-        .scrubberbox{
-            position:absolute; 
-            background-color: transparent; 
+        .scrubberbox {
+            position: absolute;
+            background-color: transparent;
             height: 30px;
-            width:100%; 
-          
+            width: 100%;
+
         }
-        .scrubber{
-            top:30px; 
-            height: 100%; 
-            width: 2px; 
-            position:absolute;
+
+        .scrubber {
+            top: 30px;
+            height: 100%;
+            width: 2px;
+            position: absolute;
             z-index: 1001;
-            background-color:black; 
-            .scrubberhead{
-                top: -30px; 
-                height: 30px; 
+            background-color: black;
+
+            .scrubberhead {
+                top: -30px;
+                height: 30px;
                 width: 30px;
-                background-color:transparent; 
-                border-radius: 50%; 
-                border: 5px solid black; 
+                background-color: transparent;
+                border-radius: 50%;
+                border: 5px solid black;
                 left: -15px;
-                position:absolute;                 
+                position: absolute;
             }
         }
 
-        .trackbox{
-            top: 30px; 
-            height:calc(100% - 30px);
-            width:100%;
-            border:1px;
-            overflow:hidden;
-            background-color:white;
-            position:absolute;
-            box-shadow: -10px 0px 10px 10px grey; 
+        .trackbox {
+            top: 30px;
+            height: calc(100% - 30px);
+            width: 100%;
+            border: 1px;
+            overflow: hidden;
+            background-color: white;
+            position: absolute;
+            box-shadow: -10px 0px 10px 10px grey;
         }
-        
+
     }
-    .title-container{
-        margin-top: 110px; 
-        margin-left: 20px; 
-        height: calc(100% - 100px - 30px); 
-        width: 100px; 
-        background-color:white;
-        overflow: hidden;  
-        .datapane{
-            top:0px; 
-            width: 100px; 
-            height: 75px; 
+
+    .title-container {
+        margin-top: 110px;
+        margin-left: 20px;
+        height: calc(100% - 100px - 30px);
+        width: 100px;
+        background-color: white;
+        overflow: hidden;
+
+        .datapane {
+            top: 0px;
+            width: 100px;
+            height: 30%;
             border: 1px solid $dark-color;
-            background-color: $intermediate-color; 
-            color: white; 
-            position:relative; 
-            float:left; 
-            border-style:solid; 
+            background-color: $intermediate-color;
+            color: white;
+            position: relative;
+            float: left;
+            border-style: solid;
+            overflow-y: scroll;
+            overflow-x: hidden; 
         }
     }
-    .resize{
-        bottom: 5px; 
-        position:absolute; 
-        height: 30px; 
-        width: 50px; 
+
+    .resize {
+        bottom: 5px;
+        position: absolute;
+        height: 30px;
+        width: 50px;
         left: calc(50% - 25px);
     }
 }
 
 
 
-.overview{
-    position: absolute; 
-    height: 50px; 
-    width: 200px; 
-    background-color: black; 
-    .container{        
-        position: absolute; 
-        float: left 0px; 
-        top: 25%; 
-        height: 75%; 
-        width: 100%;     
-        background-color: grey; 
+.overview {
+    position: absolute;
+    height: 50px;
+    width: 200px;
+    background-color: black;
+
+    .container {
+        position: absolute;
+        float: left 0px;
+        top: 25%;
+        height: 75%;
+        width: 100%;
+        background-color: grey;
     }
 }
 
 
-.timeline-checker{
-    height: auto; 
-    width: auto; 
-    overflow: hidden; 
-    position: absolute; 
-    display: flex; 
-    padding: 10px 10px; 
-    div{
-        height: auto; 
+.timeline-checker {
+    height: auto;
+    width: auto;
+    overflow: hidden;
+    position: absolute;
+    display: flex;
+    padding: 10px 10px;
+
+    div {
+        height: auto;
         width: auto;
-        overflow: hidden; 
-        margin: 0px 10px; 
+        overflow: hidden;
+        margin: 0px 10px;
         cursor: pointer
     }
-    .check{
-        width: 50px; 
-        height: 50px; 
+
+    .check {
+        width: 50px;
+        height: 50px;
     }
 }
\ No newline at end of file