commit: dcced2d2e1471e802cc9c492eb940e25bda0f485
parent: 7b8291c03cdca5d70b98da194b75b07342daa326
Author: lambadalambda <gitgud@rogerbraun.net>
Date: Fri, 14 Apr 2017 07:50:45 -0400
Merge branch 'feature/sidepanel-independent-scrolling' into 'develop'
Sidepanel independent scrolling
See merge request !72
Diffstat:
4 files changed, 45 insertions(+), 9 deletions(-)
diff --git a/src/App.scss b/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;
diff --git 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
@@ -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
diff --git 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;
}