saulteafarmer/Stirling-PDF
1
0
Fork 0
mirror of https://github.com/Stirling-Tools/Stirling-PDF.git synced 2025-06-06 18:30:57 +00:00
Code Issues Packages Projects Releases Wiki Activity

Work in progress, redoing flex of multitool pages

Browse Source
This commit is contained in:
Connor Yoh 2025-04-02 09:50:21 +01:00
parent 3f0e878694
commit fdb75a0653
3 changed files with 39 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
src/main/resources/static/css/multi-tool.css
View File

@ -92,11 +92,14 @@ label {
} }
#pages-container { #pages-container {
gap: 0px; /* gap: 0px;
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
margin-left: -15px; margin-left: -15px;
margin-right: -15px; margin-right: -15px; */
margin: 0 auto;
width: 95%;
font-size: 0;
} }
/* width */ /* width */
@ -121,18 +124,22 @@ 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 +203,9 @@ 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; /* max-width: 237px; */
display: block; display: block;
position: absolute; position: absolute;
left: 50%; left: 50%;
@ -217,6 +224,7 @@ label {
position: absolute; position: absolute;
top: 5px; top: 5px;
left: 5px; left: 5px;
height: 2rem;
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 +302,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; } }

14
src/main/resources/static/css/pdfActions.css
View File

@ -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,9 +46,13 @@
/* "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;
left: -20px;
translate: 0 -50%; translate: 0 -50%;
width: 80px; width: 40px;
height: 100%; height: 40%;
z-index: 3; z-index: 3;
opacity: 0; opacity: 0;

6
src/main/resources/static/js/multitool/PdfActionsManager.js
View File

@ -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;