Skip to content

Improve Calendar form field style - Issues #36933 & #33447 #40761

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
laoneo merged 11 commits into from
Sep 8, 2023
Merged

Improve Calendar form field style - Issues #36933 & #33447 #40761

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
f828378
Improve Calendar form field style
cyrez Jun 13, 2023
7eb2847
Improve Calendar form field style
cyrez Jun 13, 2023
205defe
Improve Calendar form field style
cyrez Jun 13, 2023
e41d52d
Add files via upload
cyrez Jun 13, 2023
8672e0b
Improve Calendar form field style (add RTL)
cyrez Jun 13, 2023
4f81e83
Add files via upload
cyrez Jun 13, 2023
98c6795
Improve Calendar form field style
cyrez Jun 13, 2023
c2d534b
Improve Calendar form field style
cyrez Jun 13, 2023
753f49d
Improve Calendar form field style
cyrez Jun 13, 2023
b668fc2
Merge branch '4.3-dev' into patch-54
cyrez Jun 23, 2023
145606e
Merge branch '4.4-dev' into patch-54
obuisard Sep 8, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
67 changes: 59 additions & 8 deletions build/media_source/system/css/fields/calendar-rtl.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,9 +2,11 @@
* @copyright (C) 2016 Open Source Matters, Inc. <https://www.joomla.org>
* @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;
Expand All @@ -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;
Expand Down Expand Up @@ -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;
Expand All @@ -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;
}
Expand All @@ -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;
}
Expand All @@ -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 {
Expand Down
66 changes: 58 additions & 8 deletions build/media_source/system/css/fields/calendar.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,9 +2,11 @@
* @copyright (C) 2016 Open Source Matters, Inc. <https://www.joomla.org>
* @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;
Expand All @@ -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;
Expand Down Expand Up @@ -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;
Expand All @@ -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;
}
Expand All @@ -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;
}
Expand All @@ -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 {
Expand Down
1 change: 1 addition & 0 deletions build/media_source/system/images/select-bg-rtl.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions build/media_source/system/images/select-bg.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
22 changes: 12 additions & 10 deletions build/media_source/system/js/fields/calendar.es5.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -632,15 +632,15 @@
row.className = "calendar-head-row";
this._nav_py = hh("&lsaquo;", 1, -2, '', {"text-align": "center", "font-size": "18px", "line-height": "18px"}, 'js-btn btn-prev-year'); // Previous year button
this.title = hh('<div style="text-align:center;font-size:18px"><span></span></div>', this.params.weekNumbers ? 6 : 5, 300);
this.title.className = "title";
this.title.className = "title title-year";
this._nav_ny = hh(" &rsaquo;", 1, 2, '', {"text-align": "center", "font-size": "18px", "line-height": "18px"}, 'js-btn btn-next-year'); // Next year button
}

row = createElement("tr", thead); // Head - month
row.className = "calendar-head-row";
this._nav_pm = hh("&lsaquo;", 1, -1, '', {"text-align": "center", "font-size": "2em", "line-height": "1em"}, 'js-btn btn-prev-month'); // Previous month button
this._nav_month = hh('<div style="text-align:center;font-size:1.2em"><span></span></div>', 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(" &rsaquo;", 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
Expand Down Expand Up @@ -698,19 +698,19 @@
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';
cell.innerHTML = " ";

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) {
Expand Down Expand Up @@ -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);
Expand All @@ -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 = "&#160;";
cell.colSpan = self.params.weekNumbers ? 3 : 2;
cell.colSpan = 1;
}

H.addEventListener("change", function (event) {
Expand Down