Merge branch 'master' of https://github.com/browngraphicslab/Dash-Web into editableSchema

1 files changed, 81 insertions, 27 deletions

diff --git a/src/client/views/collections/CollectionSchemaView.scss b/src/client/views/collections/CollectionSchemaView.scss
index ab906cf4b..d16f0edf9 100644
--- a/src/client/views/collections/CollectionSchemaView.scss
+++ b/src/client/views/collections/CollectionSchemaView.scss
@@ -60,16 +60,25 @@
     padding:0px;
   }
   
+@import "../global_variables";
 .collectionSchemaView-container {
-    border-style: solid;
+    border: 1px solid $intermediate-color;
+    border-radius: $border-radius;
     box-sizing: border-box;
     position: absolute;
     width: 100%;
     height: 100%;
+    overflow: hidden;
+    .collectionSchemaView-content {
+        position: absolute;
+        height: 100%;
+        width: 100%;
+        overflow: auto;
+    }
     .collectionSchemaView-previewRegion {
-        position: relative; 
-        background: black; 
-        float: left; 
+        position: relative;
+        background: $light-color;
+        float: left;
         height: 100%;
     }
     .collectionSchemaView-previewHandle {
@@ -85,30 +94,57 @@
         position: relative; 
         background: black; 
         float: left; 
+        height: 37px;
+        width: 20px;
+        z-index: 20;
+        right: 0;
+        top: 0;
+        background: $main-accent;
+    }
+    .collectionSchemaView-columnsHandle {
+        position: absolute;
+        height: 37px;
+        width: 20px;
+        z-index: 20;
+        left: 0;
+        bottom: 0;
+        background: $main-accent;
+    }
+    .collectionSchemaView-colDividerDragger {
+        position: relative;
+        box-sizing: border-box;
+        border-top: 1px solid $intermediate-color;
+        border-bottom: 1px solid $intermediate-color;
+        float: top;
+        width: 100%;
+    }
+    .collectionSchemaView-dividerDragger {
+        position: relative;
+        box-sizing: border-box;
+        border-left: 1px solid $intermediate-color;
+        border-right: 1px solid $intermediate-color;
+        float: left;
         height: 100%;
     }
     .collectionSchemaView-tableContainer {
         position: relative;
         float: left;
-        height: 100%; 
+        height: 100%;
     }
-
     .ReactTable {
-        position: absolute;
-       // display: inline-block;
-       // overflow: auto;
+        // position: absolute; // display: inline-block;
+        // overflow: auto;
         width: 100%;
         height: 100%;
-        background: white;
+        background: $light-color;
         box-sizing: border-box;
+        border: none !important;
         .rt-table {
             overflow-y: auto;
             overflow-x: auto;
             height: 100%;
-
             display: -webkit-inline-box;
-            direction: ltr;
-            // direction:rtl;
+            direction: ltr; // direction:rtl;
             // display:block;
         }
         .rt-tbody {
@@ -120,37 +156,47 @@
             max-height: 44px;
         }
         .rt-td {
-            border-width: 1;
-            border-right-color: #aaa;
+            border-width: 1px;
+            border-right-color: $intermediate-color;
             .imageBox-cont {
-                position:relative;
-                max-height:100%;
+                position: relative;
+                max-height: 100%;
             }
             .imageBox-cont img {
                 object-fit: contain;
                 max-width: 100%;
-                height: 100%
+                height: 100%;
+            }
+            .videobox-cont {
+                object-fit: contain;
+                width: auto;
+                height: 100%;
             }
-        }
-        .rt-tr-group {
-            border-width: 1;
-            border-bottom-color: #aaa
         }
     }
     .ReactTable .rt-thead.-header {
-            background:grey;
-        }
-    .ReactTable .rt-th, .ReactTable .rt-td {
+        background: $intermediate-color;
+        color: $light-color;
+        text-transform: uppercase;
+        letter-spacing: 2px;
+        font-size: 12px;
+        height: 30px;
+        padding-top: 4px;
+    }
+    .ReactTable .rt-th,
+    .ReactTable .rt-td {
         max-height: 44;
         padding: 3px 7px;
+        font-size: 13px;
+        text-align: center;
     }
     .ReactTable .rt-tbody .rt-tr-group:last-child {
-        border-bottom: grey;
+        border-bottom: $intermediate-color;
         border-bottom-style: solid;
         border-bottom-width: 1;
     }
     .documentView-node:first-child {
-        background: grey;
+        background: $light-color;
         .imageBox-cont img {
             object-fit: contain;
         }
@@ -264,4 +310,12 @@
     -webkit-flex: 1;
     -ms-flex: 1;
     flex: 1;
+}
+
+.-even {
+    background: $light-color !important;
+}
+
+.-odd {
+    background: $light-color-secondary !important;
 }
\ No newline at end of file