From 8814fc9c9c0614215f7e5dbe3ec1316c49e2b68d Mon Sep 17 00:00:00 2001 From: syuilo Date: Thu, 14 Jun 2018 07:22:50 +0900 Subject: [PATCH] wip --- .../app/common/views/components/index.ts | 2 + .../views/components/material/button.vue | 39 ++++++ .../views/components/material/input.vue | 41 ++---- src/client/app/mobile/script.ts | 2 - src/client/app/mobile/views/pages/welcome.vue | 123 ++++++------------ 5 files changed, 92 insertions(+), 115 deletions(-) create mode 100644 src/client/app/common/views/components/material/button.vue diff --git a/src/client/app/common/views/components/index.ts b/src/client/app/common/views/components/index.ts index 659c2aca2a..5dc466857c 100644 --- a/src/client/app/common/views/components/index.ts +++ b/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); diff --git a/src/client/app/common/views/components/material/button.vue b/src/client/app/common/views/components/material/button.vue new file mode 100644 index 0000000000..0c768cf4cc --- /dev/null +++ b/src/client/app/common/views/components/material/button.vue @@ -0,0 +1,39 @@ + + + + + diff --git a/src/client/app/common/views/components/material/input.vue b/src/client/app/common/views/components/material/input.vue index 42ff0bb4b8..fe64354908 100644 --- a/src/client/app/common/views/components/material/input.vue +++ b/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 - - &:before - content '' - 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 + padding 6px 12px + background #f5f5f5 + border-radius 6px > .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 - opacity 1 - transform scaleX(1) + background #eee > .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 diff --git a/src/client/app/mobile/script.ts b/src/client/app/mobile/script.ts index a6f4359432..8ee078d621 100644 --- a/src/client/app/mobile/script.ts +++ b/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'; diff --git a/src/client/app/mobile/views/pages/welcome.vue b/src/client/app/mobile/views/pages/welcome.vue index ceb1abb9a0..07891fd56b 100644 --- a/src/client/app/mobile/views/pages/welcome.vue +++ b/src/client/app/mobile/views/pages/welcome.vue @@ -1,27 +1,23 @@