From 83205b8c0e317d63c9cef86ede6a84a69021f4e2 Mon Sep 17 00:00:00 2001
From: Shpuld Shpuldson <shpuld@gmail.com>
Date: Thu, 13 Apr 2017 16:17:57 +0300
Subject: [PATCH 1/4] Make sidepanel scroll independently from timeline, allows
 for seeing notifications and posting new statuses even when scrolled deep
 down.

---
 src/App.scss                                  | 28 +++++++++++++++++++
 src/App.vue                                   | 12 +++++---
 .../notifications/notifications.scss          |  2 ++
 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

From f1764796e1f757bd6d51db9b3d8ade3e0d0d80b5 Mon Sep 17 00:00:00 2001
From: Shpuld Shpuldson <shpuld@gmail.com>
Date: Thu, 13 Apr 2017 17:01:18 +0300
Subject: [PATCH 2/4] Fixed flex issue between 980 and 960 pixels width

---
 src/App.scss | 13 ++++++++-----
 1 file changed, 8 insertions(+), 5 deletions(-)

diff --git a/src/App.scss b/src/App.scss
index 6e584f3d..16278e98 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -213,18 +213,19 @@ nav {
 }
 
 .main {
-    flex: 1;
-    flex-basis: 65%;
+    flex-basis: 60%;
+    flex-grow: 1;
+    flex-shrink: 1;
 }
 
 .sidebar {
-    flex: 1;
-    flex-basis: 35%;
+  flex: 1;
+  flex-basis: 35%;
 }
 
 .sidebar-flexer {
   flex: 1;
-  flex-basis: 35%;
+  flex-basis: 345px;
   width: 365px;
 }
 
@@ -263,6 +264,8 @@ nav {
   }
   .sidebar-flexer {
     max-height: 96vh;
+    flex-shrink: 0;
+    flex-grow: 0;
   }
 }
 

From 69ef9101d4066df5df6780a2bfaeaa949869df02 Mon Sep 17 00:00:00 2001
From: Shpuld Shpuldson <shpuld@gmail.com>
Date: Thu, 13 Apr 2017 17:57:20 +0300
Subject: [PATCH 3/4] Fix login screen, (remove one duplicate line from user
 card css).

---
 src/App.scss                                           | 7 ++++---
 src/components/user_card_content/user_card_content.vue | 1 -
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/App.scss b/src/App.scss
index 16278e98..0f5c13c7 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -219,7 +219,7 @@ nav {
 }
 
 .sidebar {
-  flex: 1;
+  flex: 0;
   flex-basis: 35%;
 }
 
@@ -249,17 +249,18 @@ nav {
   .sidebar {
     overflow: hidden;
     max-height: 100vh;
-    max-width: 345px;
+    width: 345px;
     position: fixed;
     margin-top: -10px;
 
     .sidebar-container {
       height: 96vh;
+      width: 360px;
       padding-top: 10px;
       margin-right: -40px;
       padding-right: 25px;
       overflow-x: hidden;
-      overflow-y: auto;
+      overflow-y: scroll;
     }
   }
   .sidebar-flexer {
diff --git a/src/components/user_card_content/user_card_content.vue b/src/components/user_card_content/user_card_content.vue
index 7b89a7f2..bba16584 100644
--- a/src/components/user_card_content/user_card_content.vue
+++ b/src/components/user_card_content/user_card_content.vue
@@ -116,7 +116,6 @@
 }
 
 .profile-panel-body {
-  padding-top: 0em;
   top: -0em;
   padding-top: 4em;
 }

From 2efddaf874b4125dac26415e251d4e542cb0b816 Mon Sep 17 00:00:00 2001
From: Shpuld Shpuldson <shpuld@gmail.com>
Date: Thu, 13 Apr 2017 23:36:16 +0300
Subject: [PATCH 4/4] Tweak values to minimize distracting artifacting when
 scrollbars are smaller or don't exist.

---
 src/App.scss | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/src/App.scss b/src/App.scss
index 0f5c13c7..0a7e1ce5 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -249,16 +249,15 @@ nav {
   .sidebar {
     overflow: hidden;
     max-height: 100vh;
-    width: 345px;
+    width: 350px;
     position: fixed;
     margin-top: -10px;
 
     .sidebar-container {
       height: 96vh;
-      width: 360px;
+      width: 362px;
       padding-top: 10px;
-      margin-right: -40px;
-      padding-right: 25px;
+      padding-right: 20px;
       overflow-x: hidden;
       overflow-y: scroll;
     }