diff --git a/src/web/app/common/views/components/signup.vue b/src/web/app/common/views/components/signup.vue index 723555cdc4..5bb4647854 100644 --- a/src/web/app/common/views/components/signup.vue +++ b/src/web/app/common/views/components/signup.vue @@ -1,5 +1,5 @@ <template> -<form class="form" @submit.prevent="onSubmit" autocomplete="off"> +<form class="mk-signup" @submit.prevent="onSubmit" autocomplete="off"> <label class="username"> <p class="caption">%fa:at%%i18n:common.tags.mk-signup.username%</p> <input v-model="username" type="text" pattern="^[a-zA-Z0-9-]{3,20}$" placeholder="a~z、A~Z、0~9、-" autocomplete="off" required @keyup="onChangeUsername"/> @@ -24,7 +24,7 @@ </label> <label class="retype-password"> <p class="caption">%fa:lock%%i18n:common.tags.mk-signup.password%(%i18n:common.tags.mk-signup.retype%)</p> - <input v-model="passwordRetype" type="password" placeholder="%i18n:common.tags.mk-signup.retype-placeholder%" autocomplete="off" required @keyup="onChangePasswordRetype"/> + <input v-model="retypedPassword" type="password" placeholder="%i18n:common.tags.mk-signup.retype-placeholder%" autocomplete="off" required @keyup="onChangePasswordRetype"/> <p class="info" v-if="passwordRetypeState == 'match'" style="color:#3CB7B5">%fa:check .fw%%i18n:common.tags.mk-signup.password-matched%</p> <p class="info" v-if="passwordRetypeState == 'not-match'" style="color:#FF1161">%fa:exclamation-triangle .fw%%i18n:common.tags.mk-signup.password-not-matched%</p> </label> @@ -145,12 +145,12 @@ export default Vue.extend({ </script> <style lang="stylus" scoped> -.form +.mk-signup min-width 302px label display block - margin 16px 0 + margin 0 0 16px 0 > .caption margin 0 0 4px 0 @@ -260,7 +260,7 @@ export default Vue.extend({ color #555 button - margin 0 0 32px 0 + margin 0 padding 16px width 100% font-size 1em diff --git a/src/web/app/desktop/views/pages/welcome.vue b/src/web/app/desktop/views/pages/welcome.vue index b47e82faed..234239f6ee 100644 --- a/src/web/app/desktop/views/pages/welcome.vue +++ b/src/web/app/desktop/views/pages/welcome.vue @@ -1,5 +1,5 @@ <template> -<div class="root"> +<div class="mk-welcome"> <main> <div> <h1>Share<br>Everything!</h1> @@ -17,8 +17,9 @@ <p class="c">{ _COPYRIGHT_ }</p> </div> </footer> - <modal name="signup"> - <mk-signup></mk-signup> + <modal name="signup" width="500px" height="auto" scrollable> + <header :class="$style.signupFormHeader">新規登録</header> + <mk-signup :class="$style.signupForm"></mk-signup> </modal> </div> </template> @@ -43,7 +44,7 @@ export default Vue.extend({ </style> <style lang="stylus" scoped> -.root +.mk-welcome display flex flex-direction column flex 1 @@ -127,3 +128,15 @@ export default Vue.extend({ font-size 10px </style> + +<style lang="stylus" module> +.signupForm + padding 24px 48px 48px 48px + +.signupFormHeader + padding 48px 0 12px 0 + margin: 0 48px + font-size 1.5em + color #777 + border-bottom solid 1px #eee +</style>