From 01529cc98142aa5b77bd048cd3eb62679f96c0e3 Mon Sep 17 00:00:00 2001
From: jordy <jordyvandertang@hotmail.com>
Date: Sun, 23 Apr 2023 13:56:39 +0200
Subject: [PATCH] make pdf bar wider, hide buttons until hover

---
 src/main/resources/templates/multi-tool.html | 17 ++++++++++++++++-
 1 file changed, 16 insertions(+), 1 deletion(-)

diff --git a/src/main/resources/templates/multi-tool.html b/src/main/resources/templates/multi-tool.html
index b4cae58d..cc6ae337 100644
--- a/src/main/resources/templates/multi-tool.html
+++ b/src/main/resources/templates/multi-tool.html
@@ -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">
                             
@@ -434,6 +438,10 @@
     </script>
 
     <style>
+        .multi-tool-container {
+            max-width: 95vw;
+            margin: 0 auto;
+        }
         #global-buttons-container {
             display: flex;
             gap: 10px;
@@ -534,7 +542,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;