diff --git a/src/App.vue b/src/App.vue index 1282ee912..8eb320a7e 100755 --- a/src/App.vue +++ b/src/App.vue @@ -18,9 +18,6 @@ -
- -
@@ -40,42 +37,7 @@ export default { return { sidebarActive: false, newsActive: false, - theme: 'saga-blue', - logoMap: { - 'bootstrap4-light-blue': 'bootstrap4-light-blue.svg', - 'bootstrap4-light-purple': 'bootstrap4-light-purple.svg', - 'bootstrap4-dark-blue': 'bootstrap4-dark-blue.svg', - 'bootstrap4-dark-purple': 'bootstrap4-dark-purple.svg', - 'md-light-indigo': 'md-light-indigo.svg', - 'md-light-deeppurple': 'md-light-deeppurple.svg', - 'md-dark-indigo': 'md-dark-indigo.svg', - 'md-dark-deeppurple': 'md-dark-deeppurple.svg', - 'mdc-light-indigo': 'md-light-indigo.svg', - 'mdc-light-deeppurple': 'md-light-deeppurple.svg', - 'mdc-dark-indigo': 'md-dark-indigo.svg', - 'mdc-dark-deeppurple': 'md-dark-deeppurple.svg', - 'saga-blue': 'saga-blue.png', - 'saga-green': 'saga-green.png', - 'saga-orange': 'saga-orange.png', - 'saga-purple': 'saga-purple.png', - 'vela-blue': 'vela-blue.png', - 'vela-green': 'vela-green.png', - 'vela-orange': 'vela-orange.png', - 'vela-purple': 'vela-purple.png', - 'arya-blue': 'arya-blue.png', - 'arya-green': 'arya-green.png', - 'arya-orange': 'arya-orange.png', - 'arya-purple': 'arya-purple.png', - 'nova': 'nova.png', - 'nova-alt': 'nova-alt.png', - 'nova-accent': 'nova-accent.png', - 'nova-vue': 'nova-vue.png', - 'luna-blue': 'luna-blue.png', - 'luna-green': 'luna-green.png', - 'luna-pink': 'luna-pink.png', - 'luna-amber': 'luna-amber.png', - 'rhea': 'rhea.png' - } + theme: 'saga-blue' } }, diff --git a/src/AppTopBar.vue b/src/AppTopBar.vue index 392b7027b..bc6314fd5 100755 --- a/src/AppTopBar.vue +++ b/src/AppTopBar.vue @@ -6,6 +6,9 @@ +
+ +
  • Get Started
  • @@ -108,9 +111,47 @@ export default { this.activeMenuIndex = null; } }, + props: { + theme: null + }, data() { return { - activeMenuIndex: null + activeMenuIndex: null, + logoMap: { + 'bootstrap4-light-blue': 'bootstrap4-light-blue.svg', + 'bootstrap4-light-purple': 'bootstrap4-light-purple.svg', + 'bootstrap4-dark-blue': 'bootstrap4-dark-blue.svg', + 'bootstrap4-dark-purple': 'bootstrap4-dark-purple.svg', + 'md-light-indigo': 'md-light-indigo.svg', + 'md-light-deeppurple': 'md-light-deeppurple.svg', + 'md-dark-indigo': 'md-dark-indigo.svg', + 'md-dark-deeppurple': 'md-dark-deeppurple.svg', + 'mdc-light-indigo': 'md-light-indigo.svg', + 'mdc-light-deeppurple': 'md-light-deeppurple.svg', + 'mdc-dark-indigo': 'md-dark-indigo.svg', + 'mdc-dark-deeppurple': 'md-dark-deeppurple.svg', + 'saga-blue': 'saga-blue.png', + 'saga-green': 'saga-green.png', + 'saga-orange': 'saga-orange.png', + 'saga-purple': 'saga-purple.png', + 'vela-blue': 'vela-blue.png', + 'vela-green': 'vela-green.png', + 'vela-orange': 'vela-orange.png', + 'vela-purple': 'vela-purple.png', + 'arya-blue': 'arya-blue.png', + 'arya-green': 'arya-green.png', + 'arya-orange': 'arya-orange.png', + 'arya-purple': 'arya-purple.png', + 'nova': 'nova.png', + 'nova-alt': 'nova-alt.png', + 'nova-accent': 'nova-accent.png', + 'nova-vue': 'nova-vue.png', + 'luna-blue': 'luna-blue.png', + 'luna-green': 'luna-green.png', + 'luna-pink': 'luna-pink.png', + 'luna-amber': 'luna-amber.png', + 'rhea': 'rhea.png' + } } }, methods: { diff --git a/src/assets/styles/app/_config.scss b/src/assets/styles/app/_config.scss index 7c5543ffe..c2c3fc66b 100644 --- a/src/assets/styles/app/_config.scss +++ b/src/assets/styles/app/_config.scss @@ -1,12 +1,12 @@ .layout-config { position: fixed; padding: 0; - top: 70px; - display: block; + top: 0; right: 0; + display: block; width: 550px; - z-index: 996; - height: calc(100% - 70px); + z-index: 998; + height: 100%; transition: transform .3s; transform: translate3d(550px,0,0); backface-visibility: hidden; @@ -41,7 +41,7 @@ background-color: var(--primary-color); text-align: center; color: var(--primary-color-text); - top: 200px; + top: 270px; left: -51px; z-index: -1; overflow: hidden; diff --git a/src/assets/styles/app/_core.scss b/src/assets/styles/app/_core.scss index 1250f426c..e0af1b38b 100644 --- a/src/assets/styles/app/_core.scss +++ b/src/assets/styles/app/_core.scss @@ -53,7 +53,7 @@ a { width: 100%; height: 100%; position: fixed; - top: 70px; + top: 0; left: 0; background-color: rgba(0, 0, 0, 0.4); transition: background-color .5s; @@ -203,22 +203,4 @@ h6 { p { line-height: 1.5; margin: 0 0 1rem 0; -} - -.app-theme { - background-color: var(--primary-color); - color: var(--primary-color-text); - position: fixed; - left: 285px; - top: 15px; - padding: .5rem; - z-index: 997; - border-radius: 4px; - box-shadow: 0 2px 4px -1px rgba(0,0,0,.2), 0 4px 5px 0 rgba(0,0,0,.14), 0 1px 10px 0 rgba(0,0,0,.12); - width: 39px; - height: 39px; - - img { - width: 25px; - } } \ No newline at end of file diff --git a/src/assets/styles/app/_news.scss b/src/assets/styles/app/_news.scss index 430387c1b..af60c1297 100644 --- a/src/assets/styles/app/_news.scss +++ b/src/assets/styles/app/_news.scss @@ -1,4 +1,3 @@ - .layout-news { position: fixed; top: 0; @@ -7,9 +6,7 @@ height: 70px; width: 100%; display: flex; - -ms-flex-pack: center; justify-content: center; - -ms-flex-align: center; align-items: center; background-image: url("assets/images/topbar-easter-2020-bg.jpg"); @@ -61,7 +58,6 @@ right: 28px; background-color: rgba(0,0,0,.3); border-radius: 50%; - display: -ms-flexbox; display: flex; justify-content: center; align-items: center; @@ -72,7 +68,7 @@ .layout-wrapper.layout-news-active { .layout-topbar { - top: 70px + top: 70px; } .layout-sidebar { @@ -80,11 +76,6 @@ height: calc(100% - 140px); } - .layout-config { - top: 140px; - height: calc(100% - 140px); - } - .layout-content { padding-top: 140px; } diff --git a/src/assets/styles/app/_responsive.scss b/src/assets/styles/app/_responsive.scss index d0940db1a..6a5f62211 100644 --- a/src/assets/styles/app/_responsive.scss +++ b/src/assets/styles/app/_responsive.scss @@ -1,19 +1,12 @@ @media screen and (max-width: 960px) { .layout-wrapper.layout-news-active { - .layout-sidebar { - top: 140px; - height: calc(100% - 140px); - } - .layout-config { - top: 180px; - height: calc(100% - 180px); - } .layout-content { padding-top: 180px; } - .layout-mask { - top: 140px; + .layout-sidebar { + top: 0; + height: 100%; } .layout-news-container { background-image: linear-gradient(180deg, rgba(255,255,255,0.30) 0%, #FFFFFF 100%); @@ -24,24 +17,28 @@ } .layout-topbar { - text-align: center; height: 111px; + flex-wrap: wrap; + justify-content: space-between; + padding: 0; .menu-button { display: inline-block; } .logo { - margin: 7px 0 6px; - img{ - width: 180px; + width: 150px; } } + + .app-theme { + margin-left: 0; + margin-right: 23px; + } .topbar-menu { background-color: var(--surface-a); - float: none; width: 100%; height: 41px; margin: 0; @@ -63,16 +60,16 @@ &.topbar-submenu > ul { top: 40px; - text-align: left; } } } } .layout-sidebar { - top: 70px; + top: 0; left: -300px; z-index: 999; + height: 100%; transition: left .3s; &.active { @@ -85,10 +82,6 @@ padding-top: 111px; .content-section { - &.submenu ul li { - width: 50%; - } - &.introduction { flex-direction: column; @@ -123,8 +116,7 @@ } .layout-config { - top: 110px; - height: calc(100% - 110px); + height: 100%; transform: translate3d(100%,0,0); .layout-config-button { @@ -137,18 +129,13 @@ transform: translate3d(0,0,0); } } - - .app-theme { - right: 35px; - left: auto; - } } @media screen and (max-width: 640px) { .layout-wrapper.layout-news-active { .topbar-menu { - >li.topbar-submenu { - >ul { + > li.topbar-submenu { + > ul { top: 180px; } } diff --git a/src/assets/styles/app/_topbar.scss b/src/assets/styles/app/_topbar.scss index c5109be52..5bcfe9899 100644 --- a/src/assets/styles/app/_topbar.scss +++ b/src/assets/styles/app/_topbar.scss @@ -9,13 +9,13 @@ z-index: 997; box-shadow: 0 0 4px rgba(0,0,0,0.25); border-bottom: 1px solid var(--surface-d); + display: flex; + align-items: center; + padding: 0 35px; .menu-button { display: none; color: var(--text-color); - position: absolute; - left: 0; - top: 0; width: 70px; height: 70px; line-height: 70px; @@ -34,10 +34,6 @@ } .logo { - margin-left: 35px; - margin-top: 8px; - display: inline-block; - img { width: 180px; } @@ -49,12 +45,27 @@ } } + .app-theme { + background-color: var(--primary-color); + color: var(--primary-color-text); + padding: .5rem; + border-radius: 4px; + box-shadow: 0 2px 4px -1px rgba(0,0,0,.2), 0 4px 5px 0 rgba(0,0,0,.14), 0 1px 10px 0 rgba(0,0,0,.12); + width: 39px; + height: 39px; + margin-left: 70px; + + img { + width: 25px; + } + } + .topbar-menu { list-style-type: none; - float: right; - margin: 0 60px 0 0; + margin: 0; padding: 0; height: 100%; + margin-left: auto; > li { display: inline-block;