diff --git a/src/App.scss b/src/App.scss index 5355d8998..871f193fb 100644 --- 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 index 16cd08d47..048c1e77d 100644 --- a/src/App.vue +++ b/src/App.vue @@ -7,7 +7,10 @@
{{ charactersLeft }}
{{ charactersLeft }}
diff --git a/src/components/timeline/timeline.js b/src/components/timeline/timeline.js index a651f619b..f28b85bdd 100644 --- a/src/components/timeline/timeline.js +++ b/src/components/timeline/timeline.js @@ -2,6 +2,7 @@ import Status from '../status/status.vue' import timelineFetcher from '../../services/timeline_fetcher/timeline_fetcher.service.js' import StatusOrConversation from '../status_or_conversation/status_or_conversation.vue' import UserCard from '../user_card/user_card.vue' +import { throttle } from 'lodash' const Timeline = { props: [ @@ -88,7 +89,7 @@ const Timeline = { this.paused = false } }, - fetchOlderStatuses () { + fetchOlderStatuses: throttle(function () { const store = this.$store const credentials = store.state.users.currentUser.credentials store.commit('setLoading', { timeline: this.timelineName, value: true }) @@ -101,7 +102,7 @@ const Timeline = { userId: this.userId, tag: this.tag }).then(() => store.commit('setLoading', { timeline: this.timelineName, value: false })) - }, + }, 1000, this), fetchFollowers () { const id = this.userId this.$store.state.api.backendInteractor.fetchFollowers({ id }) diff --git a/src/components/user_card/user_card.js b/src/components/user_card/user_card.js index a019627a8..b8eb28e3d 100644 --- a/src/components/user_card/user_card.js +++ b/src/components/user_card/user_card.js @@ -14,6 +14,9 @@ const UserCard = { components: { UserCardContent }, + computed: { + currentUser () { return this.$store.state.users.currentUser } + }, methods: { toggleUserExpanded () { this.userExpanded = !this.userExpanded diff --git a/src/components/user_card/user_card.vue b/src/components/user_card/user_card.vue index 5a8e55319..eb0d7576c 100644 --- a/src/components/user_card/user_card.vue +++ b/src/components/user_card/user_card.vue @@ -10,13 +10,13 @@{{$t('settings.name')}}
- +{{$t('settings.bio')}}
- +- +
- +
- ++ + +
+{{$t('settings.current_avatar')}}
{{$t('settings.set_new_avatar')}}
-{{$t('settings.current_profile_banner')}}
{{$t('settings.set_new_profile_banner')}}
-{{$t('settings.set_new_profile_background')}}
-