From 81cd0ebeb9a43f93c7dfc83d082939b460d3c554 Mon Sep 17 00:00:00 2001 From: Edd Baldry Date: Sun, 26 Feb 2017 18:02:11 +0000 Subject: [PATCH] Two col design for bread detail page. Workson #57 --- bakerydemo/static/css/main.css | 43 ++++++ bakerydemo/templates/breads/bread_page.html | 147 +++++++++++++++++--- 2 files changed, 170 insertions(+), 20 deletions(-) diff --git a/bakerydemo/static/css/main.css b/bakerydemo/static/css/main.css index 757c3a5..6c497bf 100644 --- a/bakerydemo/static/css/main.css +++ b/bakerydemo/static/css/main.css @@ -757,6 +757,38 @@ span.outline { width: 70px; } +/* Bread detail page */ +.bread-detail .introduction { + color: #777; + font-size: 1.4em; + margin-top: 40px; +} + +.bread-detail figure { + margin: 35px auto 20px auto; + max-height: 300px; + overflow: hidden; +} + +.bread-detail figure img { + width: auto; +} + +.bread-detail ul.bread-meta { + list-style: none; + padding-left: 0; +} + +.bread-detail ul.bread-meta li ul { + padding-left: 0; +} + +.bread-detail ul.bread-meta li ul li { + border-bottom: 1px solid #ccc; + list-style: none; + max-width: 450px; +} + /* No gutters */ .row.no-gutters { margin-right: 0; @@ -776,3 +808,14 @@ span.outline { display: flex; flex-wrap: wrap; } + +@media (min-width: 970px) { + .hidden-md-up { + display: none; + } +} +@media (max-width: 970px) { + .hidden-md-down { + display: none; + } +} diff --git a/bakerydemo/templates/breads/bread_page.html b/bakerydemo/templates/breads/bread_page.html index 1b6f8ff..cc8eea8 100644 --- a/bakerydemo/templates/breads/bread_page.html +++ b/bakerydemo/templates/breads/bread_page.html @@ -2,24 +2,131 @@ {% load wagtailimages_tags %} {% block content %} -

{{ page.title }}

-
- {% image self.image fill-600x600 %} -
+
+
+
+
+
+

{{ page.title }}

+ +
+ {% image self.image width-600 %} +
+ + {% if page.introduction %} +

+ {{ page.introduction }} +

+ {% endif %} -

{{ page.origin }}

-

{{ page.bread_type }}

- {% with ingredients=page.ingredients.all %} - {% if ingredients %} -

Ingredients:

-
    - {% for ingredient in ingredients %} -
  • - {{ ingredient.name }} -
    • - {% endfor %} -
- {% endif %} - {% endwith %} - {{ page.body }} -{% endblock content %} + {{ page.body }} +
+
+ +
+
+
+ {% image self.image width-600 %} +
+
    + {% if page.origin %} +
  • +

    Origin

    +

    {{ page.origin }}

    +
    • + {% endif %} + {% if page.bread_type %} +
  • +

    Type

    +

    {{ page.bread_type }}

    +
    • + {% endif %} + {% with ingredients=page.ingredients.all %} + {% if ingredients %} +
  • +

    Ingredients

    +
      + {% for ingredient in ingredients %} +
    • + {{ ingredient.name }} +
      • + {% endfor %} +
    +
    • + {% endif %} + {% endwith %} +
+
+
+
+ + +
+
+ + +{% comment %} +{% block content %} +
+
+
+
+
+

{{ page.title }}

+ + {% if page.introduction %} +

+ {{ page.introduction }} +

+ {% endif %} +
+
+ +
+
+ {% image self.image width-600 %} +
+
+
+
+
+
+ {{ page.body }} +
+
+ +
+
    + {% if page.origin %} +
  • +

    Origin

    +

    {{ page.origin }}

    +
    • + {% endif %} + {% if page.bread_type %} +
  • +

    Type

    +

    {{ page.bread_type }}

    +
    • + {% endif %} + {% with ingredients=page.ingredients.all %} + {% if ingredients %} +
  • +

    Ingredients

    +
      + {% for ingredient in ingredients %} +
    • + {{ ingredient.name }} +
      • + {% endfor %} +
    +
    • + {% endif %} + {% endwith %} +
+
+
+
+
+{% endcomment %} +{% endblock content %} \ No newline at end of file