Add sm images and carry out all Lighthouse suggestions for index.html

TESTING.md

@@ -1,11 +1,217 @@
+<span id="top"></span>
+
+Back to [README](README.md)
+
+## Index
+
+- <a href="#user-stories">User stories - how are they met?</a>
+- <a href="#testing-manual">Manual</a>
+- <a href="#testing-auto">Automated</a>
+- <a href="#testing-responsive">Responsiveness</a>
+- <a href="#testing-resolved">Resolved issues</a>
+- <a href="#testing-unresolved">Unresolved issues</a>
+
+---
+
+<span id="user-stories"></span>
+
+## User stories - how are they met?
+
+### Overarching user expectations
+
+**Consistency**
+
+The site has been designed to be as consistent as possible, no matter the content:
+- The Navbar and Footer remain the same across all pages, including Error pages.
+- Headings and icons (form fields and add/edit/delete buttons) are standardised across all pages.
+- Cards are a uniform shape and size per page and will never spill into a subsequent row.
+- Cards represent a 'zoomed out' view of multiple selection items (Activities/Search Bar page and Categories pages), whereas views of single items (View Activity, input forms) are 'zoomed in' without a card to suggest a boundary.
+- Where necessary, text is truncated to preserve the grid layout.
+
+**Easy navigation**
+
+The likely options a user might need at a given moment have been carefully considered to ensure a smooth browsing experience:
+
+- Headings are descriptive of the content displayed even when a search or filter is applied.
+- When a search finds no results...
+- The title of each page updates in the browser window to indicate where the user is.
+- The Footer contains top-level menu options, 
+
+**Intuitive design**
+
+
+- Familiar icons have been used across the site for commonly expected actions e.g. add, edit, delete, search, back.
+- Toasts pop-ups discretely alert the user when they perform meaningful actions i.e. logins and content changes.
+- As a user might expect, modals appear to confirm content deletion.
+
+**Responsiveness**
+
+- Pages adapt to a variety of screen sizes thanks to the Bootstrap grid template and extensive testing in Chrome Dev Tools.
+- Where readability is compromised, page structure is modified to give more space to the elements (e.g. giving username its own row on the View Activity page).
+
+**Security**
+
+- Allauth provides a robust user account system while Stripe offers secure payments, furthered by use of webhooks to ensure transactions are recorded.
+
+**Appealing visuals**
+
+- SVGs
+- Simple, bold colours and use of consistent spacing bring clarity to the content.
+
+### As a X I want...
+
+**To immediately understand what the purpose of the site is and what it can provide**
+
+<div align="right"><a style="text-align:right" href="#top">Go to index :arrow_double_up:</a></div>
+
+<span id="testing-manual"></span>
+
+## Manual testing
+
+The following tests have been carried out without issue:
+
+
+<div align="right"><a style="text-align:right" href="#top">Go to index :arrow_double_up:</a></div>
+
+<span id="testing-auto"></span>
+
+## Automated testing
+
+[Chrome DevTools](https://developers.google.com/web/tools/chrome-devtools) - Lighthouse audit summary for both desktop and mobile:
+
+**Home page**
+
+- Performance: **99%**
+- Accessibility: **100%**
+- Best Practices: **100%**
+- SEO: **100%**
+
+
+**Product pages**
+
+- Performance: **79 - 97%**
+- Accessibility: **100%**
+- Best Practices: **100%**
+- SEO: **90%**
+
+**Categories page**
+
+- Performance: **82 - 99%**
+- Accessibility: **97%**
+- Best Practices: **100%**
+- SEO: **100%**
+
+**Add / Edit pages**
+
+- Performance: **90 - 99%**
+- Accessibility: **88%**
+- Best Practices: **100%**
+- SEO: **98 - 100%**
+
+**Profile page**
+
+- Performance: **73 - 98%**
+- Accessibility: **100%**
+- Best Practices: **100%**
+- SEO: **100%**
+
+[W3C - HTML](https://validator.w3.org/) - 0 errors, 0 warnings - **PASS**
+
+[W3C - CSS](https://jigsaw.w3.org/css-validator/) - 
+
+- Use of unknown vendor extensions
+
+[CSS Lint](http://csslint.net/) - 
+
+
+
+[Unicorn revealer - overflow](https://chrome.google.com/webstore/detail/unicorn-revealer/lmlkphhdlngaicolpmaakfmhplagoaln/related) - no evidence of overflow - **PASS**
+
+[JS Hint](https://jshint.com/) - 0 errors, 0 warnings - **PASS**
+
+
+[PyCodeStyle](https://github.com/PyCQA/pycodestyle) - 0 warnings - **PASS**
+
+
+
+<div align="right"><a style="text-align:right" href="#top">Go to index :arrow_double_up:</a></div>
+
+<span id="testing-responsive"></span>
+
+## Responsiveness
+
+The site has been designed with a mobile-first philosophy and, supported by [Materialize](https://materializecss.com/), has been thoroughly tested at all stages of development using [Chrome DevTools](https://developers.google.com/web/tools/chrome-devtools).
+
+In addition to Materialize's breakpoints, various media queries have been used to maximise the legibility of text and provide sufficient spacing for all content. These queries include optimised `margin`, `padding`, `text-align` and adjustments of `display` to accommodate changes in HTML structure. Particular attention has been paid to the appearance of cards and buttons on different devices.
+
+Examples:
+
+- on the View Activity page the 'Back' button has been aligned with the activity details below in keeping with Materialize's breakpoints.
+- on the Categories page, the cards' appearance at the breakpoints from 2 to 3 columns was studied to make sure that even in a worst case scenario their content would not be put out of place. Revisions saw the card choice and position of each element tested, including when logged in as admin and the edit and delete buttons are visible.
+- the Footer content was separated out on larger screen sizes to make better use of the space.
+- the `flow-text` Materialize class has been used for any large text areas to ensure they are as legible as possible depending on device viewed with.
+
+
+<div align="right"><a style="text-align:right" href="#top">Go to index :arrow_double_up:</a></div>
+
+### Browsers
+
+Tested on:
+
+- Chrome
+- Edge
+- Firefox
+- Safari (iOS)
+
+### Screen sizes
+
+Tested with Chrome DevTools using profiles for:
+
+- Moto G4
+- Galaxy S5
+- Pixel 2
+- Pixel 2 XL
+- iPhone 5 SE
+- iPhone 6/7/8
+- iPhone 6/7/8 Plus
+- iPhone X
+- iPad
+- iPad Pro
+
+... and also using the responsive profiles of:
+
+- Mobile S (320px)
+- Mobile M (375px)
+- Mobile L (425px)
+- Tablet (768px)
+- Laptop (1024px)
+- Laptop L (1440px)
+
+Real world testing on:
+
+- iPhone 6S
+- iPhone SE
+- iPhone 11 Pro
+- Asus ZenBook
+- Dell XPS 7590
+
+
+<div align="right"><a style="text-align:right" href="#top">Go to index :arrow_double_up:</a></div>
+
+## Issues and bugs
+
+<span id="testing-resolved"></span>
+
+### Resolved
+
 Bug 1: get_object_or_404 error caused by object id not being found
 Solution: find erroneous string iteration pointing to Nicotine (4 items) rather than Size (3 items)
 
 Bug 2: search queries via M2M relationship (Tags model) would return duplicate results
 Solution: using .distinct() on the filtered query
 
 Bug 3: line order items can be set to 0 in Admin
-Solution: due to setting default=0 ?
+Solution: 
 
 <!-- Bug 4: line order items have price tied to the model when it should be set on save
 Solution:  -->
@@ -68,3 +274,4 @@ UNSOLVED
 Bug 20: deleting a product which has reviews leads to a KeyError
 Solution: caused by the signal which updates a product rating on deletion. On product deletion the CASCADE would delete all reviews, which would in turn fire the update_total signal for an instance which no longer existed. Solved initially by changing the signal to pre_delete, but this would have caused problems when updating the rating as it would include the to-be-deleted review too. Solve eventually by changing the ProductReview's on_delete to SET_NULL, storing the to-be-deleted reviews in the product's delete view,  deleting them after the product itself was deleted, and finally including a check that the product instance existed on the post_delete update signal.
 
+### Unresolved

home/templates/home/index.html

@@ -7,8 +7,8 @@
     <div class="hero-overlay"></div>
     <div class="hero-text-container">
         <h1 class="hero-heading">Moose Juice</h1>
-        <h5>Home-brewed</h5>
-        <h5>E-liquid</h5>
+        <p class="h5">Home-brewed</p>
+        <p class="h5">E-liquid</p>
         <p class><a class="btn btn btn-outline-dark" href="{% url 'products' %}">Show me</a></p>
     </div>
 </div>
@@ -20,7 +20,7 @@ <h5>E-liquid</h5>
             <div class="col mb-4">
                 <div class="card card-intro h-100">
                     <div class="card-body">
-                        <h5 class="card-title">Pick <span>&#10230;</span></h5>
+                        <p class="h5 card-title">Pick <span>&#10230;</span></p>
                         <p class="card-text">Scrumptious flavours in a variety of nicotine strengths and sizes across our three stupendous brands.</p>
                     </div>
                     <div class="card-footer">
@@ -31,7 +31,7 @@ <h5 class="card-title">Pick <span>&#10230;</span></h5>
             <div class="col mb-4">
                 <div class="card card-intro h-100">
                     <div class="card-body">
-                        <h5 class="card-title">Taste <span>&#10230;</span></h5>
+                        <p class="h5 card-title">Taste <span>&#10230;</span></p>
                         <p class="card-text">We're always looking for feedback and will continue to expand and improve our e-liquid menu.</p>
                     </div>
                     <div class="card-footer">
@@ -42,7 +42,7 @@ <h5 class="card-title">Taste <span>&#10230;</span></h5>
             <div class="col mb-4">
                 <div class="card card-intro h-100">
                     <div class="card-body">
-                        <h5 class="card-title">Profit <span>&#10230;</span></h5>
+                        <p class="h5 card-title">Profit <span>&#10230;</span></p>
                         <p class="card-text">Get points for your purchases, reviews and - heck - just for signing up! We hope you'll come back again and again.</p>
                     </div>
                     <div class="card-footer">
@@ -63,7 +63,7 @@ <h5 class="card-title">Profit <span>&#10230;</span></h5>
 
 <section id="brands-section" class="home-section">
     <div class="container">
-        <h3 class="mb-3 text-center heading-accent-light">Brands</h3>
+        <h2 class="mb-3 text-center heading-accent-light">Brands</h2>
         <!-- Mobile horizontal pills display -->
         <div class="row d-block d-md-none px-3">
             <ul class="nav nav-pills mb-3 flex-nowrap justify-content-center text-center" id="h-pills-tab" role="tablist">

static/css/base.css

@@ -195,7 +195,7 @@ h1, h2, h3, h4, h5, h6 {
     white-space: nowrap;
 }
 
-.hero-text-container h5 {
+.hero-text-container .h5 {
     white-space: nowrap;
 }
 
@@ -214,7 +214,7 @@ h1, h2, h3, h4, h5, h6 {
     color: #fff;
 }
 
-.card-intro h5 {
+.card-intro .h5 {
     color: var(--color-accent-dark);
     font-weight: 600;
 }
@@ -232,14 +232,13 @@ h1, h2, h3, h4, h5, h6 {
     min-height: 20rem;
 }
 
-.home-section .container > h3 {
+.home-section .container > h2 {
     font-weight: 600;
     padding: 1rem;
     letter-spacing: 2px;
     text-transform: uppercase;
 }
 
-
 #brands-section .nav-pills .nav-link {
     color: var(--color-accent-primary);
 }
@@ -262,8 +261,8 @@ h1, h2, h3, h4, h5, h6 {
 }
 
 .category-thumbnail {
-    max-height: 96px;
-    width: auto;
+    height: 96px;
+    width: 96px;
 }
 
 .card-footer a {
@@ -295,11 +294,6 @@ h1, h2, h3, h4, h5, h6 {
     padding: 0 0 0.5rem 0;
 }
 
-/* .card-title-wrapper {
-    display: flex;
-    justify-content: center;
-} */
-
 .product-svg-container {
     width: 100px;
     -ms-flex-item-align: center;
@@ -328,6 +322,7 @@ h1, h2, h3, h4, h5, h6 {
 
 .category-img-sm {
     height: 50px;
+    width: 50px;
 }
 
 .category-heading {
@@ -491,7 +486,7 @@ input[type=number] {
         font-size: 2rem;
     }
 
-    .hero-text-container h5{
+    .hero-text-container .h5{
         font-size: 1.5rem;
     }
 

templates/base.html

@@ -8,13 +8,14 @@
         <meta http-equiv="X-UA-Compatible" content="ie=edge">
         <meta charset="utf-8">
         <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+        <meta name="description" content="Moose Juice - home-brewed e-liquid for delivery">
     {% endblock %}
 
     {% block extra_meta %}
         <link rel="apple-touch-icon" sizes="180x180" href="{{ MEDIA_URL }}apple-touch-icon.png">
         <link rel="icon" type="image/png" sizes="32x32" href="{{ MEDIA_URL }}favicon-32x32.png">
         <link rel="icon" type="image/png" sizes="16x16" href="{{ MEDIA_URL }}favicon-16x16.png">
-        <link rel="manifest" href="{{ MEDIA_URL }}site.webmanifest" crossorigin="use-credentials">
+        <!-- <link rel="manifest" href="{{ MEDIA_URL }}site.webmanifest" crossorigin="use-credentials"> -->
     {% endblock %}
 
     {% block core_css %}
@@ -105,7 +106,7 @@
                 <div class="input-group">
                     <input type="text" class="form-control text-center" name="q" placeholder="What's your flavour?" autocomplete="off">
                     <span class="input-group-append">
-                        <button class="btn btn-dark border border-left-0 text-light" type="submit">
+                        <button class="btn btn-dark border border-left-0 text-light" type="submit" aria-label="search">
                             <i class="fa fa-search"></i>
                         </button>
                     </span>

templates/includes/navbar-cluster.html

@@ -1,12 +1,12 @@
 <li class="nav-item list-inline-item">
-    <a class="nav-link" href="{% url 'favourites' %}">
+    <a class="nav-link" href="{% url 'favourites' %}" aria-label="Check out your favourites">
         <span class="icon cluster-icon">
             <i class="fas fa-heart fa-x2 fa-fw"></i>
         </span>
     </a>
 </li>
 <li class="nav-item list-inline-item">
-    <a class="nav-link" href="{% url 'view_cart' %}">
+    <a class="nav-link" href="{% url 'view_cart' %}" aria-label="View cart">
         {% if total %}
             £{{ total|floatformat:2 }}
         {% else %}