#6 Updated Product views to better show information

static/css/products.css

@@ -39,51 +39,60 @@
 .product {
     display: flex;
     flex-direction: column;
-    justify-content: space-around;
-    flex-wrap: wrap;
+    justify-content: center;
+    align-items: center;
     flex: 4 0 1rem;
-    max-width: 30%;
-    padding: .5rem .5rem .5rem .5rem;
+    max-width: 40%;
+    gap: .5em .5em;
+    padding: .5rem 0.2rem;
     background: var(--bg-secondary);
     border-radius: .5rem .5rem;
+    border: .1em solid rgba(255, 255, 255, 15%);
     transition: all 0.2s;
 }
 
-.product-image {
-    width: 40%;
-    height: auto;
-    box-shadow: 0px 30px 50px 0px rgba(0, 0, 0, 0.025);
-}
-
 .product-fs {
     height: 80%;
     width: 80%;
     font-size: 150%;
     display: flex;
-    flex-direction: column;
-    justify-content: space-around;
-    flex-wrap: wrap;
+    flex-direction: row;
+    justify-content: space-between;
+    gap: 2em 2em;
     padding: .5rem 1rem 2rem 2rem;
-    background: var(--bg-secondary);
+    /* background: var(--bg-secondary); */
     border-radius: .5rem .5rem;
     transition: all 0.2s;
 }
 
-.product-title {
-    font-size: 130%;
-    font-weight: bold;
-}
-
-.product-information {
+.product-content-container {
     display: flex;
     flex-direction: row;
-    gap: 1rem 1rem;
+    gap: 1em 1em;
+    padding: 0rem 1rem;
+}
+
+.product-image-preview {
+    max-height: 150px;
+    max-width: 150px;
+}
+
+.product-image {
+    max-height: 500px;
+    max-width: 500px;
+}
+
+.product-title {
+    font-size: 120%;
+    font-weight: bold;
 }
 
 .product-details {
     display: flex;
     flex-direction: column;
-    align-items: center;
+    padding: 5% 0;
+    /* justify-content: center; */
+    /* align-items: center; */
     gap: 1rem 1rem;
 }
 
@@ -97,3 +106,58 @@
     overflow: hidden;
     text-overflow: ellipsis;
 }
+
+.product-acquisition-pane {
+    font-size: 80%;
+    width: 100rem;
+    max-width: 20%;
+    background-color: var(--bg-secondary);
+    border: .3em solid rgba(255, 255, 255, 15%);
+    border-radius: .5rem;
+    padding: 1rem 1rem;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    gap: 1rem 1rem;
+}
+
+.product-price {
+    font-weight: bold;
+}
+
+.product-delivery {
+    font-size: 70%;
+}
+
+.product-postage {
+    font-size: 70%;
+}
+
+.product-stock {
+    display: flex;
+    flex-direction: row;
+    font-weight: bold;
+    justify-content: space-around;
+    flex-wrap: wrap;
+    align-items: center;
+}
+.product-quantity {
+    font-size: 50%;
+}
+
+.product-instock {
+    color: var(--green);
+}
+
+.product-nostock {
+    color: var(--red);
+}
+
+.product-add-to-cart {
+    padding: .25rem .5rem;
+    margin-top: .25rem;
+    margin-right: .5rem;
+    font-size: 1rem;
+    border: none;
+    background-color: gray;
+}

templates/content.html

@@ -5,16 +5,15 @@
         {% for product in products %}
             <a href="/products/{{product.id}}" class="product product-link">
                 <div class="product-title">{{product.name}}</div>
-                    <div class="product-information">
-                        <div class="product-image">
-                            <img src="{{url_for('static', filename='assets/img/products/' + product.image)}}" alt="Brake Disks" height="auto" width="150px" />
-                        </div>
+                <div class="product-content-container">
+                        <img class="product-image-preview" src="{{url_for('static', filename='assets/img/products/' + product.image)}}" alt="Brake Disks" />
+
                     <div class="product-details">
                         <div class="product-price">£{{product.cost}}</div>
                         <div class="product-description hide-overflow ">{{product.description}}</div>
                     </div>
                 </div>
-                <div class="product-add-to-cart"></div>
+                <input type="submit" class="product-add-to-cart" value="Add to Cart" />
             </a>
         {% endfor %}
     {% endif %}

templates/product.html

@@ -41,17 +41,25 @@
             </form>
             <div class="product-add-to-cart"></div>
         {% else %}
-            <div class="product-title">{{product.name}}</div>
-            <div class="product-information">
-                <div class="product-image">
-                    <img src="{{url_for('static', filename='assets/img/products/' + product.image)}}" alt="Brake Disks" height="auto" width="150px" />
-                </div>
+            <img class="product-image" src="{{url_for('static', filename='assets/img/products/' + product.image)}}" alt="Brake Disks"/>
             <div class="product-details">
-                    <div class="product-price">£{{product.cost}}</div>
+                <div class="product-title">{{product.name}}</div>
                 <div class="product-description">{{product.description}}</div>
             </div>
+            <div class="product-acquisition-pane">
+                <div class="product-price">£{{product.cost}}</div>
+                <div class="product-delivery">Earliest Delivery Friday 24th December</div>
+                <div class="product-postage">+£{{product.cost}} P&P</div>
+                <div class="product-stock">
+                    {% if product.quantityAvailable > 0 %}
+                        <div class="product-instock">In Stock</div>
+                        <div class="product-quantity">{{product.quantityAvailable}} Available</div>
+                        <input type="submit" class="product-add-to-cart" value="Add to Cart" />
+                    {% else %}
+                        <div class="product-nostock">Out of Stock</div>
+                    {% endif %}
+                </div>
             </div>
-            <div class="product-add-to-cart"></div>
         {% endif %}
     {% endif %}
 </div>