Make sidepanel scroll independently from timeline, allows for seeing notifications and posting new statuses even when scrolled deep down.

3 files changed, 38 insertions, 4 deletions

diff --git a/src/App.scss b/src/App.scss
index 8a1942c6..6e584f3d 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -222,6 +222,12 @@ nav {
     flex-basis: 35%;
 }
 
+.sidebar-flexer {
+  flex: 1;
+  flex-basis: 35%;
+  width: 365px;
+}
+
 .mobile-shown {
     display: none;
 }
@@ -238,6 +244,28 @@ nav {
     }
 }
 
+@media all and (min-width: 960px) {
+  .sidebar {
+    overflow: hidden;
+    max-height: 100vh;
+    max-width: 345px;
+    position: fixed;
+    margin-top: -10px;
+
+    .sidebar-container {
+      height: 96vh;
+      padding-top: 10px;
+      margin-right: -40px;
+      padding-right: 25px;
+      overflow-x: hidden;
+      overflow-y: auto;
+    }
+  }
+  .sidebar-flexer {
+    max-height: 96vh;
+  }
+}
+
 @media all and (max-width: 959px) {
     .mobile-hidden {
         display: none;
diff --git a/src/App.vue b/src/App.vue
index c4b3cb13..fcfdae97 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -15,10 +15,14 @@
         <button @click="activatePanel('sidebar')">Sidebar</button>
         <button @click="activatePanel('timeline')">Timeline</button>
       </div>
-      <div class="sidebar" :class="{ 'mobile-hidden': mobileActivePanel != 'sidebar' }">
-        <user-panel></user-panel>
-        <nav-panel></nav-panel>
-        <notifications v-if="currentUser"></notifications>
+      <div class="sidebar-flexer" :class="{ 'mobile-hidden': mobileActivePanel != 'sidebar'}">
+        <div class="sidebar" :class="{ 'mobile-hidden': mobileActivePanel != 'sidebar' }">
+          <div class="sidebar-container">
+            <user-panel></user-panel>
+            <nav-panel></nav-panel>
+            <notifications v-if="currentUser"></notifications>
+          </div>
+        </div>
       </div>
       <div class="main" :class="{ 'mobile-hidden': mobileActivePanel != 'timeline' }">
         <transition name="fade">
diff --git a/src/components/notifications/notifications.scss b/src/components/notifications/notifications.scss
index 9bc2a5ec..c7c650a9 100644
--- a/src/components/notifications/notifications.scss
+++ b/src/components/notifications/notifications.scss
@@ -1,6 +1,8 @@
 @import '../../_variables.scss';
 
 .notifications {
+  // a bit of a hack to allow scrolling below notifications
+  padding-bottom: 15em;
 
   .panel-heading {
     // force the text to stay centered, while keeping