Oneric/akkoma-fe
1
0
Fork 0
forked from AkkomaGang/akkoma-fe
Code Pull requests Activity

Cleanup and remove divider element in side drawer

Browse source
This commit is contained in:
shpuld 2018-12-29 12:44:21 +02:00
parent 650655709d
commit 747e4090ca
3 changed files with 23 additions and 24 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
src/App.js
View file

@ -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 },

1
src/components/side_drawer/side_drawer.js
View file

@ -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])

41
src/components/side_drawer/side_drawer.vue
View file

@ -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;
}
.side-drawer li {
padding: 0;
.divider {
border-top: 1px solid;
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;
a {
display: block;
padding: 0.5em 0.85em;
@ -181,8 +186,4 @@
}
}
}
.side-drawer li:last-child {
border: none;
}
</style>