commit: 4a068483ed9b1334780402cbe64dfa3f4a0e8a3a
parent 9e5037c71564c041c6bf518109d21e84df435855
Author: Henry Jameson <me@hjkos.com>
Date: Tue, 5 Apr 2022 18:38:05 +0300
wide mode initial implementation + cleanup
Diffstat:
8 files changed, 89 insertions(+), 73 deletions(-)
diff --git 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
@@ -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);
+
+ .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;
- &.-reverse {
+ .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;
+
+ .column {
+ margin: 0;
+ }
- .panel-heading.-sticky {
- top: -10px;
+ .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
@@ -7,12 +7,12 @@
id="app_bg_wrapper"
class="app-bg-wrapper"
/>
- <MobileNav v-if="isMobileLayout" />
+ <MobileNav v-if="layoutType === 'mobile'" />
<DesktopNav v-else />
<div
id="content"
class="app-layout container"
- :class="{ '-reverse': reverseLayout }"
+ :class="[{ '-reverse': reverseLayout }, '-' + layoutType]"
>
<div class="underlay"/>
<div
@@ -20,7 +20,7 @@
class="column -scrollable -mini mobile-hidden"
>
<user-panel />
- <template v-if="!isMobileLayout">
+ <template v-if="layoutType !== 'mobile'">
<nav-panel />
<instance-specific-panel v-if="showInstanceSpecificPanel" />
<features-panel v-if="!currentUser && showFeaturesPanel" />
diff --git a/src/boot/after_store.js b/src/boot/after_store.js
@@ -332,8 +332,11 @@ const checkOAuthToken = async ({ store }) => {
}
const afterStoreSetup = async ({ store, i18n }) => {
- const width = windowWidth()
- store.dispatch('setMobileLayout', width <= 800)
+ // TODO cleanup copypasta
+ const mobileLayout = windowWidth() <= 800
+ const wideLayout = windowWidth() >= 1300
+ const layoutType = wideLayout ? 'wide' : (mobileLayout ? 'mobile' : 'normal')
+ store.dispatch('setLayoutType', layoutType)
FaviconService.initFaviconService()
diff --git a/src/components/about/about.vue b/src/components/about/about.vue
@@ -1,5 +1,5 @@
<template>
- <div class="sidebar">
+ <div class="column-inner">
<instance-specific-panel v-if="showInstanceSpecificPanel" />
<staff-panel />
<terms-of-service-panel />
diff --git a/src/components/mobile_nav/mobile_nav.vue b/src/components/mobile_nav/mobile_nav.vue
@@ -96,7 +96,6 @@
grid-template-rows: 50px;
grid-template-columns: 2fr auto;
width: 100%;
- position: fixed;
box-sizing: border-box;
}
diff --git a/src/components/user_card/user_card.vue b/src/components/user_card/user_card.vue
@@ -289,6 +289,7 @@
.user-card {
position: relative;
+ z-index: 1;
&:hover {
--_still-image-img-visibility: visible;
diff --git a/src/modules/interface.js b/src/modules/interface.js
@@ -13,7 +13,7 @@ const defaultState = {
window.CSS.supports('-webkit-filter', 'drop-shadow(0 0)')
)
},
- mobileLayout: false,
+ layoutType: 'normal',
globalNotices: [],
layoutHeight: 0,
lastTimeline: null
@@ -36,8 +36,8 @@ const interfaceMod = {
setNotificationPermission (state, permission) {
state.notificationPermission = permission
},
- setMobileLayout (state, value) {
- state.mobileLayout = value
+ setLayoutType (state, value) {
+ state.layoutType = value
},
closeSettingsModal (state) {
state.settingsModalState = 'hidden'
@@ -86,8 +86,8 @@ const interfaceMod = {
setNotificationPermission ({ commit }, permission) {
commit('setNotificationPermission', permission)
},
- setMobileLayout ({ commit }, value) {
- commit('setMobileLayout', value)
+ setLayoutType ({ commit }, value) {
+ commit('setLayoutType', value)
},
closeSettingsModal ({ commit }) {
commit('closeSettingsModal')
