diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/App.scss | 39 | ||||
| -rw-r--r-- | src/App.vue | 12 | ||||
| -rw-r--r-- | src/components/attachment/attachment.vue | 4 | ||||
| -rw-r--r-- | src/components/notifications/notifications.scss | 2 | ||||
| -rw-r--r-- | src/components/user_card_content/user_card_content.vue | 6 |
5 files changed, 49 insertions, 14 deletions
diff --git a/src/App.scss b/src/App.scss index 8a1942c6..0a7e1ce5 100644 --- 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 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/attachment/attachment.vue b/src/components/attachment/attachment.vue index 1ba1c02a..d50664b6 100644 --- a/src/components/attachment/attachment.vue +++ b/src/components/attachment/attachment.vue @@ -33,10 +33,10 @@ .attachments { display: flex; flex-wrap: wrap; - margin-right: -0.8em; + margin-right: -0.7em; .attachment { flex: 1 0 30%; - margin: 0.5em 0.8em 0.6em 0.0em; + margin: 0.5em 0.7em 0.6em 0.0em; align-self: flex-start; &.html { 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 diff --git a/src/components/user_card_content/user_card_content.vue b/src/components/user_card_content/user_card_content.vue index 8c971d53..bba16584 100644 --- a/src/components/user_card_content/user_card_content.vue +++ b/src/components/user_card_content/user_card_content.vue @@ -79,9 +79,8 @@ return this.$store.state.users.currentUser }, dailyAvg () { - return Math.round( - this.user.statuses_count / ((new Date() - new Date(this.user.created_at)) / (60 * 60 * 24 * 1000)) - ) + const days = Math.ceil((new Date() - new Date(this.user.created_at)) / (60 * 60 * 24 * 1000)) + return Math.round(this.user.statuses_count / days) } }, methods: { @@ -117,7 +116,6 @@ } .profile-panel-body { - padding-top: 0em; top: -0em; padding-top: 4em; } |