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 () {
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)
}

View File

@ -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 {

View File

@ -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" />

View File

@ -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()

View File

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

View File

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

View File

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

View File

@ -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')