Mizah/mizzkey
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

Fix #6085

Browse source
This commit is contained in:
syuilo 2020-03-22 14:57:21 +09:00
parent 15050018f2
commit 43e3ce1ed5
1 changed files with 25 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

35
src/client/app.vue
View file

@ -43,7 +43,6 @@
<button class="item _button account" @click="openAccountMenu" v-if="$store.getters.isSignedIn"> <button class="item _button account" @click="openAccountMenu" v-if="$store.getters.isSignedIn">
<mk-avatar :user="$store.state.i" class="avatar"/><mk-acct class="text" :user="$store.state.i"/> <mk-avatar :user="$store.state.i" class="avatar"/><mk-acct class="text" :user="$store.state.i"/>
</button> </button>
<div class="divider"></div>
<button class="item _button index active" @click="top()" v-if="$route.name === 'index'"> <button class="item _button index active" @click="top()" v-if="$route.name === 'index'">
<fa :icon="faHome" fixed-width/><span class="text">{{ $store.getters.isSignedIn ? $t('timeline') : $t('home') }}</span> <fa :icon="faHome" fixed-width/><span class="text">{{ $store.getters.isSignedIn ? $t('timeline') : $t('home') }}</span>
</button> </button>
@ -822,8 +821,6 @@ export default Vue.extend({
z-index: 1001; z-index: 1001;
width: $nav-width; width: $nav-width;
height: 100vh; height: 100vh;
padding: 16px 0;
padding-bottom: calc(3.7rem + 24px);
box-sizing: border-box; box-sizing: border-box;
overflow: auto; overflow: auto;
background: var(--navBg); background: var(--navBg);
@ -836,13 +833,21 @@ export default Vue.extend({
@media (max-width: $nav-icon-only-threshold) and (min-width: $nav-hide-threshold + 1px) { @media (max-width: $nav-icon-only-threshold) and (min-width: $nav-hide-threshold + 1px) {
width: $nav-icon-only-width; width: $nav-icon-only-width;
padding: 8px 0;
padding-bottom: calc(3.7rem + 24px);
> .divider { > .divider {
margin: 8px auto; margin: 8px auto;
width: calc(100% - 32px); width: calc(100% - 32px);
} }
> .item {
&:first-child {
margin-bottom: 8px;
}
&:last-child {
margin-top: 8px;
}
}
} }
> .item { > .item {
@ -892,15 +897,25 @@ export default Vue.extend({
color: var(--navActive); color: var(--navActive);
} }
&:last-child { &:first-child {
position: fixed; position: sticky;
bottom: 0; z-index: 1;
width: inherit; top: 0;
padding-top: 8px; padding-top: 8px;
padding-bottom: 8px; padding-bottom: 8px;
margin-bottom: 16px;
background: var(--navBg);
border-bottom: solid 1px var(--divider);
}
&:last-child {
position: sticky;
bottom: 0;
padding-top: 8px;
padding-bottom: 8px;
margin-top: 16px;
background: var(--navBg); background: var(--navBg);
border-top: solid 1px var(--divider); border-top: solid 1px var(--divider);
border-right: solid 1px var(--divider);
} }
@media (max-width: $nav-icon-only-threshold) and (min-width: $nav-hide-threshold + 1px) { @media (max-width: $nav-icon-only-threshold) and (min-width: $nav-hide-threshold + 1px) {