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 {
gap: 0px;
/* gap: 0px;
display: flex;
flex-wrap: wrap;
margin-left: -15px;
margin-right: -15px;
margin-right: -15px; */
margin: 0 auto;
width: 95%;
font-size: 0;
}
/* width */
@ -121,18 +124,22 @@ 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 +203,9 @@ label {
}
.page-container img {
/* max-width: calc(100% - 15px); */
max-width: calc(100% - 15px);
max-height: calc(100% - 15px);
max-width: 237px;
/* max-width: 237px; */
display: block;
position: absolute;
left: 50%;
@ -217,6 +224,7 @@ label {
position: absolute;
top: 5px;
left: 5px;
height: 2rem;
color: var(--md-sys-color-on-secondary);
background-color: rgba(162, 201, 255, 0.8);
padding: 6px 8px;
@ -294,6 +302,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; } }

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

@ -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,9 +46,13 @@
/* "insert pdf" buttons that appear on the right when hover */
.pdf-actions_insert-file-button-container {
display:flex;
flex-direction: column;
gap: 10px;
left: -20px;
translate: 0 -50%;
width: 80px;
height: 100%;
width: 40px;
height: 40%;
z-index: 3;
opacity: 0;

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

@ -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 = `<span class="material-symbols-rounded">add</span>`;
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 = `<span class="material-symbols-rounded">cut</span>`;
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 = `<span class="material-symbols-rounded">insert_page_break</span>`;
insertFileBlankButton.onclick = this.insertFileBlankButtonCallback;