非ログイン時のトップにトレンドを表示するように

This commit is contained in:
syuilo 2018-06-22 18:32:21 +09:00
parent 09c5efc161
commit 6037b0acc5
4 changed files with 63 additions and 21 deletions

View File

@ -24,6 +24,13 @@
import Vue from 'vue'; import Vue from 'vue';
export default Vue.extend({ export default Vue.extend({
props: {
max: {
type: Number,
required: false,
default: undefined
}
},
data() { data() {
return { return {
fetching: true, fetching: true,
@ -37,6 +44,7 @@ export default Vue.extend({
fetch(cb?) { fetch(cb?) {
this.fetching = true; this.fetching = true;
(this as any).api('notes', { (this as any).api('notes', {
limit: this.max,
local: true, local: true,
reply: false, reply: false,
renote: false, renote: false,

View File

@ -7,6 +7,13 @@
</button> </button>
<div class="body" :style="{ backgroundImage: `url('${ welcomeBgUrl }')` }"> <div class="body" :style="{ backgroundImage: `url('${ welcomeBgUrl }')` }">
<div class="container"> <div class="container">
<div class="info">
<span>%i18n:common.misskey% <b>{{ host }}</b></span>
<span class="stats" v-if="stats">
<span>%fa:user% {{ stats.originalUsersCount | number }}</span>
<span>%fa:pencil-alt% {{ stats.originalNotesCount | number }}</span>
</span>
</div>
<main> <main>
<div class="about"> <div class="about">
<h1 v-if="name">{{ name }}</h1> <h1 v-if="name">{{ name }}</h1>
@ -19,12 +26,8 @@
<mk-signin/> <mk-signin/>
</div> </div>
</main> </main>
<div class="info"> <div class="hashtags">
<span>%i18n:common.misskey% <b>{{ host }}</b></span> <router-link v-for="tag in tags" :key="tag" :to="`/tags/${ tag }`" :title="tag">#{{ tag }}</router-link>
<span class="stats" v-if="stats">
<span>%fa:user% {{ stats.originalUsersCount | number }}</span>
<span>%fa:pencil-alt% {{ stats.originalNotesCount | number }}</span>
</span>
</div> </div>
<mk-nav class="nav"/> <mk-nav class="nav"/>
</div> </div>
@ -32,7 +35,7 @@
<img src="assets/title.dark.svg" alt="Misskey"> <img src="assets/title.dark.svg" alt="Misskey">
</div> </div>
<div class="tl"> <div class="tl">
<mk-welcome-timeline/> <mk-welcome-timeline :max="20"/>
</div> </div>
<modal name="signup" width="500px" height="auto" scrollable> <modal name="signup" width="500px" height="auto" scrollable>
<header :class="$style.signupFormHeader">%i18n:@signup%</header> <header :class="$style.signupFormHeader">%i18n:@signup%</header>
@ -54,13 +57,18 @@ export default Vue.extend({
host, host,
name, name,
description, description,
pointerInterval: null pointerInterval: null,
tags: []
}; };
}, },
created() { created() {
(this as any).api('stats').then(stats => { (this as any).api('stats').then(stats => {
this.stats = stats; this.stats = stats;
}); });
(this as any).api('hashtags/trend').then(stats => {
this.tags = stats.map(x => x.tag);
});
}, },
mounted() { mounted() {
this.point(); this.point();
@ -161,6 +169,20 @@ root(isDark)
$loginWidth = 340px $loginWidth = 340px
$width = $aboutWidth + $loginWidth $width = $aboutWidth + $loginWidth
> .info
margin 0 auto 16px auto
width $width
font-size 14px
color #fff
> .stats
margin-left 16px
padding-left 16px
border-left solid 1px #fff
> *
margin-right 16px
> main > main
display flex display flex
margin auto margin auto
@ -201,22 +223,17 @@ root(isDark)
padding 16px 32px 32px 32px padding 16px 32px 32px 32px
background isDark ? #2e3440 : #f5f5f5 background isDark ? #2e3440 : #f5f5f5
> .info > .hashtags
margin 16px auto margin 16px auto
padding 12px
width $width width $width
font-size 14px font-size 14px
color #fff color #fff
background rgba(#000, 0.2) background rgba(#000, 0.3)
border-radius 8px border-radius 8px
> .stats
margin-left 16px
padding-left 16px
border-left solid 1px #fff
> * > *
margin-right 16px display inline-block
margin 14px
> .nav > .nav
display block display block

View File

@ -14,6 +14,9 @@
<div class="tl"> <div class="tl">
<mk-welcome-timeline/> <mk-welcome-timeline/>
</div> </div>
<div class="hashtags">
<router-link v-for="tag in tags" :key="tag" :to="`/tags/${ tag }`" :title="tag">#{{ tag }}</router-link>
</div>
<div class="stats" v-if="stats"> <div class="stats" v-if="stats">
<span>%fa:user% {{ stats.originalUsersCount | number }}</span> <span>%fa:user% {{ stats.originalUsersCount | number }}</span>
<span>%fa:pencil-alt% {{ stats.originalNotesCount | number }}</span> <span>%fa:pencil-alt% {{ stats.originalNotesCount | number }}</span>
@ -37,13 +40,18 @@ export default Vue.extend({
stats: null, stats: null,
host, host,
name, name,
description description,
tags: []
}; };
}, },
created() { created() {
(this as any).api('stats').then(stats => { (this as any).api('stats').then(stats => {
this.stats = stats; this.stats = stats;
}); });
(this as any).api('hashtags/trend').then(stats => {
this.tags = stats.map(x => x.tag);
});
} }
}); });
</script> </script>
@ -116,12 +124,22 @@ export default Vue.extend({
box-shadow 0 1px 3px rgba(#000, 0.075), inset 0 0 5px rgba(#000, 0.2) box-shadow 0 1px 3px rgba(#000, 0.075), inset 0 0 5px rgba(#000, 0.2)
> .tl > .tl
margin 16px 0
> * > *
max-height 300px max-height 300px
border-radius 6px border-radius 6px
overflow auto overflow auto
-webkit-overflow-scrolling touch -webkit-overflow-scrolling touch
> .hashtags
border solid 2px #ddd
border-radius 8px
> *
display inline-block
margin 16px
> .stats > .stats
margin 16px 0 margin 16px 0
padding 8px padding 8px

View File

@ -629,8 +629,7 @@ const endpoints: Endpoint[] = [
}, },
{ {
name: 'hashtags/trend', name: 'hashtags/trend'
withCredential: true
}, },
{ {