DGNum/Stirling-PDF
14
0
Fork 0
Code Issues 4 Pull requests 1 Projects Releases Packages Wiki Activity

Merge branch 'cleanups' of git@github.com:Frooodle/Stirling-PDF.git into cleanups

Browse source
This commit is contained in:
Anthony Stirling 2023-04-26 22:01:32 +01:00
commit 63a698b679
1 changed files with 24 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

31
src/main/resources/templates/multi-tool.html
View file

@ -10,12 +10,16 @@
<div id="content-wrap">
<div th:insert="~{fragments/navbar.html :: navbar}"></div>
<br> <br>
<div class="container">
<div class="multi-tool-container">
<div class="row justify-content-center">
<h2 th:text="#{multiTool.header}"></h2>
<div class="col-md-12" id="pages-container-wrapper">
<div id="pages-container"></div>
</div>
</div>
</div>
<div class="container">
<div class="row justify-content-center">
<div class="col-md-6" style="text-align: center">
<div id="global-buttons-container">
@ -158,6 +162,7 @@
const moveUpButtonCallback = e => {
var imgContainer = e.target;
const startingPosition = imgContainer.getBoundingClientRect();
while (!imgContainer.classList.contains("page-container")) {
imgContainer = imgContainer.parentNode;
}
@ -165,9 +170,10 @@
if (sibling) {
pagesContainer.removeChild(imgContainer);
pagesContainer.insertBefore(imgContainer, sibling);
imgContainer.scrollIntoView({
behavior: "instant",
block: "center",
const { width } = imgContainer.getBoundingClientRect();
pagesContainerWrapper.scroll({
left: pagesContainerWrapper.scrollLeft - width,
})
}
};
@ -184,9 +190,9 @@
} else {
pagesContainer.appendChild(imgContainer)
}
imgContainer.scrollIntoView({
behavior: "instant",
block: "center",
const { width } = imgContainer.getBoundingClientRect();
pagesContainerWrapper.scroll({
left: pagesContainerWrapper.scrollLeft + width,
})
}
};
@ -434,6 +440,10 @@
</script>
<style>
.multi-tool-container {
max-width: 95vw;
margin: 0 auto;
}
#global-buttons-container {
display: flex;
gap: 10px;
@ -534,7 +544,14 @@
.page-container .button-container {
z-index: 2;
display:flex;
opacity: 0;
transition: opacity 0.1s linear;
}
.page-container:hover .button-container {
opacity: 1;
}
.page-container .button-container > * {
padding: 0.25rem 0.5rem;
margin: 3px;