From ae760cb5aeeb233c8be0844ff1139f40ad943204 Mon Sep 17 00:00:00 2001
From: Alexander Ebert <ebert@woltlab.com>
Date: Tue, 28 Jun 2016 13:59:15 +0200
Subject: [PATCH] Improved date picker UI

---
 .../files/js/WoltLab/WCF/Date/Picker.js       |  6 ++-
 .../install/files/style/ui/datePicker.scss    | 41 +++++++++----------
 2 files changed, 24 insertions(+), 23 deletions(-)

diff --git a/wcfsetup/install/files/js/WoltLab/WCF/Date/Picker.js b/wcfsetup/install/files/js/WoltLab/WCF/Date/Picker.js
index 721a49d9d4..2001ffb937 100644
--- 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 e66e593c90..fd0d06ed5d 100644
--- 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;
 	}
 }
-- 
2.20.1