From 37a6fd21272b7b40ea327d424e27ef5c28df78a8 Mon Sep 17 00:00:00 2001
From: FrederikBaerentsen <frederik+gitea@baerentsen.net>
Date: Sat, 28 Dec 2024 08:36:49 +0100
Subject: [PATCH] Added formatting for better seperation of minifigs and tables

---
 templates/base.html  | 11 +++++++++--
 templates/table.html | 19 ++++++++++---------
 2 files changed, 19 insertions(+), 11 deletions(-)

diff --git a/templates/base.html b/templates/base.html
index 32d0904..f3b384f 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -14,6 +14,12 @@
 
 <style>
 
+
+.title-image {
+            object-fit: cover;
+            width: 100%;
+            height: 200px;
+        }
 table.sortable th:not(.sorttable_sorted):not(.sorttable_sorted_reverse):not(.sorttable_nosort):after {
     content: " \25B4\25BE"
 }
@@ -28,6 +34,7 @@ table.sortable tbody tr:nth-child(2n+1) td {
 	display: none;
 }
 
+
 table { 
     width: 100%; /* Ensure the table takes full width of its container */
 
@@ -246,8 +253,8 @@ background-color: white;
 
     <div class="container">
       <center>
-        <h1 class="title">{{ tmp }} - {{ title }}</h1>
-      <img class="lightbox-trigger" id="cover" style='height: 150px; width: auto; object-fit: contain'  src="/static/sets/{{ tmp }}.jpg" alt="{{ tmp }} - {{ title }}">
+        <h1 class="title is-2 mt-4">{{ tmp }} - {{ title }}</h1>
+      <img class="lightbox-trigger title-image mb-5" id="cover" style='height: 150px; width: auto; object-fit: contain'  src="/static/sets/{{ tmp }}.jpg" alt="{{ tmp }} - {{ title }}">
       {% block content %}{% endblock %}
     </div>
     {% block scripts %}{% endblock %}
diff --git a/templates/table.html b/templates/table.html
index d0b4b37..c89f731 100644
--- a/templates/table.html
+++ b/templates/table.html
@@ -1,14 +1,14 @@
 {% extends "base.html" %}
 
 {% block content %}
- <div style="overflow-x:auto;">
+ <div style="overflow-x:auto;border-radius: 10px;border: 1px #ccc solid;  box-shadow:0 0.5em 1em -0.125em hsla(221deg,14%,4%,0.1),0 0px 0 1px hsla(221deg,14%,4%,0.02);" >
 <table id="data" class="table tablemobile sortable">
     <thead>
       <tr>
         <th class="sorttable_nosort" style="width:65px;">Image</th>
         <th class="hidden-mobile name-class">Name</th>
         <th class="hidden-mobile">Color</th>
-        <th >Qty</th>
+        <th style="text-align:center">Qty</th>
         <th class="sorttable_nosort" style="text-align:center;">Missing</th>
       </tr>
     </thead>
@@ -58,11 +58,12 @@
   </table>
 </div>
 
-{% if minifig_list | length > 0 %}
+<div style="margin: 2rem 0; padding: 2rem; border-bottom: 2px solid #eee;"></div>
 
-<h1 id="minifigs" class="title">Minifigs</h1>
+{% if minifig_list | length > 0 %}
+<h1 id="minifigs" class="title is-2 ">Minifigs</h1>
 {% for fig in minifig_list %}
-<h2 class="subtitle">{{ fig[2] }} ({{ fig[0] }})</h2>
+<h2 class="subtitle is-4 mt-4 ">{{ fig[2] }} ({{ fig[0] }})</h2>
 
 <div style="display: flex; justify-content: center;">
   <div style="display: flex; align-items: center;">
@@ -75,15 +76,15 @@
   </div>
 </div>
 
-<div class="center-table" >
-  <table id="data" class="table">
+  <div class="center-table" style="overflow-x:auto;border-radius: 10px;border: 1px #ccc solid;  box-shadow:0 0.5em 1em -0.125em hsla(221deg,14%,4%,0.1),0 0px 0 1px hsla(221deg,14%,4%,0.02);" >
+  <table id="data" class="table tablemobile sortable">
       <thead>
         <tr>
-          <th class="fixed-width"></th>
+          <th class="fixed-width sorttable_nosort"></th>
           <th style="text-align:left;margin:0px;" class="fixed-width hidden-mobile name-class">Name</th>
           <th class="fixed-width hidden-mobile">Color</th>
           <th class="fixed-width" style="text-align: center;">Qty</th>
-          <th class="fixed-width" style="text-align: center;">Missing</th>
+          <th class="fixed-width sorttable_nosort" style="text-align: center;">Missing</th>
         </tr>
       </thead>
       <tbody>