diff --git a/src/App.js b/src/App.js index 52700319..932c3a4e 100644 --- a/src/App.js +++ b/src/App.js @@ -14,7 +14,7 @@ import DesktopNav from './components/desktop_nav/desktop_nav.vue' import UserReportingModal from './components/user_reporting_modal/user_reporting_modal.vue' import PostStatusModal from './components/post_status_modal/post_status_modal.vue' import GlobalNoticeList from './components/global_notice_list/global_notice_list.vue' -import { windowWidth, windowHeight } from './services/window_utils/window_utils' +import { windowWidth, windowHeight, getLayout } from './services/window_utils/window_utils' export default { name: 'app', @@ -43,10 +43,10 @@ export default { // Load the locale from the storage const val = this.$store.getters.mergedConfig.interfaceLanguage this.$store.dispatch('setOption', { name: 'interfaceLanguage', value: val }) - window.addEventListener('resize', this.updateMobileState) + window.addEventListener('resize', this.updateLayoutState) }, destroyed () { - window.removeEventListener('resize', this.updateMobileState) + window.removeEventListener('resize', this.updateLayoutState) }, computed: { currentUser () { return this.$store.state.users.currentUser }, @@ -71,7 +71,9 @@ export default { this.$store.state.instance.instanceSpecificPanelContent }, showFeaturesPanel () { return this.$store.state.instance.showFeaturesPanel }, - isMobileLayout () { return this.$store.state.interface.mobileLayout }, + layout () { return console.log(this.$store.state.interface.layout) || this.$store.state.interface.layout }, + isMobileLayout () { return this.$store.state.interface.layout === '1column' }, + is3ColumnLayout () { return this.$store.state.interface.layout === '3column' }, privateMode () { return this.$store.state.instance.private }, sidebarAlign () { return { @@ -80,12 +82,13 @@ export default { } }, methods: { - updateMobileState () { - const mobileLayout = windowWidth() <= 800 + updateLayoutState () { + const width = windowWidth() + const layout = getLayout(width) const layoutHeight = windowHeight() - const changed = mobileLayout !== this.isMobileLayout + const changed = layout !== this.layout if (changed) { - this.$store.dispatch('setMobileLayout', mobileLayout) + this.$store.dispatch('setLayout', layout) } this.$store.dispatch('setLayoutHeight', layoutHeight) } diff --git a/src/App.scss b/src/App.scss index 1800d816..ab43112c 100644 --- a/src/App.scss +++ b/src/App.scss @@ -25,14 +25,46 @@ h4 { margin: 0; } -#content { +.main-layout { + display: grid; box-sizing: border-box; padding-top: 60px; margin: auto; min-height: 100vh; max-width: 980px; - align-content: flex-start; + grid-template-columns: 365px 1fr; + grid-template-rows: auto 1fr; + grid-template-areas: + "post notice" + "post content"; + + .column-3 { + display: none; + } + + .content { + grid-area: content; + } + + .sidebar { + max-height: 100vh; + grid-area: post; + } + + @media all and (min-width: 1200px) { + grid-template-columns: 365px 1fr 1fr; + grid-template-rows: auto 1fr; + grid-template-areas: + "post notice notifications" + "post content notifications"; + + .column-3 { + display: block; + grid-area: notifications; + } + } } + .underlay { background-color: rgba(0,0,0,0.15); background-color: var(--underlay, rgba(0,0,0,0.15)); diff --git a/src/App.vue b/src/App.vue index b4eb0524..2039b7c2 100644 --- a/src/App.vue +++ b/src/App.vue @@ -13,42 +13,35 @@
+
+ +
+ + + + + + + + + +
+
+
-
-
-
- -
- - - - - -
-
-
-
-
-
- - + {{ $t("login.hint") }} +
- +
+
diff --git a/src/boot/after_store.js b/src/boot/after_store.js index 3cbbf020..9d06022a 100644 --- a/src/boot/after_store.js +++ b/src/boot/after_store.js @@ -2,7 +2,7 @@ import Vue from 'vue' import VueRouter from 'vue-router' import routes from './routes' import App from '../App.vue' -import { windowWidth } from '../services/window_utils/window_utils' +import { windowWidth, getLayout } from '../services/window_utils/window_utils' import { getOrCreateApp, getClientToken } from '../services/new_api/oauth.js' import backendInteractorService from '../services/backend_interactor_service/backend_interactor_service.js' import { CURRENT_VERSION } from '../services/theme_data/theme_data.service.js' @@ -324,7 +324,7 @@ const checkOAuthToken = async ({ store }) => { const afterStoreSetup = async ({ store, i18n }) => { const width = windowWidth() - store.dispatch('setMobileLayout', width <= 800) + store.dispatch('setLayout', getLayout(width)) const overrides = window.___pleromafe_dev_overrides || {} const server = (typeof overrides.target !== 'undefined') ? overrides.target : window.location.origin diff --git a/src/modules/interface.js b/src/modules/interface.js index d6db32fd..037b8a87 100644 --- a/src/modules/interface.js +++ b/src/modules/interface.js @@ -15,7 +15,7 @@ const defaultState = { window.CSS.supports('-webkit-filter', 'drop-shadow(0 0)') ) }, - mobileLayout: false, + layout: false, globalNotices: [], layoutHeight: 0, lastTimeline: null @@ -39,8 +39,8 @@ const interfaceMod = { setNotificationPermission (state, permission) { state.notificationPermission = permission }, - setMobileLayout (state, value) { - state.mobileLayout = value + setLayout (state, value) { + state.layout = value }, closeSettingsModal (state) { state.settingsModalState = 'hidden' @@ -89,8 +89,8 @@ const interfaceMod = { setNotificationPermission ({ commit }, permission) { commit('setNotificationPermission', permission) }, - setMobileLayout ({ commit }, value) { - commit('setMobileLayout', value) + setLayout ({ commit }, value) { + commit('setLayout', value) }, closeSettingsModal ({ commit }) { commit('closeSettingsModal') diff --git a/src/services/window_utils/window_utils.js b/src/services/window_utils/window_utils.js index 909088db..259caf73 100644 --- a/src/services/window_utils/window_utils.js +++ b/src/services/window_utils/window_utils.js @@ -8,3 +8,13 @@ export const windowHeight = () => window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight + +export const getLayout = (w, h) => { + if (w > 1200) { + return '3column' + } else if (w > 800) { + return '2column' + } else { + return '1column' + } +}