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

move closing logic to drawer, add swipe to close

Browse source
This commit is contained in:
shpuld 2018-12-23 19:50:19 +02:00
parent f72b1d048e
commit e46b560ead
5 changed files with 78 additions and 62 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,6 +1,10 @@
<template>
<div class="side-drawer-container" :class="{'side-drawer-container-closed': closed, 'side-drawer-container-open': !closed}">
<div class="panel panel-default side-drawer" :class="{'side-drawer-closed': closed}">
<div class="side-drawer-container" :class="{ 'side-drawer-container-closed': closed, 'side-drawer-container-open': !closed }">
<div class="panel panel-default side-drawer" :class="{'side-drawer-closed': closed}" @touchstart="touchStart" @touchmove.prevent="touchMove">
<div class="side-drawer-heading">
<user-card-content :activatePanel="activatePanel" :user="currentUser" :switcher="false" :hideBio="true">
</user-card-content>
</div>
<ul>
<li v-if='currentUser'>
<a href="#" @click="gotoPanel('poststatus')">
@ -54,7 +58,7 @@
</li>
</ul>
</div>
<div class="side-drawer-click-outside" @click.stop.prevent="clickedOutside" :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>
@ -110,7 +114,28 @@
.side-drawer .panel {
overflow: hidden;
margin: 0;
display: flex;
}
.side-drawer-heading {
background: transparent;
flex-direction: column;
align-items: stretch;
display: flex;
min-height: 8em;
padding: 0;
margin: 0;
.profile-panel-background {
border-radius: 0;
.panel-heading {
background: transparent;
flex-direction: column;
align-items: stretch;
}
}
}
.side-drawer ul {
list-style: none;
margin: 0;
@ -123,40 +148,18 @@
border-color: var(--border, $fallback--border);
padding: 0;
&:first-child a {
border-top-right-radius: $fallback--panelRadius;
border-top-right-radius: var(--panelRadius, $fallback--panelRadius);
border-top-left-radius: $fallback--panelRadius;
border-top-left-radius: var(--panelRadius, $fallback--panelRadius);
}
a {
display: block;
padding: 0.8em 0.85em;
&:last-child a {
border-bottom-right-radius: $fallback--panelRadius;
border-bottom-right-radius: var(--panelRadius, $fallback--panelRadius);
border-bottom-left-radius: $fallback--panelRadius;
border-bottom-left-radius: var(--panelRadius, $fallback--panelRadius);
&:hover {
background-color: $fallback--lightBg;
background-color: var(--lightBg, $fallback--lightBg);
}
}
}
.side-drawer li:last-child {
border: none;
}
.side-drawer a {
display: block;
padding: 0.8em 0.85em;
&:hover {
background-color: $fallback--lightBg;
background-color: var(--lightBg, $fallback--lightBg);
}
&.router-link-active {
font-weight: bolder;
&:hover {
text-decoration: underline;
}
}
}
</style>