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

Working frontpage with responsive grid. Fixed issue with part without element_id

Browse Source
This commit is contained in:
FrederikBaerentsen 2024-03-03 06:43:35 -05:00
parent a843e929d7
commit 276f48e4a3
2 changed files with 64 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
templates/bootstrap_table.html
View File

@ -21,8 +21,12 @@
{% for brick in inventory_file.results %}
{% if brick.is_spare == False %}
<tr>
<td><img src="{{ '/static/parts/'+brick.element_id+'.jpg' }}" style="height: 50px; width: auto;"></td>
<td>{{ brick.element_id }}</td>
{% if brick.element_id == None %}
<td><img src="{{ '/static/none.jpg' }}" style="height: 50px; width: auto;"></td>
{% else %}
<td><img src="{{ '/static/parts/' + brick.element_id + '.jpg' }}" style="height: 50px; width: auto;"></td>
{% endif %}
<td>{{ brick.element_id }}</td>
<td>{{ brick.part.part_num }}</td>
<td>{{ brick.part.name }}</td>
<td>{{ brick.color.id }}</td>
@ -76,7 +80,11 @@
{% for brick in inventory_file.results %}
{% if brick.is_spare == True %}
<tr>
<td><img src="{{ '/static/parts/'+brick.element_id+'.jpg' }}" style="height: 50px; width: auto;"></td>
{% if brick.element_id == None %}
<td><img src="{{ '/static/none.jpg' }}" style="height: 50px; width: auto;"></td>
{% else %}
<td><img src="{{ '/static/parts/' + brick.element_id + '.jpg' }}" style="height: 50px; width: auto;"></td>
{% endif %}
<td>{{ brick.element_id }}</td>
<td>{{ brick.part.part_num }}</td>
<td>{{ brick.part.name }}</td>

53
templates/frontpage.html Normal file
View File

@ -0,0 +1,53 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Grid</title>
<style>
body {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
}
.grid-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 20px;
padding: 20px;
}
.grid-item {
border: 1px solid #ccc;
padding: 20px;
box-sizing: border-box;
}
.grid-item img {
max-width: 100%;
height: auto;
display: block;
}
</style>
</head>
<body>
<div class="grid-container">
{% for i in set_list %}
<div class="grid-item">
<img src="/static/sets/{{ i['set_num'] }}/cover.jpg" style="height: 150px; width: auto;" alt="Image">
<h2>{{ i['name'] }}</h2>
<p>Set: {{ i['set_num'] }}</p>
<p>Year: {{ i['year'] }}</p>
<p>Parts: {{ i['num_parts'] }}</p>
<p>Inventory: <a href="/{{ i['set_num'] }}">Link</a></p>
</div>
{% endfor %}
</div>
</body>
</html>