Improve project template HTML starters

docs/tutorial/frontend.md

@@ -3,18 +3,20 @@ title: Displaying Products
 sidebar_label: Frontend
 ---
 
-Now we have created products and configured our shipping, we can start thinking about actually displaying the products to our customers.
+You will see that if you click on `View` for the products or product index, you will taken to a basic product index or product page.
+You will find the HTML templates for these pages in `catalog/templates/catalog`.
+This basic template uses CSS grid to show the products as a grid of 'cards'.
+You can check out the CSS in `longclaw_bakery/static/css/longclaw_bakery.css`.
+The CSS is included in `longclaw_bakery/templates/base.html` which our `product_index.html` extends.
 
-Since `ProductIndex` and `Product` are Wagtail pages, we write templates for them just like any other page.
-The Wagtail documentation already comprehensively covers [writing templates](http://docs.wagtail.io/en/v1.9/topics/writing_templates.html).
+> The Wagtail documentation also has some comprehensive documentation on [writing templates for Pages](http://docs.wagtail.io/en/v1.9/topics/writing_templates.html).
 
-Our template project already has some basic templates for `ProductIndex` and `Product`:
+For more complex projects, you might want to use Sass and/or other frontend libraries. In this case you might want to look at using Webpack to bundle your static assets. There are some [useful guides](https://owais.lone.pw/blog/webpack-plus-reactjs-and-django/) out there to help you.
+
+
+## Improving the product page
 
-- `my_shop/my_shop/templates/products/product_index.html`
-- `my_shop/my_shop/templates/products/product.html`
 
-They contain just enough information to demonstrate how to traverse the products and their fields.
-For a more complete template, take a look at the [demo project](https://github.com/JamesRamm/longclaw_demo).
 
 ### Adding Products to the Basket
 

docs/tutorial/products.md

@@ -134,5 +134,3 @@ If we navigate back to the product index page, we see the new product listed:
 
 ![Image of the product index](assets/longclaw-bakery-product-index.png)
 
-You will see that if you click on `View` for the products or product index, you will get an error. This is because we have not yet written any templates for displaying our shop frontend. We [will get to this](shipping.md) but first we will move on to configuring the shipping.
-

longclaw/project_template/catalog/templates/catalog/product_index.html

@@ -6,14 +6,17 @@
 
 {% templatetag openblock %} block content {% templatetag closeblock %}
 <h1>{% templatetag openvariable %} page.title {% templatetag closevariable %}</h1>
-<div class="row">
+<div class="card-grid">
 {% templatetag openblock %} for post in page.get_children {% templatetag closeblock %}
    {% templatetag openblock %} with post=post.specific {% templatetag closeblock %}
-   <div><a href="{% templatetag openblock %} pageurl post {% templatetag closeblock %}">
-       <div class="caption_news">
-           <h4>{% templatetag openvariable %} post.title {% templatetag closevariable %}</h4>
-           <p>{% templatetag openvariable %} post.description|richtext {% templatetag closevariable %}</p>
-       </div></a>
+    <div class="card">
+        {% templatetag openblock %} image post.images.first.image max-500x320 {% templatetag closeblock %}
+        <div class="card-body">
+            <a href="{% templatetag openblock %} pageurl post {% templatetag closeblock %}">
+                <h4>{% templatetag openvariable %} post.title {% templatetag closevariable %}</h4>
+            </a>
+            <p>{% templatetag openvariable %} post.description|richtext {% templatetag closevariable %}</p>
+        </div>
    </div>
    {% templatetag openblock %} endwith {% templatetag closeblock %}
 {% templatetag openblock %} endfor {% templatetag closeblock %}

longclaw/project_template/project_name/static/css/project_name.css

@@ -0,0 +1,63 @@
+:root {
+    --brand-primary: #b14344;
+    --border-radius-default: 5px;
+    --header-height: 70px;
+  }
+
+
+body {
+    margin: 0;
+}
+
+.layout {
+    display: grid;
+    grid-template-columns: auto;
+    grid-template-rows: var(--header-height) 1fr auto;
+    grid-template-areas: "header"
+                         "main"
+                         "footer";
+    min-height: 100vh;
+ 
+}
+
+.header {
+    grid-area: header;
+    padding: 5px;
+    background-color: var(--brand-primary)
+}
+
+.main {
+    grid-area: main;
+    margin: 1em;
+}
+ 
+
+
+.card-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+}
+
+.card {
+    transition: 0.3s;
+    border-radius: var(--border-radius-default);
+    max-width: 100%;
+    min-width: 20%;
+    min-height: 100px;
+    margin: 5px;
+    box-shadow: 0 0 6px 0 rgba(0,0,0,0.2), 0 2px 0px 0 var(--brand-primary);
+}
+
+.card-body {
+    padding: 1rem 2rem;
+}
+
+.card > img {
+    border-style: none;
+    border-radius: var(--border-radius-default) var(--border-radius-default) 0 0;
+    vertical-align: middle;
+    width: 100%;
+    max-height: 300px;
+    min-height: 50px;
+    object-fit: cover;
+}

longclaw/project_template/project_name/templates/base.html

@@ -21,10 +21,14 @@
     </head>
 
     <body class="{% templatetag openblock %} block body_class {% templatetag closeblock %}{% templatetag openblock %} endblock {% templatetag closeblock %}">
+        <div class="layout">
         {% templatetag openblock %} wagtailuserbar {% templatetag closeblock %}
+        <div class="header"></div>
 
+        <div class="main">
         {% templatetag openblock %} block content {% templatetag closeblock %}{% templatetag openblock %} endblock {% templatetag closeblock %}
-
+        </div>
+        </div>
         {% templatetag opencomment %} Global javascript {% templatetag closecomment %}
         <script type="text/javascript" src="{% templatetag openblock %} static 'js/{{ project_name }}.js' {% templatetag closeblock %}"></script>