✌️
This commit is contained in:
syuilo
parent
b600d462c1
commit
65f35dc9f4
2 changed files with 38 additions and 100 deletions
|
|
@ -1,6 +1,7 @@
|
||||||
<template>
|
<template>
|
||||||
<form class="mk-signin" :class="{ signing }" @submit.prevent="onSubmit">
|
<form class="mk-signin" :class="{ signing }" @submit.prevent="onSubmit">
|
||||||
<ui-input v-model="username" type="text" pattern="^[a-zA-Z0-9_]+$" spellcheck="false" autofocus required @change="onUsernameChange">
|
<div class="avatar" :style="{ backgroundImage: user ? `url('${ user.avatarUrl }')` : null }"></div>
|
||||||
|
<ui-input v-model="username" type="text" pattern="^[a-zA-Z0-9_]+$" spellcheck="false" autofocus required @input="onUsernameChange">
|
||||||
<span>%i18n:@username%</span>
|
<span>%i18n:@username%</span>
|
||||||
<span slot="prefix">@</span>
|
<span slot="prefix">@</span>
|
||||||
<span slot="suffix">@{{ host }}</span>
|
<span slot="suffix">@{{ host }}</span>
|
||||||
|
|
@ -37,6 +38,8 @@ export default Vue.extend({
|
||||||
username: this.username
|
username: this.username
|
||||||
}).then(user => {
|
}).then(user => {
|
||||||
this.user = user;
|
this.user = user;
|
||||||
|
}, () => {
|
||||||
|
this.user = null;
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
onSubmit() {
|
onSubmit() {
|
||||||
|
|
@ -61,84 +64,19 @@ export default Vue.extend({
|
||||||
@import '~const.styl'
|
@import '~const.styl'
|
||||||
|
|
||||||
.mk-signin
|
.mk-signin
|
||||||
|
color #555
|
||||||
|
|
||||||
&.signing
|
&.signing
|
||||||
&, *
|
&, *
|
||||||
cursor wait !important
|
cursor wait !important
|
||||||
|
|
||||||
label
|
> .avatar
|
||||||
display block
|
margin 16px auto 0 auto
|
||||||
margin 12px 0
|
width 64px
|
||||||
|
height 64px
|
||||||
[data-fa]
|
background #ddd
|
||||||
display block
|
background-position center
|
||||||
pointer-events none
|
background-size cover
|
||||||
position absolute
|
border-radius 100%
|
||||||
bottom 0
|
|
||||||
top 0
|
|
||||||
left 0
|
|
||||||
z-index 1
|
|
||||||
margin auto
|
|
||||||
padding 0 16px
|
|
||||||
height 1em
|
|
||||||
color #898786
|
|
||||||
|
|
||||||
input[type=text]
|
|
||||||
input[type=password]
|
|
||||||
input[type=number]
|
|
||||||
user-select text
|
|
||||||
display inline-block
|
|
||||||
cursor auto
|
|
||||||
padding 0 0 0 38px
|
|
||||||
margin 0
|
|
||||||
width 100%
|
|
||||||
line-height 44px
|
|
||||||
font-size 1em
|
|
||||||
color rgba(#000, 0.7)
|
|
||||||
background #fff
|
|
||||||
outline none
|
|
||||||
border solid 1px #eee
|
|
||||||
border-radius 4px
|
|
||||||
|
|
||||||
&:hover
|
|
||||||
background rgba(255, 255, 255, 0.7)
|
|
||||||
border-color #ddd
|
|
||||||
|
|
||||||
& + i
|
|
||||||
color #797776
|
|
||||||
|
|
||||||
&:focus
|
|
||||||
background #fff
|
|
||||||
border-color #ccc
|
|
||||||
|
|
||||||
& + i
|
|
||||||
color #797776
|
|
||||||
|
|
||||||
[type=submit]
|
|
||||||
cursor pointer
|
|
||||||
padding 16px
|
|
||||||
margin -6px 0 0 0
|
|
||||||
width 100%
|
|
||||||
font-size 1.2em
|
|
||||||
color rgba(#000, 0.5)
|
|
||||||
outline none
|
|
||||||
border none
|
|
||||||
border-radius 0
|
|
||||||
background transparent
|
|
||||||
transition all .5s ease
|
|
||||||
|
|
||||||
&:hover
|
|
||||||
color $theme-color
|
|
||||||
transition all .2s ease
|
|
||||||
|
|
||||||
&:focus
|
|
||||||
color $theme-color
|
|
||||||
transition all .2s ease
|
|
||||||
|
|
||||||
&:active
|
|
||||||
color darken($theme-color, 30%)
|
|
||||||
transition all .2s ease
|
|
||||||
|
|
||||||
&:disabled
|
|
||||||
opacity 0.7
|
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -7,13 +7,6 @@
|
||||||
</button>
|
</button>
|
||||||
<div class="body" :style="{ backgroundImage: `url('${ welcomeBgUrl }')` }">
|
<div class="body" :style="{ backgroundImage: `url('${ welcomeBgUrl }')` }">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<div class="info">
|
|
||||||
<span>%i18n:common.misskey% <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>
|
|
||||||
<main>
|
<main>
|
||||||
<div class="about">
|
<div class="about">
|
||||||
<h1 v-if="name">{{ name }}</h1>
|
<h1 v-if="name">{{ name }}</h1>
|
||||||
|
|
@ -26,6 +19,13 @@
|
||||||
<mk-signin/>
|
<mk-signin/>
|
||||||
</div>
|
</div>
|
||||||
</main>
|
</main>
|
||||||
|
<div class="info">
|
||||||
|
<span>%i18n:common.misskey% <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>
|
||||||
<mk-nav class="nav"/>
|
<mk-nav class="nav"/>
|
||||||
</div>
|
</div>
|
||||||
<mk-forkit class="forkit"/>
|
<mk-forkit class="forkit"/>
|
||||||
|
|
@ -165,23 +165,6 @@ root(isDark)
|
||||||
$loginWidth = 340px
|
$loginWidth = 340px
|
||||||
$width = $aboutWidth + $loginWidth
|
$width = $aboutWidth + $loginWidth
|
||||||
|
|
||||||
> .info
|
|
||||||
margin 0 auto 16px auto
|
|
||||||
padding 12px
|
|
||||||
width $width
|
|
||||||
font-size 14px
|
|
||||||
color #fff
|
|
||||||
background rgba(#000, 0.2)
|
|
||||||
border-radius 8px
|
|
||||||
|
|
||||||
> .stats
|
|
||||||
margin-left 16px
|
|
||||||
padding-left 16px
|
|
||||||
border-left solid 1px #fff
|
|
||||||
|
|
||||||
> *
|
|
||||||
margin-right 16px
|
|
||||||
|
|
||||||
> main
|
> main
|
||||||
display flex
|
display flex
|
||||||
margin auto
|
margin auto
|
||||||
|
|
@ -222,6 +205,23 @@ root(isDark)
|
||||||
padding 16px 32px 32px 32px
|
padding 16px 32px 32px 32px
|
||||||
background #f5f5f5
|
background #f5f5f5
|
||||||
|
|
||||||
|
> .info
|
||||||
|
margin 16px auto
|
||||||
|
padding 12px
|
||||||
|
width $width
|
||||||
|
font-size 14px
|
||||||
|
color #fff
|
||||||
|
background rgba(#000, 0.2)
|
||||||
|
border-radius 8px
|
||||||
|
|
||||||
|
> .stats
|
||||||
|
margin-left 16px
|
||||||
|
padding-left 16px
|
||||||
|
border-left solid 1px #fff
|
||||||
|
|
||||||
|
> *
|
||||||
|
margin-right 16px
|
||||||
|
|
||||||
> .nav
|
> .nav
|
||||||
display block
|
display block
|
||||||
margin 16px 0
|
margin 16px 0
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue