diff options
| -rw-r--r-- | ui/app/app.js | 29 | ||||
| -rw-r--r-- | ui/app/components/network.js | 2 | ||||
| -rw-r--r-- | ui/app/css/itcss/components/header.scss | 36 | ||||
| -rw-r--r-- | ui/app/css/itcss/components/newui-sections.scss | 6 |
4 files changed, 46 insertions, 27 deletions
diff --git a/ui/app/app.js b/ui/app/app.js index 2214809e2..6196040b6 100644 --- a/ui/app/app.js +++ b/ui/app/app.js @@ -172,25 +172,11 @@ App.prototype.renderAppBar = function () { }, [ h('.app-header.flex-row.flex-space-between', { - style: { - alignItems: 'center', - visibility: props.isUnlocked ? 'visible' : 'none', - background: '#EFEFEF', // $gallery - paddingTop: '1.5vh', - height: '12vh', - maxHeight: '60px', - position: 'relative', - zIndex: 12, - }, + style: {}, }, [ - h('div.left-menu-section', { - style: { - display: 'flex', - flexDirection: 'row', - alignItems: 'center', - marginBottom: '1.8em', - }, + h('div.left-menu-wrapper', { + style: {}, }, [ // mini logo h('img', { @@ -209,13 +195,8 @@ App.prototype.renderAppBar = function () { ]), - h('div', { - style: { - display: 'flex', - flexDirection: 'row', - alignItems: 'center', - marginBottom: '1.8em', - }, + h('div.network-component-wrapper', { + style: {}, }, [ // Network Indicator h(NetworkIndicator, { diff --git a/ui/app/components/network.js b/ui/app/components/network.js index 698a0bbb9..ba1d0ea11 100644 --- a/ui/app/components/network.js +++ b/ui/app/components/network.js @@ -60,7 +60,7 @@ Network.prototype.render = function () { } return ( - h('#network_component.pointer', { + h('.network-component.pointer', { title: hoverText, onClick: (event) => this.props.onClick(event), }, [ diff --git a/ui/app/css/itcss/components/header.scss b/ui/app/css/itcss/components/header.scss index 0525d00fc..405c45f7f 100644 --- a/ui/app/css/itcss/components/header.scss +++ b/ui/app/css/itcss/components/header.scss @@ -1,6 +1,22 @@ .app-header { + align-items: center; + visibility: visible; + background: rgb(239, 239, 239); + padding-top: 1.5vh; + height: 12vh; + max-height: 60px; + position: relative; + z-index: 12; padding: 6px 8px; // background: #EFEFEF; // $gallery + + @media screen and (max-width: 575px) { + position: fixed; + height: 34px; + width: 100%; + box-shadow: 0px 2px 2px 1px rgba(0, 0, 0, 0.08); + z-index: 30; + } } .app-header h1 { @@ -16,3 +32,23 @@ h2.page-subtitle { font-size: 1em; margin: 12px; } + +.network-component-wrapper { + display: flex; + flex-direction: row; + align-items: center; + + @media screen and (min-width: 576px) { + margin-bottom: 1.8em; + } +} + +.left-menu-wrapper { + display: flex; + flex-direction: row; + align-items: center; + + @media screen and (min-width: 576px) { + margin-bottom: 1.8em; + } +}
\ No newline at end of file diff --git a/ui/app/css/itcss/components/newui-sections.scss b/ui/app/css/itcss/components/newui-sections.scss index f087d2651..39cdc507a 100644 --- a/ui/app/css/itcss/components/newui-sections.scss +++ b/ui/app/css/itcss/components/newui-sections.scss @@ -2,10 +2,10 @@ NewUI Container Elements */ +// Main container .main-container { position: absolute; z-index: 18; - box-shadow: 0 0 7px 0 rgba(0,0,0,0.08); font-family: DIN OT; display: flex; flex-wrap: wrap; @@ -56,6 +56,7 @@ margin-top: 35px; width: 85%; height: 90vh; + box-shadow: 0 0 7px 0 rgba(0,0,0,0.08); } } @@ -64,6 +65,7 @@ margin-top: 35px; width: 80%; height: 82vh; + box-shadow: 0 0 7px 0 rgba(0,0,0,0.08); } } @@ -72,6 +74,7 @@ margin-top: 35px; width: 65%; height: 82vh; + box-shadow: 0 0 7px 0 rgba(0,0,0,0.08); } } @@ -86,7 +89,6 @@ .main-container { margin-top: 35px; - // position: relative; width: 100%; height: 100%; } |