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

Merge pull request #104 from jordyjordy/width-improvement

Browse source 
Width improvement
This commit is contained in:
Anthony Stirling 2023-04-26 13:57:55 +01:00 committed by GitHub
commit 3e2ca2fd5f
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
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;