wip

src/client/app/common/views/components/index.ts

@@ -30,6 +30,7 @@ import Switch from './switch.vue';
 import Othello from './othello.vue';
 import welcomeTimeline from './welcome-timeline.vue';
 import uiInput from './material/input.vue';
+import uiButton from './material/button.vue';
 
 Vue.component('mk-analog-clock', analogClock);
 Vue.component('mk-menu', menu);
@@ -61,3 +62,4 @@ Vue.component('mk-switch', Switch);
 Vue.component('mk-othello', Othello);
 Vue.component('mk-welcome-timeline', welcomeTimeline);
 Vue.component('ui-input', uiInput);
+Vue.component('ui-button', uiButton);

src/client/app/common/views/components/material/button.vue

@@ -0,0 +1,39 @@
+<template>
+<div class="ui-button">
+	<button>
+		<slot></slot>
+	</button>
+</div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+export default Vue.extend({
+	props: {
+		type: {
+			type: String,
+			required: false
+		}
+	}
+});
+</script>
+
+<style lang="stylus" scoped>
+@import '~const.styl'
+
+.ui-button
+	> button
+		display block
+		width 100%
+		padding 0
+		color $theme-color-foreground
+		font-weight bold
+		font-size 16px
+		line-height 44px
+		background $theme-color
+		border none
+		border-radius 6px
+		outline none
+		box-shadow none
+
+</style>

src/client/app/common/views/components/material/input.vue

@@ -24,7 +24,7 @@ export default Vue.extend({
 		}
 	},
 	mounted() {
-		this.$refs.label.style.left = this.$refs.prefix.offsetWidth + 'px';
+		this.$refs.label.style.left = (this.$refs.prefix.offsetLeft + this.$refs.prefix.offsetWidth) + 'px';
 	},
 	methods: {
 		focus() {
@@ -38,39 +38,18 @@ export default Vue.extend({
 @import '~const.styl'
 
 .ui-input
-	padding-bottom 16px
+	margin-bottom 32px
 
 	> .input
 		display flex
 		margin-top 16px
-
+		padding 6px 12px
-		&:before
+		background #f5f5f5
-			content ''
+		border-radius 6px
-			display block
-			position absolute
-			bottom 0
-			left 0
-			right 0
-			height 1px
-			background rgba(#000, 0.42)
-
-		&:after
-			content ''
-			display block
-			position absolute
-			bottom 0
-			left 0
-			right 0
-			height 2px
-			background $theme-color
-			opacity 0
-			transform scaleX(0.12)
-			transition border 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1), transform 0.3s cubic-bezier(0.4, 0, 0.2, 1)
-			will-change border opacity transform
 
 		> .label
 			position absolute
-			top 0
+			top 6px
 			left 0
 			pointer-events none
 			transition 0.4s cubic-bezier(0.25, 0.8, 0.25, 1)
@@ -85,6 +64,8 @@ export default Vue.extend({
 			flex 1
 			width 100%
 			padding 0
+			font inherit
+			font-weight bold
 			font-size 16px
 			line-height 32px
 			background transparent
@@ -110,9 +91,7 @@ export default Vue.extend({
 
 	&.focused
 		> .input
-			&:after
+			background #eee
-				opacity 1
-				transform scaleX(1)
 
 			> .label
 				color $theme-color
@@ -121,7 +100,7 @@ export default Vue.extend({
 	&.filled
 		> .input
 			> .label
-				top -16px
+				top -20px
 				left 0 !important
 				font-size 12px
 				line-height 20px

src/client/app/mobile/script.ts

@@ -2,13 +2,11 @@
  * Mobile Client
  */
 
-import Vue from 'vue';
 import VueRouter from 'vue-router';
 
 // Style
 import './style.styl';
 import '../../element.scss';
-import '../../md.scss';
 
 import init from '../init';
 

src/client/app/mobile/views/pages/welcome.vue

@@ -1,27 +1,23 @@
 <template>
 <div class="welcome">
 	<div>
-		<h1><b>Misskey</b>へようこそ</h1>
+		<img :src="$store.state.device.darkmode ? 'assets/title.dark.svg' : 'assets/title.light.svg'" alt="Misskey">
-		<p>Twitter風ミニブログSNS、Misskeyへようこそ。共有したいことを投稿したり、タイムラインでみんなの投稿を読むこともできます。<br><a href="/signup">アカウントを作成する</a></p>
 		<div class="form">
-			<p>%fa:lock% ログイン</p>
+			<form @submit.prevent="onSubmit">
+				<ui-input v-model="username" type="text" pattern="^[a-zA-Z0-9_]+$" placeholder="ユーザー名" autofocus required @change="onUsernameChange">
+					<span>ユーザー名</span>
+					<span slot="prefix">@</span>
+					<span slot="suffix">@{{ host }}</span>
+				</ui-input>
+				<ui-input v-model="password" type="password" placeholder="パスワード" required>
+					<span>パスワード</span>
+					<span slot="prefix">%fa:lock%</span>
+				</ui-input>
+				<ui-input v-if="user && user.twoFactorEnabled" v-model="token" type="number" placeholder="トークン" required/>
+				<ui-button type="submit" :disabled="signing">{{ signing ? 'ログインしています' : 'ログイン' }}</ui-button>
+			</form>
 			<div>
-				<form @submit.prevent="onSubmit">
+				<a :href="`${apiUrl}/signin/twitter`">Twitterでログイン</a>
-					<ui-input v-model="username" type="text" pattern="^[a-zA-Z0-9_]+$" placeholder="ユーザー名" autofocus required @change="onUsernameChange">
-						<span>ユーザー名</span>
-						<span slot="prefix">@</span>
-						<span slot="suffix">@{{ host }}</span>
-					</ui-input>
-					<ui-input v-model="password" type="password" placeholder="パスワード" required>
-						<span>パスワード</span>
-						<span slot="prefix">%fa:lock%</span>
-					</ui-input>
-					<ui-input v-if="user && user.twoFactorEnabled" v-model="token" type="number" placeholder="トークン" required/>
-					<button type="submit" :disabled="signing">{{ signing ? 'ログインしています' : 'ログイン' }}</button>
-				</form>
-				<div>
-					<a :href="`${apiUrl}/signin/twitter`">Twitterでログイン</a>
-				</div>
 			</div>
 		</div>
 		<div class="tl">
@@ -92,81 +88,44 @@ export default Vue.extend({
 
 <style lang="stylus" scoped>
 .welcome
-	background linear-gradient(to bottom, #1e1d65, #bd6659)
+	background #fff
 
 	> div
 		padding 16px
 		margin 0 auto
 		max-width 500px
 
-		h1
+		> img
-			margin 0
+			display block
-			padding 8px
+			max-width 200px
-			font-size 1.5em
+			margin 0 auto
-			font-weight normal
-			color #cacac3
-
-			& + p
-				margin 0 0 16px 0
-				padding 0 8px 0 8px
-				color #949fa9
 
 		.form
 			margin-bottom 16px
-			background #fff
-			border solid 1px rgba(#000, 0.2)
-			border-radius 8px
-			overflow hidden
 
-			> p
+			> form
-				margin 0
+				padding 16px
-				padding 12px 20px
-				color #555
-				background #f5f5f5
-				border-bottom solid 1px #ddd
 
-			> div
+				button
-
+					display block
-				> form
+					width 100%
-					padding 16px
+					padding 10px
-					border-bottom solid 1px #ddd
+					margin 0
-
+					color #333
-					input
+					font-size 1em
-						display block
-						padding 12px
-						margin 0 0 16px 0
-						width 100%
-						font-size 1em
-						color rgba(#000, 0.7)
-						background #fff
-						outline none
-						border solid 1px #ddd
-						border-radius 4px
-
-					button
-						display block
-						width 100%
-						padding 10px
-						margin 0
-						color #333
-						font-size 1em
-						text-align center
-						text-decoration none
-						text-shadow 0 1px 0 rgba(255, 255, 255, 0.9)
-						background-image linear-gradient(#fafafa, #eaeaea)
-						border 1px solid #ddd
-						border-bottom-color #cecece
-						border-radius 4px
-
-						&:active
-							background-color #767676
-							background-image none
-							border-color #444
-							box-shadow 0 1px 3px rgba(#000, 0.075), inset 0 0 5px rgba(#000, 0.2)
-
-				> div
-					padding 16px
 					text-align center
+					text-decoration none
+					text-shadow 0 1px 0 rgba(255, 255, 255, 0.9)
+					background-image linear-gradient(#fafafa, #eaeaea)
+					border 1px solid #ddd
+					border-bottom-color #cecece
+					border-radius 4px
+
+					&:active
+						background-color #767676
+						background-image none
+						border-color #444
+						box-shadow 0 1px 3px rgba(#000, 0.075), inset 0 0 5px rgba(#000, 0.2)
 
 		> .tl
 			background #fff