Merge pull request #66 from browngraphicslab/schema_columns

Schema columns

1 files changed, 211 insertions, 199 deletions

diff --git a/src/client/views/collections/CollectionSchemaView.scss b/src/client/views/collections/CollectionSchemaView.scss
index 0d615dc01..863bb256a 100644
--- a/src/client/views/collections/CollectionSchemaView.scss
+++ b/src/client/views/collections/CollectionSchemaView.scss
@@ -1,162 +1,218 @@
 @import "../global_variables";
-
 .collectionSchemaView-container {
-  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: $light-color;
-    float: left;
-    height: 100%;
-  }
-  .collectionSchemaView-previewHandle {
-    position: absolute;
-    height: 37px;
-    width: 20px;
-    z-index: 20;
-    right: 0;
-    top: 0;
-    background: $main-accent;
-  }
-  .collectionSchemaView-dividerDragger {
-    position: relative;
+    border: 1px solid $intermediate-color;
+    border-radius: $border-radius;
     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%;
-  }
-
-  .ReactTable {
     position: absolute;
-    // display: inline-block;
-    // overflow: auto;
     width: 100%;
     height: 100%;
-    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;
-      // display:block;
-    }
-    .rt-tbody {
-      //direction: ltr;
-      direction: rtl;
-    }
-    .rt-tr-group {
-      direction: ltr;
-      max-height: 44px;
-    }
-    .rt-td {
-      border-width: 1px;
-      border-right-color: $intermediate-color;
-      .imageBox-cont {
+    overflow: hidden;
+    .collectionSchemaView-content {
+        position: absolute;
+        height: 100%;
+        width: 100%;
+        overflow: auto;
+    }
+    .collectionSchemaView-previewRegion {
+        position: relative;
+        background: $light-color;
+        float: left;
+        height: 100%;
+    }
+    .collectionSchemaView-previewHandle {
+        position: absolute;
+        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;
-        max-height: 100%;
-      }
-      .imageBox-cont img {
-        object-fit: contain;
-        max-width: 100%;
+        float: left;
         height: 100%;
-      }
-      .videobox-cont  {
-        object-fit: contain;
-        width:auto;
+    }
+    .ReactTable {
+        // position: absolute; // display: inline-block;
+        // overflow: auto;
+        width: 100%;
         height: 100%;
-      }
-    }
-  }
-  .ReactTable .rt-thead.-header {
-    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: $intermediate-color;
-    border-bottom-style: solid;
-    border-bottom-width: 1;
-  }
-  .documentView-node:first-child {
-    background: $light-color;
-    .imageBox-cont img {
-      object-fit: contain;
-    }
-  }
+        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;
+            // display:block;
+        }
+        .rt-tbody {
+            //direction: ltr;
+            direction: rtl;
+        }
+        .rt-tr-group {
+            direction: ltr;
+            max-height: 44px;
+        }
+        .rt-td {
+            border-width: 1px;
+            border-right-color: $intermediate-color;
+            .imageBox-cont {
+                position: relative;
+                max-height: 100%;
+            }
+            .imageBox-cont img {
+                object-fit: contain;
+                max-width: 100%;
+                height: 100%;
+            }
+            .videobox-cont {
+                object-fit: contain;
+                width: auto;
+                height: 100%;
+            }
+        }
+    }
+    .ReactTable .rt-thead.-header {
+        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: $intermediate-color;
+        border-bottom-style: solid;
+        border-bottom-width: 1;
+    }
+    .documentView-node:first-child {
+        background: $light-color;
+        .imageBox-cont img {
+            object-fit: contain;
+        }
+    }
 }
 
 .Resizer {
-  box-sizing: border-box;
-  background: #000;
-  opacity: 0.5;
-  z-index: 1;
-  background-clip: padding-box;
-  &.horizontal {
-    height: 11px;
-    margin: -5px 0;
-    border-top: 5px solid rgba(255, 255, 255, 0);
-    border-bottom: 5px solid rgba(255, 255, 255, 0);
-    cursor: row-resize;
-    width: 100%;
-    &:hover {
-      border-top: 5px solid rgba(0, 0, 0, 0.5);
-      border-bottom: 5px solid rgba(0, 0, 0, 0.5);
-    }
-  }
-  &.vertical {
-    width: 11px;
-    margin: 0 -5px;
-    border-left: 5px solid rgba(255, 255, 255, 0);
-    border-right: 5px solid rgba(255, 255, 255, 0);
-    cursor: col-resize;
+    box-sizing: border-box;
+    background: #000;
+    opacity: 0.5;
+    z-index: 1;
+    background-clip: padding-box;
+    &.horizontal {
+        height: 11px;
+        margin: -5px 0;
+        border-top: 5px solid rgba(255, 255, 255, 0);
+        border-bottom: 5px solid rgba(255, 255, 255, 0);
+        cursor: row-resize;
+        width: 100%;
+        &:hover {
+            border-top: 5px solid rgba(0, 0, 0, 0.5);
+            border-bottom: 5px solid rgba(0, 0, 0, 0.5);
+        }
+    }
+    &.vertical {
+        width: 11px;
+        margin: 0 -5px;
+        border-left: 5px solid rgba(255, 255, 255, 0);
+        border-right: 5px solid rgba(255, 255, 255, 0);
+        cursor: col-resize;
+        &:hover {
+            border-left: 5px solid rgba(0, 0, 0, 0.5);
+            border-right: 5px solid rgba(0, 0, 0, 0.5);
+        }
+    }
     &:hover {
-      border-left: 5px solid rgba(0, 0, 0, 0.5);
-      border-right: 5px solid rgba(0, 0, 0, 0.5);
-    }
-  }
-  &:hover {
-    -webkit-transition: all 2s ease;
-    transition: all 2s ease;
-  }
+        -webkit-transition: all 2s ease;
+        transition: all 2s ease;
+    }
 }
 
 .vertical {
-  section {
-    width: 100vh;
-    height: 100vh;
+    section {
+        width: 100vh;
+        height: 100vh;
+        display: -webkit-box;
+        display: -webkit-flex;
+        display: -ms-flexbox;
+        display: flex;
+        -webkit-box-orient: vertical;
+        -webkit-box-direction: normal;
+        -webkit-flex-direction: column;
+        -ms-flex-direction: column;
+        flex-direction: column;
+    }
+    header {
+        padding: 1rem;
+        background: #eee;
+    }
+    footer {
+        padding: 1rem;
+        background: #eee;
+    }
+}
+
+.horizontal {
+    section {
+        width: 100vh;
+        height: 100vh;
+        display: flex;
+        flex-direction: column;
+    }
+    header {
+        padding: 1rem;
+        background: #eee;
+    }
+    footer {
+        padding: 1rem;
+        background: #eee;
+    }
+}
+
+.parent {
+    width: 100%;
+    height: 100%;
+    -webkit-box-flex: 1;
+    -webkit-flex: 1;
+    -ms-flex: 1;
+    flex: 1;
     display: -webkit-box;
     display: -webkit-flex;
     display: -ms-flexbox;
@@ -166,71 +222,27 @@
     -webkit-flex-direction: column;
     -ms-flex-direction: column;
     flex-direction: column;
-  }
-  header {
-    padding: 1rem;
-    background: #eee;
-  }
-  footer {
-    padding: 1rem;
-    background: #eee;
-  }
-}
-
-.horizontal {
-  section {
-    width: 100vh;
-    height: 100vh;
-    display: flex;
-    flex-direction: column;
-  }
-  header {
-    padding: 1rem;
-    background: #eee;
-  }
-  footer {
-    padding: 1rem;
-    background: #eee;
-  }
-}
-
-.parent {
-  width: 100%;
-  height: 100%;
-  -webkit-box-flex: 1;
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-orient: vertical;
-  -webkit-box-direction: normal;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
 }
 
 .header {
-  background: #aaa;
-  height: 3rem;
-  line-height: 3rem;
+    background: #aaa;
+    height: 3rem;
+    line-height: 3rem;
 }
 
 .wrapper {
-  background: #ffa;
-  margin: 5rem;
-  -webkit-box-flex: 1;
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
+    background: #ffa;
+    margin: 5rem;
+    -webkit-box-flex: 1;
+    -webkit-flex: 1;
+    -ms-flex: 1;
+    flex: 1;
 }
 
 .-even {
-  background: $light-color !important;
+    background: $light-color !important;
 }
 
 .-odd {
-  background: $light-color-secondary !important;
-}
+    background: $light-color-secondary !important;
+}
\ No newline at end of file