diff options
| -rw-r--r-- | src/App.scss | 14 | ||||
| -rw-r--r-- | src/App.vue | 7 | ||||
| -rw-r--r-- | src/components/timeline/timeline.js | 3 | ||||
| -rw-r--r-- | src/components/timeline/timeline.vue | 73 |
4 files changed, 47 insertions, 50 deletions
diff --git a/src/App.scss b/src/App.scss index d3721b32..1eaed6ea 100644 --- a/src/App.scss +++ b/src/App.scss @@ -719,3 +719,17 @@ nav { margin-right: 0.8em; } } + +.login-hint { + text-align: center; + + @media all and (min-width: 801px) { + display: none; + } + + a { + display: inline-block; + padding: 1em 0px; + width: 100%; + } +} diff --git a/src/App.vue b/src/App.vue index 082c6cb6..342a4fdf 100644 --- a/src/App.vue +++ b/src/App.vue @@ -37,6 +37,13 @@ </div> </div> <div class="main"> + <div v-if="!currentUser" class="login-hint panel panel-default"> + <div class="panel-body"> + <router-link :to="{ name: 'login' }"> + {{ $t("login.hint") }} + </router-link> + </div> + </div> <transition name="fade"> <router-view></router-view> </transition> diff --git a/src/components/timeline/timeline.js b/src/components/timeline/timeline.js index 2bbb05f3..85e0a055 100644 --- a/src/components/timeline/timeline.js +++ b/src/components/timeline/timeline.js @@ -39,8 +39,7 @@ const Timeline = { body: ['timeline-body'].concat(!this.embedded ? ['panel-body'] : []), footer: ['timeline-footer'].concat(!this.embedded ? ['panel-footer'] : []) } - }, - currentUser () { return this.$store.state.users.currentUser } + } }, components: { Status, diff --git a/src/components/timeline/timeline.vue b/src/components/timeline/timeline.vue index 74909f6d..e3eea3bd 100644 --- a/src/components/timeline/timeline.vue +++ b/src/components/timeline/timeline.vue @@ -1,42 +1,33 @@ <template> - <div> - <div v-if="!currentUser" class="login-hint panel panel-default"> - <div class="panel-body"> - <router-link :to="{ name: 'login' }"> - {{ $t("login.hint") }} - </router-link> + <div :class="classes.root"> + <div :class="classes.header"> + <div class="title"> + {{title}} + </div> + <div @click.prevent class="loadmore-error alert error" v-if="timelineError"> + {{$t('timeline.error_fetching')}} + </div> + <button @click.prevent="showNewStatuses" class="loadmore-button" v-if="timeline.newStatusCount > 0 && !timelineError"> + {{$t('timeline.show_new')}}{{newStatusCountStr}} + </button> + <div @click.prevent class="loadmore-text faint" v-if="!timeline.newStatusCount > 0 && !timelineError"> + {{$t('timeline.up_to_date')}} </div> </div> - <div :class="classes.root"> - <div :class="classes.header"> - <div class="title"> - {{title}} - </div> - <div @click.prevent class="loadmore-error alert error" v-if="timelineError"> - {{$t('timeline.error_fetching')}} - </div> - <button @click.prevent="showNewStatuses" class="loadmore-button" v-if="timeline.newStatusCount > 0 && !timelineError"> - {{$t('timeline.show_new')}}{{newStatusCountStr}} - </button> - <div @click.prevent class="loadmore-text faint" v-if="!timeline.newStatusCount > 0 && !timelineError"> - {{$t('timeline.up_to_date')}} - </div> + <div :class="classes.body"> + <div class="timeline"> + <status-or-conversation v-for="status in timeline.visibleStatuses" :key="status.id" v-bind:statusoid="status" class="status-fadein"></status-or-conversation> </div> - <div :class="classes.body"> - <div class="timeline"> - <status-or-conversation v-for="status in timeline.visibleStatuses" :key="status.id" v-bind:statusoid="status" class="status-fadein"></status-or-conversation> - </div> + </div> + <div :class="classes.footer"> + <div v-if="bottomedOut" class="new-status-notification text-center panel-footer faint"> + {{$t('timeline.no_more_statuses')}} </div> - <div :class="classes.footer"> - <div v-if="bottomedOut" class="new-status-notification text-center panel-footer faint"> - {{$t('timeline.no_more_statuses')}} - </div> - <a v-else-if="!timeline.loading" href="#" v-on:click.prevent='fetchOlderStatuses()'> - <div class="new-status-notification text-center panel-footer">{{$t('timeline.load_older')}}</div> - </a> - <div v-else class="new-status-notification text-center panel-footer"> - <i class="icon-spin3 animate-spin"/> - </div> + <a v-else-if="!timeline.loading" href="#" v-on:click.prevent='fetchOlderStatuses()'> + <div class="new-status-notification text-center panel-footer">{{$t('timeline.load_older')}}</div> + </a> + <div v-else class="new-status-notification text-center panel-footer"> + <i class="icon-spin3 animate-spin"/> </div> </div> </div> @@ -65,18 +56,4 @@ background-color: $fallback--fg; background-color: var(--panel, $fallback--fg); } - -.login-hint { - text-align: center; - - @media all and (min-width: 801px) { - display: none; - } - - a { - display: inline-block; - padding: 1em 0px; - width: 100%; - } -} </style> |