rudeshark.net/src/client/app/desktop/views/pages/welcome.vue

288 lines
5.4 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-06-15 12:56:18 +02:00
<img ref="pointer" class="pointer" src="/assets/pointer.png" alt="">
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-06-15 12:56:18 +02:00
<div class="body" :style="{ backgroundImage: `url('${ welcomeBgUrl }')` }">
<div class="container">
<div class="info">
2018-08-07 06:25:50 +02:00
<span><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>
2018-06-15 12:56:18 +02:00
<main>
<div class="about">
2018-08-07 06:25:50 +02:00
<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>
2018-08-10 13:11:54 +02:00
<p class="powerd-by" v-if="name != 'Misskey'" v-html="'%i18n:@powered-by-misskey%'"></p>
2018-06-15 12:56:18 +02:00
<p class="desc" v-html="description || '%i18n:common.about%'"></p>
2018-06-18 10:25:20 +02:00
<a ref="signup" @click="signup">📦 %i18n:@signup%</a>
2018-06-15 12:56:18 +02:00
</div>
<div class="login">
<mk-signin/>
</div>
</main>
<div class="hashtags">
<router-link v-for="tag in tags" :key="tag" :to="`/tags/${ tag }`" :title="tag">#{{ tag }}</router-link>
2018-06-16 00:31:35 +02:00
</div>
2018-06-15 12:56:18 +02:00
<mk-nav class="nav"/>
2018-02-10 06:56:33 +01:00
</div>
2018-06-15 12:56:18 +02:00
<mk-forkit class="forkit"/>
2018-08-07 06:25:50 +02:00
<img src="assets/title.dark.svg" :alt="name">
2018-06-15 12:56:18 +02:00
</div>
<div class="tl">
<mk-welcome-timeline :max="20"/>
2018-06-15 12:56:18 +02:00
</div>
2018-02-10 11:57:37 +01:00
<modal name="signup" width="500px" height="auto" scrollable>
2018-05-21 14:39:46 +02:00
<header :class="$style.signupFormHeader">%i18n:@signup%</header>
2018-02-11 04:08:43 +01:00
<mk-signup :class="$style.signupForm"/>
</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-06-15 12:58:04 +02:00
import { host, name, description, copyright, welcomeBgUrl } 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,
welcomeBgUrl,
2018-06-15 12:58:04 +02:00
host,
name,
2018-06-16 00:13:45 +02:00
description,
pointerInterval: null,
tags: []
2018-02-11 04:42:02 +01:00
};
},
2018-06-15 12:56:18 +02:00
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);
});
2018-06-15 12:56:18 +02:00
},
mounted() {
2018-06-16 00:13:45 +02:00
this.point();
this.pointerInterval = setInterval(this.point, 100);
},
beforeDestroy() {
clearInterval(this.pointerInterval);
2018-06-15 12:56:18 +02:00
},
2018-02-10 08:22:14 +01:00
methods: {
2018-06-16 00:13:45 +02:00
point() {
const x = this.$refs.signup.getBoundingClientRect();
this.$refs.pointer.style.top = x.top + x.height + 'px';
this.$refs.pointer.style.left = x.left + 'px';
},
2018-02-10 08:22:14 +01:00
signup() {
this.$modal.show('signup');
2018-02-11 04:08:43 +01:00
},
signin() {
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>
<style>
#wait {
right: auto;
left: 15px;
}
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-06-15 12:56:18 +02:00
> .pointer
display block
position absolute
z-index 1
top 0
right 0
width 180px
margin 0 0 0 -180px
2018-06-16 00:13:45 +02:00
transform rotateY(180deg) translateX(-10px) translateY(-48px)
2018-06-15 12:56:18 +02:00
pointer-events none
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
top 0
left 0
padding 16px
font-size 18px
2018-06-15 12:56:18 +02:00
color #fff
2018-05-23 08:48:41 +02:00
2018-06-15 12:56:18 +02:00
display none // TODO
> .body
2018-02-10 06:56:33 +01:00
flex 1
2018-05-21 14:39:46 +02:00
padding 64px 0 0 0
text-align center
2018-06-15 12:56:18 +02:00
background #578394
background-position center
background-size cover
&:before
content ''
display block
position absolute
top 0
left 0
right 0
bottom 0
background rgba(#000, 0.5)
> .forkit
position absolute
top 0
right 0
> img
position absolute
bottom 16px
right 16px
width 150px
> .container
$aboutWidth = 380px
$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
2018-06-15 12:56:18 +02:00
> main
display flex
margin auto
width $width
2018-05-28 14:31:20 +02:00
border-radius 8px
overflow hidden
2018-06-15 12:56:18 +02:00
box-shadow 0 2px 8px rgba(#000, 0.3)
> .about
width $aboutWidth
color #444
background #fff
> h1
margin 0 0 16px 0
padding 32px 32px 0 32px
color #444
> img
width 170px
vertical-align bottom
> .powerd-by
margin 16px
opacity 0.7
> .desc
margin 0
padding 0 32px 16px 32px
> a
display inline-block
margin 0 0 32px 0
font-weight bold
> .login
width $loginWidth
padding 16px 32px 32px 32px
background isDark ? #2e3440 : #f5f5f5
2018-06-15 12:56:18 +02:00
> .hashtags
2018-06-16 00:31:35 +02:00
margin 16px auto
width $width
font-size 14px
color #fff
background rgba(#000, 0.3)
2018-06-16 00:31:35 +02:00
border-radius 8px
> *
display inline-block
margin 14px
2018-06-16 00:31:35 +02:00
2018-06-15 12:56:18 +02:00
> .nav
display block
margin 16px 0
font-size 14px
color #fff
> .tl
margin 0
width 410px
height 100vh
text-align left
background isDark ? #313543 : #fff
> *
max-height 100%
overflow auto
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>
2018-02-10 11:57:37 +01:00
<style lang="stylus" module>
.signupForm
padding 24px 48px 48px 48px
.signupFormHeader
padding 48px 0 12px 0
margin: 0 48px
font-size 1.5em
color #777
border-bottom solid 1px #eee
2018-02-11 04:08:43 +01:00
.signinForm
padding 24px 48px 48px 48px
.signinFormHeader
padding 48px 0 12px 0
margin: 0 48px
font-size 1.5em
color #777
border-bottom solid 1px #eee
2018-02-11 04:42:02 +01:00
.nav
a
color #666
2018-02-10 11:57:37 +01:00
</style>