back button for mobile

This commit is contained in:
Henry Jameson 2018-12-05 15:01:56 +03:00
parent 9143862707
commit 403c86e4d1
5 changed files with 42 additions and 18 deletions

View file

@ -206,24 +206,23 @@ i[class*=icon-] {
padding: 0 10px 0 10px; padding: 0 10px 0 10px;
} }
.gaps {
margin: -1em 0 0 -1em;
}
.item { .item {
flex: 1; flex: 1;
line-height: 50px; line-height: 50px;
height: 50px; height: 50px;
overflow: hidden; overflow: hidden;
display: flex;
flex-wrap: wrap;
.nav-icon { .nav-icon {
font-size: 1.1em; font-size: 1.1em;
margin-left: 0.4em; margin-left: 0.4em;
} }
}
.gaps > .item { &.right {
padding: 1em 0 0 1em; justify-content: right;
padding-right: 20px;
}
} }
.auto-size { .auto-size {
@ -271,8 +270,6 @@ nav {
} }
.inner-nav { .inner-nav {
padding-left: 20px;
padding-right: 20px;
display: flex; display: flex;
align-items: center; align-items: center;
flex-basis: 970px; flex-basis: 970px;
@ -392,6 +389,23 @@ nav {
color: $fallback--faint; color: $fallback--faint;
color: var(--faint, $fallback--faint); color: var(--faint, $fallback--faint);
box-shadow: 0px 0px 4px rgba(0,0,0,.6); box-shadow: 0px 0px 4px rgba(0,0,0,.6);
.back-button {
display: block;
max-width: 99px;
transition-property: opacity, max-width;
transition-duration: 300ms;
transition-timing-function: ease-out;
i {
margin: 0 1em;
}
&.hidden {
opacity: 0;
max-width: 20px;
}
}
} }
.fade-enter-active, .fade-leave-active { .fade-enter-active, .fade-leave-active {
@ -426,6 +440,7 @@ nav {
display: none; display: none;
width: 100%; width: 100%;
height: 46px; height: 46px;
button { button {
display: block; display: block;
flex: 1; flex: 1;
@ -439,6 +454,16 @@ nav {
body { body {
overflow-y: scroll; overflow-y: scroll;
} }
nav {
.back-button {
display: none;
}
.site-name {
padding-left: 20px;
}
}
.sidebar-bounds { .sidebar-bounds {
overflow: hidden; overflow: hidden;
max-height: 100vh; max-height: 100vh;
@ -505,11 +530,6 @@ nav {
} }
} }
.item.right {
text-align: right;
padding-right: 20px;
}
.visibility-tray { .visibility-tray {
font-size: 1.2em; font-size: 1.2em;
padding: 3px; padding: 3px;

View file

@ -7,7 +7,10 @@
</div> </div>
<div class='inner-nav'> <div class='inner-nav'>
<div class='item'> <div class='item'>
<router-link :to="{ name: 'root'}">{{sitename}}</router-link> <router-link class="back-button" @click.native="activatePanel('timeline')" :to="{ name: 'root' }" active-class="hidden">
<i class="icon-left-open" :title="$t('nav.back')"></i>
</router-link>
<router-link class="site-name" :to="{ name: 'root' }" active-class="home">{{sitename}}</router-link>
</div> </div>
<div class='item right'> <div class='item right'>
<user-finder class="nav-icon"></user-finder> <user-finder class="nav-icon"></user-finder>

View file

@ -1,12 +1,12 @@
<template> <template>
<span class="user-finder-container"> <div class="user-finder-container">
<i class="icon-spin4 user-finder-icon animate-spin-slow" v-if="loading" /> <i class="icon-spin4 user-finder-icon animate-spin-slow" v-if="loading" />
<a href="#" v-if="hidden" :title="$t('finder.find_user')" ><i class="icon-user-plus user-finder-icon" @click.prevent.stop="toggleHidden" /></a> <a href="#" v-if="hidden" :title="$t('finder.find_user')" ><i class="icon-user-plus user-finder-icon" @click.prevent.stop="toggleHidden" /></a>
<span v-else> <span v-else>
<input class="user-finder-input" @keyup.enter="findUser(username)" v-model="username" :placeholder="$t('finder.find_user')" id="user-finder-input" type="text"/> <input class="user-finder-input" @keyup.enter="findUser(username)" v-model="username" :placeholder="$t('finder.find_user')" id="user-finder-input" type="text"/>
<i class="icon-cancel user-finder-icon" @click.prevent.stop="toggleHidden"/> <i class="icon-cancel user-finder-icon" @click.prevent.stop="toggleHidden"/>
</span> </span>
</span> </div>
</template> </template>
<script src="./user_finder.js"></script> <script src="./user_finder.js"></script>
@ -15,7 +15,6 @@
@import '../../_variables.scss'; @import '../../_variables.scss';
.user-finder-container { .user-finder-container {
height: 29px;
max-width: 100%; max-width: 100%;
} }

View file

@ -29,6 +29,7 @@
"username": "Username" "username": "Username"
}, },
"nav": { "nav": {
"back": "Back",
"chat": "Local Chat", "chat": "Local Chat",
"friend_requests": "Follow Requests", "friend_requests": "Follow Requests",
"mentions": "Mentions", "mentions": "Mentions",

View file

@ -19,6 +19,7 @@
"username": "Имя пользователя" "username": "Имя пользователя"
}, },
"nav": { "nav": {
"back": "Назад",
"chat": "Локальный чат", "chat": "Локальный чат",
"mentions": "Упоминания", "mentions": "Упоминания",
"public_tl": "Публичная лента", "public_tl": "Публичная лента",