From 1bb4afd137c2fc75130dade824924616216b12b6 Mon Sep 17 00:00:00 2001
From: b4-sharp <Bradley2.Sharp@live.uwe.ac.uk>
Date: Fri, 14 Apr 2023 04:09:43 +0100
Subject: [PATCH] Bootstrap item page
---
store/templates/items.html | 71 +++++++++++---------------------------
1 file changed, 20 insertions(+), 51 deletions(-)
diff --git a/store/templates/items.html b/store/templates/items.html
index 7f7c464..a60fb2b 100644
--- a/store/templates/items.html
+++ b/store/templates/items.html
@@ -1,55 +1,24 @@
{%extends 'base.html' %}
-
-
-
-{% block content %}
{% block title %} Items | Antiques Online {% endblock %}
-<style>
- .grid {
- display: grid;
- grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
- grid-gap: 10px;
- grid-auto-rows: minmax(100px, auto);
- }
-
- .grid-item {
- grid-row: span 1;
- grid-column: span 1;
- padding: 10px;
- }
-
- .grid-item img {
- max-width: 100%;
- height: auto;
- }
-
- .grid-item h2 {
- margin: 10px 0;
- font-size: 18px;
-
- }
-
- .grid-item p {
- margin: 5px 0;
- font-size: 14px;
- }
-</style>
-
-<div class="grid">
- {% if items %}
- {% for item in items %}
- <div class="grid-item">
-
- <img src="static\image_placeholder.png" alt="{{ item.description }}">
- <h2>{{ item.description }}</h2>
- <p>£{{ item.price }}</p>
- <a href="{{url_for('item_page', item_id = item.id)}}">View
- Details</a>
-
+{% block content %}
+<!-- https://getbootstrap.com/docs/4.0/layout/grid/ -->
+<div class="container">
+ <div class="row">
+ {% if items %}
+ {% for item in items %}
+ <div class="col text-center">
+ <div class="align-items-center">
+ <img class="align-self-center" src="static\image_placeholder.png" alt="{{ item.description }}"
+ style="width: 200px; height: 200px;"> <!-- Set image size to ensure content is always fitting. -->
+ <h2>{{ item.description }}</h2>
+ <p>£{{ item.price }}</p>
+ <a href="{{url_for('item_page', item_id = item.id)}}">View Details</a>
+ </div>
+ </div>
+ {% endfor %}
+ {% else %}
+ <p>No items available</p>
+ {% endif %}
</div>
- {% endfor %}
- {% else %}
- <p>No items available</p>
- {% endif %}
</div>
-{% endblock %}
+{% endblock %}
\ No newline at end of file
--
GitLab