From 28ef19cc4d9ac35c61da4d8c811308f449582526 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bjo=CC=88rn=20Fromme?= <mail@bjo3rn.com>
Date: Wed, 24 Oct 2018 12:47:14 +0200
Subject: [PATCH] Improve styles of date of birth field

---
 .../Private/Assets/js/myep/components/Address.vue          | 5 +++--
 .../Resources/Private/Assets/scss/remix/_datepicker.scss   | 7 +++++++
 2 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/web/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/components/Address.vue b/web/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/components/Address.vue
index 9e9aa570..5ccef7ec 100644
--- a/web/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/components/Address.vue
+++ b/web/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/components/Address.vue
@@ -39,10 +39,10 @@
                         <input id="firstName" type="text" v-model="address.firstName" class="form-control">
                     </div>
                     <div class="form-group">
-                        <label for="dateOfBirth" class="control-label">
+                        <label class="control-label">
                             Geburtsdatum:
                         </label>
-                        <input id="dateOfBirth" type="text" ref="picker" class="form-control datepicker--visible">
+                        <span ref="picker"></span>
                     </div>
                 </div>
                 <div class="col-xs-12 col-md-6">
@@ -127,6 +127,7 @@
                 this.picker = $(this.$refs.picker).flatpickr({
                     dateFormat: 'd.m.Y',
                     locale: German,
+                    inline: true,
                     onChange: (selectedDates) => {
                         this.address.dateOfBirth = flatpickr.formatDate(selectedDates[0], 'Y-m-d')
                     }
diff --git a/web/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/remix/_datepicker.scss b/web/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/remix/_datepicker.scss
index f4e0f164..f6f4d48f 100644
--- a/web/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/remix/_datepicker.scss
+++ b/web/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/remix/_datepicker.scss
@@ -42,8 +42,12 @@
 
   &.inline {
     border: 1px solid $color-grey-light;
+  }
+
+  &.centered {
     margin: 0 auto 16px;
   }
+
 }
 
 .flatpickr-day {
@@ -57,6 +61,9 @@
 }
 
 .flatpickr-day.selected {
+  background: $color-brand-secondary;
+  border-color: $color-brand-secondary;
+
   &.startRange, &.endRange {
     background: $color-brand-secondary;
     border-color: $color-brand-secondary;