Consolidated responsive CSS classes

finos · Aug 1, 2018 · 655dd7b · 655dd7b
1 parent 4b3dbc7
commit 655dd7b
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 40 deletions.
diff --git a/packages/perspective-viewer/src/js/view.js b/packages/perspective-viewer/src/js/view.js
@@ -1212,20 +1212,11 @@ class View extends ViewPrivate {
      */
     notifyResize() {
         if (this.clientHeight < 500) {
-            this._side_panel.classList.add('columns_horizontal');
-            this._side_panel_divider.classList.add('columns_horizontal');
-            this._columns_container.classList.add('columns_horizontal');
-            this._active_columns.classList.add('columns_horizontal');
-            this._inactive_columns.classList.add('columns_horizontal');
+            this.querySelector('#app').classList.add('columns_horizontal');
         } else {
-            this._side_panel.classList.remove('columns_horizontal');
-            this._side_panel_divider.classList.remove('columns_horizontal');
-            this._columns_container.classList.remove('columns_horizontal');
-            this._active_columns.classList.remove('columns_horizontal');
-            this._inactive_columns.classList.remove('columns_horizontal');
+            this.querySelector('#app').classList.remove('columns_horizontal');
         }
 
-
         if (!document.hidden && this.offsetParent && document.contains(this)) {
             this._plugin.resize.call(this);
         }

diff --git a/packages/perspective-viewer/src/less/default.less b/packages/perspective-viewer/src/less/default.less
@@ -122,35 +122,37 @@ perspective-viewer {
         transition: height 0.2s;
     }
 
-    #columns_container {
-        height: 100%;
-        flex-direction: column;
-
-        &.columns_horizontal {
+    #app.columns_horizontal {
+        #columns_container {
             flex-direction: row-reverse;
         }
-
         #active_columns, #inactive_columns {
-            border: none !important;
-
-            &.columns_horizontal {
-                display: flex;
-                flex-direction: column;
-                flex: 1 !important;
-            }
+            display: flex;
+            flex-direction: column;
+            flex: 1 !important;
         }
-
-        #active_columns.columns_horizontal {
+        #active_columns {
             padding-right: 8px;
-
             perspective-row {
-
                 div#psp_row {
                     margin-right: 2px;
                 }
             }
         }
 
+        #side_panel #divider {
+            display: none;
+        }
+    }
+
+    #columns_container {
+        height: 100%;
+        flex-direction: column;
+
+        #active_columns, #inactive_columns {
+            border: none !important;
+        }
+
         #active_columns perspective-row .row_draggable {
             .bordered();
             background-color: white;
@@ -284,10 +286,6 @@ perspective-viewer {
         height: 2px;
         margin: 15px 13px 15px 13px;
         margin-bottom: 5px;
-
-        &.columns_horizontal {
-            display: none;
-        }
     }
 
     #drop_target {

diff --git a/packages/perspective-viewer/src/less/material.less b/packages/perspective-viewer/src/less/material.less
@@ -133,6 +133,18 @@ perspective-viewer {
     }
 }
 
+perspective-viewer #app.columns_horizontal {
+
+    #side_panel {
+        max-width: 500px !important;
+        padding: 24px 5px 0 0;
+
+        #divider {
+            display: none;
+        }
+    }
+}
+
 perspective-viewer #app {
 
     input, select, ul, #filters {
@@ -174,10 +186,6 @@ perspective-viewer #app {
         padding: 24px 0 0 0;
         max-width: 250px;
 
-        &.columns_horizontal {
-          max-width: 500px !important;
-          padding: 24px 5px 0 0;
-        }
 
         .is_visible {
             transition: opacity 0.4s;
@@ -202,10 +210,6 @@ perspective-viewer #app {
             border-right-width: 0;
             z-index: 1;
             margin: 0;
-
-            &.columns_horizontal {
-                display: none;
-            }
         }
 
         #active_columns, #inactive_columns {