misskey/src/client/app/desktop/views/pages/welcome.vue

316 lines
5.7 KiB
Vue
Raw Normal View History

2018-02-10 06:56:33 +01:00
<template>
2018-02-10 11:57:37 +01:00
<div class="mk-welcome">
2018-05-23 08:48:41 +02:00
<button @click="dark">
2018-05-23 22:28:46 +02:00
<template v-if="$store.state.device.darkmode">%fa:moon%</template>
2018-05-23 08:48:41 +02:00
<template v-else>%fa:R moon%</template>
</button>
2018-09-03 16:23:50 +02:00
<mk-forkit class="forkit"/>
2018-08-19 14:07:18 +02:00
<div class="body">
2018-09-03 19:09:56 +02:00
<div class="main block">
2018-09-05 14:51:31 +02:00
<div>
<h1 v-if="name != 'Misskey'">{{ name }}</h1>
<h1 v-else><img :src="$store.state.device.darkmode ? 'assets/title.dark.svg' : 'assets/title.light.svg'" :alt="name"></h1>
<div class="info">
<span><b>{{ host }}</b> - <span v-html="'%i18n:@powered-by-misskey%'"></span></span>
<span class="stats" v-if="stats">
<span>%fa:user% {{ stats.originalUsersCount | number }}</span>
<span>%fa:pencil-alt% {{ stats.originalNotesCount | number }}</span>
</span>
</div>
<p class="desc" v-html="description || '%i18n:common.about%'"></p>
<p class="sign">
<span class="signup" @click="signup">%i18n:@signup%</span>
<span class="divider">|</span>
<span class="signin" @click="signin">%i18n:@signin%</span>
</p>
</div>
2018-09-05 14:51:31 +02:00
</div>
2018-09-03 16:23:50 +02:00
2018-09-05 14:51:31 +02:00
<div class="announcements block">
<header>%fa:broadcast-tower% %i18n:@announcements%</header>
<div>
<div v-for="broadcast in broadcasts">
<h1 v-html="broadcast.title"></h1>
<div v-html="broadcast.text"></div>
</div>
</div>
2018-09-03 16:23:50 +02:00
</div>
2018-09-05 14:51:31 +02:00
<div class="photos block">
<header>%fa:images% %i18n:@photos%</header>
<div>
<div v-for="photo in photos">
</div>
2018-09-03 16:23:50 +02:00
</div>
</div>
2018-09-03 19:09:56 +02:00
<div class="nav block">
2018-09-05 14:51:31 +02:00
<div>
<mk-nav class="nav"/>
</div>
2018-02-10 06:56:33 +01:00
</div>
2018-09-03 16:23:50 +02:00
2018-09-03 19:09:56 +02:00
<div class="side">
2018-09-05 14:51:31 +02:00
<div class="trends block">
<div>
<mk-trends/>
</div>
</div>
2018-09-03 19:09:56 +02:00
2018-09-05 14:51:31 +02:00
<div class="tl block">
<header>%fa:comment-alt R% %i18n:@timeline%</header>
<div>
<mk-welcome-timeline class="tl" :max="20"/>
</div>
</div>
2018-09-03 19:09:56 +02:00
</div>
2018-06-15 12:56:18 +02:00
</div>
2018-09-01 08:38:03 +02:00
2018-09-03 16:23:50 +02:00
<modal name="signup" :class="$store.state.device.darkmode ? 'modal-dark' : 'modal-light'" width="450px" height="auto" scrollable>
<header class="formHeader">%i18n:@signup%</header>
<mk-signup class="form"/>
</modal>
<modal name="signin" :class="$store.state.device.darkmode ? 'modal-dark' : 'modal-light'" width="450px" height="auto" scrollable>
<header class="formHeader">%i18n:@signin%</header>
<mk-signin class="form"/>
2018-02-11 04:08:43 +01:00
</modal>
2018-02-10 06:56:33 +01:00
</div>
</template>
2018-02-10 08:22:14 +01:00
<script lang="ts">
import Vue from 'vue';
2018-08-19 14:07:18 +02:00
import { host, copyright } from '../../../config';
2018-02-10 08:22:14 +01:00
export default Vue.extend({
2018-02-11 04:42:02 +01:00
data() {
return {
2018-06-15 12:56:18 +02:00
stats: null,
copyright,
2018-06-15 12:58:04 +02:00
host,
2018-08-19 14:07:18 +02:00
name: 'Misskey',
description: '',
2018-09-05 14:51:31 +02:00
broadcasts: [],
photos: []
2018-02-11 04:42:02 +01:00
};
},
2018-06-15 12:56:18 +02:00
created() {
2018-08-19 14:07:18 +02:00
(this as any).os.getMeta().then(meta => {
this.name = meta.name;
this.description = meta.description;
2018-09-03 16:23:50 +02:00
this.broadcasts = meta.broadcasts;
2018-08-19 14:07:18 +02:00
});
2018-06-15 12:56:18 +02:00
(this as any).api('stats').then(stats => {
this.stats = stats;
});
2018-06-15 12:56:18 +02:00
},
2018-02-10 08:22:14 +01:00
methods: {
signup() {
2018-09-01 13:47:49 +02:00
this.$modal.show('signup');
2018-02-11 04:08:43 +01:00
},
signin() {
2018-09-01 13:47:49 +02:00
this.$modal.show('signin');
2018-05-23 08:48:41 +02:00
},
dark() {
2018-05-25 08:06:35 +02:00
this.$store.commit('device/set', {
key: 'darkmode',
value: !this.$store.state.device.darkmode
});
2018-02-10 08:22:14 +01:00
}
2018-02-10 06:56:33 +01:00
}
2018-02-10 08:22:14 +01:00
});
</script>
2018-09-03 16:23:50 +02:00
<style lang="stylus">
#wait
right auto
left 15px
.v--modal-overlay
2018-09-03 19:09:56 +02:00
background rgba(0, 0, 0, 0.6)
2018-09-03 16:23:50 +02:00
.modal-light
.v--modal-box
color #777
.formHeader
border-bottom solid 1px #eee
.modal-dark
.v--modal-box
background #313543
color #fff
.formHeader
border-bottom solid 1px rgba(#000, 0.2)
.modal-light
.modal-dark
.form
padding 24px 48px 48px 48px
.formHeader
text-align center
padding 48px 0 12px 0
margin 0 48px
font-size 1.5em
2018-02-10 06:56:33 +01:00
</style>
<style lang="stylus" scoped>
2018-03-03 05:47:55 +01:00
@import '~const.styl'
2018-05-23 08:48:41 +02:00
root(isDark)
2018-06-15 12:56:18 +02:00
display flex
2018-06-06 17:53:31 +02:00
min-height 100vh
2018-09-03 16:23:50 +02:00
//background-color #00070F
//background-image url('/assets/bg.jpg')
//background-position center
//background-size cover
2018-06-15 12:56:18 +02:00
2018-09-03 16:23:50 +02:00
> .forkit
2018-06-15 12:56:18 +02:00
position absolute
top 0
right 0
2018-03-17 09:47:46 +01:00
2018-05-23 08:48:41 +02:00
> button
2018-05-28 14:31:20 +02:00
position fixed
2018-05-23 08:48:41 +02:00
z-index 1
2018-09-03 19:09:56 +02:00
bottom 16px
left 16px
2018-05-23 08:48:41 +02:00
padding 16px
font-size 18px
2018-09-03 16:23:50 +02:00
color isDark ? #fff : #444
2018-06-15 12:56:18 +02:00
> .body
2018-09-03 16:23:50 +02:00
display grid
2018-09-05 14:51:31 +02:00
grid-template-rows 1fr 1fr 64px
grid-template-columns 1fr 1fr 350px
2018-09-03 16:23:50 +02:00
gap 16px
width 100%
max-width 1200px
height 100vh
2018-09-05 11:09:31 +02:00
min-height 1000px
2018-09-03 16:23:50 +02:00
margin 0 auto
padding 64px
2018-09-03 19:09:56 +02:00
.block
2018-09-03 16:23:50 +02:00
color isDark ? #fff : #444
2018-09-05 14:51:31 +02:00
background isDark ? #282C37 : #fff
2018-09-03 16:23:50 +02:00
box-shadow 0 3px 8px rgba(0, 0, 0, 0.2)
//border-radius 8px
overflow auto
2018-09-05 14:51:31 +02:00
> header
padding 0 16px
line-height 48px
background isDark ? #313543 : #fff
& + div
max-height calc(100% - 48px)
> div
overflow auto
2018-09-03 16:23:50 +02:00
> .main
grid-row 1
2018-09-05 14:51:31 +02:00
grid-column 1 / 3
2018-09-03 19:09:56 +02:00
border-top solid 5px $theme-color
2018-09-03 16:23:50 +02:00
2018-09-05 14:51:31 +02:00
> div
padding 32px
2018-06-15 12:56:18 +02:00
2018-09-05 14:51:31 +02:00
> h1
margin 0
2018-09-05 14:51:31 +02:00
> img
margin -8px 0 0 -16px
max-width 280px
2018-09-05 14:51:31 +02:00
> .info
margin 0 auto 16px auto
width $width
font-size 14px
2018-09-05 14:51:31 +02:00
> .stats
margin-left 16px
padding-left 16px
border-left solid 1px isDark ? #fff : #444
2018-06-15 12:56:18 +02:00
2018-09-05 14:51:31 +02:00
> *
margin-right 16px
2018-06-15 12:56:18 +02:00
2018-09-05 14:51:31 +02:00
> .sign
font-size 120%
2018-06-15 12:56:18 +02:00
2018-09-05 14:51:31 +02:00
> .divider
margin 0 16px
2018-06-15 12:56:18 +02:00
2018-09-05 14:51:31 +02:00
> .signin
> .signup
cursor pointer
2018-06-16 00:31:35 +02:00
2018-09-05 14:51:31 +02:00
&:hover
color $theme-color
2018-06-16 00:31:35 +02:00
2018-09-05 14:51:31 +02:00
> .announcements
2018-09-03 16:23:50 +02:00
grid-row 2
grid-column 1
> div
2018-09-05 14:51:31 +02:00
padding 32px
2018-09-03 16:23:50 +02:00
2018-09-05 14:51:31 +02:00
> div
padding 0 0 16px 0
margin 0 0 16px 0
border-bottom 1px solid isDark ? rgba(#000, 0.2) : rgba(#000, 0.05)
> h1
margin 0
font-size 1.25em
> .photos
grid-row 2
grid-column 2
2018-09-03 16:23:50 +02:00
> .nav
display flex
justify-content center
align-items center
grid-row 3
2018-09-05 14:51:31 +02:00
grid-column 1 / 3
2018-09-03 16:23:50 +02:00
font-size 14px
2018-09-03 19:09:56 +02:00
> .side
display grid
2018-09-03 16:23:50 +02:00
grid-row 1 / 4
2018-09-05 14:51:31 +02:00
grid-column 3
2018-09-03 19:09:56 +02:00
grid-template-rows 1fr 350px
grid-template-columns 1fr
gap 16px
> .tl
grid-row 1
grid-column 1
overflow auto
> .trends
grid-row 2
grid-column 1
padding 8px
2018-02-10 06:56:33 +01:00
2018-05-23 08:48:41 +02:00
.mk-welcome[data-darkmode]
root(true)
.mk-welcome:not([data-darkmode])
root(false)
2018-02-10 06:56:33 +01:00
</style>