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;
}
.gaps {
margin: -1em 0 0 -1em;
}
.item {
flex: 1;
line-height: 50px;
height: 50px;
overflow: hidden;
display: flex;
flex-wrap: wrap;
.nav-icon {
font-size: 1.1em;
margin-left: 0.4em;
}
}
.gaps > .item {
padding: 1em 0 0 1em;
&.right {
justify-content: right;
padding-right: 20px;
}
}
.auto-size {
@ -271,8 +270,6 @@ nav {
}
.inner-nav {
padding-left: 20px;
padding-right: 20px;
display: flex;
align-items: center;
flex-basis: 970px;
@ -392,6 +389,23 @@ nav {
color: $fallback--faint;
color: var(--faint, $fallback--faint);
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 {
@ -426,6 +440,7 @@ nav {
display: none;
width: 100%;
height: 46px;
button {
display: block;
flex: 1;
@ -439,6 +454,16 @@ nav {
body {
overflow-y: scroll;
}
nav {
.back-button {
display: none;
}
.site-name {
padding-left: 20px;
}
}
.sidebar-bounds {
overflow: hidden;
max-height: 100vh;
@ -505,11 +530,6 @@ nav {
}
}
.item.right {
text-align: right;
padding-right: 20px;
}
.visibility-tray {
font-size: 1.2em;
padding: 3px;

View File

@ -7,7 +7,10 @@
</div>
<div class='inner-nav'>
<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 class='item right'>
<user-finder class="nav-icon"></user-finder>

View File

@ -1,12 +1,12 @@
<template>
<span class="user-finder-container">
<div class="user-finder-container">
<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>
<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"/>
<i class="icon-cancel user-finder-icon" @click.prevent.stop="toggleHidden"/>
</span>
</span>
</div>
</template>
<script src="./user_finder.js"></script>
@ -15,7 +15,6 @@
@import '../../_variables.scss';
.user-finder-container {
height: 29px;
max-width: 100%;
}

View File

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

View File

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