From 481b42be4749816611773ba260128afadf4b2938 Mon Sep 17 00:00:00 2001 From: Wim Brand Date: Tue, 17 Aug 2021 18:24:21 +0200 Subject: [PATCH] Fix modal corners --- res/include/script/dependencies/Modal.js | 32 +++++++++---------- res/include/style/layout.css | 2 +- res/include/style/modal.css | 2 +- svelte/src/home_page/UploadProgressBar.svelte | 2 +- svelte/src/util/Modal.svelte | 4 +-- 5 files changed, 21 insertions(+), 21 deletions(-) diff --git a/res/include/script/dependencies/Modal.js b/res/include/script/dependencies/Modal.js index e94d4f3..c7ca62a 100644 --- a/res/include/script/dependencies/Modal.js +++ b/res/include/script/dependencies/Modal.js @@ -5,32 +5,32 @@ let modal_global_index = 100 // be adjusted to the screen size. Content should be added to the `body` // property function Modal(parent, closeCallback, title, width, height) { - this.parent = parent + this.parent = parent this.closeCallback = closeCallback - this.title = title - this.width = width - this.height = height - this.visible = false + this.title = title + this.width = width + this.height = height + this.visible = false this.background = document.createElement("div") this.background.classList = "modal_background" this.background.addEventListener("click", e => { this.close() }) this.window = document.createElement("div") - this.window.classList = "modal_window" - this.window.style.width = this.width + this.window.classList = "modal_window" + this.window.style.width = this.width this.window.style.height = this.height this.window.addEventListener("click", e => { e.stopPropagation() }) this.header = document.createElement("div") - this.header.classList = "modal_header highlight_1" + this.header.classList = "modal_header highlight_1" this.titleDiv = document.createElement("div") this.titleDiv.classList = "modal_title" this.titleDiv.innerText = this.title this.btnClose = document.createElement("button") - this.btnClose.classList = "modal_btn_close button_red" + this.btnClose.classList = "modal_btn_close button_red round" this.btnClose.innerHTML = 'close' this.btnClose.addEventListener("click", e => { this.close() }) @@ -45,25 +45,25 @@ function Modal(parent, closeCallback, title, width, height) { this.background.append(this.window) } -Modal.prototype.setTitle = function(title) { +Modal.prototype.setTitle = function (title) { this.title = title this.titleDiv.innerText = title } -Modal.prototype.setBody = function(element) { +Modal.prototype.setBody = function (element) { this.body.innerHTML = "" this.body.append(element) } -Modal.prototype.cloneTemplate = function(templateID) { +Modal.prototype.cloneTemplate = function (templateID) { this.setBody(document.getElementById(templateID).content.cloneNode(true)) } -Modal.prototype.open = function() { +Modal.prototype.open = function () { if (this.visible) { return } this.visible = true - console.debug("Showing modal "+this.title) + console.debug("Showing modal " + this.title) // Each time a modal is shown it gets a z-index which is one higher of the // previous one. This makes sure they are always shown and closed in order @@ -82,7 +82,7 @@ Modal.prototype.open = function() { this.body.focus() } -Modal.prototype.close = function() { +Modal.prototype.close = function () { if (!this.visible) { return } this.visible = false @@ -95,5 +95,5 @@ Modal.prototype.close = function() { this.background.style.opacity = 0 // Wait for the animation to finish and remove the window - setTimeout(() => {this.parent.removeChild(this.background)}, 400) + setTimeout(() => { this.parent.removeChild(this.background) }, 400) } diff --git a/res/include/style/layout.css b/res/include/style/layout.css index b038daa..4ac1279 100644 --- a/res/include/style/layout.css +++ b/res/include/style/layout.css @@ -432,7 +432,7 @@ select { margin: 3px; background: linear-gradient(var(--input_color), var(--input_color_dark)); padding: 6px 7px 6px 7px; - box-shadow: 1px 1px 5px -2px var(--shadow_color); + box-shadow: 1px 1px 5px -3px var(--shadow_color); line-height: 1em; overflow: hidden; font-size: 1em; /* Sometimes user-agents have different font sizes for buttons and links */ diff --git a/res/include/style/modal.css b/res/include/style/modal.css index 9529f41..95cec9c 100644 --- a/res/include/style/modal.css +++ b/res/include/style/modal.css @@ -24,7 +24,7 @@ box-sizing: border-box; text-align: left; box-shadow: var(--shadow_color) 0px 0px 50px; - border-radius: 8px; + border-radius: 16px 16px 8px 8px; overflow: hidden; } diff --git a/svelte/src/home_page/UploadProgressBar.svelte b/svelte/src/home_page/UploadProgressBar.svelte index d9d494a..a104210 100644 --- a/svelte/src/home_page/UploadProgressBar.svelte +++ b/svelte/src/home_page/UploadProgressBar.svelte @@ -227,7 +227,7 @@ const add_upload_history = id => { margin: 10px; padding: 0; overflow: hidden; - border-radius: 2px; + border-radius: 6px; box-shadow: 2px 2px 8px -3px var(--shadow_color); background-color: var(--layer_3_color); color: var(--text_color); diff --git a/svelte/src/util/Modal.svelte b/svelte/src/util/Modal.svelte index 4618931..86e7a95 100644 --- a/svelte/src/util/Modal.svelte +++ b/svelte/src/util/Modal.svelte @@ -48,7 +48,7 @@ const keydown = e => {
{title}
- @@ -83,7 +83,7 @@ const keydown = e => { left: 50%; transform: translate(-50%, -20%); padding: 0; - border-radius: 8px; + border-radius: 16px 16px 8px 8px; overflow: hidden; box-sizing: border-box; text-align: left;