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

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

View file

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

View file

@ -14,6 +14,9 @@
<div class="tl">
<mk-welcome-timeline/>
</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">
<span>%fa:user% {{ stats.originalUsersCount | number }}</span>
<span>%fa:pencil-alt% {{ stats.originalNotesCount | number }}</span>
@ -37,13 +40,18 @@ export default Vue.extend({
stats: null,
host,
name,
description
description,
tags: []
};
},
created() {
(this as any).api('stats').then(stats => {
this.stats = stats;
});
(this as any).api('hashtags/trend').then(stats => {
this.tags = stats.map(x => x.tag);
});
}
});
</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)
> .tl
margin 16px 0
> *
max-height 300px
border-radius 6px
overflow auto
-webkit-overflow-scrolling touch
> .hashtags
border solid 2px #ddd
border-radius 8px
> *
display inline-block
margin 16px
> .stats
margin 16px 0
padding 8px

View file

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