From 8dd975abe0aa746f54aa090fbecad0644aa007a7 Mon Sep 17 00:00:00 2001 From: cthorne Date: Mon, 6 Jan 2025 04:00:51 +1000 Subject: [PATCH] Add further responsive UI using uiKit (#36) Utilising [UiKit](https://getuikit.com/) as the CSS framework Adjusted existing functionality & CSS to integrate with UiKits - should retain same functionality - Ui colors are UiKit defaults - Search results automatically expand when searching - UiKit ensures its automatically responsive for mobile ### **Search results** ![image](https://github.com/user-attachments/assets/7103b542-9eba-4b56-a730-4165a93ae099) ### **Details dialog** ![image](https://github.com/user-attachments/assets/ff5a69c3-522a-40f0-b04d-9c1e4a2c34fb) ![image](https://github.com/user-attachments/assets/a194ff25-e3da-40b3-a5f9-48a483036491) **- The dialog could be improved further by adjusting to a modal in UiKit purely, however wasn't sure on how to do / time reqs.** ### **Search Results & Download Status are in expandable accordions** ![image](https://github.com/user-attachments/assets/2b4f25c4-4c8b-4bde-8861-833399af7d1a) ![image](https://github.com/user-attachments/assets/3ac0447b-7843-4750-9859-94a79fa65f9a) ### **Adjusted search to UiKits with clickable search icon** ![image](https://github.com/user-attachments/assets/8b331063-1045-4759-b05c-64a2e1a738ea) ### **Added gitHub link to footer and increased font sizing** ![image](https://github.com/user-attachments/assets/c9822fd3-3b31-4bbd-bb24-c2272c6af5e3) ### **Mobile views (Chrome on Desktop) - scales & retains scroll** ![image](https://github.com/user-attachments/assets/fb598d07-e6c5-4ab2-ae86-782aa74853a8) ![image](https://github.com/user-attachments/assets/fb04fb6b-be54-4309-a5ba-9636b8691593) ![image](https://github.com/user-attachments/assets/66b0b326-83d1-4131-8d3a-66bf111ca2ad) ### **TODO:** - Improvements to modal functionality - Pagination - Cleaning (removing unused CSS etc) --- static/css/styles.css | 29 +------- static/js/main.js | 48 +++++++----- templates/index.html | 165 ++++++++++++++++++++++-------------------- 3 files changed, 117 insertions(+), 125 deletions(-) diff --git a/static/css/styles.css b/static/css/styles.css index 32891476..e2d3e460 100644 --- a/static/css/styles.css +++ b/static/css/styles.css @@ -33,12 +33,6 @@ header { box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); } -main { - max-width: 1200px; - margin: 0 auto; - padding: 1rem; -} - footer { text-align: center; padding: 1rem; @@ -73,27 +67,6 @@ footer { outline: none; } -.search-container button, -.download-button { - padding: 0.75rem 1.5rem; - background: var(--primary-color); - color: white; - border: none; - border-radius: 4px; - cursor: pointer; - font-size: 1rem; - transition: background-color 0.3s ease; -} - -.download-button { - width: 100%; -} - -.search-container button:hover, -.download-button:hover { - background: var(--primary-dark); -} - /* Table Styles */ .table-responsive { margin-bottom: 1rem; @@ -214,7 +187,7 @@ tbody tr:hover { .details-container { background: white; - padding: 2rem; + padding: 0.25rem 0.25rem 2rem 3rem; border-radius: 4px; max-width: 800px; width: 90%; diff --git a/static/js/main.js b/static/js/main.js index b7e3b686..a8a03730 100644 --- a/static/js/main.js +++ b/static/js/main.js @@ -47,11 +47,15 @@ document.addEventListener('DOMContentLoaded', () => { }, showLoading(element) { - element.style.display = 'block'; + element.removeAttribute('hidden'); }, hideLoading(element) { - element.style.display = 'none'; + element.setAttribute('hidden', ''); + }, + + showAccordion(element) { + UIkit.accordion(element).toggle(1, true); }, async fetchJson(url, options = {}) { @@ -90,9 +94,9 @@ document.addEventListener('DOMContentLoaded', () => { try { STATE.isSearching = true; - elements.resultsSection.classList.remove('collapsed'); utils.showLoading(elements.searchLoading); + utils.showAccordion(elements.resultsSection); const data = await utils.fetchJson( `${API_ENDPOINTS.search}?query=${encodeURIComponent(query)}` ); @@ -161,12 +165,12 @@ document.addEventListener('DOMContentLoaded', () => { createActionCell(book) { const buttonDetails = utils.createElement('button', { - className: 'details-button', + className: 'uk-button uk-button-default uk-align-center uk-margin-small', onclick: () => bookDetails.show(book.id) }, [utils.createElement('span', { textContent: 'Details' })]); const downloadButton = utils.createElement('button', { - className: 'download-button', + className: 'uk-button uk-button-primary uk-align-center uk-margin-small', onclick: () => bookDetails.downloadBook(book) }, [utils.createElement('span', { textContent: 'Download' })]); @@ -221,9 +225,13 @@ document.addEventListener('DOMContentLoaded', () => { generateDetailsHTML(book) { return ` -
- Book Preview -
+ +
+
+ Book Preview + +
+

${book.title || 'No title available'}

Author: ${book.author || 'N/A'}

Publisher: ${book.publisher || 'N/A'}

@@ -232,12 +240,18 @@ document.addEventListener('DOMContentLoaded', () => {

Format: ${book.format || 'N/A'}

Size: ${book.size || 'N/A'}

+ + +
- ${this.generateInfoList(book.info)} -
- - -
+ `; }, @@ -250,7 +264,7 @@ document.addEventListener('DOMContentLoaded', () => { `) .join(''); - return `
    ${listItems}
`; + return `
    ${listItems}
`; }, async downloadBook(book) { @@ -263,7 +277,6 @@ document.addEventListener('DOMContentLoaded', () => { ); modal.close(); - elements.resultsSection.classList.add('collapsed'); status.fetch(); } catch (error) { console.error('Download error:', error); @@ -405,11 +418,6 @@ document.addEventListener('DOMContentLoaded', () => { } }); - // Results section toggle - elements.resultsHeading.addEventListener('click', () => { - elements.resultsSection.classList.toggle('collapsed'); - }); - // Modal close on overlay click elements.modalOverlay.addEventListener('click', (e) => { if (e.target === elements.modalOverlay) { diff --git a/templates/index.html b/templates/index.html index 4f9e470e..8722d6f6 100644 --- a/templates/index.html +++ b/templates/index.html @@ -9,97 +9,108 @@ + + + + + +
-

Book Search & Download

+

Book Search & Download

- -
-
- - -
-
+
+ +
+
+
+ + +
+
+
- - - - - - -
-

Download Status

-
- - Loading... -
-
- - - - - - - - - - - - -
StatusBook IDTitlePreview
-
-
-

Calibre Web Book Downloader.

+

Calibre Web Book Downloader

+