Improve welcome page

This commit is contained in:
syuilo 2018-09-06 04:52:42 +09:00
parent b4f86feddb
commit 91e0fc8c62
No known key found for this signature in database
GPG key ID: BDC4C49D06AB9D69
2 changed files with 67 additions and 8 deletions

View file

@ -34,9 +34,9 @@
<div class="announcements block"> <div class="announcements block">
<header>%fa:broadcast-tower% %i18n:@announcements%</header> <header>%fa:broadcast-tower% %i18n:@announcements%</header>
<div> <div>
<div v-for="broadcast in broadcasts"> <div v-for="announcement in announcements">
<h1 v-html="broadcast.title"></h1> <h1 v-html="announcement.title"></h1>
<div v-html="broadcast.text"></div> <div v-html="announcement.text"></div>
</div> </div>
</div> </div>
</div> </div>
@ -94,7 +94,7 @@ export default Vue.extend({
host, host,
name: 'Misskey', name: 'Misskey',
description: '', description: '',
broadcasts: [], announcements: [],
photos: [] photos: []
}; };
}, },
@ -103,7 +103,7 @@ export default Vue.extend({
(this as any).os.getMeta().then(meta => { (this as any).os.getMeta().then(meta => {
this.name = meta.name; this.name = meta.name;
this.description = meta.description; this.description = meta.description;
this.broadcasts = meta.broadcasts; this.announcements = meta.broadcasts;
}); });
(this as any).api('stats').then(stats => { (this as any).api('stats').then(stats => {

View file

@ -1,5 +1,5 @@
<template> <template>
<div class="welcome"> <div class="wgwfgvvimdjvhjfwxropcwksnzftjqes">
<div> <div>
<img :src="$store.state.device.darkmode ? 'assets/title.dark.svg' : 'assets/title.light.svg'" :alt="name"> <img :src="$store.state.device.darkmode ? 'assets/title.dark.svg' : 'assets/title.light.svg'" :alt="name">
<p class="host">{{ host }}</p> <p class="host">{{ host }}</p>
@ -17,10 +17,19 @@
<div class="hashtags"> <div class="hashtags">
<router-link v-for="tag in tags" :key="tag" :to="`/tags/${ tag }`" :title="tag">#{{ tag }}</router-link> <router-link v-for="tag in tags" :key="tag" :to="`/tags/${ tag }`" :title="tag">#{{ tag }}</router-link>
</div> </div>
<div class="photos">
<div v-for="photo in photos" :style="`background-image: url(${photo.thumbnailUrl})`"></div>
</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>
</div> </div>
<div class="announcements" v-if="announcements && announcements.length > 0">
<article v-for="announcement in announcements">
<span class="title" v-html="announcement.title"></span>
<div v-html="announcement.text"></div>
</article>
</div>
<footer> <footer>
<small>{{ copyright }}</small> <small>{{ copyright }}</small>
</footer> </footer>
@ -41,13 +50,16 @@ export default Vue.extend({
host, host,
name: 'Misskey', name: 'Misskey',
description: '', description: '',
tags: [] tags: [],
photos: [],
announcements: []
}; };
}, },
created() { created() {
(this as any).os.getMeta().then(meta => { (this as any).os.getMeta().then(meta => {
this.name = meta.name; this.name = meta.name;
this.description = meta.description; this.description = meta.description;
this.announcements = meta.broadcasts;
}); });
(this as any).api('stats').then(stats => { (this as any).api('stats').then(stats => {
@ -57,12 +69,26 @@ export default Vue.extend({
(this as any).api('hashtags/trend').then(stats => { (this as any).api('hashtags/trend').then(stats => {
this.tags = stats.map(x => x.tag); this.tags = stats.map(x => x.tag);
}); });
const image = [
'image/jpeg',
'image/png',
'image/gif'
];
(this as any).api('notes/local-timeline', {
fileType: image,
limit: 6
}).then(notes => {
const files = [].concat(...notes.map(n => n.files));
this.photos = files.filter(f => image.includes(f.type)).slice(0, 6);
});
} }
}); });
</script> </script>
<style lang="stylus" scoped> <style lang="stylus" scoped>
.welcome root(isDark)
text-align center text-align center
//background #fff //background #fff
@ -145,6 +171,19 @@ export default Vue.extend({
> * > *
margin 0 16px margin 0 16px
> .photos
display grid
grid-template-rows 1fr 1fr 1fr
grid-template-columns 1fr 1fr
gap 8px
height 300px
margin-top 16px
> div
border-radius 4px
background-position center center
background-size cover
> .stats > .stats
margin 16px 0 margin 16px 0
padding 8px padding 8px
@ -156,6 +195,20 @@ export default Vue.extend({
> * > *
margin 0 8px margin 0 8px
> .announcements
margin 16px 0
> article
background isDark ? rgba(30, 129, 216, 0.2) : rgba(155, 196, 232, 0.2)
border-radius 6px
color isDark ? #fff : #3f4967
padding 16px
margin 8px 0
font-size 12px
> .title
font-weight bold
> footer > footer
text-align center text-align center
color #444 color #444
@ -165,4 +218,10 @@ export default Vue.extend({
margin 16px 0 0 0 margin 16px 0 0 0
opacity 0.7 opacity 0.7
.wgwfgvvimdjvhjfwxropcwksnzftjqes[data-darkmode]
root(true)
.wgwfgvvimdjvhjfwxropcwksnzftjqes:not([data-darkmode])
root(false)
</style> </style>