From 12b4386f14b7ceffd21ec2d92010ed90af477f3d Mon Sep 17 00:00:00 2001 From: Balakrishnan Balasubramanian Date: Fri, 9 Aug 2024 01:51:52 -0400 Subject: [PATCH] Frontend improvements 1. Simplify template css to use grid always and use ABCD for area names 2. Add 3 new templates 3. Set data attribute dynamically for templates 4. Minor reformatting in js files 5. Fix URL path --- web/choose.js | 31 ++++++++---------------- web/index.css | 66 ++++++++++++++++++++++++++++---------------------- web/index.html | 57 +++++++++++++++++++++++++++++++++++++------ web/index.js | 27 +++++++-------------- 4 files changed, 106 insertions(+), 75 deletions(-) diff --git a/web/choose.js b/web/choose.js index 245dcf8..ab707ab 100644 --- a/web/choose.js +++ b/web/choose.js @@ -30,21 +30,20 @@ let selectedPhotosDiv let selectedPhotoImg function main() { - albumSelect = document.getElementById("album_selector") loadAlbumsBtn = document.getElementById("load_albums_button") loadPhotosBtn = document.getElementById("load_photos_button") makeCollageBtn = document.getElementById("make_collage_button") + albumSelect = document.getElementById("album_selector") + noticeP = document.getElementById("notice_p") noticeDialog = document.getElementById("notice_dialog") albumPhotosDiv = document.getElementById("album_photos") selectedPhotosDiv = document.getElementById("selected_photos") - noticeP = document.getElementById("notice_p") + loadAlbumsBtn.onclick = () => loadAlbums() loadPhotosBtn.onclick = () => loadPhotos() makeCollageBtn.onclick = () => gotoCollage() - /** - * @type HTMLImageElement[] - */ + /** @type HTMLImageElement[] */ const selectedPhotos = selectedPhotosDiv.getElementsByTagName("img") for (const img of selectedPhotos) { img.onclick = () => { @@ -80,9 +79,7 @@ function closeNotice() { noticeDialog.close() } -/** - * @param {string} notice - */ +/** @param {string} notice */ function showNotice(notice) { noticeP.textContent = notice noticeDialog.show() @@ -100,9 +97,7 @@ function loadPhotos() { (async () => { try { const resp = await fetch(`load-photos/${elem.value}`) - /** - * @type String[] - */ + /** @type String[] */ const photos = await resp.json() if(photos.length == 0) { showNotice("No Photos found") @@ -115,9 +110,7 @@ function loadPhotos() { albumPhotosDiv.appendChild(img) } - /** - * @type HTMLImageElement[] - */ + /** @type HTMLImageElement[] */ const photoImgs = albumPhotosDiv.children for(const photo of photoImgs) { photo.onclick = () => { @@ -131,14 +124,10 @@ function loadPhotos() { } function gotoCollage() { - /** - * @type HTMLImageElement[] - */ + /** @type HTMLImageElement[] */ const selectedPhotos = selectedPhotosDiv.getElementsByTagName("img") - /** - * @type String[] - */ - let photoUrls = []; + /** @type String[] */ + const photoUrls = []; for (const img of selectedPhotos) { if (!img.src.endsWith("stock.svg")) { diff --git a/web/index.css b/web/index.css index 0eb633b..b1ed703 100644 --- a/web/index.css +++ b/web/index.css @@ -32,7 +32,7 @@ .templates { display: flex; flex-wrap: wrap; - gap: 1rem; + gap: 1rem; } .templates li { @@ -56,53 +56,61 @@ border: 1px solid; } -.single div { - width: 100%; - height: 100%; +.single { + display: grid; } .one-two { display: grid; grid-template-areas: - "one two" - "one three"; + "A B" + "A C"; } .one-two .img1{ - grid-area: one; + grid-area: A; } -.half-leftright { - display:flex; -} - -.half-leftright .img { - flex: 50%; -} - -.half-topbottom .img { - width: 100%; - height: 50%; +.half-topbottom { + display: grid; } .two-one-two-leftright { display: grid; - grid-template-areas: - "one two two three" - "four two two five"; + grid-template-areas: + "A B B C" + "D B B E"; } -.two-one-two-leftright .img2 { - grid-area: two; +.two-one-two-leftright .img1 { + grid-area: B; } .two-one-two-topbottom { display: grid; grid-template-areas: - "one two" - "three three" - "three three" - "four five" + "A B" + "C C" + "C C" + "D E" } -.two-one-two-topbottom .img3 { - grid-area: three; +.two-one-two-topbottom .img1 { + grid-area: C; +} + +.two-row { + display: grid; + grid-template-areas: + "A B" +} + +.three-row { + display: grid; + grid-template-areas: + "A B C" +} + +.four-row { + display: grid; + grid-template-areas: + "A B C D" } diff --git a/web/index.html b/web/index.html index f3709fa..7c3465b 100644 --- a/web/index.html +++ b/web/index.html @@ -16,7 +16,7 @@