Two col design for bread detail page. Workson #57

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;
+  }
+}

bakerydemo/templates/breads/bread_page.html

@@ -2,24 +2,131 @@
 {% load wagtailimages_tags %}
 
 {% block content %}
-    <h1>{{ page.title }}</h1>
-    <figure>
-      {% image self.image fill-600x600 %}
-    </figure>
-
-    <p>{{ page.origin }}</p>
-    <p>{{ page.bread_type }}</p>
-    {% with ingredients=page.ingredients.all %}
-        {% if ingredients %}
-            <h3>Ingredients:</h3>
-            <ul>
-                {% for ingredient in ingredients %}
-                    <li style="display: inline">
-                        {{ ingredient.name }}
-                    </li>
-                {% endfor %}
-            </ul>
-        {% endif %}
-    {% endwith %}
-    {{ page.body }}
-{% endblock content %}
+<div class="container bread-detail">
+    <div class="row">
+        <div class="col-md-12">
+            <div class="col-md-6">
+                <div class="row">
+                    <h1>{{ page.title }}</h1>
+                    
+                    <figure class="hidden-md-up">
+                        {% image self.image width-600 %}
+                    </figure>
+                    
+                    {% if page.introduction %}
+                        <p class="introduction">
+                            {{ page.introduction }}
+                        </p>
+                    {% endif %}
+
+                    {{ page.body }}
+                </div>
+            </div>
+
+            <div class="col-md-5 col-md-offset-1">
+                <div class="row">
+                    <figure class="hidden-md-down">
+                        {% image self.image width-600 %}
+                    </figure>
+                    <ul class="bread-meta">
+                        {% if page.origin %}
+                            <li>
+                                <h4>Origin</h4>
+                                <p>{{ page.origin }}</p>
+                            </li>
+                        {% endif %}
+                        {% if page.bread_type %}
+                            <li>
+                                <h4>Type</h4>
+                                <p>{{ page.bread_type }}</p>
+                            </li>      
+                        {% endif %}
+                        {% with ingredients=page.ingredients.all %}
+                            {% if ingredients %}
+                                <li>
+                                    <h4>Ingredients</h4>
+                                    <ul>
+                                        {% for ingredient in ingredients %}
+                                            <li>
+                                                {{ ingredient.name }}
+                                            </li>
+                                        {% endfor %}
+                                    </ul>
+                                </li>
+                            {% endif %}
+                        {% endwith %}
+                    </ul>
+                </div>
+            </div>
+        </div>
+
+
+        </div>
+    </div>
+</div>
+
+{% comment %}
+{% block content %}
+<div class="container bread-detail">
+    <div class="row">
+        <div class="col-md-12">
+            <div class="col-md-6">
+                <div class="row">
+                    <h1>{{ page.title }}</h1>
+                    
+                    {% if page.introduction %}
+                        <p class="introduction">
+                            {{ page.introduction }}
+                        </p>
+                    {% endif %}
+                </div>
+            </div>
+
+            <div class="col-md-5 col-md-offset-1">
+                <figure>
+                    {% image self.image width-600 %}
+                </figure>
+            </div>
+        </div>
+        <div class="col-md-12">
+            <div class="col-md-6">
+                <div class="row">
+                    {{ page.body }}
+                </div>
+            </div>
+
+            <div class="col-md-5 col-md-offset-1">
+                <ul class="bread-meta">
+                    {% if page.origin %}
+                        <li>
+                            <h4>Origin</h4>
+                            <p>{{ page.origin }}</p>
+                        </li>
+                    {% endif %}
+                    {% if page.bread_type %}
+                        <li>
+                            <h4>Type</h4>
+                            <p>{{ page.bread_type }}</p>
+                        </li>      
+                    {% endif %}
+                    {% with ingredients=page.ingredients.all %}
+                        {% if ingredients %}
+                            <li>
+                                <h4>Ingredients</h4>
+                                <ul>
+                                    {% for ingredient in ingredients %}
+                                        <li>
+                                            {{ ingredient.name }}
+                                        </li>
+                                    {% endfor %}
+                                </ul>
+                            </li>
+                        {% endif %}
+                    {% endwith %}
+                </ul>
+            </div>
+        </div>
+    </div>
+</div>
+{% endcomment %}
+{% endblock content %}