wide mode initial implementation + cleanup

This commit is contained in:
Henry Jameson 2022-04-05 18:38:05 +03:00
parent 9e5037c715
commit 4a068483ed
8 changed files with 89 additions and 73 deletions

View file

@ -79,7 +79,7 @@ export default {
hideShoutbox () { hideShoutbox () {
return this.$store.getters.mergedConfig.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 }, privateMode () { return this.$store.state.instance.private },
reverseLayout () { return this.$store.getters.mergedConfig.sidebarRight }, reverseLayout () { return this.$store.getters.mergedConfig.sidebarRight },
...mapGetters(['mergedConfig']) ...mapGetters(['mergedConfig'])
@ -87,10 +87,12 @@ export default {
methods: { methods: {
updateMobileState () { updateMobileState () {
const mobileLayout = windowWidth() <= 800 const mobileLayout = windowWidth() <= 800
const wideLayout = windowWidth() >= 1300
const layoutHeight = windowHeight() const layoutHeight = windowHeight()
const changed = mobileLayout !== this.isMobileLayout const layoutType = wideLayout ? 'wide' : (mobileLayout ? 'mobile' : 'normal')
const changed = layoutType !== this.layoutType
if (changed) { if (changed) {
this.$store.dispatch('setMobileLayout', mobileLayout) this.$store.dispatch('setLayoutType', layoutType)
} }
this.$store.dispatch('setLayoutHeight', layoutHeight) this.$store.dispatch('setLayoutHeight', layoutHeight)
} }

View file

@ -63,11 +63,11 @@ nav {
} }
#sidebar { #sidebar {
display: grid;
grid-template-columns: 100%;
row-gap: 1em;
grid-area: sidebar; grid-area: sidebar;
align-content: start;
@media all and (max-width: 800px) {
display: none;
}
} }
#main-scroller { #main-scroller {
@ -88,6 +88,19 @@ nav {
background-position: 50%; 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 { .app-layout {
position: relative; position: relative;
display: grid; display: grid;
@ -103,44 +116,66 @@ nav {
justify-content: center; justify-content: center;
--miniColumn: 345px; --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-columns: var(--maxiColumn) var(--miniColumn);
grid-template-areas: "content sidebar"; grid-template-areas: "content sidebar";
} }
}
.underlay { &.-wide {
grid-column-start: 1; grid-template-columns: var(--miniColumn) var(--maxiColumn) var(--miniColumn);
grid-column-end: span 2; grid-template-areas: "sidebar content notifs";
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;
}
.column { &.-reverse {
box-sizing: border-box; grid-template-areas: "notifs content sidebar";
padding-top: 10px; }
grid-row-start: 1; }
grid-row-end: 1;
margin: 0 0.5em;
&.-scrollable { &.-mobile {
padding-top: 10px; grid-template-columns: 100vw;
position: sticky; grid-template-areas: "content";
top: 0; padding: 0;
max-height: calc(100vh - var(--navbar-height));
overflow-y: auto;
overflow-x: hidden;
.panel-heading.-sticky { .column {
top: -10px; margin: 0;
}
.underlay {
display: none;
} }
} }
} }
@ -464,17 +499,6 @@ i[class*=icon-],
color: grey; color: grey;
} }
.sidebar-bounds {
flex: 0;
flex-basis: 35%;
}
.sidebar-flexer {
flex: 1;
flex-basis: 345px;
width: 365px;
}
.mobile-shown { .mobile-shown {
display: none; display: none;
} }
@ -652,19 +676,6 @@ i[class*=icon-],
.mobile-hidden { .mobile-hidden {
display: none; display: none;
} }
.panel-switcher {
display: flex;
}
.menu-button {
display: block;
margin-right: 0.8em;
}
.main {
margin-bottom: 7em;
}
} }
@keyframes spin { @keyframes spin {

View file

@ -7,12 +7,12 @@
id="app_bg_wrapper" id="app_bg_wrapper"
class="app-bg-wrapper" class="app-bg-wrapper"
/> />
<MobileNav v-if="isMobileLayout" /> <MobileNav v-if="layoutType === 'mobile'" />
<DesktopNav v-else /> <DesktopNav v-else />
<div <div
id="content" id="content"
class="app-layout container" class="app-layout container"
:class="{ '-reverse': reverseLayout }" :class="[{ '-reverse': reverseLayout }, '-' + layoutType]"
> >
<div class="underlay"/> <div class="underlay"/>
<div <div
@ -20,7 +20,7 @@
class="column -scrollable -mini mobile-hidden" class="column -scrollable -mini mobile-hidden"
> >
<user-panel /> <user-panel />
<template v-if="!isMobileLayout"> <template v-if="layoutType !== 'mobile'">
<nav-panel /> <nav-panel />
<instance-specific-panel v-if="showInstanceSpecificPanel" /> <instance-specific-panel v-if="showInstanceSpecificPanel" />
<features-panel v-if="!currentUser && showFeaturesPanel" /> <features-panel v-if="!currentUser && showFeaturesPanel" />

View file

@ -332,8 +332,11 @@ const checkOAuthToken = async ({ store }) => {
} }
const afterStoreSetup = async ({ store, i18n }) => { const afterStoreSetup = async ({ store, i18n }) => {
const width = windowWidth() // TODO cleanup copypasta
store.dispatch('setMobileLayout', width <= 800) const mobileLayout = windowWidth() <= 800
const wideLayout = windowWidth() >= 1300
const layoutType = wideLayout ? 'wide' : (mobileLayout ? 'mobile' : 'normal')
store.dispatch('setLayoutType', layoutType)
FaviconService.initFaviconService() FaviconService.initFaviconService()

View file

@ -1,5 +1,5 @@
<template> <template>
<div class="sidebar"> <div class="column-inner">
<instance-specific-panel v-if="showInstanceSpecificPanel" /> <instance-specific-panel v-if="showInstanceSpecificPanel" />
<staff-panel /> <staff-panel />
<terms-of-service-panel /> <terms-of-service-panel />

View file

@ -96,7 +96,6 @@
grid-template-rows: 50px; grid-template-rows: 50px;
grid-template-columns: 2fr auto; grid-template-columns: 2fr auto;
width: 100%; width: 100%;
position: fixed;
box-sizing: border-box; box-sizing: border-box;
} }

View file

@ -289,6 +289,7 @@
.user-card { .user-card {
position: relative; position: relative;
z-index: 1;
&:hover { &:hover {
--_still-image-img-visibility: visible; --_still-image-img-visibility: visible;

View file

@ -13,7 +13,7 @@ const defaultState = {
window.CSS.supports('-webkit-filter', 'drop-shadow(0 0)') window.CSS.supports('-webkit-filter', 'drop-shadow(0 0)')
) )
}, },
mobileLayout: false, layoutType: 'normal',
globalNotices: [], globalNotices: [],
layoutHeight: 0, layoutHeight: 0,
lastTimeline: null lastTimeline: null
@ -36,8 +36,8 @@ const interfaceMod = {
setNotificationPermission (state, permission) { setNotificationPermission (state, permission) {
state.notificationPermission = permission state.notificationPermission = permission
}, },
setMobileLayout (state, value) { setLayoutType (state, value) {
state.mobileLayout = value state.layoutType = value
}, },
closeSettingsModal (state) { closeSettingsModal (state) {
state.settingsModalState = 'hidden' state.settingsModalState = 'hidden'
@ -86,8 +86,8 @@ const interfaceMod = {
setNotificationPermission ({ commit }, permission) { setNotificationPermission ({ commit }, permission) {
commit('setNotificationPermission', permission) commit('setNotificationPermission', permission)
}, },
setMobileLayout ({ commit }, value) { setLayoutType ({ commit }, value) {
commit('setMobileLayout', value) commit('setLayoutType', value)
}, },
closeSettingsModal ({ commit }) { closeSettingsModal ({ commit }) {
commit('closeSettingsModal') commit('closeSettingsModal')