forked from AkkomaGang/akkoma-fe
wide mode initial implementation + cleanup
This commit is contained in:
parent
9e5037c715
commit
4a068483ed
8 changed files with 89 additions and 73 deletions
|
@ -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)
|
||||
}
|
||||
|
|
107
src/App.scss
107
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,33 +116,18 @@ nav {
|
|||
justify-content: center;
|
||||
|
||||
--miniColumn: 345px;
|
||||
--maxiColumn: minmax(auto, 615px);
|
||||
|
||||
&.-reverse {
|
||||
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;
|
||||
}
|
||||
--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;
|
||||
|
@ -145,6 +143,43 @@ nav {
|
|||
}
|
||||
}
|
||||
|
||||
.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";
|
||||
}
|
||||
|
||||
&.-wide {
|
||||
grid-template-columns: var(--miniColumn) var(--maxiColumn) var(--miniColumn);
|
||||
grid-template-areas: "sidebar content notifs";
|
||||
|
||||
&.-reverse {
|
||||
grid-template-areas: "notifs content sidebar";
|
||||
}
|
||||
}
|
||||
|
||||
&.-mobile {
|
||||
grid-template-columns: 100vw;
|
||||
grid-template-areas: "content";
|
||||
padding: 0;
|
||||
|
||||
.column {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.underlay {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#content,
|
||||
.column.-scrollable {
|
||||
&::-webkit-scrollbar {
|
||||
|
@ -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 {
|
||||
|
|
|
@ -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" />
|
||||
|
|
|
@ -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()
|
||||
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<div class="sidebar">
|
||||
<div class="column-inner">
|
||||
<instance-specific-panel v-if="showInstanceSpecificPanel" />
|
||||
<staff-panel />
|
||||
<terms-of-service-panel />
|
||||
|
|
|
@ -96,7 +96,6 @@
|
|||
grid-template-rows: 50px;
|
||||
grid-template-columns: 2fr auto;
|
||||
width: 100%;
|
||||
position: fixed;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
|
|
|
@ -289,6 +289,7 @@
|
|||
|
||||
.user-card {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
|
||||
&:hover {
|
||||
--_still-image-img-visibility: visible;
|
||||
|
|
|
@ -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')
|
||||
|
|
Loading…
Reference in a new issue