From 4a068483ed9b1334780402cbe64dfa3f4a0e8a3a Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Tue, 5 Apr 2022 18:38:05 +0300 Subject: [PATCH] wide mode initial implementation + cleanup --- src/App.js | 8 +- src/App.scss | 127 ++++++++++++----------- src/App.vue | 6 +- src/boot/after_store.js | 7 +- src/components/about/about.vue | 2 +- src/components/mobile_nav/mobile_nav.vue | 1 - src/components/user_card/user_card.vue | 1 + src/modules/interface.js | 10 +- 8 files changed, 89 insertions(+), 73 deletions(-) diff --git a/src/App.js b/src/App.js index 4a59f412..b2ec95d4 100644 --- a/src/App.js +++ b/src/App.js @@ -79,7 +79,7 @@ export default { hideShoutbox () { return this.$store.getters.mergedConfig.hideShoutbox }, - isMobileLayout () { return this.$store.state.interface.mobileLayout }, + layoutType () { return this.$store.state.interface.layoutType }, privateMode () { return this.$store.state.instance.private }, reverseLayout () { return this.$store.getters.mergedConfig.sidebarRight }, ...mapGetters(['mergedConfig']) @@ -87,10 +87,12 @@ export default { methods: { updateMobileState () { const mobileLayout = windowWidth() <= 800 + const wideLayout = windowWidth() >= 1300 const layoutHeight = windowHeight() - const changed = mobileLayout !== this.isMobileLayout + const layoutType = wideLayout ? 'wide' : (mobileLayout ? 'mobile' : 'normal') + const changed = layoutType !== this.layoutType if (changed) { - this.$store.dispatch('setMobileLayout', mobileLayout) + this.$store.dispatch('setLayoutType', layoutType) } this.$store.dispatch('setLayoutHeight', layoutHeight) } diff --git a/src/App.scss b/src/App.scss index c8a7969c..e32a2d36 100644 --- a/src/App.scss +++ b/src/App.scss @@ -63,11 +63,11 @@ nav { } #sidebar { - display: grid; - grid-template-columns: 100%; - row-gap: 1em; grid-area: sidebar; - align-content: start; + + @media all and (max-width: 800px) { + display: none; + } } #main-scroller { @@ -88,6 +88,19 @@ nav { background-position: 50%; } +.underlay { + grid-column-start: 1; + grid-column-end: span 3; + grid-row-start: 1; + grid-row-end: 1; + margin: 0 -0.5em; + padding: 0 0.5em; + pointer-events: none; + background-color: rgba(0, 0, 0, 0.15); + background-color: var(--underlay, rgba(0, 0, 0, 0.15)); + z-index: -2000; +} + .app-layout { position: relative; display: grid; @@ -103,44 +116,66 @@ nav { justify-content: center; --miniColumn: 345px; - --maxiColumn: minmax(auto, 615px); + --maxiColumn: minmax(345px, 615px); - &.-reverse { + .column { + display: grid; + grid-template-columns: 100%; + box-sizing: border-box; + padding-top: 10px; + grid-row-start: 1; + grid-row-end: 1; + margin: 0 0.5em; + row-gap: 1em; + align-content: start; + + &.-scrollable { + padding-top: 10px; + position: sticky; + top: 0; + max-height: calc(100vh - var(--navbar-height)); + overflow-y: auto; + overflow-x: hidden; + + .panel-heading.-sticky { + top: -10px; + } + } + } + + .column-inner { + display: grid; + grid-template-columns: 100%; + box-sizing: border-box; + row-gap: 1em; + align-content: start; + } + + &.-reverse:not(.-wide):not(.-mobile) { grid-template-columns: var(--maxiColumn) var(--miniColumn); grid-template-areas: "content sidebar"; } -} -.underlay { - grid-column-start: 1; - grid-column-end: span 2; - grid-row-start: 1; - grid-row-end: 1; - margin: 0 -0.5em; - padding: 0 0.5em; - pointer-events: none; - background-color: rgba(0, 0, 0, 0.15); - background-color: var(--underlay, rgba(0, 0, 0, 0.15)); - z-index: -2000; -} + &.-wide { + grid-template-columns: var(--miniColumn) var(--maxiColumn) var(--miniColumn); + grid-template-areas: "sidebar content notifs"; -.column { - box-sizing: border-box; - padding-top: 10px; - grid-row-start: 1; - grid-row-end: 1; - margin: 0 0.5em; + &.-reverse { + grid-template-areas: "notifs content sidebar"; + } + } - &.-scrollable { - padding-top: 10px; - position: sticky; - top: 0; - max-height: calc(100vh - var(--navbar-height)); - overflow-y: auto; - overflow-x: hidden; + &.-mobile { + grid-template-columns: 100vw; + grid-template-areas: "content"; + padding: 0; - .panel-heading.-sticky { - top: -10px; + .column { + margin: 0; + } + + .underlay { + display: none; } } } @@ -464,17 +499,6 @@ i[class*=icon-], color: grey; } -.sidebar-bounds { - flex: 0; - flex-basis: 35%; -} - -.sidebar-flexer { - flex: 1; - flex-basis: 345px; - width: 365px; -} - .mobile-shown { display: none; } @@ -652,19 +676,6 @@ i[class*=icon-], .mobile-hidden { display: none; } - - .panel-switcher { - display: flex; - } - - .menu-button { - display: block; - margin-right: 0.8em; - } - - .main { - margin-bottom: 7em; - } } @keyframes spin { diff --git a/src/App.vue b/src/App.vue index 71de2a36..f87d895b 100644 --- a/src/App.vue +++ b/src/App.vue @@ -7,12 +7,12 @@ id="app_bg_wrapper" class="app-bg-wrapper" /> - +
-