diff options
Diffstat (limited to 'src/components')
| -rw-r--r-- | src/components/timeline/timeline.js | 3 | ||||
| -rw-r--r-- | src/components/timeline/timeline.vue | 73 |
2 files changed, 50 insertions, 26 deletions
diff --git a/src/components/timeline/timeline.js b/src/components/timeline/timeline.js index 85e0a055..2bbb05f3 100644 --- a/src/components/timeline/timeline.js +++ b/src/components/timeline/timeline.js @@ -39,7 +39,8 @@ 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 e3eea3bd..74909f6d 100644 --- a/src/components/timeline/timeline.vue +++ b/src/components/timeline/timeline.vue @@ -1,33 +1,42 @@ <template> - <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 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> - <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 :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> - <div :class="classes.footer"> - <div v-if="bottomedOut" class="new-status-notification text-center panel-footer faint"> - {{$t('timeline.no_more_statuses')}} + <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> - <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 :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> </div> </div> </div> @@ -56,4 +65,18 @@ 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> |