New welcome page

This commit is contained in:
syuilo 2018-05-21 21:39:46 +09:00
parent 6a4d38045e
commit 1236a09247
3 changed files with 79 additions and 213 deletions

View file

@ -612,6 +612,13 @@ desktop/views/components/window.vue:
popout: "ポップアウト"
close: "閉じる"
desktop/views/pages/welcome.vue:
signin: "ログイン"
signup: "新規登録"
signin-button: "やってる"
signup-button: "やる"
timeline: "タイムライン"
desktop/views/pages/drive.vue:
title: "Misskey Drive"

View file

@ -1,24 +1,13 @@
<template>
<div class="mk-welcome">
<main>
<div class="top">
<div>
<div>
<h1>Share<br><span ref="share">Everything!</span><span class="cursor">_</span></h1>
<p>ようこそ <b>Misskey</b>はTwitter風ミニブログSNSです思ったことや皆と共有したいことを投稿しましょうタイムラインを見れば皆の関心事をすぐにチェックすることもできます<a :href="aboutUrl">詳しく...</a></p>
<p><button class="signup" @click="signup">はじめる</button><button class="signin" @click="signin">ログイン</button></p>
<div class="users">
<mk-avatar class="avatar" v-for="user in users" :key="user.id" :user="user"/>
</div>
</div>
<div>
<div>
<header>%fa:comments R% タイムライン<div><span></span><span></span><span></span></div></header>
<img src="assets/title.svg" alt="Misskey">
<p><button class="signup" @click="signup">%i18n:@signup-button%</button><button class="signin" @click="signin">%i18n:@signin-button%</button></p>
<div class="tl">
<header>%fa:comments R% %i18n:@timeline%<div><span></span><span></span><span></span></div></header>
<mk-welcome-timeline/>
</div>
</div>
</div>
</div>
</main>
<mk-forkit/>
<footer>
@ -28,11 +17,11 @@
</div>
</footer>
<modal name="signup" width="500px" height="auto" scrollable>
<header :class="$style.signupFormHeader">新規登録</header>
<header :class="$style.signupFormHeader">%i18n:@signup%</header>
<mk-signup :class="$style.signupForm"/>
</modal>
<modal name="signin" width="500px" height="auto" scrollable>
<header :class="$style.signinFormHeader">ログイン</header>
<header :class="$style.signinFormHeader">%i18n:@signin%</header>
<mk-signin :class="$style.signinForm"/>
</modal>
</div>
@ -42,58 +31,13 @@
import Vue from 'vue';
import { docsUrl, copyright, lang } from '../../../config';
const shares = [
'Everything!',
'Webpages',
'Photos',
'Interests',
'Favorites'
];
export default Vue.extend({
data() {
return {
aboutUrl: `${docsUrl}/${lang}/about`,
copyright,
users: [],
clock: null,
i: 0
copyright
};
},
mounted() {
(this as any).api('users', {
sort: '+follower',
limit: 20
}).then(users => {
this.users = users;
});
this.clock = setInterval(() => {
if (++this.i == shares.length) this.i = 0;
const speed = 70;
const text = (this.$refs.share as any).innerText;
for (let i = 0; i < text.length; i++) {
setTimeout(() => {
if (this.$refs.share) {
(this.$refs.share as any).innerText = text.substr(0, text.length - i);
}
}, i * speed)
}
setTimeout(() => {
const newText = shares[this.i];
for (let i = 0; i <= newText.length; i++) {
setTimeout(() => {
if (this.$refs.share) {
(this.$refs.share as any).innerText = newText.substr(0, i);
}
}, i * speed)
}
}, text.length * speed);
}, 4000);
},
beforeDestroy() {
clearInterval(this.clock);
},
methods: {
signup() {
this.$modal.show('signup');
@ -121,67 +65,18 @@ export default Vue.extend({
display flex
flex-direction column
flex 1
$width = 1000px
background linear-gradient(to bottom, #1e1d65, #bd6659)
//background-image url('/assets/welcome-bg.svg')
background-size cover
background-position top center
&:before
content ""
display block
position fixed
bottom 0
left 0
width 100%
height 100%
background-image url('/assets/welcome-fg.svg')
background-size cover
background-position bottom center
> main
display flex
flex 1
padding 64px 0 0 0
text-align center
color #555
> .top
display flex
width 100%
> div
display flex
max-width $width + 64px
margin 0 auto
padding 80px 32px 0 32px
> *
margin-bottom 48px
> div:first-child
margin-right 48px
color #fff
text-shadow 0 0 12px #172062
> h1
margin 0
font-weight bold
//font-variant small-caps
letter-spacing 12px
font-family 'Sarpanch', sans-serif
font-size 42px
line-height 48px
> .cursor
animation cursor 1s infinite linear both
@keyframes cursor
0%
opacity 1
50%
opacity 0
> img
width 350px
> p
margin 1em 0
margin 8px 0
line-height 2em
button
@ -207,25 +102,15 @@ export default Vue.extend({
.signin
&:hover
color #fff
color #000
> .users
margin 16px 0 0 0
> *
display inline-block
margin 4px
width 38px
height 38px
border-radius 6px
> div:last-child
> div
> .tl
margin 32px auto 0 auto
width 410px
text-align left
background #fff
border-radius 8px
box-shadow 0 0 0 12px rgba(#000, 0.1)
box-shadow 0 8px 32px rgba(#000, 0.15)
overflow hidden
> header
@ -267,9 +152,8 @@ export default Vue.extend({
color #949ea5
> div
max-width $width
margin 0 auto
padding 0 0 42px 0
padding 64px
text-align center
> .c

View file

@ -1,25 +0,0 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.3, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="レイヤー_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
y="0px" width="256px" height="256px" viewBox="0 0 256 256" enable-background="new 0 0 256 256" xml:space="preserve">
<circle fill="#2B2F2D" cx="128" cy="153.6" r="19.201"/>
<circle fill="#2B2F2D" cx="51.2" cy="153.6" r="19.2"/>
<circle fill="#2B2F2D" cx="204.8" cy="153.6" r="19.2"/>
<polyline fill="none" stroke="#2B2F2D" stroke-width="16" stroke-linejoin="round" stroke-miterlimit="10" points="51.2,153.6
89.601,102.4 128,153.6 166.4,102.4 204.799,153.6 "/>
<circle fill="#2B2F2D" cx="89.6" cy="102.4" r="19.2"/>
<circle fill="#2B2F2D" cx="166.4" cy="102.4" r="19.199"/>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
</svg>

Before

Width:  |  Height:  |  Size: 1,021 B