luke-else/WMGZON
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

FEATURE: Added modal for product photos

Browse Source
This commit is contained in:
Luke Else 2024-02-16 12:36:59 +00:00
parent d74f26c028
commit f1f00257ef
3 changed files with 29 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
static/css/alerts.css
View File

@ -115,8 +115,8 @@
right: 0; right: 0;
bottom: 0; bottom: 0;
left: 0; left: 0;
width: 25rem; width: fit-content;
height: 10rem; height: fit-content;
margin: auto; margin: auto;
overflow: auto; overflow: auto;
background: var(--bg); background: var(--bg);

6
static/css/products.css
View File

@ -82,6 +82,12 @@
max-width: 500px; max-width: 500px;
} }
.product-image-full {
height: min-content;
max-width: 800px;
}
.product-title { .product-title {
font-size: 120%; font-size: 120%;
font-weight: bold; font-weight: bold;

24
templates/product.html
View File

@ -5,7 +5,10 @@
{% if user.id == product.sellerID or user.role == "Admin" %} {% if user.id == product.sellerID or user.role == "Admin" %}
<!-- Form --> <!-- Form -->
<form class="product-fs" method="POST" action="{{ url_for('main.seller.update', id=product.id) }}" enctype="multipart/form-data"> <form class="product-fs" method="POST" action="{{ url_for('main.seller.update', id=product.id) }}" enctype="multipart/form-data">
<img class="product-image" src="{{ url_for('static', filename='assets/img/products/' + product.image) }}" alt="Brake Disks"/>
<label for="productModal">
<img class="product-image" src="{{ url_for('static', filename='assets/img/products/' + product.image) }}" alt="Product Image"/>
</label>
<div class="product-details"> <div class="product-details">
<div class="form-row"> <div class="form-row">
<input type="text" id="name" name="name" placeholder="Product Name" value="{{product.name}}" required> <input type="text" id="name" name="name" placeholder="Product Name" value="{{product.name}}" required>
@ -75,7 +78,7 @@
</div> </div>
</form> </form>
<!-- Modal --> <!-- Delete Modal -->
<input class="modal-state" id="deleteModal" type="checkbox" /> <input class="modal-state" id="deleteModal" type="checkbox" />
<div class="modal"> <div class="modal">
<label class="modal__bg" for="deleteModal"></label> <label class="modal__bg" for="deleteModal"></label>
@ -92,7 +95,9 @@
</div> </div>
{% else %} {% else %}
<div class="product-fs"> <div class="product-fs">
<img class="product-image" src="{{ url_for('static', filename='assets/img/products/' + product.image) }}" alt="Brake Disks"/> <label for="productModal">
<img class="product-image" src="{{ url_for('static', filename='assets/img/products/' + product.image) }}" alt="Product Image"/>
</label>
<div class="product-details"> <div class="product-details">
<div class="product-title">{{product.name}}</div> <div class="product-title">{{product.name}}</div>
<div class="product-description">{{product.description}}</div> <div class="product-description">{{product.description}}</div>
@ -113,6 +118,19 @@
</div> </div>
</div> </div>
{% endif %} {% endif %}
<!-- Product Modal -->
<input class="modal-state" id="productModal" type="checkbox" />
<div class="modal">
<label class="modal__bg" for="productModal"></label>
<div class="modal__inner">
<label class="modal__close" for="productModal"></label>
<h2>{{product.name}}</h2>
<img class="product-image-full" src="{{ url_for('static', filename='assets/img/products/' + product.image) }}" alt="Product Image"/>
</div>
</div>
{% endif %} {% endif %}