diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/client/app/common/views/components/signin.vue | 90 | ||||
| -rw-r--r-- | src/client/app/desktop/views/pages/welcome.vue | 48 |
2 files changed, 38 insertions, 100 deletions
diff --git a/src/client/app/common/views/components/signin.vue b/src/client/app/common/views/components/signin.vue index d876fc7a0c..3473d313c8 100644 --- a/src/client/app/common/views/components/signin.vue +++ b/src/client/app/common/views/components/signin.vue @@ -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> diff --git a/src/client/app/desktop/views/pages/welcome.vue b/src/client/app/desktop/views/pages/welcome.vue index 6f6a1b8665..e7b09331be 100644 --- a/src/client/app/desktop/views/pages/welcome.vue +++ b/src/client/app/desktop/views/pages/welcome.vue @@ -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 |