nathan/ptcoffee_django
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix mobile display of products on subscription form

Browse Source
This commit is contained in:
Nathan Chapman 2023-01-23 18:38:51 -07:00
parent 39b21ef396
commit e9ed141b50
2 changed files with 14 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
static/styles/main.css
View File

@ -779,13 +779,21 @@ article + article {
} }
.subscription-coffee div { .subscription-coffee div {
text-align: center; min-width: 12rem;
display: flex;
flex-direction: column;
align-items: center;
gap: 1rem;
} }
.subscription-coffee img { .subscription-coffee img {
max-height: 300px; max-height: 300px;
} }
.subscription-coffee input[type=number] {
width: 100%;
}
.subscription-products { .subscription-products {
display: flex; display: flex;
gap: 2rem; gap: 2rem;

12
storefront/templates/storefront/subscription/form.html
View File

@ -18,13 +18,11 @@
<section class="subscription-coffee"> <section class="subscription-coffee">
{% for product in product_list %} {% for product in product_list %}
<div> <div>
<label><strong>{{ product }}</strong> <figure class="product__figure">
<figure class="product__figure"> <img class="product__image" src="{{ product.get_first_img.image.url }}">
<img class="product__image" src="{{ product.get_first_img.image.url }}"> </figure>
</figure> <strong>{{ product }}</strong>
</label> <input type="number" min="0" max="20" pattern="[0-9]*" data-id="{{ product.pk }}" name="product_{{ product.name }}" placeholder="Quantity">
<label>Quantity:</label>
<input type="number" min="0" max="20" data-id="{{ product.pk }}" name="product_{{ product.name }}">
</div> </div>
{% endfor %} {% endfor %}
</section> </section>