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;
bottom: 0;
left: 0;
width: 25rem;
height: 10rem;
width: fit-content;
height: fit-content;
margin: auto;
overflow: auto;
background: var(--bg);

6
static/css/products.css
View File

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

24
templates/product.html
View File

@ -5,7 +5,10 @@
{% if user.id == product.sellerID or user.role == "Admin" %}
<!-- Form -->
<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="form-row">
<input type="text" id="name" name="name" placeholder="Product Name" value="{{product.name}}" required>
@ -75,7 +78,7 @@
</div>
</form>
<!-- Modal -->
<!-- Delete Modal -->
<input class="modal-state" id="deleteModal" type="checkbox" />
<div class="modal">
<label class="modal__bg" for="deleteModal"></label>
@ -92,7 +95,9 @@
</div>
{% else %}
<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-title">{{product.name}}</div>
<div class="product-description">{{product.description}}</div>
@ -113,6 +118,19 @@
</div>
</div>
{% 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 %}