mirror of
https://github.com/Stirling-Tools/Stirling-PDF.git
synced 2025-06-23 16:05:09 +00:00
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.
This commit is contained in:
parent
6887e15610
commit
211383bbf9
@ -59,17 +59,21 @@ html[dir="rtl"] .drag-manager_draghover img {
|
|||||||
background-color: #ffffff10;
|
background-color: #ffffff10;
|
||||||
transition: width 0.1s;
|
transition: width 0.1s;
|
||||||
animation: end-drop-expand 0.3s ease;
|
animation: end-drop-expand 0.3s ease;
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
margin-left:16px;
|
margin-left:16px;
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.drag-manager_endpoint svg {
|
.drag-manager_endpoint svg {
|
||||||
width: 50px;
|
width: 50px;
|
||||||
height: 50px;
|
height: 50px;
|
||||||
|
|
||||||
|
display: block;
|
||||||
|
position: absolute;
|
||||||
|
left: 50%;
|
||||||
|
top: 50%;
|
||||||
|
translate: -50% -50%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.drag-manager_endpoint.drag-manager_draghover {
|
.drag-manager_endpoint.drag-manager_draghover {
|
||||||
|
@ -85,18 +85,14 @@ label {
|
|||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
padding: 1rem;
|
padding: 1rem;
|
||||||
border-radius: 25px;
|
border-radius: 25px;
|
||||||
overflow-y: clip;
|
|
||||||
overflow-x: auto;
|
|
||||||
min-height: 275px;
|
min-height: 275px;
|
||||||
margin: 0 0 30px 0;
|
margin: 0 0 30px 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
#pages-container {
|
#pages-container {
|
||||||
gap: 0px;
|
margin: 0 auto;
|
||||||
display: flex;
|
width: 95%;
|
||||||
flex-wrap: wrap;
|
font-size: 0;
|
||||||
margin-left: -15px;
|
|
||||||
margin-right: -15px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/* width */
|
/* width */
|
||||||
@ -121,18 +117,20 @@ label {
|
|||||||
background: var(--scroll-bar-thumb-hover);
|
background: var(--scroll-bar-thumb-hover);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
.page-container {
|
.page-container {
|
||||||
|
display: inline-block;
|
||||||
|
list-style-type: none;
|
||||||
|
width: 250px;
|
||||||
height: 250px;
|
height: 250px;
|
||||||
display: flex;
|
line-height: 50px;
|
||||||
align-items: center;
|
margin: 15px 25px;
|
||||||
flex-direction: column-reverse;
|
box-sizing: border-box;
|
||||||
aspect-ratio: 1;
|
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
aspect-ratio: 1;
|
||||||
position: relative;
|
position: relative;
|
||||||
user-select: none;
|
user-select: none;
|
||||||
transition: width 1s linear;
|
transition: width 1s linear;
|
||||||
margin-top: 16px;
|
|
||||||
margin-bottom: 16px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.page-container.split-before {
|
.page-container.split-before {
|
||||||
@ -196,9 +194,8 @@ label {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.page-container img {
|
.page-container img {
|
||||||
/* max-width: calc(100% - 15px); */
|
max-width: calc(100% - 15px);
|
||||||
max-height: calc(100% - 15px);
|
max-height: calc(100% - 15px);
|
||||||
max-width: 237px;
|
|
||||||
display: block;
|
display: block;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
left: 50%;
|
left: 50%;
|
||||||
@ -217,6 +214,7 @@ label {
|
|||||||
position: absolute;
|
position: absolute;
|
||||||
top: 5px;
|
top: 5px;
|
||||||
left: 5px;
|
left: 5px;
|
||||||
|
line-height: normal;
|
||||||
color: var(--md-sys-color-on-secondary);
|
color: var(--md-sys-color-on-secondary);
|
||||||
background-color: rgba(162, 201, 255, 0.8);
|
background-color: rgba(162, 201, 255, 0.8);
|
||||||
padding: 6px 8px;
|
padding: 6px 8px;
|
||||||
@ -294,6 +292,13 @@ label {
|
|||||||
.checkbox-label {
|
.checkbox-label {
|
||||||
font-size: medium;
|
font-size: medium;
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn {
|
.btn {
|
||||||
position: relative;
|
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; } }
|
@ -1,8 +1,12 @@
|
|||||||
.pdf-actions_button-container {
|
.pdf-actions_button-container {
|
||||||
z-index: 4;
|
z-index: 4;
|
||||||
display: flex;
|
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
transition: opacity 0.1s linear;
|
transition: opacity 0.1s linear;
|
||||||
|
|
||||||
|
position: absolute !important;
|
||||||
|
bottom: 0px;
|
||||||
|
left: 50%;
|
||||||
|
transform: translate(-50%, 0%);
|
||||||
}
|
}
|
||||||
|
|
||||||
.pdf-actions_container:hover .pdf-actions_button-container {
|
.pdf-actions_container:hover .pdf-actions_button-container {
|
||||||
@ -42,17 +46,43 @@
|
|||||||
|
|
||||||
/* "insert pdf" buttons that appear on the right when hover */
|
/* "insert pdf" buttons that appear on the right when hover */
|
||||||
.pdf-actions_insert-file-button-container {
|
.pdf-actions_insert-file-button-container {
|
||||||
|
display:flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 10px;
|
||||||
translate: 0 -50%;
|
translate: 0 -50%;
|
||||||
width: 80px;
|
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
width: 100px;
|
||||||
|
padding-left: 30px;
|
||||||
|
padding-right:30px;
|
||||||
|
justify-content: center;
|
||||||
z-index: 3;
|
z-index: 3;
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
transition: opacity 0.2s;
|
transition: opacity 0.4s;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.pdf-actions_insert-file-button-container button .material-symbols-rounded {
|
.pdf-actions_insert-file-button-container.left {
|
||||||
vertical-align: top;
|
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,
|
.pdf-actions_insert-file-button-container.left button,
|
||||||
@ -65,70 +95,11 @@
|
|||||||
vertical-align: sub;
|
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 {
|
.pdf-actions_insert-file-button-container:hover {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
transition: opacity 0.05s;
|
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 {
|
.pdf-actions_checkbox {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 5px;
|
top: 5px;
|
||||||
@ -143,13 +114,4 @@ html[dir="rtl"] .pdf-actions_container:last-child>.pdf-actions_insert-file-butto
|
|||||||
|
|
||||||
.hidden {
|
.hidden {
|
||||||
display: none;
|
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;
|
|
||||||
}
|
|
@ -194,21 +194,21 @@ class PdfActionsManager {
|
|||||||
);
|
);
|
||||||
|
|
||||||
const insertFileButton = document.createElement("button");
|
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);
|
moveUp.setAttribute('title', window.translations.addFile);
|
||||||
insertFileButton.innerHTML = `<span class="material-symbols-rounded">add</span>`;
|
insertFileButton.innerHTML = `<span class="material-symbols-rounded">add</span>`;
|
||||||
insertFileButton.onclick = this.insertFileButtonCallback;
|
insertFileButton.onclick = this.insertFileButtonCallback;
|
||||||
insertFileButtonContainer.appendChild(insertFileButton);
|
insertFileButtonContainer.appendChild(insertFileButton);
|
||||||
|
|
||||||
const splitFileButton = document.createElement("button");
|
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.setAttribute('title', window.translations.split);
|
||||||
splitFileButton.innerHTML = `<span class="material-symbols-rounded">cut</span>`;
|
splitFileButton.innerHTML = `<span class="material-symbols-rounded">cut</span>`;
|
||||||
splitFileButton.onclick = this.splitFileButtonCallback;
|
splitFileButton.onclick = this.splitFileButtonCallback;
|
||||||
insertFileButtonContainer.appendChild(splitFileButton);
|
insertFileButtonContainer.appendChild(splitFileButton);
|
||||||
|
|
||||||
const insertFileBlankButton = document.createElement("button");
|
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.setAttribute('title', window.translations.insertPageBreak);
|
||||||
insertFileBlankButton.innerHTML = `<span class="material-symbols-rounded">insert_page_break</span>`;
|
insertFileBlankButton.innerHTML = `<span class="material-symbols-rounded">insert_page_break</span>`;
|
||||||
insertFileBlankButton.onclick = this.insertFileBlankButtonCallback;
|
insertFileBlankButton.onclick = this.insertFileBlankButtonCallback;
|
||||||
@ -225,7 +225,7 @@ class PdfActionsManager {
|
|||||||
);
|
);
|
||||||
|
|
||||||
const insertFileButtonRight = document.createElement("button");
|
const insertFileButtonRight = document.createElement("button");
|
||||||
insertFileButtonRight.classList.add("btn", "btn-primary", "pdf-actions_insert-file-button");
|
insertFileButtonRight.classList.add("btn", "btn-primary");
|
||||||
insertFileButtonRight.innerHTML = `<span class="material-symbols-rounded">add</span>`;
|
insertFileButtonRight.innerHTML = `<span class="material-symbols-rounded">add</span>`;
|
||||||
insertFileButtonRight.onclick = () => addFiles();
|
insertFileButtonRight.onclick = () => addFiles();
|
||||||
insertFileButtonRightContainer.appendChild(insertFileButtonRight);
|
insertFileButtonRightContainer.appendChild(insertFileButtonRight);
|
||||||
|
Loading…
x
Reference in New Issue
Block a user