From 747e4090cabfda353e76c9a45def70bef8c297e5 Mon Sep 17 00:00:00 2001 From: shpuld Date: Sat, 29 Dec 2018 12:44:21 +0200 Subject: [PATCH] Cleanup and remove divider element in side drawer --- src/App.js | 3 -- src/components/side_drawer/side_drawer.js | 1 + src/components/side_drawer/side_drawer.vue | 43 +++++++++++----------- 3 files changed, 23 insertions(+), 24 deletions(-) diff --git a/src/App.js b/src/App.js index 1132110c..85df9416 100644 --- a/src/App.js +++ b/src/App.js @@ -70,9 +70,6 @@ export default { 'background-image': `url(${this.background})` } }, - mobileShowOnlyIn () { - return view => ({ 'mobile-hidden': this.mobileActivePanel !== view }) - }, sitename () { return this.$store.state.instance.name }, chat () { return this.$store.state.chat.channel.state === 'joined' }, suggestionsEnabled () { return this.$store.state.instance.suggestionsEnabled }, diff --git a/src/components/side_drawer/side_drawer.js b/src/components/side_drawer/side_drawer.js index 82d6d209..538b919d 100644 --- a/src/components/side_drawer/side_drawer.js +++ b/src/components/side_drawer/side_drawer.js @@ -1,6 +1,7 @@ import UserCardContent from '../user_card_content/user_card_content.vue' import { unseenNotificationsFromStore } from '../../services/notification_utils/notification_utils' +// TODO: separate touch gesture stuff into their own utils if more components want them const deltaCoord = (oldCoord, newCoord) => [newCoord[0] - oldCoord[0], newCoord[1] - oldCoord[1]] const touchEventCoord = e => ([e.touches[0].screenX, e.touches[0].screenY]) diff --git a/src/components/side_drawer/side_drawer.vue b/src/components/side_drawer/side_drawer.vue index 156c4934..b4613422 100644 --- a/src/components/side_drawer/side_drawer.vue +++ b/src/components/side_drawer/side_drawer.vue @@ -1,5 +1,7 @@ @@ -114,8 +117,8 @@ } .side-drawer { - overflow-x: hidden; /* Disable horizontal scroll */ - transition: 0.5s; /* 0.5 second transition effect to slide in the sidenav */ + overflow-x: hidden; + transition: 0.5s; transition-timing-function: cubic-bezier(0, 1, 0.5, 1); margin: 0 0 0 -100px; padding: 0 0 1em 100px; @@ -159,18 +162,20 @@ list-style: none; margin: 0; padding: 0; + + border-bottom: 1px solid; + border-color: $fallback--border; + border-color: var(--border, $fallback--border); + margin: 0.2em 0; +} + +.side-drawer ul:last-child { + border: 0; } .side-drawer li { padding: 0; - .divider { - border-top: 1px solid; - border-color: $fallback--border; - border-color: var(--border, $fallback--border); - margin: 0.2em 0; - } - a { display: block; padding: 0.5em 0.85em; @@ -181,8 +186,4 @@ } } } - -.side-drawer li:last-child { - border: none; -}