Improved date picker UI

diff --git a/wcfsetup/install/files/js/WoltLab/WCF/Date/Picker.js b/wcfsetup/install/files/js/WoltLab/WCF/Date/Picker.js
index 721a49d9d407458280349f0ee670f2bb0714cf20..2001ffb937155e20af3a39806d516aa53b4cc948 100644 (file)
--- a/wcfsetup/install/files/js/WoltLab/WCF/Date/Picker.js
+++ b/wcfsetup/install/files/js/WoltLab/WCF/Date/Picker.js
@@ -459,7 +459,8 @@ define(['DateUtil', 'Language', 'ObjectMap', 'Dom/ChangeListener', 'Ui/Alignment
                        _datePicker.appendChild(header);
                        
                        _dateMonthPrevious = elCreate('a');
-                       _dateMonthPrevious.className = 'icon icon16 fa-arrow-left previous';
+                       _dateMonthPrevious.className = 'previous';
+                       _dateMonthPrevious.innerHTML = '<span class="icon icon16 fa-arrow-left"></span>';
                        _dateMonthPrevious.addEventListener(WCF_CLICK_EVENT, this.previousMonth.bind(this));
                        header.appendChild(_dateMonthPrevious);
                        
@@ -491,7 +492,8 @@ define(['DateUtil', 'Language', 'ObjectMap', 'Dom/ChangeListener', 'Ui/Alignment
                        monthYearContainer.appendChild(selectWrapper);
                        
                        _dateMonthNext = elCreate('a');
-                       _dateMonthNext.className = 'icon icon16 fa-arrow-right next';
+                       _dateMonthNext.className = 'next';
+                       _dateMonthNext.innerHTML = '<span class="icon icon16 fa-arrow-right"></span>';
                        _dateMonthNext.addEventListener(WCF_CLICK_EVENT, this.nextMonth.bind(this));
                        header.appendChild(_dateMonthNext);
                        

diff --git a/wcfsetup/install/files/style/ui/datePicker.scss b/wcfsetup/install/files/style/ui/datePicker.scss
index e66e593c9086cda1771b1125564662390e2a2fa0..fd0d06ed5dc91d8a12fdaef75772152d6d6dfe0e 100644 (file)
--- a/wcfsetup/install/files/style/ui/datePicker.scss
+++ b/wcfsetup/install/files/style/ui/datePicker.scss
@@ -1,7 +1,7 @@
 .inputAddon > .inputDatePicker {
        cursor: pointer;
-       flex: 0 1 150px;
-       min-width: 150px;
+       flex: 0 1 200px;
+       min-width: 200px;
 }
 
 .datePicker {
@@ -22,29 +22,25 @@
                display: block;
        }
        
-       > header,
-       > footer {
-               padding: 10px;
-               position: relative;
-               text-align: center;
-       }
-       
-       > header > a {
-               display: none;
-               position: absolute;
-               top: 50%;
-               transform: translateY(-50%);
+       > header {
+               align-items: center;
+               display: flex;
                
-               &.active {
+               > a {
                        display: block;
+                       flex: 0 0 auto;
+                       padding: 10px;
+                       
+                       &:not(.active) {
+                               visibility: hidden;
+                       }
                }
                
-               &.previous {
-                       left: 10px;
-               }
-               
-               &.next {
-                       right: 10px;
+               > span {
+                       display: block;
+                       flex: 1 1 auto;
+                       padding: 10px 0;
+                       text-align: center;
                }
        }
        
@@ -103,5 +99,8 @@
        > footer {
                border-top: 1px solid $wcfDropdownBorder;
                display: none;
+               padding: 10px;
+               position: relative;
+               text-align: center;
        }
 }