From 747e4090cabfda353e76c9a45def70bef8c297e5 Mon Sep 17 00:00:00 2001
From: shpuld <shp@cock.li>
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 1132110cc..85df94169 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 82d6d2094..538b919dd 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 156c4934f..b4613422b 100644
--- a/src/components/side_drawer/side_drawer.vue
+++ b/src/components/side_drawer/side_drawer.vue
@@ -1,5 +1,7 @@
<template>
- <div class="side-drawer-container" :class="{ 'side-drawer-container-closed': closed, 'side-drawer-container-open': !closed }">
+ <div class="side-drawer-container"
+ :class="{ 'side-drawer-container-closed': closed, 'side-drawer-container-open': !closed }"
+ >
<div class="side-drawer"
:class="{'side-drawer-closed': closed}"
@touchstart="touchStart"
@@ -30,9 +32,8 @@
{{ $t("nav.dms") }}
</router-link>
</li>
- <li>
- <div class="divider"></div>
- </li>
+ </ul>
+ <ul>
<li v-if="currentUser" @click="toggleDrawer">
<router-link :to="{ name: 'friends' }">
{{ $t("nav.timeline") }}
@@ -58,9 +59,8 @@
{{ $t("nav.chat") }}
</router-link>
</li>
- <li>
- <div class="divider"></div>
- </li>
+ </ul>
+ <ul>
<li @click="toggleDrawer">
<router-link :to="{ name: 'user-search'}">
{{ $t("nav.user_search") }}
@@ -78,7 +78,10 @@
</li>
</ul>
</div>
- <div class="side-drawer-click-outside" @click.stop.prevent="toggleDrawer" :class="{'side-drawer-click-outside-closed': closed}"></div>
+ <div class="side-drawer-click-outside"
+ @click.stop.prevent="toggleDrawer"
+ :class="{'side-drawer-click-outside-closed': closed}"
+ ></div>
</div>
</template>
@@ -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;
-}
</style>
--
GitLab