FrederikBaerentsen/BrickTracker
4
4
Fork 3
Code Issues 9 Pull Requests 1 Actions Packages Projects 1 Releases Wiki Activity

Fixed formatting on frontpage

Browse Source
This commit is contained in:
FrederikBaerentsen 2024-03-04 04:33:39 -05:00
parent 616bbaf30d
commit 4991595995
2 changed files with 126 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

50
templates/base.html
View File

@ -4,6 +4,56 @@
<title>{{ title }}</title> <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 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"> <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> </head>
<body> <body>
<div class="container"> <div class="container">

94
templates/frontpage.html
View File

@ -3,13 +3,16 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <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 --> <!-- CSS Reset -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.css">
<!-- Milligram CSS --> <!-- Milligram CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/milligram/1.4.1/milligram.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/milligram/1.4.1/milligram.css">
<style> <style>
body { body {
margin: 0; margin: 0;
@ -23,23 +26,49 @@
gap: 10px; gap: 10px;
padding: 10px; padding: 10px;
} }
.grid-item { .grid-item {
display: flex;
flex-direction: column; /* Arrange content vertically */
}
.card {
height: 100%;
overflow: hidden;
border: 1px solid #ccc; border: 1px solid #ccc;
padding: 10px; padding: 10px;
box-sizing: border-box; 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 { .grid-item {
max-width: 100%; height: auto; /* Let the height adjust dynamically */
height: auto; overflow: visible; /* Allow content to overflow if necessary */
display: block;
} }
/* 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 */ margin: 0; /* Remove default margin */
} }
.card-footer {
position:absolute;
bottom:0;
width:90%;
height:40px; /* Height of the footer */
}
.button { .button {
background-color: black; background-color: black;
border-color: black; border-color: black;
@ -75,15 +104,44 @@
{% for i in set_list %} {% for i in set_list %}
<div class="grid-item"> <div class="grid-item">
<center><img src="/static/sets/{{ i['set_num'] }}/cover.jpg" style="height: 150px; width: auto;" alt="Image"></center> <div class="card">
<h2 class='set_name'>{{ i['name'] }}</h2> <div class="card-image">
<p><b>Set:</b></p><p class='set_id'>{{ i['set_num'] }}</p> <figure class="image is-4by3">
<br> <a href="/{{ i['set_num'] }}">
<p><b>Year: </b></p><p class='set_year'>{{ i['year'] }}</p> <img style='height: 100%; width: 100%; object-fit: contain' src="/static/sets/{{ i['set_num'] }}/cover.jpg" alt="Image">
<br> </a>
<p><b>Parts:</b></p><p class='set_parts'>{{ i['num_parts'] }}</p> </figure>
<br> </div>
<p><b>Inventory:</b> <a href="/{{ i['set_num'] }}">Link</a></p> <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> </div>
{% endfor %} {% endfor %}