Merge pull request #1085 from nextcloud/bug/fix-datepicker

Fix datepicker alignment
nextcloud · Mar 24, 2019 · 8565883 · 8565883
2 parents 86fdafd + 0dc08e9
commit 8565883
Show file tree

Hide file tree

Showing 3 changed files with 68 additions and 30 deletions.
diff --git a/css/app/calendarlist.scss b/css/app/calendarlist.scss
@@ -325,7 +325,7 @@ ul#calendarlistcontainer {
 
 #datepicker-ng-show-container {
 	display: block !important;
-	height: 185px;
+	height: 205px;
 	overflow: hidden;
 	transition: 200ms ease-in-out all;
 }
@@ -334,6 +334,34 @@ ul#calendarlistcontainer {
 	height: 0;
 }
 
+div.uib-daypicker {
+	display: flex;
+
+	table {
+		flex: 1;
+
+		tbody {
+			flex: 1;
+			display: flex;
+			flex-direction: column;
+
+			tr.uib-weeks {
+				flex: 1;
+				display: flex;
+				width: 100%;
+				justify-content: space-evenly;
+
+				td.uib-day {
+					display: flex;
+					flex: 1;
+					align-items: center;
+					justify-content: center;
+				}
+			}
+		}
+	}
+}
+
 /* Spacing */
 #spacer {
 	height: 44px;

diff --git a/css/app/datepicker.scss b/css/app/datepicker.scss
@@ -42,18 +42,20 @@
 	font-weight: normal;
 }
 
-#datepicker table {
-	display: inline-block;
-	margin-left: 5px;
-}
+#datepicker {
+	table {
+		display: inline-block;
+		margin-left: 5px;
 
-#datepicker table td button {
-	margin: 0;
-	font-weight: 300;
-}
+		td button {
+			margin: 0;
+			font-weight: 300;
+		}
+	}
 
-#datepicker thead {
-	display: none;
+	thead {
+		display: none;
+	}
 }
 
 #datepicker td button {
@@ -75,12 +77,13 @@
 
 #datepicker table tbody button {
 	margin: 0;
-	padding: 6px 9px;
+	padding: 8px 9px;
 	background: transparent;
 	cursor: pointer;
 	border-radius: 0;
 	border-top: 0;
 	border-left: 0;
+	min-width: 34px;
 }
 
 #datepicker table tbody tr td button {
@@ -92,7 +95,7 @@
 }
 
 #datepicker table tbody button.active {
-	border-radius: 50%;
+	border-radius: var(--border-radius-pill);
 	background-color: $color-primary;
 	color: $color-primary-text;
 	font-weight: bold;
@@ -117,7 +120,7 @@
 #app-navigation .datepicker-heading,
 #app-navigation .togglebuttons {
 	display: flex;
-	justify-content: space-around;
+	justify-content: space-between;
 	margin: 0 5px;
 	width: calc(100% - 10px);
 }
@@ -134,6 +137,25 @@
 	flex-grow: 1;
 }
 
+#app-navigation .togglebuttons .button {
+
+	border-radius: 0;
+
+	&.first {
+		margin-right: -1px;
+		border-radius: var(--border-radius) 0 0 var(--border-radius);
+	}
+
+	&.middle {
+		margin: auto 0;
+	}
+
+	&.last {
+		margin-left: -1px;
+		border-radius: 0 var(--border-radius) var(--border-radius) 0;
+	}
+}
+
 #app-navigation .datepicker-heading .button:hover,
 #app-navigation .togglebuttons .button:hover,
 #app-navigation .datepicker-heading .button.active,
@@ -145,29 +167,17 @@
 #app-navigation .togglebuttons .icon-view-previous {
 	margin-right: -1px;
 	border-radius: 3px 0 0 3px;
-	flex-grow: 1;
-}
-
-#app-navigation .datepicker-heading .button.middle,
-#app-navigation .togglebuttons .button.middle {
-	margin-left: 0;
-	margin-right: 0;
-	border-radius: 0;
-	flex-grow: 2;
+	flex-grow: 0;
 }
 
 #app-navigation .datepicker-heading .icon-view-next,
 #app-navigation .togglebuttons .icon-view-next {
 	margin-left: -1px;
 	border-radius: 0 3px 3px 0;
-	flex-grow: 1;
+	flex-grow: 0;
 }
 
 #app-navigation .datepicker-heading .icon-view-previous,
 #app-navigation .datepicker-heading .icon-view-next {
 	width: 35px;
 }
-
-#app-navigation .datepicker-heading .button.middle {
-	width: calc(100% - 70px);
-}
diff --git a/js/.stylelintrc b/js/.stylelintrc
@@ -3,8 +3,8 @@
   "rules": {
     "indentation": "tab",
     "number-leading-zero": "never",
-    "no-descending-specificity": false,
-    "no-duplicate-selectors": false,
+    "no-descending-specificity": null,
+    "no-duplicate-selectors": null,
     "comment-empty-line-before": ["always", {
         "except": ["first-nested"]
     }]