diff --git a/internal/template/templates/common/layout.html b/internal/template/templates/common/layout.html index ca3529c035f..cbd0cab96ed 100644 --- a/internal/template/templates/common/layout.html +++ b/internal/template/templates/common/layout.html @@ -126,62 +126,62 @@
{{template "content" .}}
- + diff --git a/internal/ui/static/css/common.css b/internal/ui/static/css/common.css index 746e000e042..171e73f0feb 100644 --- a/internal/ui/static/css/common.css +++ b/internal/ui/static/css/common.css @@ -619,22 +619,11 @@ template { display: none; } -#modal-left { - position: fixed; - top: 0; - left: 0; - bottom: 0; - width: 380px; - overflow: auto; - color: var(--modal-color); - background: var(--modal-background); - box-shadow: var(--modal-box-shadow); - padding: 30px 5px 5px; -} - -#modal-left h3 { - font-weight: 400; - margin: 0; +dialog { + max-height: none; + height: 100vh; + border: none; + padding: 1%; } .btn-close-modal { @@ -1342,4 +1331,4 @@ footer .elevator { .pagination-top .elevator, .pagination-entry-top .elevator { display: none; -} +} \ No newline at end of file diff --git a/internal/ui/static/css/dark.css b/internal/ui/static/css/dark.css index 8d7162ea2b5..deb0f94ffd4 100644 --- a/internal/ui/static/css/dark.css +++ b/internal/ui/static/css/dark.css @@ -62,10 +62,6 @@ --panel-border-color: #555; --panel-color: #9b9b9b; - --modal-background: #333; - --modal-color: #efefef; - --modal-box-shadow: 0 0 10px rgba(82, 168, 236, 0.6); - --pagination-link-color: #aaa; --pagination-border-color: #333; diff --git a/internal/ui/static/css/light.css b/internal/ui/static/css/light.css index 94c5f200731..c61c1820254 100644 --- a/internal/ui/static/css/light.css +++ b/internal/ui/static/css/light.css @@ -62,10 +62,6 @@ --panel-border-color: #ddd; --panel-color: #333; - --modal-background: #f0f0f0; - --modal-color: #333; - --modal-box-shadow: 2px 0 5px 0 #ccc; - --pagination-link-color: #333; --pagination-border-color: #ddd; diff --git a/internal/ui/static/css/system.css b/internal/ui/static/css/system.css index c56f4012068..9e0ba67a71d 100644 --- a/internal/ui/static/css/system.css +++ b/internal/ui/static/css/system.css @@ -61,10 +61,6 @@ --panel-border-color: #ddd; --panel-color: #333; - --modal-background: #f0f0f0; - --modal-color: #333; - --modal-box-shadow: 2px 0 5px 0 #ccc; - --pagination-link-color: #333; --pagination-border-color: #ddd; diff --git a/internal/ui/static/js/app.js b/internal/ui/static/js/app.js index 8ff46b33424..ae00338cbd2 100644 --- a/internal/ui/static/js/app.js +++ b/internal/ui/static/js/app.js @@ -569,8 +569,7 @@ function initializeFormHandlers() { * Show the keyboard shortcuts modal. */ function showKeyboardShortcutsAction() { - const template = document.getElementById("keyboard-shortcuts"); - KeyboardModalHandler.open(template.content, "dialog-title"); + document.getElementById("keyboard-shortcuts-modal").showModal(); } /** @@ -1215,7 +1214,6 @@ function initializeKeyboardShortcuts() { // UI actions keyboardHandler.on("?", showKeyboardShortcutsAction); - keyboardHandler.on("Escape", () => KeyboardModalHandler.close()); keyboardHandler.on("a", () => { const enclosureElement = document.querySelector('.entry-enclosures'); if (enclosureElement) { diff --git a/internal/ui/static/js/modal_handler.js b/internal/ui/static/js/modal_handler.js deleted file mode 100644 index 358f3fe3bc5..00000000000 --- a/internal/ui/static/js/modal_handler.js +++ /dev/null @@ -1,55 +0,0 @@ -class KeyboardModalHandler { - static setupFocusTrap() { - const container = document.getElementById("modal-container"); - if (container !== null) { - container.onkeydown = (e) => { - if (e.key === 'Tab') { - // Since there is only one focusable button in the keyboard modal we always want to focus it with the tab key. This handles - // the special case of having just one focusable element in a dialog/ where keyboard focus is placed on an element that is not in the - // tab order. - container.querySelectorAll('button')[0].focus(); - e.preventDefault(); - } - }; - } - } - - static open(fragment, initialFocusElementId) { - if (document.getElementById("modal-container") !== null){ - return; - } - - this.activeElement = document.activeElement; - - const container = document.createElement("div"); - container.id = "modal-container"; - container.setAttribute("role", "dialog"); - container.appendChild(document.importNode(fragment, true)); - document.body.appendChild(container); - - const closeButton = document.querySelector("button.btn-close-modal"); - if (closeButton !== null) { - closeButton.onclick = (event) => { - event.preventDefault(); - KeyboardModalHandler.close(); - }; - } - - const initialFocusElement = document.getElementById(initialFocusElementId); - if (initialFocusElement !== undefined) { - initialFocusElement.focus(); - } - - this.setupFocusTrap(); - } - - static close() { - const container = document.getElementById("modal-container"); - if (container !== null) { - container.parentNode.removeChild(container); - if (this.activeElement !== undefined && this.activeElement !== null) { - this.activeElement.focus(); - } - } - } -} diff --git a/internal/ui/static/static.go b/internal/ui/static/static.go index d4fafa3867e..94021bea97b 100644 --- a/internal/ui/static/static.go +++ b/internal/ui/static/static.go @@ -123,7 +123,6 @@ func GenerateJavascriptBundles(webauthnEnabled bool) error { "app": { "js/touch_handler.js", "js/keyboard_handler.js", - "js/modal_handler.js", "js/app.js", }, "service-worker": {