diff --git a/AUTHORS b/AUTHORS index 2c8d5a9845ef..a9403842b54e 100644 --- a/AUTHORS +++ b/AUTHORS @@ -947,6 +947,7 @@ answer newbie questions, and generally made Django that much better: Sachin Jat Sage M. Abdullah Sam Newman + Sam Searles-Bryant Samruddhi Dharankar Sander Dijkhuis Sanket Saurav diff --git a/django/contrib/admin/static/admin/css/responsive.css b/django/contrib/admin/static/admin/css/responsive.css index 1a8a0ce60053..509b4fb9ff8e 100644 --- a/django/contrib/admin/static/admin/css/responsive.css +++ b/django/contrib/admin/static/admin/css/responsive.css @@ -780,18 +780,6 @@ button { overflow: visible; } - .calendarbox:before, - .clockbox:before { - content: ""; - position: fixed; - top: 50%; - left: 50%; - width: 100vw; - height: 100vh; - background: rgba(0, 0, 0, 0.75); - transform: translate(-50%, -50%); - } - .calendarbox > *, .clockbox > * { position: relative; diff --git a/django/contrib/admin/static/admin/css/widgets.css b/django/contrib/admin/static/admin/css/widgets.css index 928c81f37612..55d91035a3b3 100644 --- a/django/contrib/admin/static/admin/css/widgets.css +++ b/django/contrib/admin/static/admin/css/widgets.css @@ -345,6 +345,13 @@ table p.datetime { padding-left: 0; } +.datetimeshortcuts button { + border: none; + background: none; + padding: 0; + cursor: pointer; +} + .datetimeshortcuts .clock-icon, .datetimeshortcuts .date-icon { position: relative; @@ -360,8 +367,8 @@ table p.datetime { background-size: 24px auto; } -.datetimeshortcuts a:focus .clock-icon, -.datetimeshortcuts a:hover .clock-icon { +.datetimeshortcuts button:focus .clock-icon, +.datetimeshortcuts button:hover .clock-icon { background-position: 0 -24px; } @@ -371,8 +378,8 @@ table p.datetime { top: -1px; } -.datetimeshortcuts a:focus .date-icon, -.datetimeshortcuts a:hover .date-icon { +.datetimeshortcuts button:focus .date-icon, +.datetimeshortcuts button:hover .date-icon { background-position: 0 -24px; } @@ -426,7 +433,8 @@ span.clearable-file-input label { .calendarbox, .clockbox { - margin: 5px auto; + margin: 0; + padding: 0; font-size: 0.75rem; width: 19em; text-align: center; @@ -436,11 +444,12 @@ span.clearable-file-input label { border-radius: 4px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15); overflow: hidden; - position: relative; + position: absolute; } -.clockbox { - width: auto; +.calendarbox::backdrop, +.clockbox::backdrop { + background: rgba(0, 0, 0, 0.75); } .calendar { diff --git a/django/contrib/admin/static/admin/js/admin/DateTimeShortcuts.js b/django/contrib/admin/static/admin/js/admin/DateTimeShortcuts.js index f6c61010d5e9..58a3523b009a 100644 --- a/django/contrib/admin/static/admin/js/admin/DateTimeShortcuts.js +++ b/django/contrib/admin/static/admin/js/admin/DateTimeShortcuts.js @@ -136,8 +136,8 @@ e.preventDefault(); DateTimeShortcuts.handleClockQuicklink(num, -1); }); - const clock_link = document.createElement("a"); - clock_link.href = "#"; + const clock_link = document.createElement("button"); + clock_link.type = "button"; clock_link.id = DateTimeShortcuts.clockLinkName + num; clock_link.addEventListener("click", function (e) { e.preventDefault(); @@ -169,7 +169,7 @@ // Create clock link div // // Markup looks like: - // + // - const clock_box = document.createElement("div"); - clock_box.style.display = "none"; - clock_box.style.position = "absolute"; + const clock_box = document.createElement("dialog"); clock_box.className = "clockbox module"; clock_box.id = DateTimeShortcuts.clockDivName + num; clock_box.setAttribute("role", "dialog"); @@ -239,7 +237,7 @@ }); document.addEventListener("keyup", function (event) { - if (event.which === 27) { + if (event.key === "Escape") { // ESC key closes popup DateTimeShortcuts.dismissClock(num); event.preventDefault(); @@ -261,25 +259,17 @@ } else { // since style's width is in em, it'd be tough to calculate // px value of it. let's use an estimated px for now - clock_box.style.left = findPosX(clock_link) - 110 + "px"; + clock_box.style.right = findPosX(clock_link) - 110 + "px"; } clock_box.style.top = Math.max(0, findPosY(clock_link) - 30) + "px"; // Show the clock box - clock_box.style.display = "block"; - document.addEventListener( - "click", - DateTimeShortcuts.dismissClockFunc[num], - ); + clock_box.showModal(); }, dismissClock: function (num) { - document.getElementById( - DateTimeShortcuts.clockDivName + num, - ).style.display = "none"; - document.removeEventListener( - "click", - DateTimeShortcuts.dismissClockFunc[num], - ); + document + .getElementById(DateTimeShortcuts.clockDivName + num) + .close(); }, handleClockQuicklink: function (num, val) { let d; @@ -333,8 +323,8 @@ e.preventDefault(); DateTimeShortcuts.handleCalendarQuickLink(num, 0); }); - const cal_link = document.createElement("a"); - cal_link.href = "#"; + const cal_link = document.createElement("button"); + cal_link.type = "button"; cal_link.id = DateTimeShortcuts.calendarLinkName + num; cal_link.addEventListener("click", function (e) { e.preventDefault(); @@ -367,7 +357,7 @@ // // Markup looks like: // - //