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

UI cleanup and fixes

Browse Source
This commit is contained in:
Nathan Chapman 2022-04-05 10:04:24 -06:00
parent 5400002772
commit f55a87dca4
12 changed files with 150 additions and 89 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/dashboard/templates/dashboard/product_create_form.html
View File

@ -2,9 +2,11 @@
{% block content %}
<article class="product">
<h1>Create product</h1>
<section>
<form method="POST" action="{% url 'dashboard:product-create' %}">
<header class="object__header">
<h1>Create product</h1>
</header>
<section class="object__panel">
<form class="panel__item" method="POST" action="{% url 'dashboard:product-create' %}">
{% csrf_token %}
{{form.as_p}}
<p class="form__submit">

5
src/dashboard/views.py
View File

@ -116,9 +116,10 @@ class OrderListView(LoginRequiredMixin, ListView):
def get_queryset(self):
query = self.request.GET.get('status')
if query:
if query == 'unfulfilled':
object_list = Order.objects.filter(
status=query
Q(status=OrderStatus.UNFULFILLED) |
Q(status=OrderStatus.PARTIALLY_FULFILLED)
).order_by(
'-created_at'
).select_related(

28
src/static/images/site_logo.svg
View File

File diff suppressed because one or more lines are too long
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.7 KiB

After

Width:  |  Height:  |  Size: 36 KiB

89
src/static/styles/main.css
View File

@ -202,12 +202,23 @@ img {
max-width: 100%;
}
.fair_trade--small {
max-width: 4rem;
vertical-align: middle;
}
.product__item {
display: grid;
grid-template-columns: 2fr 1fr;
gap: 0 2rem;
}
@media (max-width: 876px) {
.product__item {
grid-template-columns: 1fr;
}
}
.product__list-item button {
grid-column: 1/3;
align-self: end;
@ -222,17 +233,17 @@ img {
.product__form {
display: grid;
grid-template-columns: 1fr 3fr;
grid-template-columns: 1fr 1fr 1fr;
gap: 1rem;
}
.product__form input[type=submit] {
grid-column: 2;
/*grid-column: 2;*/
justify-self: end;
}
.site__logo {
height: 3rem;
.site-logo {
height: 4rem;
vertical-align: middle;
}
@ -257,10 +268,55 @@ nav a {
text-decoration: none;
}
nav a:not(:last-child) {
margin-right: 2rem;
}
nav {
margin-bottom: 4rem;
}
.has-menu {
position: relative;
}
.has-menu a {
text-transform: lowercase;
font-variant: small-caps;
font-weight: bold;
text-decoration: none;
}
.has-menu:hover .dropdown-menu {
display: unset;
}
[role="menu"] {
list-style: none;
margin: 0;
padding: 0;
}
[role="menuitem"] {
cursor: pointer;
position: relative;
}
[role="menuitem"]:not(:last-child) {
margin-bottom: 0.5rem;
}
.dropdown-menu {
background-color: var(--bg-color);
border: var(--default-border);
padding: 0.5rem;
position: absolute;
top: 100%;
right: 0;
z-index: 1000;
display: none;
}
.site__copyright {
text-align: center;
}
@ -270,20 +326,31 @@ nav {
grid-template-columns: 1fr 2fr;
gap: 2rem;
}
.keep_calm__img {
max-width: 250px;
}
@media (max-width: 564px) {
.keep_calm {
grid-template-columns: 1fr;
}
.keep_calm figure {
text-align: center;
}
}
.site__cart {
display: flex;
align-items: center;
background-color: var(--yellow-color);
padding: 0.25rem 1rem;
padding: 0 1rem;
text-decoration: none;
border-radius: 0.2rem;
color: var(--fg-color);
cursor: pointer;
margin-left: 2rem;
}
@ -337,6 +404,13 @@ nav {
gap: 8rem;
}
@media (max-width: 911px) {
.product__list {
grid-template-columns: 1fr;
gap: 4rem;
}
}
.product__list-item {
text-decoration: none;
display: grid;
@ -384,6 +458,7 @@ footer {
.object__header {
display: flex;
align-items: baseline;
@ -437,6 +512,10 @@ footer {
gap: 2rem;
}
.fair-trade-stamp {
text-align: center;
}
.user__emails {
margin-bottom: 4rem;

8
src/storefront/cart.py
View File

@ -23,12 +23,12 @@ class Cart:
cart = self.session[settings.CART_SESSION_ID] = {}
self.cart = cart
def add(self, product, quantity=1, roast='', update_quantity=False):
def add(self, product, quantity=1, grind='', update_quantity=False):
product_id = str(product.id)
if product_id not in self.cart:
self.cart[product_id] = {
'quantity': 0,
'roast': roast,
'grind': grind,
'price': str(product.price)
}
@ -68,7 +68,7 @@ class Cart:
def clear(self):
del self.session[settings.CART_SESSION_ID]
del self.session[self.coupon_code]
del self.session['coupon_code']
self.session.modified = True
def build_order_params(self):
@ -94,7 +94,7 @@ class Cart:
bulk_list = [OrderLine(
order=order,
product=item['product'],
customer_note=item['roast'],
customer_note=item['grind'],
unit_price=item['price'],
quantity=item['quantity'],
tax_rate=2,

12
src/storefront/forms.py
View File

@ -19,7 +19,7 @@ class AddToCartForm(forms.Form):
AEROPRESS = 'AeroPress'
PERCOLATOR = 'Percolator'
OTHER = 'Other'
ROAST_CHOICES = [
GRIND_CHOICES = [
(WHOLE, 'Whole Beans'),
(ESPRESSO, 'Espresso'),
(CONE_DRIP, 'Cone Drip'),
@ -31,11 +31,11 @@ class AddToCartForm(forms.Form):
(OTHER, 'Other (enter below)')
]
quantity = forms.IntegerField(min_value=1, initial=1)
roast = forms.ChoiceField(choices=ROAST_CHOICES)
quantity = forms.IntegerField(min_value=1, max_value=20, initial=1)
grind = forms.ChoiceField(choices=GRIND_CHOICES)
class UpdateCartItemForm(forms.Form):
quantity = forms.IntegerField(min_value=1, initial=1)
quantity = forms.IntegerField(min_value=1, max_value=20, initial=1)
update = forms.BooleanField(required=False, initial=True, widget=forms.HiddenInput)
@ -49,7 +49,7 @@ class AddToSubscriptionForm(forms.Form):
AEROPRESS = 'AeroPress'
PERCOLATOR = 'Percolator'
OTHER = 'Other'
ROAST_CHOICES = [
GRIND_CHOICES = [
(WHOLE, 'Whole Beans'),
(ESPRESSO, 'Espresso'),
(CONE_DRIP, 'Cone Drip'),
@ -71,7 +71,7 @@ class AddToSubscriptionForm(forms.Form):
]
quantity = forms.IntegerField(min_value=1, initial=1)
roast = forms.ChoiceField(choices=ROAST_CHOICES)
grind = forms.ChoiceField(choices=GRIND_CHOICES)
schedule = forms.ChoiceField(choices=SCHEDULE_CHOICES)

17
src/storefront/templates/storefront/cart_detail.html
View File

@ -13,21 +13,24 @@
<img class="product__image product__image--small" src="{{product.productphoto_set.first.image.url}}" alt="{{product.productphoto_set.first.image}}">
</figure>
<div class="item__details">
<p>{{product.name}}<br> ${{item.price}}</p>
<p>{{item.roast}}</p>
<p>
<a href="{% url 'storefront:cart-remove' product.pk %}">Remove from cart</a>
</p>
<p><strong>{{product.name}}</strong></p>
<p><strong>${{item.price}}</strong></p>
<p><strong>Grind</strong>: {{item.grind}}</p>
<form class="product__form" action="{% url 'storefront:cart-update' product.pk %}" method="POST">
{% csrf_token %}
{{ item.update_quantity_form }}
<input type="submit" value="Update">
</form>
<p>
<a href="{% url 'storefront:cart-remove' product.pk %}">Remove from cart</a>
</p>
</div>
{% endwith %}
</div>
{% empty %}
<p>No items in cart yet.</p>
<div class="panel__item">
<p>No items in cart yet.</p>
</div>
{% endfor %}
</section>
<section class="object__panel">
@ -52,7 +55,7 @@
<span><strong>Cart total: ${{cart.get_total_price_after_discount|floatformat:"2"}}</strong></span>
</p>
<p class="cart__total">
<a href="{% url 'storefront:product-list' %}">Continue Shopping</a>&emsp;or&emsp;<a class="action-button action-button--large" href="{% url 'storefront:checkout-address' %}">Proceed to Checkout</a>
<a href="{% url 'storefront:product-list' %}">Continue Shopping</a>{% if cart|length > 0 %}&emsp;or&emsp;<a class="action-button action-button--large" href="{% url 'storefront:checkout-address' %}">Proceed to Checkout</a>{% endif %}
</p>
</div>
</section>

3
src/storefront/templates/storefront/customer_detail.html
View File

@ -51,6 +51,9 @@
</div>
</section>
{% with order_list=customer.orders.all %}
<header class="object__header">
<h3>Your orders</h3>
</header>
<section class="object__list">
<div class="object__item panel__header object__item--col3" href="order-detail">
<span>Order #</span>

5
src/storefront/templates/storefront/order_form.html
View File

@ -34,9 +34,10 @@
<img class="product__image product__image--small" src="{{product.productphoto_set.first.image.url}}" alt="{{product.productphoto_set.first.image}}">
</figure>
<div class="item__details">
<p>{{product.name}}<br> ${{item.price}}</p>
<p><strong>{{product.name}}</strong></p>
<p><strong>${{item.price}}</strong></p>
<p><strong>Quantity</strong>: {{item.quantity}}</p>
<p><strong>Grind options</strong>: {{item.roast}}</p>
<p><strong>Grind options</strong>: {{item.grind}}</p>
</div>
{% endwith %}
</div>

7
src/storefront/templates/storefront/product_detail.html
View File

@ -13,21 +13,16 @@
<section>
<h1>{{product.name}}</h1>
<p>{{product.description}}</p>
<p class="fair-trade-stamp"><img class="fair_trade--small" src="{% static 'images/fair_trade_stamp.png' %}" alt=""></p>
<p>$<strong>{{product.price}}</strong></p>
<p>{{product.weight.oz}} oz</p>
<form method="post" action="{% url 'storefront:cart-add' product.pk %}">
{% csrf_token %}
<h3>One-time purchase</h3>
{{ form.as_p }}
<p>
<input type="submit" value="Add to cart" class="action-button">
</p>
</form>
<br><hr><br>
<form action="">
<h3>Subscribe and save 10%</h3>
</form>
Subscriptions
</section>
</article>
{% endblock %}

2
src/storefront/views.py
View File

@ -62,7 +62,7 @@ class CartAddProductView(SingleObjectMixin, FormView):
if form.is_valid():
cart.add(
product=self.get_object(),
roast=form.cleaned_data['roast'],
grind=form.cleaned_data['grind'],
quantity=form.cleaned_data['quantity']
)
return self.form_valid(form)

55
src/templates/base.html
View File

@ -25,34 +25,37 @@
<body>
<header class="site__header">
<div>
<a href="{% url 'storefront:product-list' %}"><img class="site__logo" src="{% static 'images/site_logo.svg' %}" alt=""></a>
{% if user.is_authenticated %}
<span>
Hi <a href="{% url 'storefront:customer-detail' user.pk %}">{{user.first_name}} {{user.last_name}}</a>!
</span>
{% if user.is_staff %}
<span><a href="{% url 'dashboard:home' %}">Dashboard</a></span>
<a href="{% url 'storefront:product-list' %}"><img class="site-logo" src="{% static 'images/site_logo.svg' %}" alt=""></a>
<nav>
<a href="{% url 'storefront:product-list' %}">Shop</a>
<a href="">Cafe</a>
<a href="">Fair Trade</a>
<a href="{% url 'storefront:about' %}">About</a>
<a href="{% url 'storefront:contact' %}">Contact</a>
</nav>
<div>
{% if user.is_authenticated %}
<div class="has-menu">
<a href="{% url 'storefront:customer-detail' user.pk %}">Account ▼</a>
<ul role="menu" class="dropdown-menu">
{% if user.is_staff %}
<li role="menuitem"><a href="{% url 'dashboard:home' %}">Dashboard</a></li>
{% endif %}
<li role="menuitem"><a href="{% url 'storefront:customer-detail' user.pk %}">Orders</a></li>
<li role="menuitem"><a href="{% url 'account_logout' %}">Log Out</a></li>
</ul>
</div>
{% else %}
<span>
<a href="{% url 'account_login' %}">Log In</a>&emsp;|&emsp;<a href="{% url 'account_signup' %}">Sign Up</a>
</span>
{% endif %}
<span><a href="{% url 'account_logout' %}">Log Out</a></span>
{% else %}
<span>
<a href="{% url 'account_login' %}">Log In</a>&emsp;|&emsp;<a href="{% url 'account_signup' %}">Sign Up</a>
</span>
{% endif %}
<a class="site__cart" href="{% url 'storefront:cart-detail' %}">
<span class="cart__length">{{cart|length}}</span>
<img class="cart__icon" src="{% static 'images/shopping_cart.svg' %}" alt="Shopping cart">
</a>
</div>
</div>
<nav>
<a href="{% url 'storefront:product-list' %}">Shop</a>
{# <a href="">Wholesale</a> #}
<a href="">Subscribe</a>
<a href="">Cafe</a>
<a href="">Fair Trade</a>
<a href="{% url 'storefront:about' %}">About</a>
<a href="{% url 'storefront:contact' %}">Contact</a>
<a class="site__cart" href="{% url 'storefront:cart-detail' %}">
<span class="cart__length">{{cart|length}}</span>
<img class="cart__icon" src="{% static 'images/shopping_cart.svg' %}" alt="Shopping cart">
</a>
</nav>
</header>
<main>
{% block content %}