Fix datepicker alignment

With lots of flex love

Also make middle "week" button round

Fix stylelint warnings

Fix arrow positions

Fix JCB feedback

Signed-off-by: Thomas Citharel <tcit@tcit.fr>
This commit is contained in:
Thomas Citharel 2019-01-28 12:27:40 +01:00
parent 15a896063a
commit 0dc08e9c64
No known key found for this signature in database
GPG Key ID: A061B9DDE0CA0773
3 changed files with 68 additions and 30 deletions

View File

@ -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;

View File

@ -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);
}

View File

@ -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"]
}]