From 6376e595342a50ce45f29a5ed23dab6a815e5716 Mon Sep 17 00:00:00 2001
From: Michael Drury <mpdrury15@gmail.com>
Date: Fri, 28 Apr 2023 11:40:06 +0100
Subject: [PATCH] making websight have more of a responsive design by using %
 instead of px and changed how buttons look

---
 shop/static/styles.css       | 35 ++++++++++++++++++++++++-----------
 shop/templates/shopping.html | 10 +++++-----
 2 files changed, 29 insertions(+), 16 deletions(-)

diff --git a/shop/static/styles.css b/shop/static/styles.css
index 42d2805..4b5628e 100644
--- a/shop/static/styles.css
+++ b/shop/static/styles.css
@@ -19,18 +19,18 @@ a:link {
     text-align: center;
 }
 
-.item_home_img {
+.item_shopping_img {
     height: 90%;
     float: right;
     padding: 2%;
 }
 
-.home_side {
+.shopping_side {
     float: right;
     clear: right;
     padding: 20px;
     text-align: center;
-    height: 100%;
+    width: 20%;
 }
 
 .home_left {
@@ -61,10 +61,10 @@ a:link {
 .shopping_title {
     font-size: 450%;
     border: thin;
-    margin-left: 20px;
+    margin-left: 2%;
     font-family: Andale Mono, monospace;
     border-bottom: 2px solid grey;
-    width: 1150px;
+    width: 75%;
 }
 
 .home_title {
@@ -98,10 +98,11 @@ a:link {
     padding-left: 20px;
 }
 
-.item_home_block {
+.item_shopping_block {
     border: 2px solid grey;
-    width: 900px;
-    margin: 20px;
+    width: 60%;
+    margin-left: 2%;
+    margin-bottom: 20px;
     padding: 10px;
     height: 250px
 }
@@ -196,7 +197,7 @@ li {
     transform: scale(1.1);
 }
 
-.item_home_img:hover {
+.item_shopping_img:hover {
     transform: scale(1.1);
 }
 
@@ -351,7 +352,7 @@ li {
 }
 
 .sponsor_image {
-    width: 280px;
+    width: 100%;
 }
 
 .remove_form {
@@ -459,11 +460,23 @@ li {
 }
 
 .ad_photo {
-    width: 250px;
+    width: 80%;
     padding: 0px;
     margin: 0px;
 }
 
+.add_to_button {
+    color: black;
+    border: 2px solid grey;
+    background-color: lightgrey;
+    border-radius: 5px;
+}
+
+.add_to_button:hover {
+    color: #D49B30;
+    background-color: lightgrey;
+}
+
 .ad_box {
     border: 2px solid grey;
 }
diff --git a/shop/templates/shopping.html b/shop/templates/shopping.html
index 0317f6e..f145723 100644
--- a/shop/templates/shopping.html
+++ b/shop/templates/shopping.html
@@ -6,7 +6,7 @@
 
 <div id="content-wrap">
 
-    <div class = "home_side">
+    <div class = "shopping_side">
         <p class = "home_right_text">You are {% if not current_user.is_authenticated %}not {% endif %}logged in.</p>
         <form action="" method="POST">
             <div>
@@ -65,20 +65,20 @@
 
 
     {% for item in product_table %}
-        <div class = "item_home_block">
+        <div class = "item_shopping_block">
             <a href="/item?id={{item.product_id}}">
-                <img class = "item_home_img" src = "{{ url_for('static', filename='images/' + item.product_image) }}" alt="product image"/></a>
+                <img class = "item_shopping_img" src = "{{ url_for('static', filename='images/' + item.product_image) }}" alt="product image"/></a>
             <p><a class = "item_home_name" href="/item?id={{item.product_id}}"><b>{{ item.product_name }}</b></a></p>
             <p>price: £{{ item.product_price }}</p>
             <p>product type: {{ item.product_type }}</p>
             {% if current_user.is_authenticated %}
             <form method = "post">
                 <input type = "hidden" name = "item_id_cart" value = {{ item.product_id }}>
-                <input type = "submit" value = "add to cart">
+                <input class = "add_to_button" type = "submit" value = "add to cart">
             </form>
             <form method = "post" style = "padding-top: 10px">
                 <input type = "hidden" name = "item_id_wishlist" value = {{ item.product_id }}>
-                <input type = "submit" value = "add to wishlist">
+                <input class = "add_to_button" type = "submit" value = "add to wishlist">
             </form>
             {% endif %}
             {% if not current_user.is_authenticated %}
-- 
GitLab