From c758d103bdb0cb0ac2945722c0666d309cd19a75 Mon Sep 17 00:00:00 2001
From: Xiaofeng An <futureweb2020@yandex.com>
Date: Tue, 5 Feb 2019 13:47:27 -0500
Subject: [PATCH 1/5] fix #308 - show login hint above timeline when user is
not logged in
---
.../public_timeline/public_timeline.js | 3 ++-
.../public_timeline/public_timeline.vue | 25 ++++++++++++++++++-
src/i18n/en.json | 3 ++-
3 files changed, 28 insertions(+), 3 deletions(-)
diff --git a/src/components/public_timeline/public_timeline.js b/src/components/public_timeline/public_timeline.js
index 9b866be8..e54e49fa 100644
--- a/src/components/public_timeline/public_timeline.js
+++ b/src/components/public_timeline/public_timeline.js
@@ -4,7 +4,8 @@ const PublicTimeline = {
Timeline
},
computed: {
- timeline () { return this.$store.state.statuses.timelines.public }
+ timeline () { return this.$store.state.statuses.timelines.public },
+ currentUser () { return this.$store.state.users.currentUser }
},
created () {
this.$store.dispatch('startFetching', 'public')
diff --git a/src/components/public_timeline/public_timeline.vue b/src/components/public_timeline/public_timeline.vue
index 85d42cca..6fbebd9e 100644
--- a/src/components/public_timeline/public_timeline.vue
+++ b/src/components/public_timeline/public_timeline.vue
@@ -1,5 +1,28 @@
<template>
- <Timeline :title="$t('nav.public_tl')" v-bind:timeline="timeline" v-bind:timeline-name="'public'"/>
+ <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>
+ <Timeline :title="$t('nav.public_tl')" v-bind:timeline="timeline" v-bind:timeline-name="'public'"/>
+ </div>
</template>
<script src="./public_timeline.js"></script>
+
+<style lang="scss">
+@import '../../_variables.scss';
+
+.login-hint {
+ text-align: center;
+
+ a {
+ display: inline-block;
+ padding: 1em 0px;
+ width: 100%;
+ }
+}
+</style>
diff --git a/src/i18n/en.json b/src/i18n/en.json
index f80d8ba2..51c3026b 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -28,7 +28,8 @@
"password": "Password",
"placeholder": "e.g. lain",
"register": "Register",
- "username": "Username"
+ "username": "Username",
+ "hint": "Log in to join discussion"
},
"nav": {
"about": "About",
From bf642ebab7a202939d1be96d83ad250804b58656 Mon Sep 17 00:00:00 2001
From: Xiaofeng An <futureweb2020@yandex.com>
Date: Tue, 5 Feb 2019 13:48:12 -0500
Subject: [PATCH 2/5] fix #308 - hide login hint on desktop
---
src/components/public_timeline/public_timeline.vue | 4 ++++
1 file changed, 4 insertions(+)
diff --git a/src/components/public_timeline/public_timeline.vue b/src/components/public_timeline/public_timeline.vue
index 6fbebd9e..7bbface6 100644
--- a/src/components/public_timeline/public_timeline.vue
+++ b/src/components/public_timeline/public_timeline.vue
@@ -18,6 +18,10 @@
.login-hint {
text-align: center;
+
+ @media all and (min-width: 801px) {
+ display: none;
+ }
a {
display: inline-block;
From d2436fb9e5f8f512914033a2df33c57545d277a6 Mon Sep 17 00:00:00 2001
From: Xiaofeng An <futureweb2020@yandex.com>
Date: Tue, 5 Feb 2019 15:43:56 -0500
Subject: [PATCH 3/5] move hint inside Timeline component
---
.../public_timeline/public_timeline.js | 3 +-
.../public_timeline/public_timeline.vue | 29 +-------
src/components/timeline/timeline.js | 3 +-
src/components/timeline/timeline.vue | 73 ++++++++++++-------
4 files changed, 52 insertions(+), 56 deletions(-)
diff --git a/src/components/public_timeline/public_timeline.js b/src/components/public_timeline/public_timeline.js
index e54e49fa..9b866be8 100644
--- a/src/components/public_timeline/public_timeline.js
+++ b/src/components/public_timeline/public_timeline.js
@@ -4,8 +4,7 @@ const PublicTimeline = {
Timeline
},
computed: {
- timeline () { return this.$store.state.statuses.timelines.public },
- currentUser () { return this.$store.state.users.currentUser }
+ timeline () { return this.$store.state.statuses.timelines.public }
},
created () {
this.$store.dispatch('startFetching', 'public')
diff --git a/src/components/public_timeline/public_timeline.vue b/src/components/public_timeline/public_timeline.vue
index 7bbface6..85d42cca 100644
--- a/src/components/public_timeline/public_timeline.vue
+++ b/src/components/public_timeline/public_timeline.vue
@@ -1,32 +1,5 @@
<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>
- </div>
- <Timeline :title="$t('nav.public_tl')" v-bind:timeline="timeline" v-bind:timeline-name="'public'"/>
- </div>
+ <Timeline :title="$t('nav.public_tl')" v-bind:timeline="timeline" v-bind:timeline-name="'public'"/>
</template>
<script src="./public_timeline.js"></script>
-
-<style lang="scss">
-@import '../../_variables.scss';
-
-.login-hint {
- text-align: center;
-
- @media all and (min-width: 801px) {
- display: none;
- }
-
- a {
- display: inline-block;
- padding: 1em 0px;
- width: 100%;
- }
-}
-</style>
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>
From f512ee2c3c30fbdd983dfcf8df5008208037f71e Mon Sep 17 00:00:00 2001
From: Xiaofeng An <futureweb2020@yandex.com>
Date: Wed, 6 Feb 2019 05:01:32 -0500
Subject: [PATCH 4/5] move login hint into the main content
---
src/App.scss | 14 ++++++
src/App.vue | 7 +++
src/components/timeline/timeline.js | 3 +-
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>
From a40d1eb3a09738dc0068501d020eacddf6ba3775 Mon Sep 17 00:00:00 2001
From: Xiaofeng An <futureweb2020@yandex.com>
Date: Wed, 6 Feb 2019 11:53:51 -0500
Subject: [PATCH 5/5] remove unnecessary div
---
src/App.vue | 8 +++-----
1 file changed, 3 insertions(+), 5 deletions(-)
diff --git a/src/App.vue b/src/App.vue
index 342a4fdf..7541928f 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -38,11 +38,9 @@
</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>
+ <router-link :to="{ name: 'login' }" class="panel-body">
+ {{ $t("login.hint") }}
+ </router-link>
</div>
<transition name="fade">
<router-view></router-view>