From e10efabcd566dc9beeb823c99f27c01ca96cc9ee Mon Sep 17 00:00:00 2001 From: Balakrishnan Balasubramanian Date: Mon, 12 Aug 2024 17:21:25 -0400 Subject: [PATCH] Simplify UI --- web/index.css | 38 ++++++++++++++++++++++++++++++++------ web/index.html | 36 ++++++++++++++++++------------------ web/index.js | 9 ++++++++- 3 files changed, 58 insertions(+), 25 deletions(-) diff --git a/web/index.css b/web/index.css index 4e05e3f..973369d 100644 --- a/web/index.css +++ b/web/index.css @@ -9,6 +9,7 @@ align-items: center; justify-content: space-around; flex-direction: column; + gap: 0.5rem; flex: 25%; overflow: scroll; } @@ -17,23 +18,47 @@ flex: 75%; } +:root { + --collage-ap: 110 / 85; +} + .image-surface { overflow: hidden; margin: auto; border: 1px solid; height: 100%; width: auto; - --collage-ap: 110 / 85; aspect-ratio: var(--collage-ap); } -.showbuton { - font-size: 2rem; + +.main-controls { + display: flex; + gap: 0.5rem; +} + +.main-controls button { + font-size: 1.2rem; +} + +#notice_dialog { + z-index: 10; + width: 50%; + background-color: lightblue; +} + +#notice_dialog form { + display: flex; +} + +#notice_dialog button { + font-size: 1.2rem; + margin-left: auto; } .templates { display: flex; flex-wrap: wrap; - gap: 1rem; + gap: 0.5rem; width: 80%; } @@ -44,11 +69,12 @@ } #page_size_selector { - width: 100%; + font-size: 1.2rem; + width: 80%; } .template { -height: 100%; + aspect-ratio: var(--collage-ap); } .template-selected { diff --git a/web/index.html b/web/index.html index 306bd21..9325b0a 100644 --- a/web/index.html +++ b/web/index.html @@ -9,29 +9,29 @@ + +
+
-

Photo Collage

-

Select Images

+

Photo Collage

+ +
+ + + + +
- - -
-

All collages

-

-
    diff --git a/web/index.js b/web/index.js index 09b13f1..8ebc06c 100644 --- a/web/index.js +++ b/web/index.js @@ -44,6 +44,9 @@ let collageDiv /** @type {HTMLSelectElement} */ let pageSizeSelect +/** @type {HTMLDialogElement} */ +let noticeDialog + /** @type {HTMLAnchorElement} */ let collageUrlA @@ -59,6 +62,7 @@ function main() { snapButton = document.getElementById("snapper") collageDiv = document.getElementById("collage") pageSizeSelect = document.getElementById("page_size_selector") + noticeDialog = document.getElementById("notice_dialog") collageUrlA = document.getElementById("collage-url") snapButton.onclick = () => snap() @@ -74,6 +78,7 @@ function main() { // Skipping first entry in array to make the images start with index 1 imageUrls = [,].concat(queryUrls) + pageSizeChange() applyTemplate(document.getElementById("default_template")) } @@ -171,6 +176,7 @@ function snap() { } (async () => { + noticeDialog.show() collageUrlA.text = "Collage is being generated..."; const collagFile = await makeCollage(req) collageUrlA.href = `collages/${collagFile}`; @@ -179,7 +185,8 @@ function snap() { } function pageSizeChange() { - collageDiv.style.setProperty('--collage-ap', pageSizes[pageSizeSelect.value]["ap"]) + // https://stackoverflow.com/a/37802204 + document.documentElement.style.setProperty('--collage-ap', pageSizes[pageSizeSelect.value]["ap"]) pageSize = pageSizeSelect.value initCollage() }