Updates to UI and improvements

2022-04-15 21:50:42 -06:00 · 2022-04-15 21:50:42 -06:00 · 5e03fcde06
commit 5e03fcde06
parent af936ce12c
8 changed files with 87 additions and 29 deletions
--- a/src/static/styles/main.css
+++ b/src/static/styles/main.css
@ -1,7 +1,8 @@
 :root {
-    --fg-color: #34201A;
+    --fg-color: #34201a;
+    --fg-alt-color: #663a2d;
    --bg-color: #f5f5f5;
-    --bg-alt-color: #eee5d3;
+    --bg-alt-color: #c8a783;
    --gray-color: #9d9d9d;
    --yellow-color: #f8a911;
    --yellow-alt-color: #ffce6f;
@ -233,6 +234,10 @@ img {
 /* ==========================================================================
   Base Layout
   ========================================================================== */
+main {
+    min-height: calc(100vh - 500px);
+}
+
 .site__header > nav,
 main > article,
 footer > section {
@ -258,6 +263,7 @@ footer > section {
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
 }

+
 /* Modal Content/Box */
 .modal-menu__content {
    background-color: var(--bg-color);
@ -267,6 +273,12 @@ footer > section {
    max-width: 40rem;
 }

+@media screen and (max-width: 700px) {
+    .modal-menu__content {
+        margin: 4rem auto;
+        border: 1rem solid var(--bg-alt-color);
+    }
+}

 .modal-menu__header {
    display: flex;
@ -501,9 +513,10 @@ article + article {
 /* Products
   ========================================================================== */
 .product__list {
+    margin-top: 8rem;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
-    gap: 4rem;
+    gap: 8rem;
 }

 .product__item {
@ -514,8 +527,15 @@ article + article {
    gap: 1rem;
 }

-.product__item h3 {
-    text-decoration: underline;
+.product__item h3,
+.product__info h1 {
+    /*text-decoration: underline;*/
+    font-family: "Vollkorn", serif;
+    font-weight: 900;
+}
+
+.product__item:hover h3 {
+    color: var(--fg-alt-color);
 }

@media screen and (max-width: 900px) {
@ -543,6 +563,7 @@ article + article {
 /* Product Detail
   ========================================================================== */
 .product__detail {
+    margin-top: 4rem;
    display: grid;
    grid-template-columns: 0.25fr 2fr 1fr;
    gap: 1rem;
@ -573,15 +594,7 @@ article + article {
    width: 100%;
 }

-@media screen and (max-width: 700px) {
-    .product__detail {
-        grid-template-columns: 0.25fr 2fr;
-    }

-    .product__info {
-        grid-column: span 2;
-    }
-}

@media screen and (max-width: 700px) {
    .product__detail {
--- a/src/storefront/forms.py
+++ b/src/storefront/forms.py
@ -18,7 +18,7 @@ class AddToCartForm(forms.Form):
    STOVETOP_ESPRESSO = 'Stovetop Espresso (Moka Pot)'
    AEROPRESS = 'AeroPress'
    PERCOLATOR = 'Percolator'
-    OTHER = 'Other'
+    CAFE_STYLE = 'BLTC cafe pour over'
    GRIND_CHOICES = [
        (WHOLE, 'Whole Beans'),
        (ESPRESSO, 'Espresso'),
@ -28,7 +28,7 @@ class AddToCartForm(forms.Form):
        (STOVETOP_ESPRESSO, 'Stovetop Espresso (Moka Pot)'),
        (AEROPRESS, 'AeroPress'),
        (PERCOLATOR, 'Percolator'),
-        (OTHER, 'Other (enter below)')
+        (CAFE_STYLE, 'BLTC cafe pour over')
    ]

    grind = forms.ChoiceField(choices=GRIND_CHOICES)
@ -48,7 +48,7 @@ class AddToSubscriptionForm(forms.Form):
    STOVETOP_ESPRESSO = 'Stovetop Espresso (Moka Pot)'
    AEROPRESS = 'AeroPress'
    PERCOLATOR = 'Percolator'
-    OTHER = 'Other'
+    CAFE_STYLE = 'BLTC cafe pour over'
    GRIND_CHOICES = [
        (WHOLE, 'Whole Beans'),
        (ESPRESSO, 'Espresso'),
@ -58,7 +58,7 @@ class AddToSubscriptionForm(forms.Form):
        (STOVETOP_ESPRESSO, 'Stovetop Espresso (Moka Pot)'),
        (AEROPRESS, 'AeroPress'),
        (PERCOLATOR, 'Percolator'),
-        (OTHER, 'Other (enter below)')
+        (CAFE_STYLE, 'BLTC cafe pour over')
    ]

    SEVEN_DAYS = 7
@ -114,11 +114,11 @@ class ContactForm(forms.Form):

    REFERAL_CHOICES = [
        (GOOGLE, 'Google Search'),
-        (SHOP, 'Better Living Through Coffee coffee shop'),
+        (SHOP, '"Better Living Through Coffee" coffee shop'),
        (WOM, 'Friend/Relative'),
        (PRODUCT, 'Our Coffee Bag'),
        (STORE, 'PT Food Coop/other store'),
-        (OTHER, 'Other (please describe in the Message section below'),
+        (OTHER, 'Other (please describe below)'),
    ]

    first_name = forms.CharField()
--- a/src/storefront/templates/storefront/contact_form.html
+++ b/src/storefront/templates/storefront/contact_form.html
@ -4,8 +4,14 @@
 <article>
    <header>
        <h1>Contact us</h1>
+        <h4>Problem with your online order or have a question?</h4>
+        <p>
+            Please contact us, we’re happy to help you over the phone<br>
+            <a href="tel:+13603855856">(360) 385-5856</a> between 8:00 am and 10:00 pm Pacific Time.
+        </p>
    </header>
    <section>
+        <p>Or send us a message using the form below and we'll email you back as soon as we can.</p>
        <form action="{% url 'storefront:contact' %}" method="post" class="contact-form">
            {% csrf_token %}
            {{form.as_p}}
--- a/src/storefront/templates/storefront/product_detail.html
+++ b/src/storefront/templates/storefront/product_detail.html
@ -20,7 +20,7 @@
        <p>{{product.description}}</p>
        <p class="site__ft-stamp"><img class="fair_trade--small" src="{% static 'images/fair_trade_stamp.png' %}" alt="Fair trade"></p>
        <p>$<strong>{{product.price}}</strong></p>
-        <p>{{product.weight.oz}} oz</p>
+        <p>{{product.weight.oz|floatformat}}oz</p>
    	<form class="product__form" method="post" action="{% url 'storefront:cart-add' product.pk %}">
            {% csrf_token %}
            {{ form.as_p }}
--- a/src/storefront/templates/storefront/product_list.html
+++ b/src/storefront/templates/storefront/product_list.html
@ -2,9 +2,6 @@

 {% block content %}
 <article>
-    <header>
-        <h1>Coffee</h1>
-    </header>
    <section class="product__list">
        {% for product in product_list %}
            <a class="product__item" href="{% url 'storefront:product-detail' product.pk %}">
@ -14,7 +11,7 @@
                <div>
                    <h3>{{ product.name }}</h3>
                    <p>{{product.description|truncatewords:20}}</p>
-                    <p>$<strong>{{product.price}}</strong> | {{product.weight.oz}} oz</p>
+                    <p>$<strong>{{product.price}}</strong> | {{product.weight.oz|floatformat}}oz</p>
                </div>
            </a>
        {% endfor %}
--- a/src/templates/account/email_confirm.html
+++ b/src/templates/account/email_confirm.html
@ -0,0 +1,34 @@
+{% extends 'base.html' %}
+
+{% load i18n %}
+{% load account %}
+
+{% block head_title %}{% trans "Confirm E-mail Address" %}{% endblock %}
+
+
+{% block content %}
+    <article>
+        <h1>{% trans "Confirm E-mail Address" %}</h1>
+
+        {% if confirmation %}
+
+        {% user_display confirmation.email_address.user as user_display %}
+
+        <p>{% blocktrans with confirmation.email_address.email as email %}Please confirm that <a href="mailto:{{ email }}">{{ email }}</a> is an e-mail address for user {{ user_display }}.{% endblocktrans %}</p>
+
+        <form method="post" action="{% url 'account_confirm_email' confirmation.key %}">
+        {% csrf_token %}
+            <p>
+                <button type="submit">{% trans 'Confirm' %}</button>
+            </p>
+        </form>
+
+        {% else %}
+
+        {% url 'account_email' as email_url %}
+
+        <p>{% blocktrans %}This e-mail confirmation link expired or is invalid. Please <a href="{{ email_url }}">issue a new e-mail confirmation request</a>.{% endblocktrans %}</p>
+
+        {% endif %}
+    </article>
+{% endblock %}
--- a/src/templates/account/signup.html
+++ b/src/templates/account/signup.html
@ -1,7 +1,7 @@
 {% extends 'base.html' %}

 {% block content %}
-<article class="panel">
+<article>
    <h1>Sign up</h1>

    <form method="post" action="{% url 'account_signup' %}">
--- a/src/templates/base.html
+++ b/src/templates/base.html
@ -11,7 +11,7 @@

    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Eczar:wght@400;700&family=Inter:wght@100;400;700&display=swap" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&family=Vollkorn:wght@900&display=swap" rel="stylesheet">

    {% compress css %}
    <link rel="stylesheet" type="text/css" href="{% static "styles/normalize.css" %}">
@ -77,10 +77,18 @@
 </main>
 <footer>
    <section>
-            <p><button class="show-modal">Subscribe to our newsletter</button></p>
+        <p><button class="show-modal">Subscribe to our newsletter</button></p>
        <p>
-            <small>Copyright © 2016-{% now "Y" %} Better Living Food Company Inc.</small><br>
-            <small>Fair Trade&nbsp;|&nbsp;Organic&nbsp;|&nbsp;Port Townsend, WA 98368</small><br><br>
+            <strong>Problem with your online order or have a question?</strong><br>
+            Please contact us, we’re happy to help you over the phone<br>
+            <a href="tel:+13603855856">(360) 385-5856</a> between 8:00 am and 10:00 pm Pacific Time.<br>
+            <address>100 Tyler St, Port Townsend, WA 98368</address>
+        </p>
+        <p>
+            <small>Copyright © 2016-{% now "Y" %} Better Living Food Company Inc.<br>
+                <a href="{% url 'storefront:contact' %}">Contact</a>&nbsp;|&nbsp;Fair Trade&nbsp;|&nbsp;Organic
+            </small>
+            <br><br>
            <img class="site__ft-stamp" src="{% static 'images/fair_trade_stamp.png' %}" alt="Fair trade">
        </p>
    </section>