From 211383bbf9eaa59eac09547823dde2be76a234e6 Mon Sep 17 00:00:00 2001 From: ConnorYoh <40631091+ConnorYoh@users.noreply.github.com> Date: Wed, 9 Apr 2025 11:04:26 +0100 Subject: [PATCH] 3164 bug issue on UI pdf multi tool (#3289) # Description of Changes * Added spacing between pages on multi-tool * pages now have square area so all dimensions of page can be previewed * Removed excessive CSS * Tidied up left hand page buttons. Closes #(3164) --- ## Checklist ### General - [ ] I have read the [Contribution Guidelines](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/CONTRIBUTING.md) - [ ] I have read the [Stirling-PDF Developer Guide](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/DeveloperGuide.md) (if applicable) - [ ] I have read the [How to add new languages to Stirling-PDF](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/HowToAddNewLanguage.md) (if applicable) - [ ] I have performed a self-review of my own code - [ ] My changes generate no new warnings ### Documentation - [ ] I have updated relevant docs on [Stirling-PDF's doc repo](https://github.com/Stirling-Tools/Stirling-Tools.github.io/blob/main/docs/) (if functionality has heavily changed) - [ ] I have read the section [Add New Translation Tags](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/HowToAddNewLanguage.md#add-new-translation-tags) (for new translation tags only) ### UI Changes (if applicable) - [ ] Screenshots or videos demonstrating the UI changes are attached (e.g., as comments or direct attachments in the PR) ### Testing (if applicable) - [ ] I have tested my changes locally. Refer to the [Testing Guide](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/DeveloperGuide.md#6-testing) for more details. --- src/main/resources/static/css/dragdrop.css | 8 +- src/main/resources/static/css/multi-tool.css | 35 +++--- src/main/resources/static/css/pdfActions.css | 112 ++++++------------ .../static/js/multitool/PdfActionsManager.js | 8 +- 4 files changed, 67 insertions(+), 96 deletions(-) diff --git a/src/main/resources/static/css/dragdrop.css b/src/main/resources/static/css/dragdrop.css index 688cbca4..8f330456 100644 --- a/src/main/resources/static/css/dragdrop.css +++ b/src/main/resources/static/css/dragdrop.css @@ -59,17 +59,21 @@ html[dir="rtl"] .drag-manager_draghover img { background-color: #ffffff10; transition: width 0.1s; animation: end-drop-expand 0.3s ease; - display: flex; align-items: center; justify-content: center; margin-left:16px; border-radius: 8px; - } .drag-manager_endpoint svg { width: 50px; height: 50px; + + display: block; + position: absolute; + left: 50%; + top: 50%; + translate: -50% -50%; } .drag-manager_endpoint.drag-manager_draghover { diff --git a/src/main/resources/static/css/multi-tool.css b/src/main/resources/static/css/multi-tool.css index a540b9d0..92d7699b 100644 --- a/src/main/resources/static/css/multi-tool.css +++ b/src/main/resources/static/css/multi-tool.css @@ -85,18 +85,14 @@ label { flex-direction: column; padding: 1rem; border-radius: 25px; - overflow-y: clip; - overflow-x: auto; min-height: 275px; margin: 0 0 30px 0; } #pages-container { - gap: 0px; - display: flex; - flex-wrap: wrap; - margin-left: -15px; - margin-right: -15px; + margin: 0 auto; + width: 95%; + font-size: 0; } /* width */ @@ -121,18 +117,20 @@ label { background: var(--scroll-bar-thumb-hover); } + .page-container { + display: inline-block; + list-style-type: none; + width: 250px; height: 250px; - display: flex; - align-items: center; - flex-direction: column-reverse; - aspect-ratio: 1; + line-height: 50px; + margin: 15px 25px; + box-sizing: border-box; text-align: center; + aspect-ratio: 1; position: relative; user-select: none; transition: width 1s linear; - margin-top: 16px; - margin-bottom: 16px; } .page-container.split-before { @@ -196,9 +194,8 @@ label { } .page-container img { - /* max-width: calc(100% - 15px); */ + max-width: calc(100% - 15px); max-height: calc(100% - 15px); - max-width: 237px; display: block; position: absolute; left: 50%; @@ -217,6 +214,7 @@ label { position: absolute; top: 5px; left: 5px; + line-height: normal; color: var(--md-sys-color-on-secondary); background-color: rgba(162, 201, 255, 0.8); padding: 6px 8px; @@ -294,6 +292,13 @@ label { .checkbox-label { font-size: medium; } + .btn { position: relative; } + +@media only screen and (max-width: 767px) { #pages-container { width:300px; } } +@media only screen and (min-width: 768px) and (max-width: 991px) { #pages-container { width: 600px; } } +@media only screen and (min-width: 992px) and (max-width: 1199px) { #pages-container { width: 900px; } } +@media only screen and (min-width: 1200px) and (max-width: 1399px) { #pages-container { width: 900px; } } +@media only screen and (min-width: 1399px) { #pages-container { width: 1200px; } } \ No newline at end of file diff --git a/src/main/resources/static/css/pdfActions.css b/src/main/resources/static/css/pdfActions.css index 8d69d792..bde4e5ba 100644 --- a/src/main/resources/static/css/pdfActions.css +++ b/src/main/resources/static/css/pdfActions.css @@ -1,8 +1,12 @@ .pdf-actions_button-container { z-index: 4; - display: flex; opacity: 0; transition: opacity 0.1s linear; + + position: absolute !important; + bottom: 0px; + left: 50%; + transform: translate(-50%, 0%); } .pdf-actions_container:hover .pdf-actions_button-container { @@ -42,17 +46,43 @@ /* "insert pdf" buttons that appear on the right when hover */ .pdf-actions_insert-file-button-container { + display:flex; + flex-direction: column; + gap: 10px; translate: 0 -50%; - width: 80px; height: 100%; - + width: 100px; + padding-left: 30px; + padding-right:30px; + justify-content: center; z-index: 3; opacity: 0; - transition: opacity 0.2s; + transition: opacity 0.4s; + } -.pdf-actions_insert-file-button-container button .material-symbols-rounded { - vertical-align: top; +.pdf-actions_insert-file-button-container.left { + left: -50px; +} + +.pdf-actions_insert-file-button-container.right { + right: -50px; +} + +html[dir="ltr"] .pdf-actions_insert-file-button-container.right { + display: none; +} + +html[dir="rtl"] .pdf-actions_insert-file-button-container.left { + display: none; +} + +html[dir="ltr"] .pdf-actions_container:last-child>.pdf-actions_insert-file-button-container.right { + display: flex; +} + +html[dir="rtl"] .pdf-actions_container:last-child>.pdf-actions_insert-file-button-container.left { + display: flex; } .pdf-actions_insert-file-button-container.left button, @@ -65,70 +95,11 @@ vertical-align: sub; } -.pdf-actions_insert-file-button { - padding: 0; - vertical-align: sub; -} - -.pdf-actions_insert-file-button-container.left { - left: -20px; -} - -.pdf-actions_insert-file-button-container.right { - right: -20px; -} - -html[dir="ltr"] .pdf-actions_insert-file-button-container.right { - display: none; -} - -html[dir="rtl"] .pdf-actions_insert-file-button-container.left { - display: none; -} - -.pdf-actions_insert-file-button-container.left .pdf-actions_insert-file-button { - left: 0; - translate: 0 -50%; -} - -.pdf-actions_insert-file-button-container.right .pdf-actions_insert-file-button { - right: 0; - translate: 0 -50%; -} - -html[dir="ltr"] .pdf-actions_container:last-child>.pdf-actions_insert-file-button-container.right { - display: block; -} - -html[dir="rtl"] .pdf-actions_container:last-child>.pdf-actions_insert-file-button-container.left { - display: block; -} - .pdf-actions_insert-file-button-container:hover { opacity: 1; transition: opacity 0.05s; } -.pdf-actions_insert-file-button { - position: absolute; - top: 50%; - right: 50%; - translate: 50% -50%; - aspect-ratio: 1; - border-radius: 100px; - z-index: 4; -} - -.pdf-actions_split-file-button { - position: absolute; - top: 25%; - right: 50%; - translate: 0 -50%; - aspect-ratio: 1; - border-radius: 100px; - z-index: 3; -} - .pdf-actions_checkbox { position: absolute; top: 5px; @@ -143,13 +114,4 @@ html[dir="rtl"] .pdf-actions_container:last-child>.pdf-actions_insert-file-butto .hidden { display: none; -} -.pdf-actions_insert-file-blank-button { - position: absolute; - top: 75%; - right: 50%; - translate: 0% -50%; - aspect-ratio: 1; - border-radius: 100px; - z-index: 5; -} +} \ No newline at end of file diff --git a/src/main/resources/static/js/multitool/PdfActionsManager.js b/src/main/resources/static/js/multitool/PdfActionsManager.js index 80df8d31..1ef2978e 100644 --- a/src/main/resources/static/js/multitool/PdfActionsManager.js +++ b/src/main/resources/static/js/multitool/PdfActionsManager.js @@ -194,21 +194,21 @@ class PdfActionsManager { ); const insertFileButton = document.createElement("button"); - insertFileButton.classList.add("btn", "btn-primary", "pdf-actions_insert-file-button"); + insertFileButton.classList.add("btn", "btn-primary"); moveUp.setAttribute('title', window.translations.addFile); insertFileButton.innerHTML = `add`; insertFileButton.onclick = this.insertFileButtonCallback; insertFileButtonContainer.appendChild(insertFileButton); const splitFileButton = document.createElement("button"); - splitFileButton.classList.add("btn", "btn-primary", "pdf-actions_split-file-button"); + splitFileButton.classList.add("btn", "btn-primary"); splitFileButton.setAttribute('title', window.translations.split); splitFileButton.innerHTML = `cut`; splitFileButton.onclick = this.splitFileButtonCallback; insertFileButtonContainer.appendChild(splitFileButton); const insertFileBlankButton = document.createElement("button"); - insertFileBlankButton.classList.add("btn", "btn-primary", "pdf-actions_insert-file-blank-button"); + insertFileBlankButton.classList.add("btn", "btn-primary"); insertFileBlankButton.setAttribute('title', window.translations.insertPageBreak); insertFileBlankButton.innerHTML = `insert_page_break`; insertFileBlankButton.onclick = this.insertFileBlankButtonCallback; @@ -225,7 +225,7 @@ class PdfActionsManager { ); const insertFileButtonRight = document.createElement("button"); - insertFileButtonRight.classList.add("btn", "btn-primary", "pdf-actions_insert-file-button"); + insertFileButtonRight.classList.add("btn", "btn-primary"); insertFileButtonRight.innerHTML = `add`; insertFileButtonRight.onclick = () => addFiles(); insertFileButtonRightContainer.appendChild(insertFileButtonRight);