From e0b107a3a0faeb4fe2aaf8883fcef1e3abee7e49 Mon Sep 17 00:00:00 2001 From: ibrokemypie <ibrokemypie@bastardi.net> Date: Thu, 20 Dec 2018 18:01:29 +1000 Subject: [PATCH] Fix overlap of birthday label on datepicker (#3697) --- .../common/views/components/profile-editor.vue | 2 +- .../app/common/views/components/ui/input.vue | 15 +++++++++++++++ 2 files changed, 16 insertions(+), 1 deletion(-) diff --git a/src/client/app/common/views/components/profile-editor.vue b/src/client/app/common/views/components/profile-editor.vue index 33c53c7dc8..5f462a2586 100644 --- a/src/client/app/common/views/components/profile-editor.vue +++ b/src/client/app/common/views/components/profile-editor.vue @@ -24,7 +24,7 @@ </ui-input> <ui-input v-model="birthday" type="date"> - <span>{{ $t('birthday') }}</span> + <span slot="title">{{ $t('birthday') }}</span> <span slot="prefix"><fa icon="birthday-cake"/></span> </ui-input> diff --git a/src/client/app/common/views/components/ui/input.vue b/src/client/app/common/views/components/ui/input.vue index d735cc1c2f..d9683e2b90 100644 --- a/src/client/app/common/views/components/ui/input.vue +++ b/src/client/app/common/views/components/ui/input.vue @@ -6,6 +6,7 @@ <div class="value" ref="passwordMetar"></div> </div> <span class="label" ref="label"><slot></slot></span> + <span class="title" ref="title"><slot name="title"></slot></span> <div class="prefix" ref="prefix"><slot name="prefix"></slot></div> <template v-if="type != 'file'"> <input ref="input" @@ -281,6 +282,20 @@ root(fill) transform-origin top left transform scale(1) + > .title + position absolute + z-index 1 + top fill ? -24px : -17px + left 0 !important + pointer-events none + font-size 16px + line-height 32px + color var(--inputLabel) + pointer-events none + //will-change transform + transform-origin top left + transform scale(.75) + > input display block width 100%