From 4991595995851525d29f04aa8fce3902ababaf2f Mon Sep 17 00:00:00 2001
From: FrederikBaerentsen <frederik+gitea@baerentsen.net>
Date: Mon, 4 Mar 2024 04:33:39 -0500
Subject: [PATCH] Fixed formatting on frontpage

---
 templates/base.html      | 50 +++++++++++++++++++++
 templates/frontpage.html | 94 ++++++++++++++++++++++++++++++++--------
 2 files changed, 126 insertions(+), 18 deletions(-)
diff --git a/templates/base.html b/templates/base.html
index a429efc..392c1dc 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -4,6 +4,56 @@
     <title>{{ title }}</title>
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
+<style>
+table {
+            width: 100%;
+            border-collapse: collapse;
+        }
+
+        th, td {
+            padding: 8px;
+            text-align: left;
+            border-bottom: 1px solid #ddd;
+        }
+
+        th {
+            background-color: #f2f2f2;
+        }
+
+        /* Responsive styles */
+        @media only screen and (max-width: 600px) {
+            table {
+                border: 0;
+            }
+
+            table caption {
+                font-size: 1.3em;
+            }
+
+            table thead {
+                display: none;
+            }
+
+            table tr {
+                border-bottom: 3px solid #ddd;
+                display: block;
+                margin-bottom: 10px;
+            }
+
+            table td {
+                display: block;
+                text-align: right;
+                font-size: 13px;
+            }
+
+            table td::before {
+                content: attr(data-label);
+                font-weight: bold;
+                display: inline-block;
+                width: 50%;
+            }
+        }
+</style>
   </head>
   <body>
     <div class="container">
diff --git a/templates/frontpage.html b/templates/frontpage.html
index 0f94f2a..fa8e12b 100644
--- a/templates/frontpage.html
+++ b/templates/frontpage.html
@@ -3,13 +3,16 @@
 <head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
-<title>Responsive Grid</title>
+<title>Set Overview</title>
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css">
+
 <!-- CSS Reset -->
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.css">
 
 <!-- Milligram CSS -->
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/milligram/1.4.1/milligram.css">
 
+
 <style>
   body {
     margin: 0;
@@ -23,23 +26,49 @@
     gap: 10px;
     padding: 10px;
   }
-  
+
   .grid-item {
+  	display: flex;
+	flex-direction: column; /* Arrange content vertically */
+  }
+
+  .card {
+    height: 100%;
+    overflow: hidden;
     border: 1px solid #ccc;
     padding: 10px;
     box-sizing: border-box;
+    padding-bottom:40px;   /* Height of the footer */
+  }
+
+/* Adjust height for smaller screens */
+@media (max-width: 768px) {
+  .card {
+    height: auto; /* Let the height adjust dynamically */
   }
   
-  .grid-item img {
-    max-width: 100%;
-    height: auto;
-    display: block;
+  .grid-item {
+    height: auto; /* Let the height adjust dynamically */
+    overflow: visible; /* Allow content to overflow if necessary */
   }
-    /* Style to display paragraphs inline */
-  .grid-item p {
-    display: inline-block;
+}
+
+  .grid-item img { 
+    max-width: 100%; 
+    height: auto; 
+    display: block;
+
+  }
+  .card p {
     margin: 0; /* Remove default margin */
   }
+  .card-footer {
+	  position:absolute;
+   bottom:0;
+   width:90%;
+   height:40px;   /* Height of the footer */
+  }
+  
   .button {
   background-color: black;
   border-color: black;
@@ -75,15 +104,44 @@
 {% for i in set_list %}
 
 <div class="grid-item">
-	<center><img src="/static/sets/{{ i['set_num'] }}/cover.jpg" style="height: 150px; width: auto;" alt="Image"></center>
-	<h2 class='set_name'>{{ i['name'] }}</h2>
-	<p><b>Set:</b></p><p class='set_id'>{{ i['set_num'] }}</p>
-	<br>
-	<p><b>Year: </b></p><p class='set_year'>{{ i['year'] }}</p>
-	<br>
-	<p><b>Parts:</b></p><p class='set_parts'>{{ i['num_parts'] }}</p>
-	<br>
-	<p><b>Inventory:</b> <a href="/{{ i['set_num'] }}">Link</a></p>
+<div class="card">
+	<div class="card-image">
+    	  <figure class="image is-4by3">
+	    <a href="/{{ i['set_num'] }}">
+	      <img style='height: 100%; width: 100%; object-fit: contain'  src="/static/sets/{{ i['set_num'] }}/cover.jpg" alt="Image">
+	    </a>
+	  </figure>
+	</div>
+ 	<div class="wrapper" style="min-height: 120px;display:flex;flex-direction:column;"> 
+	<div class="card-content" style="display: flex;flex-direction: column;flex: 1;">
+	  <p class="title">
+	  <span class="set_id">{{ i['set_num'] }}</span> <span class="set_name">{{ i['name'] }}</span>
+	  </p>
+
+	  <p class="subtitle"style="margin-bottom:auto;">
+	    Theme - <span class='set_year'>{{ i['year'] }}</span>
+	  </p>
+	  <div style="margin:auto auto 0 0;">
+            <b>Parts:</b> 
+	    <span class='set_parts'>{{ i['num_parts'] }}</span>
+	  </div>
+	</div>
+	
+	<footer class="card-footer">
+	  <p class="card-footer-item">
+	    <span>
+	      <a href="/{{ i['set_num'] }}">Inventory</a>
+	    </span>
+	  </p>
+
+	  <p class="card-footer-item">
+	    <span>
+	      <a href="/{{ i['set_num'] }}">Instructions</a>
+	    </span>
+	  </p>
+	</footer>
+	</div>
+</div>
 </div>
 
 {% endfor %}
