subtype/akkoma-fe
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki 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})` 'background-image': `url(${this.background})`
} }
}, },
mobileShowOnlyIn () {
return view => ({ 'mobile-hidden': this.mobileActivePanel !== view })
},
sitename () { return this.$store.state.instance.name }, sitename () { return this.$store.state.instance.name },
chat () { return this.$store.state.chat.channel.state === 'joined' }, chat () { return this.$store.state.chat.channel.state === 'joined' },
suggestionsEnabled () { return this.$store.state.instance.suggestionsEnabled }, 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 UserCardContent from '../user_card_content/user_card_content.vue'
import { unseenNotificationsFromStore } from '../../services/notification_utils/notification_utils' 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 deltaCoord = (oldCoord, newCoord) => [newCoord[0] - oldCoord[0], newCoord[1] - oldCoord[1]]
const touchEventCoord = e => ([e.touches[0].screenX, e.touches[0].screenY]) const touchEventCoord = e => ([e.touches[0].screenX, e.touches[0].screenY])

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

@ -1,5 +1,7 @@
<template> <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" <div class="side-drawer"
:class="{'side-drawer-closed': closed}" :class="{'side-drawer-closed': closed}"
@touchstart="touchStart" @touchstart="touchStart"
@ -30,9 +32,8 @@
{{ $t("nav.dms") }} {{ $t("nav.dms") }}
</router-link> </router-link>
</li> </li>
<li> </ul>
<div class="divider"></div> <ul>
</li>
<li v-if="currentUser" @click="toggleDrawer"> <li v-if="currentUser" @click="toggleDrawer">
<router-link :to="{ name: 'friends' }"> <router-link :to="{ name: 'friends' }">
{{ $t("nav.timeline") }} {{ $t("nav.timeline") }}
@ -58,9 +59,8 @@
{{ $t("nav.chat") }} {{ $t("nav.chat") }}
</router-link> </router-link>
</li> </li>
<li> </ul>
<div class="divider"></div> <ul>
</li>
<li @click="toggleDrawer"> <li @click="toggleDrawer">
<router-link :to="{ name: 'user-search'}"> <router-link :to="{ name: 'user-search'}">
{{ $t("nav.user_search") }} {{ $t("nav.user_search") }}
@ -78,7 +78,10 @@
</li> </li>
</ul> </ul>
</div> </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> </div>
</template> </template>
@ -114,8 +117,8 @@
} }
.side-drawer { .side-drawer {
overflow-x: hidden; /* Disable horizontal scroll */ overflow-x: hidden;
transition: 0.5s; /* 0.5 second transition effect to slide in the sidenav */ transition: 0.5s;
transition-timing-function: cubic-bezier(0, 1, 0.5, 1); transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
margin: 0 0 0 -100px; margin: 0 0 0 -100px;
padding: 0 0 1em 100px; padding: 0 0 1em 100px;
@ -159,18 +162,20 @@
list-style: none; list-style: none;
margin: 0; margin: 0;
padding: 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 { .side-drawer li {
padding: 0; padding: 0;
.divider {
border-top: 1px solid;
border-color: $fallback--border;
border-color: var(--border, $fallback--border);
margin: 0.2em 0;
}
a { a {
display: block; display: block;
padding: 0.5em 0.85em; padding: 0.5em 0.85em;
@ -181,8 +186,4 @@
} }
} }
} }
.side-drawer li:last-child {
border: none;
}
</style> </style>