This commit is contained in:
syuilo
parent
b600d462c1
commit
65f35dc9f4
|
|
@ -1,6 +1,7 @@
|
|||
<template>
|
||||
<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 slot="prefix">@</span>
|
||||
<span slot="suffix">@{{ host }}</span>
|
||||
|
|
@ -37,6 +38,8 @@ export default Vue.extend({
|
|||
username: this.username
|
||||
}).then(user => {
|
||||
this.user = user;
|
||||
}, () => {
|
||||
this.user = null;
|
||||
});
|
||||
},
|
||||
onSubmit() {
|
||||
|
|
@ -61,84 +64,19 @@ export default Vue.extend({
|
|||
@import '~const.styl'
|
||||
|
||||
.mk-signin
|
||||
color #555
|
||||
|
||||
&.signing
|
||||
&, *
|
||||
cursor wait !important
|
||||
|
||||
label
|
||||
display block
|
||||
margin 12px 0
|
||||
|
||||
[data-fa]
|
||||
display block
|
||||
pointer-events none
|
||||
position absolute
|
||||
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
|
||||
> .avatar
|
||||
margin 16px auto 0 auto
|
||||
width 64px
|
||||
height 64px
|
||||
background #ddd
|
||||
background-position center
|
||||
background-size cover
|
||||
border-radius 100%
|
||||
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -7,13 +7,6 @@
|
|||
</button>
|
||||
<div class="body" :style="{ backgroundImage: `url('${ welcomeBgUrl }')` }">
|
||||
<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>
|
||||
<div class="about">
|
||||
<h1 v-if="name">{{ name }}</h1>
|
||||
|
|
@ -26,6 +19,13 @@
|
|||
<mk-signin/>
|
||||
</div>
|
||||
</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"/>
|
||||
</div>
|
||||
<mk-forkit class="forkit"/>
|
||||
|
|
@ -165,23 +165,6 @@ root(isDark)
|
|||
$loginWidth = 340px
|
||||
$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
|
||||
display flex
|
||||
margin auto
|
||||
|
|
@ -222,6 +205,23 @@ root(isDark)
|
|||
padding 16px 32px 32px 32px
|
||||
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
|
||||
display block
|
||||
margin 16px 0
|
||||
|
|
|
|||
Loading…
Reference in New Issue