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

center pdfs

Browse source 
To correctly center the pdfs inside of the scrollable div we need a wrapper, ideally the 'safe center' flex-direction would be used, but this is not yet supported by most browsers.
This commit is contained in:
jordy 2023-04-22 19:26:42 +02:00
parent 9da29bf99a
commit a44fc62fee
2 changed files with 23 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/main/resources/static/css/dark-mode.css
View file

@ -26,7 +26,7 @@ body {
} }
#pages-container { #pages-container-wrapper {
--background-color: rgba(255, 255, 255, 0.046) !important; --background-color: rgba(255, 255, 255, 0.046) !important;
--scroll-bar-color: #4c4c4c !important; --scroll-bar-color: #4c4c4c !important;
--scroll-bar-thumb: #d3d3d3 !important; --scroll-bar-thumb: #d3d3d3 !important;

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

@ -13,7 +13,9 @@
<div class="container"> <div class="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" style="text-align: center" id="pages-container"></div> <div class="col-md-12" id="pages-container-wrapper">
<div id="pages-container"></div>
</div>
<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">
@ -82,7 +84,7 @@
function scrollLoop() { function scrollLoop() {
// Scroll the div horizontally by a fraction of the accumulated scroll delta // Scroll the div horizontally by a fraction of the accumulated scroll delta
pagesContainer.scrollLeft += scrollDelta * 0.1; pagesContainerWrapper.scrollLeft += scrollDelta * 0.1;
// Reduce the accumulated scroll delta by a fraction // Reduce the accumulated scroll delta by a fraction
scrollDelta *= 0.9; scrollDelta *= 0.9;
@ -440,43 +442,50 @@
margin-left: auto; margin-left: auto;
} }
#pages-container { #pages-container-wrapper {
--background-color: rgba(0, 0, 0, 0.025); --background-color: rgba(0, 0, 0, 0.025);
--scroll-bar-color: #f1f1f1; --scroll-bar-color: #f1f1f1;
--scroll-bar-thumb: #888; --scroll-bar-thumb: #888;
--scroll-bar-thumb-hover: #555; --scroll-bar-thumb-hover: #555;
background-color: var(--background-color);
width: 100%; width: 100%;
display: flex; display: flex;
flex-direction: column;
padding: 10px 25px; padding: 10px 25px;
gap: 0px; border-radius: 10px;
align-items: center;
margin: 30px 0;
overflow-y: hidden; overflow-y: hidden;
overflow-x: auto; overflow-x: auto;
min-height: 275px; min-height: 275px;
background-color: var(--background-color); margin: 0 0 30px 0;
border-radius: 10px; }
#pages-container {
margin: auto;
gap: 0px;
display:flex;
align-items: center;
justify-content: center;
} }
/* width */ /* width */
#pages-container::-webkit-scrollbar { #pages-container-wrapper::-webkit-scrollbar {
width: 10px; width: 10px;
height: 10px; height: 10px;
} }
/* Track */ /* Track */
#pages-container::-webkit-scrollbar-track { #pages-container-wrapper::-webkit-scrollbar-track {
background: var(--scroll-bar-color); background: var(--scroll-bar-color);
} }
/* Handle */ /* Handle */
#pages-container::-webkit-scrollbar-thumb { #pages-container-wrapper::-webkit-scrollbar-thumb {
border-radius: 10px; border-radius: 10px;
background: var(--scroll-bar-thumb); background: var(--scroll-bar-thumb);
} }
/* Handle on hover */ /* Handle on hover */
#pages-container::-webkit-scrollbar-thumb:hover { #pages-container-wrapper::-webkit-scrollbar-thumb:hover {
background: var(--scroll-bar-thumb-hover); background: var(--scroll-bar-thumb-hover);
} }