therwi/sunkkoma
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

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
Download patch file Download diff file Expand all files Collapse all files

43
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;
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>