UI cleanup and fixes

src/dashboard/templates/dashboard/product_create_form.html

@@ -2,9 +2,11 @@
 
 {% block content %}
 <article class="product">
-    <h1>Create product</h1>
+    <header class="object__header">
-    <section>
+        <h1>Create product</h1>
-        <form method="POST" action="{% url 'dashboard:product-create' %}">
+    </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">

src/dashboard/views.py

@@ -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(

src/static/styles/main.css

@@ -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 {
+.site-logo {
-    height: 3rem;
+    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;

src/storefront/cart.py

@@ -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,

src/storefront/forms.py

@@ -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)
+    quantity = forms.IntegerField(min_value=1, max_value=20, initial=1)
-    roast = forms.ChoiceField(choices=ROAST_CHOICES)
+    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)
 
 

src/storefront/templates/storefront/cart_detail.html

@@ -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><strong>{{product.name}}</strong></p>
-                    <p>{{item.roast}}</p>
+                    <p><strong>${{item.price}}</strong></p>
-                    <p>
+                    <p><strong>Grind</strong>: {{item.grind}}</p>
-                        <a href="{% url 'storefront:cart-remove' product.pk %}">Remove from cart</a>
-                    </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>

src/storefront/templates/storefront/customer_detail.html

@@ -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>

src/storefront/templates/storefront/order_form.html

@@ -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>

src/storefront/templates/storefront/product_detail.html

@@ -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 %}

src/storefront/views.py

@@ -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)

src/templates/base.html

@@ -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>
+        <a href="{% url 'storefront:product-list' %}"><img class="site-logo" src="{% static 'images/site_logo.svg' %}" alt=""></a>
-    {% if user.is_authenticated %}
+        <nav>
-        <span>
+            <a href="{% url 'storefront:product-list' %}">Shop</a>
-            Hi <a href="{% url 'storefront:customer-detail' user.pk %}">{{user.first_name}} {{user.last_name}}</a>!
+            <a href="">Cafe</a>
-        </span>
+            <a href="">Fair Trade</a>
-        {% if user.is_staff %}
+            <a href="{% url 'storefront:about' %}">About</a>
-            <span><a href="{% url 'dashboard:home' %}">Dashboard</a></span>
+            <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>
+            <a class="site__cart" href="{% url 'storefront:cart-detail' %}">
-    {% else %}
+                <span class="cart__length">{{cart|length}}</span>
-        <span>
+                <img class="cart__icon" src="{% static 'images/shopping_cart.svg' %}" alt="Shopping cart">
-            <a href="{% url 'account_login' %}">Log In</a>&emsp;|&emsp;<a href="{% url 'account_signup' %}">Sign Up</a>
+            </a>
-        </span>
+        </div>
-    {% endif %}
     </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 %}