mirror of
https://github.com/MisskeyIO/misskey
synced 2024-11-23 22:56:49 +09:00
New welcome page
This commit is contained in:
syuilo
parent
6a4d38045e
commit
1236a09247
@ -612,6 +612,13 @@ desktop/views/components/window.vue:
|
|||||||
popout: "ポップアウト"
|
popout: "ポップアウト"
|
||||||
close: "閉じる"
|
close: "閉じる"
|
||||||
|
|
||||||
|
desktop/views/pages/welcome.vue:
|
||||||
|
signin: "ログイン"
|
||||||
|
signup: "新規登録"
|
||||||
|
signin-button: "やってる"
|
||||||
|
signup-button: "やる"
|
||||||
|
timeline: "タイムライン"
|
||||||
|
|
||||||
desktop/views/pages/drive.vue:
|
desktop/views/pages/drive.vue:
|
||||||
title: "Misskey Drive"
|
title: "Misskey Drive"
|
||||||
|
|
||||||
|
|||||||
@ -1,23 +1,12 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="mk-welcome">
|
<div class="mk-welcome">
|
||||||
<main>
|
<main>
|
||||||
<div class="top">
|
<img src="assets/title.svg" alt="Misskey">
|
||||||
<div>
|
<p><button class="signup" @click="signup">%i18n:@signup-button%</button><button class="signin" @click="signin">%i18n:@signin-button%</button></p>
|
||||||
<div>
|
|
||||||
<h1>Share<br><span ref="share">Everything!</span><span class="cursor">_</span></h1>
|
<div class="tl">
|
||||||
<p>ようこそ！ <b>Misskey</b>はTwitter風ミニブログSNSです。思ったことや皆と共有したいことを投稿しましょう。タイムラインを見れば、皆の関心事をすぐにチェックすることもできます。<a :href="aboutUrl">詳しく...</a></p>
|
<header>%fa:comments R% %i18n:@timeline%<div><span></span><span></span><span></span></div></header>
|
||||||
<p><button class="signup" @click="signup">はじめる</button><button class="signin" @click="signin">ログイン</button></p>
|
<mk-welcome-timeline/>
|
||||||
<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>
|
|
||||||
<mk-welcome-timeline/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</main>
|
</main>
|
||||||
<mk-forkit/>
|
<mk-forkit/>
|
||||||
@ -28,11 +17,11 @@
|
|||||||
</div>
|
</div>
|
||||||
</footer>
|
</footer>
|
||||||
<modal name="signup" width="500px" height="auto" scrollable>
|
<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"/>
|
<mk-signup :class="$style.signupForm"/>
|
||||||
</modal>
|
</modal>
|
||||||
<modal name="signin" width="500px" height="auto" scrollable>
|
<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"/>
|
<mk-signin :class="$style.signinForm"/>
|
||||||
</modal>
|
</modal>
|
||||||
</div>
|
</div>
|
||||||
@ -42,58 +31,13 @@
|
|||||||
import Vue from 'vue';
|
import Vue from 'vue';
|
||||||
import { docsUrl, copyright, lang } from '../../../config';
|
import { docsUrl, copyright, lang } from '../../../config';
|
||||||
|
|
||||||
const shares = [
|
|
||||||
'Everything!',
|
|
||||||
'Webpages',
|
|
||||||
'Photos',
|
|
||||||
'Interests',
|
|
||||||
'Favorites'
|
|
||||||
];
|
|
||||||
|
|
||||||
export default Vue.extend({
|
export default Vue.extend({
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
aboutUrl: `${docsUrl}/${lang}/about`,
|
aboutUrl: `${docsUrl}/${lang}/about`,
|
||||||
copyright,
|
copyright
|
||||||
users: [],
|
|
||||||
clock: null,
|
|
||||||
i: 0
|
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
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: {
|
methods: {
|
||||||
signup() {
|
signup() {
|
||||||
this.$modal.show('signup');
|
this.$modal.show('signup');
|
||||||
@ -121,155 +65,95 @@ export default Vue.extend({
|
|||||||
display flex
|
display flex
|
||||||
flex-direction column
|
flex-direction column
|
||||||
flex 1
|
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
|
> main
|
||||||
display flex
|
|
||||||
flex 1
|
flex 1
|
||||||
|
padding 64px 0 0 0
|
||||||
|
text-align center
|
||||||
|
color #555
|
||||||
|
|
||||||
> .top
|
> img
|
||||||
display flex
|
width 350px
|
||||||
width 100%
|
|
||||||
|
|
||||||
> div
|
> p
|
||||||
display flex
|
margin 8px 0
|
||||||
max-width $width + 64px
|
line-height 2em
|
||||||
margin 0 auto
|
|
||||||
padding 80px 32px 0 32px
|
|
||||||
|
|
||||||
> *
|
button
|
||||||
margin-bottom 48px
|
padding 8px 16px
|
||||||
|
font-size inherit
|
||||||
|
|
||||||
> div:first-child
|
.signup
|
||||||
margin-right 48px
|
color $theme-color
|
||||||
color #fff
|
border solid 2px $theme-color
|
||||||
text-shadow 0 0 12px #172062
|
border-radius 4px
|
||||||
|
|
||||||
> h1
|
&:focus
|
||||||
margin 0
|
box-shadow 0 0 0 3px rgba($theme-color, 0.2)
|
||||||
font-weight bold
|
|
||||||
//font-variant small-caps
|
|
||||||
letter-spacing 12px
|
|
||||||
font-family 'Sarpanch', sans-serif
|
|
||||||
font-size 42px
|
|
||||||
line-height 48px
|
|
||||||
|
|
||||||
> .cursor
|
&:hover
|
||||||
animation cursor 1s infinite linear both
|
color $theme-color-foreground
|
||||||
|
background $theme-color
|
||||||
|
|
||||||
@keyframes cursor
|
&:active
|
||||||
0%
|
color $theme-color-foreground
|
||||||
opacity 1
|
background darken($theme-color, 10%)
|
||||||
50%
|
border-color darken($theme-color, 10%)
|
||||||
opacity 0
|
|
||||||
|
|
||||||
> p
|
.signin
|
||||||
margin 1em 0
|
&:hover
|
||||||
line-height 2em
|
color #000
|
||||||
|
|
||||||
button
|
> .tl
|
||||||
padding 8px 16px
|
margin 32px auto 0 auto
|
||||||
font-size inherit
|
width 410px
|
||||||
|
text-align left
|
||||||
|
background #fff
|
||||||
|
border-radius 8px
|
||||||
|
box-shadow 0 8px 32px rgba(#000, 0.15)
|
||||||
|
overflow hidden
|
||||||
|
|
||||||
.signup
|
> header
|
||||||
color $theme-color
|
z-index 1
|
||||||
border solid 2px $theme-color
|
padding 12px 16px
|
||||||
border-radius 4px
|
color #888d94
|
||||||
|
box-shadow 0 1px 0px rgba(#000, 0.1)
|
||||||
|
|
||||||
&:focus
|
> div
|
||||||
box-shadow 0 0 0 3px rgba($theme-color, 0.2)
|
position absolute
|
||||||
|
top 0
|
||||||
|
right 0
|
||||||
|
padding inherit
|
||||||
|
|
||||||
&:hover
|
> span
|
||||||
color $theme-color-foreground
|
display inline-block
|
||||||
background $theme-color
|
height 11px
|
||||||
|
width 11px
|
||||||
|
margin-left 6px
|
||||||
|
background #ccc
|
||||||
|
border-radius 100%
|
||||||
|
vertical-align middle
|
||||||
|
|
||||||
&:active
|
&:nth-child(1)
|
||||||
color $theme-color-foreground
|
background #5BCC8B
|
||||||
background darken($theme-color, 10%)
|
|
||||||
border-color darken($theme-color, 10%)
|
|
||||||
|
|
||||||
.signin
|
&:nth-child(2)
|
||||||
&:hover
|
background #E6BB46
|
||||||
color #fff
|
|
||||||
|
|
||||||
> .users
|
&:nth-child(3)
|
||||||
margin 16px 0 0 0
|
background #DF7065
|
||||||
|
|
||||||
> *
|
> .mk-welcome-timeline
|
||||||
display inline-block
|
max-height 350px
|
||||||
margin 4px
|
overflow auto
|
||||||
width 38px
|
|
||||||
height 38px
|
|
||||||
border-radius 6px
|
|
||||||
|
|
||||||
> div:last-child
|
|
||||||
|
|
||||||
> div
|
|
||||||
width 410px
|
|
||||||
background #fff
|
|
||||||
border-radius 8px
|
|
||||||
box-shadow 0 0 0 12px rgba(#000, 0.1)
|
|
||||||
overflow hidden
|
|
||||||
|
|
||||||
> header
|
|
||||||
z-index 1
|
|
||||||
padding 12px 16px
|
|
||||||
color #888d94
|
|
||||||
box-shadow 0 1px 0px rgba(#000, 0.1)
|
|
||||||
|
|
||||||
> div
|
|
||||||
position absolute
|
|
||||||
top 0
|
|
||||||
right 0
|
|
||||||
padding inherit
|
|
||||||
|
|
||||||
> span
|
|
||||||
display inline-block
|
|
||||||
height 11px
|
|
||||||
width 11px
|
|
||||||
margin-left 6px
|
|
||||||
background #ccc
|
|
||||||
border-radius 100%
|
|
||||||
vertical-align middle
|
|
||||||
|
|
||||||
&:nth-child(1)
|
|
||||||
background #5BCC8B
|
|
||||||
|
|
||||||
&:nth-child(2)
|
|
||||||
background #E6BB46
|
|
||||||
|
|
||||||
&:nth-child(3)
|
|
||||||
background #DF7065
|
|
||||||
|
|
||||||
> .mk-welcome-timeline
|
|
||||||
max-height 350px
|
|
||||||
overflow auto
|
|
||||||
|
|
||||||
> footer
|
> footer
|
||||||
font-size 12px
|
font-size 12px
|
||||||
color #949ea5
|
color #949ea5
|
||||||
|
|
||||||
> div
|
> div
|
||||||
max-width $width
|
|
||||||
margin 0 auto
|
margin 0 auto
|
||||||
padding 0 0 42px 0
|
padding 64px
|
||||||
text-align center
|
text-align center
|
||||||
|
|
||||||
> .c
|
> .c
|
||||||
|
|||||||
@ -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: 1021 B |
Loading…
Reference in New Issue
Block a user