Updated jinja templates and css to better enable product alteration

static/css/loginform.css

@@ -27,7 +27,7 @@ h2 {
     gap: 1em 1em;
 }
 
-.input-form input, .input-form select, .input-form option, .input-form textarea {
+.input-form-row input, .input-form-row select, .input-form-row option, .input-form-row textarea {
     width: 100%;
     padding: 0 0 0 10px;
     margin: 0;
@@ -56,12 +56,12 @@ h2 {
     }
 }
 
-.input-form textarea {
+.input-form-row textarea {
     min-height: 120px;
     max-width: 100%;
 }
 
-.input-form input[type="submit"] {
+.input-form-row input[type="submit"] {
     border: none;
     display:block;
     background-color: rgba(255, 255, 255, .10);

static/css/products.css

@@ -58,7 +58,7 @@
     display: flex;
     flex-direction: row;
     justify-content: space-between;
-    gap: 2em 2em;
+    gap: 1em 1em;
     padding: .5rem 1rem 2rem 2rem;
     /* background: var(--bg-secondary); */
     border-radius: .5rem .5rem;
@@ -90,7 +90,7 @@
 .product-details {
     display: flex;
     flex-direction: column;
-    padding: 5% 0;
+    padding: 2% 0;
     /* justify-content: center; */
     /* align-items: center; */
     gap: 1rem 1rem;

templates/login.html

@@ -3,9 +3,17 @@
 <div id="input-form-wrap">
     <h2>Login</h2>
     <form class="input-form" method="POST">
-        <input type="text" id="username" name="username" placeholder="Username" required>
+        <div class="input-form-row">
-        <input type="password" id="password" name="password" placeholder="Password" required>
+            <input type="text" id="username" name="username" placeholder="Username" required>
-        <input type="submit" id="login" value="Login">
+        </div>
+
+        <div class="input-form-row">
+            <input type="password" id="password" name="password" placeholder="Password" required>
+        </div>
+
+        <div class="input-form-row">
+            <input type="submit" id="login" value="Login">
+        </div>
     </form>
     
     <div id="create-account-wrap">

templates/new_product.html

@@ -8,19 +8,26 @@
             <input type="file" id="image" name="image" accept="image/x" required>
         </div>
 
-        <textarea id="description" name="description" placeholder="Product Description" required></textarea>
+        <div class="input-form-row">
-
+            <textarea id="description" name="description" placeholder="Product Description" required></textarea>
-        <select name="category" id="category">
+        </div>
-            {% for category in categories %}
-                <option value="{{category.id}}">{{category.name}}</option>
-            {% endfor %}
-        </select>
 
         <div class="input-form-row">
-            <input type="number" id="cost" name="cost" placeholder=10.99 min=0 step=any required>
+            <select name="category" id="category">
-            <input type="number" id="quantity" name="quantity" placeholder=0 min=0 required>
+                {% for category in categories %}
+                    <option value="{{category.id}}">{{category.name}}</option>
+                {% endfor %}
+            </select>
+        </div>
+
+        <div class="input-form-row">
+            <input type="number" id="cost" name="cost" placeholder="Cost" min=0 step=0.01 required>
+            <input type="number" id="quantity" name="quantity" placeholder="Quantity Available" min=0 required>
+        </div>
+
+        <div class="input-form-row">
+            <input type="submit" id="Create Product" value="Create Product">
         </div>
-        <input type="submit" id="Create Product" value="Create Product">
     </form>
     
     <div id="create-account-wrap">

templates/product.html

@@ -1,46 +1,59 @@
 <link rel="stylesheet" href="{{ url_for('static', filename='css/products.css') }}">
 <link rel="stylesheet" href="{{ url_for('static', filename='css/loginform.css') }}">
 
-<div class="product-fs">
+{% if product != None %}
-    {% if product != None %}
+    {% if user.id == product.sellerID %}
-        {% if user.id == product.sellerID %}
+        <form class="product-fs" method="POST" action="/products/update/{{product.id}}" enctype="multipart/form-data">
-            <form class="input-form" method="POST" action="/products/update/{{product.id}}" enctype="multipart/form-data">
+            <img class="product-image" src="{{url_for('static', filename='assets/img/products/' + product.image)}}" alt="Brake Disks"/>
-                <div class="product-title">
+            <div class="product-details">
+                <div class="input-form-row">
                     <input type="text" id="name" name="name" placeholder="Product Name" value="{{product.name}}" required>
                 </div>
-                <div class="product-information">
+                <div class="input-form-row">
-                    <div class="product-image">
+                    <textarea id="description" name="description" placeholder="Product Description" required>{{product.description}}</textarea>
-                        <img src="{{url_for('static', filename='assets/img/products/' + product.image)}}" alt="Brake Disks" height="auto" width="150px" />
-                        <input type="file" id="image" name="image" accept="image/x">
-                    </div>
-                    <div>
-
-                        <div class="input-form-row">
-                            <input type="number" id="cost" name="cost" placeholder=10.99 min=0 step=any value="{{product.cost}}"required>
-                            <input type="textarea" id="description" name="description" placeholder="Product Description" value="{{product.description}}" required>
-                        </div>
-
-                        <div class="input-form-row">
-                            <select name="category" id="category">
-                                {% for category in categories %}
-                                    {% if category.id == product.category %}
-                                        <option value="{{category.id}}" selected>{{category.name}}</option>
-                                    {% else %}
-                                        <option value="{{category.id}}">{{category.name}}</option>
-                                    {% endif%}
-                                {% endfor %}
-                            </select>
-                        </div>
-
-                        <div class="input-form-row">
-                            <input type="number" id="quantity" name="quantity" placeholder=0 min=0 value="{{product.quantityAvailable}}" required>
-                        </div>
-                    </div>
                 </div>
-                <input type="submit" id="Create Product" value="Create Product">
+
-            </form>
+                <div class="input-form-row">
-            <div class="product-add-to-cart"></div>
+                    <select name="category" id="category">
-        {% else %}
+                        {% for category in categories %}
+                            {% if category.id == product.category %}
+                                <option value="{{category.id}}" selected>{{category.name}}</option>
+                            {% else %}
+                                <option value="{{category.id}}">{{category.name}}</option>
+                            {% endif%}
+                        {% endfor %}
+                    </select>
+                </div>
+
+                <div class="input-form-row">
+                    <input type="file" id="image" name="image" accept="image/x">
+                </div>
+
+                <div class="input-form-row">
+                    <input type="submit" id="Create Product" value="Update Product">
+                </div>
+            </div>
+            <div class="product-acquisition-pane">
+                <div class="input-form-row">
+                    <input type="number" id="cost" name="cost" placeholder="Cost" min=0 step=0.01 value="{{product.cost}}"required>
+                </div>
+                <div class="product-delivery">Earliest Delivery Friday 24th December</div>
+                <div class="product-postage">+£{{product.cost}} P&P</div>
+                <div class="product-stock">
+                    <div class="input-form-row">
+                        <input type="number" id="quantity" name="quantity" placeholder="Quantity Available" min=0 value="{{product.quantityAvailable}}" required>
+                    </div>
+                    {% if product.quantityAvailable > 0 %}
+                        <div class="product-instock">In Stock</div>
+                        <div class="product-quantity">{{product.quantityAvailable}} Available</div>
+                    {% else %}
+                        <div class="product-nostock">Out of Stock</div>
+                    {% endif %}
+                </div>
+            </div>
+        </form>
+    {% else %}
+        <div class="product-fs">
             <img class="product-image" src="{{url_for('static', filename='assets/img/products/' + product.image)}}" alt="Brake Disks"/>
             <div class="product-details">
                 <div class="product-title">{{product.name}}</div>
@@ -60,6 +73,8 @@
                     {% endif %}
                 </div>
             </div>
-        {% endif %}
+        </div>
     {% endif %}
-</div>
+{% endif %}
+
+    

templates/signup.html

@@ -13,12 +13,18 @@
             <input type="email" id="email" name="email" placeholder="Email Address" required>
         </div>
 
-        <input type="password" id="password" name="password" minlength=8 placeholder="Password" required>
+        <div class="input-form-row">
+            <input type="password" id="password" name="password" minlength=8 placeholder="Password" required>
+        </div>
+
         <label class="checkbox">Signup as a Seller?
             <input type="checkbox" id="seller" name="seller"/>
             <span class="checkmark"></span>
         </label>
-        <input type="submit" id="Sign Up" value="Sign Up">
+
+        <div class="input-form-row">
+            <input type="submit" id="Sign Up" value="Sign Up">
+        </div>
     </form>
     
     <div id="create-account-wrap">

utils/file_utils.py

@@ -2,7 +2,7 @@ import os
 import uuid
 import pathlib
 
-ALLOWED_EXTENSIONS = {'png', 'jpg', 'jpeg', 'gif'}
+ALLOWED_EXTENSIONS = {'png', 'jpg', 'jpeg', 'gif', 'bmp'}
 
 
 def allowed_file(filename) -> bool:
@@ -44,3 +44,5 @@ def remove_file(dir: str):
         os.remove(dir)
     except FileNotFoundError:
         pass
+    except IsADirectoryError:
+        pass