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