diff --git a/packages/perspective-viewer/src/js/view.js b/packages/perspective-viewer/src/js/view.js index 2a4fa49c36..0eb3fec8eb 100644 --- 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 index 6a6adeea15..e0b7c3cb4d 100644 --- 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 index 057ce23675..ff23fa96a8 100644 --- 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 {