From 5e03fcde0617217bca1ae84d009934b752650a77 Mon Sep 17 00:00:00 2001 From: Nathan Chapman Date: Fri, 15 Apr 2022 21:50:42 -0600 Subject: [PATCH] Updates to UI and improvements --- src/static/styles/main.css | 39 ++++++++++++------- src/storefront/forms.py | 12 +++--- .../templates/storefront/contact_form.html | 6 +++ .../templates/storefront/product_detail.html | 2 +- .../templates/storefront/product_list.html | 5 +-- src/templates/account/email_confirm.html | 34 ++++++++++++++++ src/templates/account/signup.html | 2 +- src/templates/base.html | 16 ++++++-- 8 files changed, 87 insertions(+), 29 deletions(-) create mode 100644 src/templates/account/email_confirm.html diff --git a/src/static/styles/main.css b/src/static/styles/main.css index 35ca17d..de030f6 100644 --- 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 { diff --git a/src/storefront/forms.py b/src/storefront/forms.py index 06275b1..14d4124 100644 --- 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() diff --git a/src/storefront/templates/storefront/contact_form.html b/src/storefront/templates/storefront/contact_form.html index 7aaba21..b5ddadf 100644 --- a/src/storefront/templates/storefront/contact_form.html +++ b/src/storefront/templates/storefront/contact_form.html @@ -4,8 +4,14 @@

Contact us

+

Problem with your online order or have a question?

+

+ Please contact us, we’re happy to help you over the phone
+ (360) 385-5856 between 8:00 am and 10:00 pm Pacific Time. +

+

Or send us a message using the form below and we'll email you back as soon as we can.

{% csrf_token %} {{form.as_p}} diff --git a/src/storefront/templates/storefront/product_detail.html b/src/storefront/templates/storefront/product_detail.html index b277ac2..ec5f583 100644 --- a/src/storefront/templates/storefront/product_detail.html +++ b/src/storefront/templates/storefront/product_detail.html @@ -20,7 +20,7 @@

{{product.description}}

Fair trade

${{product.price}}

-

{{product.weight.oz}} oz

+

{{product.weight.oz|floatformat}}oz

{% csrf_token %} {{ form.as_p }} diff --git a/src/storefront/templates/storefront/product_list.html b/src/storefront/templates/storefront/product_list.html index 87fc395..1c87a82 100644 --- a/src/storefront/templates/storefront/product_list.html +++ b/src/storefront/templates/storefront/product_list.html @@ -2,9 +2,6 @@ {% block content %}
-
-

Coffee

-
{% for product in product_list %} @@ -14,7 +11,7 @@

{{ product.name }}

{{product.description|truncatewords:20}}

-

${{product.price}} | {{product.weight.oz}} oz

+

${{product.price}} | {{product.weight.oz|floatformat}}oz

 {% endfor %} diff --git a/src/templates/account/email_confirm.html b/src/templates/account/email_confirm.html new file mode 100644 index 0000000..f485334 --- /dev/null +++ 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 %} +
+

{% trans "Confirm E-mail Address" %}

+ + {% if confirmation %} + + {% user_display confirmation.email_address.user as user_display %} + +

{% blocktrans with confirmation.email_address.email as email %}Please confirm that {{ email }} is an e-mail address for user {{ user_display }}.{% endblocktrans %}

+ + + {% csrf_token %} +

+ +

+ + + {% else %} + + {% url 'account_email' as email_url %} + +

{% blocktrans %}This e-mail confirmation link expired or is invalid. Please issue a new e-mail confirmation request.{% endblocktrans %}

+ + {% endif %} +
+{% endblock %} diff --git a/src/templates/account/signup.html b/src/templates/account/signup.html index 503f03f..3c61516 100644 --- a/src/templates/account/signup.html +++ b/src/templates/account/signup.html @@ -1,7 +1,7 @@ {% extends 'base.html' %} {% block content %} -
+

Sign up

diff --git a/src/templates/base.html b/src/templates/base.html index 84b630f..731db24 100644 --- a/src/templates/base.html +++ b/src/templates/base.html @@ -11,7 +11,7 @@ - + {% compress css %} @@ -77,10 +77,18 @@