WIP exploration of 3-column mode

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 () {
+    updateLayoutState () {
-      const mobileLayout = windowWidth() <= 800
+      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)
     }

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));

src/App.vue

@@ -13,42 +13,35 @@
     <div class="app-bg-wrapper app-container-wrapper" />
     <div
       id="content"
-      class="container underlay"
+      class="main-layout underlay"
     >
+      <div class="sidebar">
+        <user-panel />
+        <div v-if="!isMobileLayout">
+          <nav-panel />
+          <instance-specific-panel v-if="showInstanceSpecificPanel" />
+          <features-panel v-if="!currentUser && showFeaturesPanel" />
+          <who-to-follow-panel v-if="currentUser && suggestionsEnabled" />
+          <portal to="notifications-3rd-column" :disabled="!is3ColumnLayout">
+            <keep-alive>
+              <notifications v-if="currentUser"/>
+            </keep-alive>
+          </portal>
+        </div>
+      </div>
+      <portal-target class="column-3" name="notifications-3rd-column" />
       <div
-        class="sidebar-flexer mobile-hidden"
+        v-if="!currentUser"
-        :style="sidebarAlign"
+        class="login-hint panel panel-default"
       >
-        <div class="sidebar-bounds">
+        <router-link
-          <div class="sidebar-scroller">
+          :to="{ name: 'login' }"
-            <div class="sidebar">
+          class="panel-body"
-              <user-panel />
-              <div v-if="!isMobileLayout">
-                <nav-panel />
-                <instance-specific-panel v-if="showInstanceSpecificPanel" />
-                <features-panel v-if="!currentUser && showFeaturesPanel" />
-                <who-to-follow-panel v-if="currentUser && suggestionsEnabled" />
-                <notifications v-if="currentUser" />
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div class="main">
-        <div
-          v-if="!currentUser"
-          class="login-hint panel panel-default"
         >
-          <router-link
+          {{ $t("login.hint") }}
-            :to="{ name: 'login' }"
+        </router-link>
-            class="panel-body"
-          >
-            {{ $t("login.hint") }}
-          </router-link>
-        </div>
-        <router-view />
       </div>
-      <media-modal />
+      <router-view class="content" />
     </div>
     <chat-panel
       v-if="currentUser && chat"
@@ -59,6 +52,7 @@
     <UserReportingModal />
     <PostStatusModal />
     <SettingsModal />
+    <media-modal />
     <portal-target name="modal" />
     <GlobalNoticeList />
   </div>

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

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) {
+    setLayout (state, value) {
-      state.mobileLayout = value
+      state.layout = value
     },
     closeSettingsModal (state) {
       state.settingsModalState = 'hidden'
@@ -89,8 +89,8 @@ const interfaceMod = {
     setNotificationPermission ({ commit }, permission) {
       commit('setNotificationPermission', permission)
     },
-    setMobileLayout ({ commit }, value) {
+    setLayout ({ commit }, value) {
-      commit('setMobileLayout', value)
+      commit('setLayout', value)
     },
     closeSettingsModal ({ commit }) {
       commit('closeSettingsModal')

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'
+  }
+}