commit: ac60550e07b9507ff4a01f4548b781b60f294089
parent: 915487072bc5ac57457a9f89d8e38bd5efa640de
Author: Shpuld Shpludson <shp@cock.li>
Date: Thu, 13 Dec 2018 15:12:27 +0000
Merge branch 'mobile-back' into 'develop'
Back button for mobile
Closes #197
See merge request pleroma/pleroma-fe!403
Diffstat:
5 files changed, 42 insertions(+), 18 deletions(-)
diff --git a/src/App.scss b/src/App.scss
@@ -228,24 +228,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 {
@@ -293,8 +292,6 @@ nav {
}
.inner-nav {
- padding-left: 20px;
- padding-right: 20px;
display: flex;
align-items: center;
flex-basis: 970px;
@@ -452,6 +449,23 @@ nav {
color: var(--faint, $fallback--faint);
box-shadow: 0px 0px 4px rgba(0,0,0,.6);
box-shadow: var(--topBarShadow);
+
+ .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 {
@@ -486,6 +500,7 @@ nav {
display: none;
width: 100%;
height: 46px;
+
button {
display: block;
flex: 1;
@@ -499,6 +514,16 @@ nav {
body {
overflow-y: scroll;
}
+
+ nav {
+ .back-button {
+ display: none;
+ }
+ .site-name {
+ padding-left: 20px;
+ }
+ }
+
.sidebar-bounds {
overflow: hidden;
max-height: 100vh;
@@ -591,11 +616,6 @@ nav {
}
}
-.item.right {
- text-align: right;
- padding-right: 20px;
-}
-
.visibility-tray {
font-size: 1.2em;
padding: 3px;
diff --git a/src/App.vue b/src/App.vue
@@ -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>
diff --git a/src/components/user_finder/user_finder.vue b/src/components/user_finder/user_finder.vue
@@ -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%;
}
diff --git a/src/i18n/en.json b/src/i18n/en.json
@@ -29,6 +29,7 @@
"username": "Username"
},
"nav": {
+ "back": "Back",
"chat": "Local Chat",
"friend_requests": "Follow Requests",
"mentions": "Mentions",
diff --git a/src/i18n/ru.json b/src/i18n/ru.json
@@ -19,6 +19,7 @@
"username": "Имя пользователя"
},
"nav": {
+ "back": "Назад",
"chat": "Локальный чат",
"mentions": "Упоминания",
"public_tl": "Публичная лента",