Merge pull request #46 from wagtail/33-breadcrumb-changes

Breadcrumb changes

bakerydemo/static/css/main.css

@@ -239,8 +239,7 @@ nav {
 }
 
 .nav-pills>li.active>a, .nav-pills>li.active>a:focus, .nav-pills>li.active>a:hover,
-.nav-pills>li.active, .nav-pills>li:hover, .breadcrumb>li+li:hover:before,
-.nav>li>a:focus, .nav>li>a:hover {
+.nav-pills>li.active, .nav-pills>li:hover, .nav>li>a:focus, .nav>li>a:hover {
   color: #d4566b;
   background-color: transparent;
   border-top: 1px solid #d4566b;
@@ -491,10 +490,32 @@ li.has-submenu a.allow-toggle {
   padding-left: 0;
 }
 
+.breadcrumb-container {
+  /*background-color: rgba(21, 38, 44, 0.8);*/
+  background: linear-gradient(to right, rgba(21,38,44,0.8) 0%,rgba(0,0,0,0.9) 100%);
+  position: relative;
+  z-index: 3;
+}
+.breadcrumb-container + content > .hero {
+  margin-top: -36px;
+}
 .breadcrumb {
   background-color: transparent;
+  color: #ccc;
   font-family: 'Lato', sans-serif;
   font-size: 14px;
+  margin-bottom: 0px; 
+  padding-left: 0px;
+}
+.breadcrumb a, .breadcrumb .active {
+  color: #ccc;
+}
+.breadcrumb .active {
+  font-weight: bold;
+}
+.breadcrumb a:hover {
+  color: #fff;
+  text-decoration: none;
 }
 .breadcrumb>li+li:before {
   content: "\00BB";

bakerydemo/templates/404.html

@@ -4,8 +4,8 @@
 
 {% block body_class %}template-404{% endblock %}
 
-{% block content-header %}
+{% block content %}
     <h1>Page not found</h1>
 
     <h2>Sorry, this page could not be found.</h2>
-{% endblock content-header %}
+{% endblock content %}

bakerydemo/templates/base.html

@@ -19,18 +19,16 @@
     {% include "includes/messages.html" %}
 {% endblock messages %}
 
-    <content>
-        {% block content-header %}
-        {% endblock content-header %}
-
-        {% block breadcrumbs %}
-            {% breadcrumbs %}
-            {# breadcrumbs is defined in base/templatetags/navigation_tags.py #}
-        {% endblock breadcrumbs %}
-
-        {% block content-body %}
-        {% endblock content-body %}
-    </content>
+
+{% block breadcrumbs %}
+    {% breadcrumbs %}
+    {# breadcrumbs is defined in base/templatetags/navigation_tags.py #}
+{% endblock breadcrumbs %}
+
+<content>
+    {% block content %}
+    {% endblock content %}
+</content>
 
     <hr>
 

bakerydemo/templates/base/about_page.html

@@ -1,10 +1,8 @@
 {% extends "base.html" %}
 {% load wagtailimages_tags %}
 
-{% block content-header %}
+{% block content %}
     {% include "base/include/header.html" %}
-{% endblock content-header %}
 
-{% block content-body %}
     {{ page.body }}
-{% endblock content-body %}
+{% endblock content %}

bakerydemo/templates/base/form_page.html

@@ -1,15 +1,13 @@
 {% extends "base.html" %}
 {% load wagtailcore_tags %}
 
-{% block content-header %}
+{% block content %}
     {{ page.title }}
     {{ page.intro|richtext }}
-{% endblock content-header %}
 
-{% block content-body %}
     <form action="{% pageurl page %}" method="POST">
         {% csrf_token %}
         {{ form.as_p }}
         <input type="submit">
     </form>
-{% endblock content-body %}
+{% endblock content %}

bakerydemo/templates/base/form_page_landing.html

@@ -1,13 +1,8 @@
 {% extends "base.html" %}
 {% load wagtailcore_tags %}
 
-{% block content-header %}
+{% block content %}
     <h1>{{ page.title }}</h1>
-{% endblock content-header %}
 
-{% block breadcrumbs %}
-{% endblock breadcrumbs %}
-
-{% block content-body %}
     {{ page.thank_you_text|richtext }}
-{% endblock content-body %}
+{% endblock content %}

bakerydemo/templates/base/gallery_page.html

@@ -1,7 +1,7 @@
 {% extends "base.html" %}
 {% load wagtailimages_tags gallery_tags %}
 
-{% block content-header %}
+{% block content %}
 {% image self.image fill-1920x600 as hero_img %}
 <div class="container-fluid hero" style="background-image:url('{{ hero_img.url }}')">
 <div class="hero-gradient-mask"></div>
@@ -14,9 +14,7 @@
         </div>
     </div>
 </div>
-{% endblock content-header %}
 
-{% block content-body %}
 <div class="container">
     <div class="row">
         <div class="col-xs-12">
@@ -25,4 +23,4 @@
         </div>
     </div>
 </div>
-{% endblock content-body %}
+{% endblock content %}

bakerydemo/templates/base/home_page.html

@@ -1,10 +1,7 @@
 {% extends "base.html" %}
 {% load wagtailimages_tags %}
 
-{% block content-header %}
-    {% include "base/include/header.html" %}
-{% endblock content-header %}
+{% block content %}
 
-{% block content-body %}
     {{ page.body }}
-{% endblock content-body %}
+{% endblock content %}

bakerydemo/templates/blog/blog_index_page.html

@@ -1,11 +1,9 @@
 {% extends "base.html" %}
 {% load wagtailimages_tags %}
 
-{% block content-header %}
+{% block content %}
     {% include "base/include/header.html" %}
-{% endblock content-header %}
 
-{% block content-body %}
     <div class="container">
         <div class="row">
             <div class="col-md-7 col-md-offset-2">
@@ -21,4 +19,4 @@
             </div>
         </div>
     </div>
-{% endblock content-body %}
+{% endblock content %}

bakerydemo/templates/blog/blog_page.html

@@ -1,7 +1,7 @@
 {% extends "base.html" %}
 {% load navigation_tags wagtailimages_tags %}
 
-{% block content-header %}
+{% block content %}
 {% image self.image fill-1920x600 as hero_img %}
 <div class="container-fluid hero" style="background-image:url('{{ hero_img.url }}')">
 <div class="hero-gradient-mask"></div>
@@ -14,9 +14,7 @@
         </div>
     </div>
 </div>
-{% endblock content-header %}
 
-{% block content-body %}
 <div class="container">
     <div class="row">
         <div class="col-md-7 col-md-offset-2">
@@ -35,4 +33,4 @@
         </div>
     </div>
 </div>
-{% endblock content-body %}
+{% endblock content %}

bakerydemo/templates/breads/bread_page.html

@@ -1,15 +1,13 @@
 {% extends "base.html" %}
 {% load wagtailimages_tags %}
 
-{% block content-header %}
+{% block content %}
     <h1>{{ page.title }}</h1>
     <figure>
       {% image self.image fill-600x600 %}
     </figure>
-{% endblock content-header %}
 
-{% block content-body %}
     <p>{{ page.origin }}</p>
     <p>{{ page.bread_type }}</p>
     {{ page.description }}
-{% endblock content-body %}
+{% endblock content %}

bakerydemo/templates/breads/breads_index_page.html

@@ -1,12 +1,7 @@
 {% extends "base.html" %}
 {% load wagtailimages_tags %}
 
-{% block content-header %}
-    {% include "base/include/header.html" %}
-{% endblock content-header %}
-
-{% block content-body %}
-
+{% block content %}
     <p>{{ page.introduction}}</p>
 
     {% for bread in resources %}
@@ -42,4 +37,4 @@
 	  </div>
 	</div>
 	{% endif %}
-{% endblock content-body %}
+{% endblock content %}

bakerydemo/templates/locations/location_page.html

@@ -10,8 +10,7 @@
     </style>
 {% endblock head-extra %}
 
-
-{% block content-header %}
+{% block content %}
 {# @TODO This is identical to the header within blog_page.html. We should create an include #}
 {% image self.image fill-1920x600 as hero_img %}
 <div class="container-fluid hero" style="background-image:url('{{ hero_img.url }}')">
@@ -31,9 +30,7 @@
         </div>
     </div>
 </div>
-{% endblock content-header %}
 
-{% block content-body %}
 <div class="container">
     <div class="row">
         <div class="col-md-7">
@@ -111,4 +108,4 @@
     </script>
     <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyD31CT9P9KxvNUJOwDq2kcFEIG8ADgaFgw&callback=initMap" async defer></script>
 
-{% endblock content-body %}
+{% endblock content %}

bakerydemo/templates/locations/locations_index_page.html

@@ -1,7 +1,7 @@
 {% extends "base.html" %}
 {% load wagtailcore_tags navigation_tags wagtailimages_tags %}
 
-{% block content-header %}
+{% block content %}
 <div class="container">
     <div class="row">
         <div class="col-md-12">
@@ -10,9 +10,7 @@
         </div>
     </div>
 </div>
-{% endblock content-header %}
 
-{% block content-body %}
 <div class="container">
     <div class="row no-gutters">
         {% for location in locations %}
@@ -33,4 +31,4 @@
         {% endfor %}
     </div>
 </div>
-{% endblock content-body %}
+{% endblock content %}

bakerydemo/templates/search/search_results.html

@@ -3,13 +3,11 @@
 
 {% block title %}Search{% if search_results %} results{% endif %}{% endblock %}
 
-{% block content-header %}
+{% block content %}
     <h1>
         Search results
     </h1>
-{% endblock content-header %}
 
-{% block content-body %}
     {% if search_results %}
     You searched <p>{% if request.GET.query %} for “{{ request.GET.query }}”{% endif %}</p>
         <ul>
@@ -34,4 +32,4 @@
     {% else %}
         You didn’t search for anything!
     {% endif %}
-{% endblock content-body %}
+{% endblock content %}

bakerydemo/templates/tags/breadcrumbs.html

@@ -1,22 +1,24 @@
 {% load wagtailcore_tags %}
 
 
-<div class="container">
-    <div class="row">
-        <div class="col-lg-12">
-          {% if ancestors %}
-            <ol class="breadcrumb" aria-label="You are here:" role="navigation">
-                {% for ancestor in ancestors %}
-                  {% if forloop.last %}
-                    <li class="active">
-                      {{ ancestor }}
-                    </li>
-                  {% else %}
-                    <li><a href="{% pageurl ancestor %}">{{ ancestor }}</a></li>
-                  {% endif %}
-                {% endfor %}
-            </ol>
-          {% endif %}
-        </div>
-    </div>
+<div class="breadcrumb-container">
+  <div class="container">
+      <div class="row">
+          <div class="col-lg-12">
+            {% if ancestors %}
+              <ol class="breadcrumb" aria-label="You are here:" role="navigation">
+                  {% for ancestor in ancestors %}
+                    {% if forloop.last %}
+                      <li class="active">
+                        {{ ancestor }}
+                      </li>
+                    {% else %}
+                      <li><a href="{% pageurl ancestor %}">{{ ancestor }}</a></li>
+                    {% endif %}
+                  {% endfor %}
+              </ol>
+            {% endif %}
+          </div>
+      </div>
+  </div>
 </div>