From 301ccbfbd8e21d33d1a0c0c487e985a3b2ada413 Mon Sep 17 00:00:00 2001
From: b4-sharp <Bradley2.Sharp@live.uwe.ac.uk>
Date: Sat, 15 Apr 2023 21:01:42 +0100
Subject: [PATCH] Improve item/set page
---
store/templates/item_page.html | 74 ++++++++++++++++++----------------
1 file changed, 40 insertions(+), 34 deletions(-)
diff --git a/store/templates/item_page.html b/store/templates/item_page.html
index 7e789fd..f1107d3 100644
--- a/store/templates/item_page.html
+++ b/store/templates/item_page.html
@@ -1,38 +1,44 @@
{%extends 'base.html' %}
-{% block content %}
{% block title %} Item Page | Antiques Online {% endblock %}
-<div>
- <img src='..\static\image_placeholder.png' alt="Image Placeholder" width="200" height="170">
- <br />
- Item price: £{{item.price}}
- <br />
- Item description: {{item.description}}
- <br />
- <form method="POST" action="{{ url_for('add_to_basket_set') if item.items else url_for('add_to_basket') }}">
- <input type="hidden" name="item_id" value="{{ item.id }}">
- <input class="button" type="submit" value="Add to basket">
- </form>
-</div>
-<div>
- {% if item.items %}
- <h1>Items contained in set: </h1>
- <table>
- <thead>
- <tr>
- <th>Item description</th>
- <th>Item price</th>
- <th></th>
- </tr>
- </thead>
- <tbody>
- {% for item in item.items %}
- <tr>
- <td>{{ item['description'] }}</td>
- <td>£{{ item['price'] }}</td>
- </tr>
- {% endfor %}
- </tbody>
- </table>
- {% endif %}
+{% block content %}
+<div class="container vertical-center">
+ <div class="row">
+ <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>
+ <form method="POST"
+ action="{{ url_for('add_to_basket_set') if item.items else url_for('add_to_basket') }}">
+ <input type="hidden" name="item_id" value="{{ item.id }}">
+ <input class="button" type="submit" value="Add to basket">
+ </form>
+ </div>
+ </div>
+
+ </div>
+ <div class="row text-center">
+ {% if item.items %}
+ <h1>Items contained in set: </h1>
+ <table class="table">
+ <thead>
+ <tr>
+ <th>Item description</th>
+ <th>Item price</th>
+ <th></th>
+ </tr>
+ </thead>
+ <tbody>
+ {% for item in item.items %}
+ <tr>
+ <td>{{ item['description'] }}</td>
+ <td>£{{ item['price'] }}</td>
+ </tr>
+ {% endfor %}
+ </tbody>
+ </table>
+ {% endif %}
+ </div>
</div>
{% endblock %}
\ No newline at end of file
--
GitLab