Merge branch 'feature/sidepanel-independent-scrolling' into 'develop'

Sidepanel independent scrolling

See merge request !72

src/App.scss

@@ -213,13 +213,20 @@ nav {
 }
 
 .main {
-    flex: 1;
-    flex-basis: 65%;
+    flex-basis: 60%;
+    flex-grow: 1;
+    flex-shrink: 1;
 }
 
 .sidebar {
-    flex: 1;
-    flex-basis: 35%;
+  flex: 0;
+  flex-basis: 35%;
+}
+
+.sidebar-flexer {
+  flex: 1;
+  flex-basis: 345px;
+  width: 365px;
 }
 
 .mobile-shown {
@@ -238,6 +245,30 @@ nav {
     }
 }
 
+@media all and (min-width: 960px) {
+  .sidebar {
+    overflow: hidden;
+    max-height: 100vh;
+    width: 350px;
+    position: fixed;
+    margin-top: -10px;
+
+    .sidebar-container {
+      height: 96vh;
+      width: 362px;
+      padding-top: 10px;
+      padding-right: 20px;
+      overflow-x: hidden;
+      overflow-y: scroll;
+    }
+  }
+  .sidebar-flexer {
+    max-height: 96vh;
+    flex-shrink: 0;
+    flex-grow: 0;
+  }
+}
+
 @media all and (max-width: 959px) {
     .mobile-hidden {
         display: none;

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

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

src/components/user_card_content/user_card_content.vue

@@ -116,7 +116,6 @@
 }
 
 .profile-panel-body {
-  padding-top: 0em;
   top: -0em;
   padding-top: 4em;
 }