From 27180ae9d6daa83d760983b5ed55591979524feb Mon Sep 17 00:00:00 2001
From: FrederikBaerentsen <frederik+gitea@baerentsen.net>
Date: Mon, 4 Mar 2024 09:24:13 -0500
Subject: [PATCH] More CSS fix

---
 static/style.css               | 36 +---------------------------
 templates/base.html            | 43 +++++++++++++++++++++++++++++++++-
 templates/bootstrap_table.html | 31 +++++++++++++++++++-----
 3 files changed, 68 insertions(+), 42 deletions(-)
diff --git a/static/style.css b/static/style.css
index dcb970e..793cbad 100644
--- a/static/style.css
+++ b/static/style.css
@@ -1,37 +1,3 @@
-body {
-    font-family: Arial, sans-serif;
-    margin: 10px;
-}
-
-h1 {
-    color: #333;
-}
-
-form {
-    margin-top: 20px;
-}
-
-label {
-    font-weight: bold;
-}
-
-input[type="number"] {
-    padding: 5px;
-    margin-right: 10px;
-}
-
-button {
-    padding: 8px 12px;
-    background-color: #007bff;
-    color: #fff;
-    border: none;
-    cursor: pointer;
-}
-
-button:hover {
-    background-color: #0056b3;
-}
-
 /* The Modal (background) */
 .modal {
   display: none; /* Hidden by default */
@@ -100,4 +66,4 @@ button:hover {
   padding: 2px 16px;
   background-color: #5cb85c;
   color: white;
-}
\ No newline at end of file
+}
diff --git a/templates/base.html b/templates/base.html
index f9eb69f..e506e1b 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -20,6 +20,19 @@ th {
 table {
 }
 
+#data {
+  width: 100%;
+  border-collapse: collapse;
+}
+
+#data th:nth-child(3),
+#data td:nth-child(3) {
+  max-width: 300px; /* Adjust as needed */
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
 .center-table {
 }
 
@@ -136,6 +149,32 @@ td img{
   height: 100%;
   background-color: rgba(0,0,0,0.5);
 }
+.lightbox-wrapper {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+
+.lightbox-content {
+  max-width: 90%;
+  max-height: 90%;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+
+#lightbox-text {
+  position: absolute;
+  bottom: 20px; /* Adjust as needed */
+  left: 50%;
+  transform: translateX(-50%);
+  padding: 10px;
+  background-color: rgba(0, 0, 0, 0.5); /* Adjust background color and opacity */
+  color: white;
+  text-align: center;
+}
+
 
 #lightbox-modal .close {
   position: absolute;
@@ -153,12 +192,14 @@ td img{
   max-height: 90%;
 }
 
+
 </style>
 
   </head>
   <body>
+	  <button style="background-color: white;color: black;border: 1px dotted black;width: 98%;margin: 1%;" onclick="goToPage('/')">Home</button> 
     <div class="container">
-      <h1 style="margin: 20px 0px 0px 0px;">{{ title }}</h1>
+      <h2 style="margin: 20px 0px 0px 0px;">{{ title }}</h2>
       <hr>
       {% block content %}{% endblock %}
     </div>
diff --git a/templates/bootstrap_table.html b/templates/bootstrap_table.html
index 3bd7339..2e9843e 100644
--- a/templates/bootstrap_table.html
+++ b/templates/bootstrap_table.html
@@ -3,7 +3,7 @@
 {% block content %}
 <center><button class="hidden-desktop" style="background-color: white;border: 1px solid black; color: black;" id="expand-button">Expand Columns</button></center>
 <div class="center-table">
-<table id="data">
+<table id="data" class="table">
     <thead>
       <tr>
         <th></th>
@@ -123,16 +123,25 @@
 
 
 <div id="lightbox-modal">
-  <span class="close">&times;</span>
-  <img class="lightbox-content" id="lightbox-image">
+  <div class="lightbox-wrapper">
+    <span class="close">&times;</span>
+    <img class="lightbox-content" id="lightbox-image">
+    <div class="text-container" id="lightbox-text"></div>
+  </div>
 </div>
 
-{% endblock %}
+
+  {% endblock %}
 
 
 
 {% block scripts %}
 <script>
+
+	function goToPage(url) {
+		window.location.href = url;
+	}
+
 	const expandButton = document.getElementById('expand-button');
 const dataTable = document.getElementById('data');
 let isExpanded = false;
@@ -155,12 +164,15 @@ document.addEventListener('DOMContentLoaded', function () {
   const lightboxTrigger = document.querySelectorAll('.lightbox-trigger');
   const lightboxModal = document.getElementById('lightbox-modal');
   const lightboxImage = document.getElementById('lightbox-image');
+  const lightboxText = document.getElementById('lightbox-text');
   const closeModal = document.querySelector('.close');
 
   lightboxTrigger.forEach(function (element) {
     element.addEventListener('click', function () {
       const imgSrc = element.getAttribute('src');
+      const textContent = element.closest('tr').querySelector('td:nth-child(3)').textContent; // Adjust the index accordingly
       lightboxImage.setAttribute('src', imgSrc);
+      lightboxText.textContent = textContent;
       lightboxModal.style.display = 'block';
     });
   });
@@ -170,13 +182,20 @@ document.addEventListener('DOMContentLoaded', function () {
   });
 
   lightboxModal.addEventListener('click', function (event) {
-    if (event.target === lightboxModal) {
+    if (event.target === lightboxModal || event.target === lightboxImage || event.target === lightboxText) {
+      // Dismiss only if the clicked element is part of the content area
+      lightboxModal.style.display = 'none';
+    }
+  });
+
+  // Dismiss the lightbox when clicking outside the content area (i.e., the background)
+  lightboxModal.addEventListener('click', function (event) {
+    if (event.target != lightboxModal) {
       lightboxModal.style.display = 'none';
     }
   });
 });
 
-
 </script>
 
 {% endblock %}
