diff --git a/build/media_source/system/css/fields/calendar-rtl.css b/build/media_source/system/css/fields/calendar-rtl.css index d22f9db4d6c51..674d226738fe7 100644 --- a/build/media_source/system/css/fields/calendar-rtl.css +++ b/build/media_source/system/css/fields/calendar-rtl.css @@ -2,9 +2,11 @@ * @copyright (C) 2016 Open Source Matters, Inc. * @license GNU General Public License version 2 or later; see LICENSE.txt */ - .js-calendar { + +.js-calendar { box-shadow: 0 0 15px 4px rgba(0,0,0,.15) !important; - } +} + .calendar-container { float: left; min-width: 160px; @@ -14,13 +16,23 @@ background-color: #ffffff !important; z-index: 1100 !important; } + +.calendar-container .nav { + display: table-cell; +} + .calendar-container table { table-layout: fixed; - max-width: 262px; + max-width: 268px; border-radius: 5px; background-color: #ffffff !important; z-index: 1100 !important; + margin-top: 2px; + margin-left: auto; + margin-right: auto; + padding: 3px; } + /* The main calendar widget. DIV containing a table. */ div.calendar-container table th, .calendar-container table td { box-shadow: none; @@ -100,6 +112,7 @@ div.calendar-container table td.title { /* This holds the current "month, year" width: auto; font-weight: bold; } + .calendar-container table tbody td.today:after { position: absolute; bottom: 3px; @@ -110,6 +123,7 @@ div.calendar-container table td.title { /* This holds the current "month, year" border-radius: 1.5px; background-color: #46a546; } + .calendar-container table tbody td.today.selected:after { background-color: #fff; } @@ -119,6 +133,7 @@ div.calendar-container table td.title { /* This holds the current "month, year" background: #3d8fd7; color: #fff; } + .calendar-container table tbody td.day:hover:after { background-color: #fff; } @@ -135,42 +150,78 @@ div.calendar-container table td.title { /* This holds the current "month, year" .calendar-container table tbody .emptyrow { /* Empty row (some months need less than 6 rows) */ display: none; } + .calendar-container .calendar-head-row td { padding: 4px 0 !important; border-bottom: none; } + .calendar-container .day-name { + padding-top: 0.5rem; font-size: 0.7rem; font-weight: bold; + border-bottom: none; } + .calendar-container .time td { - padding: 8px 8px 8px 0; + padding: 15px 3px 10px 0; + border-bottom: none; +} + +.calendar-container td.time-title { + display: block; + margin-top: 20px; } + +.calendar-container .time td select { + display: block; + width: 100%; + padding: 5px 9px 3px; + font-size: 16px; + font-weight: 400; + line-height: 1.5; + color: #212529; + background-color: #f0f4fb; + background-image: url("../../images/select-bg-rtl.svg"); + background-repeat: no-repeat; + background-position: left center; + background-size: max(100%, 58rem); + border: 1px solid #cdcdcd; + border-radius: 0.25rem; + appearance: none; +} + .buttons-wrapper { - padding: 5px 5px; - width:100%; + margin-bottom: 0 !important; + padding: 5px; + width: 100%; } + .buttons-wrapper .btn { min-width: 60px; color: #495057; border: 1px solid #495057; - margin-left: .5rem; + margin-left: 0; padding: 0 16px; line-height: 2.375rem; box-shadow: 1px 0 1px 1px rgba(0,0,0,.25); } + .buttons-wrapper .btn:hover { color: #fff; background: #1a466b; } + .buttons-wrapper .btn:last-child { margin-left: 0; } + .time .time-title { - background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3Csvg width='22' height='22' viewBox='0 0 1792 1792' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1024 544v448q0 14-9 23t-23 9h-320q-14 0-23-9t-9-23v-64q0-14 9-23t23-9h224v-352q0-14 9-23t23-9h64q14 0 23 9t9 23zm416 352q0-148-73-273t-198-198-273-73-273 73-198 198-73 273 73 273 198 198 273 73 273-73 198-198 73-273zm224 0q0 209-103 385.5t-279.5 279.5-385.5 103-385.5-103-279.5-279.5-103-385.5 103-385.5 279.5-279.5 385.5-103 385.5 103 279.5 279.5 103 385.5z'/%3E%3C/svg%3E"); + background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3Csvg width='24' height='24' viewBox='0 0 1792 1792' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1024 544v448q0 14-9 23t-23 9h-320q-14 0-23-9t-9-23v-64q0-14 9-23t23-9h224v-352q0-14 9-23t23-9h64q14 0 23 9t9 23zm416 352q0-148-73-273t-198-198-273-73-273 73-198 198-73 273 73 273 198 198 273 73 273-73 198-198 73-273zm224 0q0 209-103 385.5t-279.5 279.5-385.5 103-385.5-103-279.5-279.5-103-385.5 103-385.5 279.5-279.5 385.5-103 385.5 103 279.5 279.5 103 385.5z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; } + /* Fix cursor on js-btn and time select */ .calendar-container select, .calendar-container .js-btn { diff --git a/build/media_source/system/css/fields/calendar.css b/build/media_source/system/css/fields/calendar.css index 70dc7aa09bac3..038567b481fca 100644 --- a/build/media_source/system/css/fields/calendar.css +++ b/build/media_source/system/css/fields/calendar.css @@ -2,9 +2,11 @@ * @copyright (C) 2016 Open Source Matters, Inc. * @license GNU General Public License version 2 or later; see LICENSE.txt */ - .js-calendar { + +.js-calendar { box-shadow: 0 0 15px 4px rgba(0,0,0,.15) !important; - } +} + .calendar-container { float: left; min-width: 160px; @@ -14,13 +16,23 @@ background-color: #ffffff !important; z-index: 1100 !important; } + +.calendar-container .nav { + display: table-cell; +} + .calendar-container table { table-layout: fixed; - max-width: 262px; + max-width: 268px; border-radius: 5px; background-color: #ffffff !important; z-index: 1100 !important; + margin-top: 2px; + margin-left: auto; + margin-right: auto; + padding: 3px; } + /* The main calendar widget. DIV containing a table. */ div.calendar-container table th, .calendar-container table td { box-shadow: none; @@ -100,6 +112,7 @@ div.calendar-container table td.title { /* This holds the current "month, year" width: auto; font-weight: bold; } + .calendar-container table tbody td.today:after { position: absolute; bottom: 3px; @@ -110,6 +123,7 @@ div.calendar-container table td.title { /* This holds the current "month, year" border-radius: 1.5px; background-color: #46a546; } + .calendar-container table tbody td.today.selected:after { background-color: #fff; } @@ -119,6 +133,7 @@ div.calendar-container table td.title { /* This holds the current "month, year" background: #3d8fd7; color: #fff; } + .calendar-container table tbody td.day:hover:after { background-color: #fff; } @@ -140,38 +155,73 @@ div.calendar-container table td.title { /* This holds the current "month, year" padding: 4px 0 !important; border-bottom: none; } + .calendar-container .day-name { + padding-top: 0.5rem; font-size: 0.7rem; font-weight: bold; + border-bottom: none; } + .calendar-container .time td { - padding: 8px 0 8px 8px; + padding: 15px 3px 10px 0; + border-bottom: none; +} + +.calendar-container td.time-title { + display: block; + margin-top: 20px; } + +.calendar-container .time td select { + display: block; + width: 100%; + padding: 5px 9px 3px; + font-size: 16px; + font-weight: 400; + line-height: 1.5; + color: #212529; + background-color: #f0f4fb; + background-image: url("../../images/select-bg.svg"); + background-repeat: no-repeat; + background-position: right center; + background-size: max(100%, 58rem); + border: 1px solid #cdcdcd; + border-radius: 0.25rem; + appearance: none; +} + .buttons-wrapper { - padding: 5px 5px; - width:100%; + margin-bottom: 0 !important; + padding: 5px; + width: 100%; } + .buttons-wrapper .btn { min-width: 60px; color: #495057; border: 1px solid #495057; - margin-right: .5rem; + margin-right: 0; padding: 0 16px; line-height: 2.375rem; box-shadow: 1px 1px 1px 0 rgba(0,0,0,.25); } + .buttons-wrapper .btn:hover { color: #fff; background: #1a466b; } + .buttons-wrapper .btn:last-child { margin-right: 0; } + .time .time-title { - background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3Csvg width='22' height='22' viewBox='0 0 1792 1792' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1024 544v448q0 14-9 23t-23 9h-320q-14 0-23-9t-9-23v-64q0-14 9-23t23-9h224v-352q0-14 9-23t23-9h64q14 0 23 9t9 23zm416 352q0-148-73-273t-198-198-273-73-273 73-198 198-73 273 73 273 198 198 273 73 273-73 198-198 73-273zm224 0q0 209-103 385.5t-279.5 279.5-385.5 103-385.5-103-279.5-279.5-103-385.5 103-385.5 279.5-279.5 385.5-103 385.5 103 279.5 279.5 103 385.5z'/%3E%3C/svg%3E"); + background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3Csvg width='24' height='24' viewBox='0 0 1792 1792' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1024 544v448q0 14-9 23t-23 9h-320q-14 0-23-9t-9-23v-64q0-14 9-23t23-9h224v-352q0-14 9-23t23-9h64q14 0 23 9t9 23zm416 352q0-148-73-273t-198-198-273-73-273 73-198 198-73 273 73 273 198 198 273 73 273-73 198-198 73-273zm224 0q0 209-103 385.5t-279.5 279.5-385.5 103-385.5-103-279.5-279.5-103-385.5 103-385.5 279.5-279.5 385.5-103 385.5 103 279.5 279.5 103 385.5z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; } + /* Fix cursor on js-btn and time select */ .calendar-container select, .calendar-container .js-btn { diff --git a/build/media_source/system/images/select-bg-rtl.svg b/build/media_source/system/images/select-bg-rtl.svg new file mode 100644 index 0000000000000..a1ae9a3e60bb1 --- /dev/null +++ b/build/media_source/system/images/select-bg-rtl.svg @@ -0,0 +1 @@ + diff --git a/build/media_source/system/images/select-bg.svg b/build/media_source/system/images/select-bg.svg new file mode 100644 index 0000000000000..e2fefccf30242 --- /dev/null +++ b/build/media_source/system/images/select-bg.svg @@ -0,0 +1 @@ + diff --git a/build/media_source/system/js/fields/calendar.es5.js b/build/media_source/system/js/fields/calendar.es5.js index 2ab7a308c9005..b4bc2721020b4 100644 --- a/build/media_source/system/js/fields/calendar.es5.js +++ b/build/media_source/system/js/fields/calendar.es5.js @@ -632,7 +632,7 @@ row.className = "calendar-head-row"; this._nav_py = hh("‹", 1, -2, '', {"text-align": "center", "font-size": "18px", "line-height": "18px"}, 'js-btn btn-prev-year'); // Previous year button this.title = hh('
', this.params.weekNumbers ? 6 : 5, 300); - this.title.className = "title"; + this.title.className = "title title-year"; this._nav_ny = hh(" ›", 1, 2, '', {"text-align": "center", "font-size": "18px", "line-height": "18px"}, 'js-btn btn-next-year'); // Next year button } @@ -640,7 +640,7 @@ row.className = "calendar-head-row"; this._nav_pm = hh("‹", 1, -1, '', {"text-align": "center", "font-size": "2em", "line-height": "1em"}, 'js-btn btn-prev-month'); // Previous month button this._nav_month = hh('
', this.params.weekNumbers ? 6 : 5, 888, 'td', {'textAlign': 'center'}); - this._nav_month.className = "title"; + this._nav_month.className = "title title-month"; this._nav_nm = hh(" ›", 1, 1, '', {"text-align": "center", "font-size": "2em", "line-height": "1em"}, 'js-btn btn-next-month'); // Next month button row = createElement("tr", thead); // day names @@ -698,7 +698,7 @@ row = createElement("tr", tbody); row.className = "time"; - cell = createElement("td", row); + var cell = createElement("td", row); cell.className = "time time-title"; cell.colSpan = 1; cell.style.verticalAlign = 'middle'; @@ -706,11 +706,11 @@ var cell1 = createElement("td", row); cell1.className = "time hours-select"; - cell1.colSpan = 2; + cell1.colSpan = self.params.time24 ? 3 : 2; var cell2 = createElement("td", row); cell2.className = "time minutes-select"; - cell2.colSpan = 2; + cell2.colSpan = self.params.time24 ? 3 : 2; (function () { function makeTimePart(className, selected, range_start, range_end, cellTml) { @@ -750,11 +750,12 @@ M = makeTimePart("time time-minutes", mins, 0, 59, cell2), AP = null; - cell = createElement("td", row); - cell.className = "time ampm-select"; - cell.colSpan = self.params.weekNumbers ? 2 : 3; if (t12) { + cell = createElement("td", row); + cell.className = "time ampm-select"; + cell.colSpan = self.params.weekNumbers ? 3 : 2; + var selAttr = true, altDate = Date.parseFieldDate(self.inputField.getAttribute('data-alt-value'), self.params.dateFormat, 'gregorian', self.strings); pm = (altDate.getHours() >= 12); @@ -772,9 +773,10 @@ event.target.parentNode.parentNode.childNodes[2].childNodes[0].value, event.target.parentNode.parentNode.childNodes[3].childNodes[0].value); }, false); - } else { + } else if (self.params.weekNumbers) { + cell = createElement("td", row); cell.innerHTML = " "; - cell.colSpan = self.params.weekNumbers ? 3 : 2; + cell.colSpan = 1; } H.addEventListener("change", function (event) {