非ログイン時のトップにトレンドを表示するように
This commit is contained in:
syuilo
parent
09c5efc161
commit
6037b0acc5
4 changed files with 63 additions and 21 deletions
|
|
@ -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,
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -629,8 +629,7 @@ const endpoints: Endpoint[] = [
|
|||
},
|
||||
|
||||
{
|
||||
name: 'hashtags/trend',
|
||||
withCredential: true
|
||||
name: 'hashtags/trend'
|
||||
},
|
||||
|
||||
{
|
||||
|
|
|
|||
Loading…
Reference in a new issue