Merge pull request #117 from wagtail/dutch-amendments

Styling amendments from Holland

bakerydemo/base/templatetags/navigation_tags.py

@@ -91,7 +91,7 @@ def breadcrumbs(context):
     }
 
 
-@register.inclusion_tag('base/include/footer.html', takes_context=True)
+@register.inclusion_tag('base/include/footer_text.html', takes_context=True)
 def get_footer_text(context):
     footer_text = ""
     if FooterText.objects.first() is not None:

bakerydemo/static/css/main.css

@@ -204,6 +204,9 @@ nav {
   margin: 15px 0 5px;
   display: none;
 }
+#main-navigation {
+  padding-left: 0;
+}
 
 @media (min-width: 768px) {
   nav {
@@ -237,13 +240,35 @@ nav {
     font-size: 14px;
   }
 }
-
+.nav-pills>li>a, .nav-pills>li>a:focus, .nav-pills>li>a:hover,
+.nav-pills>li, .nav-pills>li, .nav>li>a, .nav>li>a {
+  border-top: 1px solid transparent;
+}
+/* The following is to stop a pixel shift on hover */ 
+.nav-pills>li.breads {
+  width: 90px;
+}
+.nav-pills>li.locations {
+  width: 140px;
+}
+.nav-pills>li.blog {
+  width: 86px;
+}
+.nav-pills>li.gallery {
+  width: 115px;
+}
+.nav-pills>li.contactus {
+  width: 148px;
+}
+.nav-pills>li.about {
+  width: 98px;
+}
 .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, .nav>li>a:focus, .nav>li>a:hover {
   color: #d4566b;
   background-color: transparent;
   border-top: 1px solid #d4566b;
-  font-weight: 600;
+  font-weight: 400;
 }
 
 .nav .open>a, .nav .open>a:focus, .nav .open>a:hover {
@@ -598,17 +623,22 @@ time.location-time {
 }
 
 /* Blog styles */
-.blog-byline {
+.blog-meta {
     margin-top: -40px;
     margin-bottom: 20px;
 }
 .blog-avatar {
-    width: unset;
+    border-radius: 100%;
     display: inline;
+    width: unset;
 }
 .blog-avatars {
     margin-bottom: 20px;
 }
+.blog-avatars .author {
+  display: inline-block;
+  margin-right: 30px;
+}
 
 /* Blog list view */
 .blog-tags>li {
@@ -668,7 +698,7 @@ time.location-time {
 }
 
 .blog-list-item .text {
-  background: linear-gradient(to bottom, rgba(100,100,100,0) 0%,rgba(100,100,100,0.9) 23%,rgba(100,100,100,1) 50%);
+  background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.6) 23%,rgba(0,0,0,1) 50%);
   margin-top: -150px;
   padding: 20px;
   position: relative;
@@ -792,8 +822,8 @@ span.outline {
 /* Form detail page */
 .form-page input, textarea, select {
   display: block;
-  min-width: 350px;
-  max-width: 350px;
+  min-width: 450px;
+  max-width: 450px;
 }
 
 .form-page li input[type=checkbox], input[type=radio] {
@@ -812,6 +842,10 @@ span.outline {
   color: red;
 }
 
+.form-page .fieldWrapper {
+  margin-bottom: 30px;
+}
+
 .form-page .help {
   color: #999;
   font-family: 'Lato', sans-serif;

bakerydemo/templates/base/form_page.html

@@ -10,6 +10,9 @@
             {% if page.intro %}
                 <p class="intro">{{ page.intro|richtext }}</p>
             {% endif %}
+            {% if page.body %}
+                {{ page.body }}
+            {% endif %}
         </div>
     </div>
 </div>

bakerydemo/templates/base/include/footer.html

@@ -1,3 +0,0 @@
-{% load wagtailcore_tags %}
-
-{{ footer_text|richtext }}

bakerydemo/templates/base/include/footer_text.html

@@ -0,0 +1,5 @@
+{% load wagtailcore_tags %}
+
+<div class="copyright text-center text-muted" role="note">
+    {{ footer_text|richtext }}
+</div>

bakerydemo/templates/blog/blog_page.html

@@ -13,16 +13,20 @@
                 <p class="intro">{{ page.introduction }}</p>
             {% endif %}
 
-            <div class="blog-byline">
-                {% if page.date_published %}{{ page.date_published }} by {% else %}By: {% endif %}{% for author in page.authors %}
-                    {{ author }}{% if not forloop.last %}, {% endif %}
-                {% endfor %}
-            </div>
-
-            <div class="blog-avatars">
-                {% for author in page.authors %}
-                    {% image author.image width-100 class="blog-avatar" %}
-                {% endfor %}
+            <div class="blog-meta">
+                {% if page.authors %}
+                <div class="blog-avatars">
+                    {% for author in page.authors %}
+                        <div class="author">{% image author.image fill-50x50-c100 class="blog-avatar" %} {{ author.first_name }} {{ author.last_name }}</div>
+                    {% endfor %}
+                </div>
+                {% endif %}
+                
+                {% if page.date_published %}
+                    <div class="blog-byline">
+                        {{ page.date_published }}
+                    </div>
+                {% endif %}
             </div>
 
             {{ page.body }}

bakerydemo/templates/includes/footer.html

@@ -29,7 +29,7 @@
                     </a>
                 </li>
             </ul>
-            <p class="copyright text-center text-muted" role="note">{% get_footer_text %}</p>
+            {% get_footer_text %}
         </div>
     </div>
 </div>

bakerydemo/templates/tags/breadcrumbs.html

@@ -7,13 +7,15 @@
           <div class="col-lg-12">
             {% if ancestors %}
               <ol class="breadcrumb">
-                  {% for ancestor in ancestors %}
+
+                <li><a href="/"><i class="fa fa-home" aria-hidden="true"></i><span class="hidden" aria-hidden="false">Home</span></a></li>
+                  {% for ancestor in ancestors|slice:"1:" %}
                     {% if forloop.last %}
                       <li class="active" aria-level="{{ancestors|length}}">
                         {{ ancestor }}
                       </li>
                     {% else %}
-                      <li><a href="{% pageurl ancestor %}" aria-level="{% cycle 1 2 3 4 5 %}">{{ ancestor }}</a></li>
+                      <li><a href="{% pageurl ancestor %}" aria-level="{% cycle 1 2 3 4 5 %}">{{ ancestor }}</a></li>  
                     {% endif %}
                   {% endfor %}
               </ol>

bakerydemo/templates/tags/gallery.html

@@ -1,14 +1,12 @@
 {% load wagtailimages_tags %}
 
 {% for img in images %}
-	{% image img fill-285x200-c100 as img_obj %}
-	<div class="col-sm-6">
-		<a href="{{img_obj.image.get_usage.first.specific.url}}">
-			<figure class="gallery-figure">
-				<img src="{{img_obj.url}}" class="img-responsive" />
-				<figcaption>{{ img.title }}</figcaption>
-			</figure>
-		</a>
-	</div>
-	{{ image.title }}
+{% image img fill-285x200-c100 as img_obj %}
+<div class="col-sm-6">
+    <figure class="gallery-figure">
+        <img src="{{img_obj.url}}" class="img-responsive" />
+        <figcaption>{{ img.title }}</figcaption>
+    </figure>
+</div>
+{{ image.title }}
 {% endfor %}

bakerydemo/templates/tags/top_menu.html

@@ -2,7 +2,7 @@
 {% get_site_root as site_root %}
 
 {% for menuitem in menuitems %}
-  <li class="presentation {% if menuitem.show_dropdown %}has-submenu{% endif %} {% if menuitem.active %}active{% endif %}">
+  <li class="presentation {{ menuitem.title|lower|cut:" " }}{% if menuitem.active %} active{% endif %}{% if menuitem.show_dropdown %} has-submenu{% endif %}">
       {% if menuitem.show_dropdown %}
           <a href="{% pageurl menuitem %}" class="allow-toggle">{{ menuitem.title }} <span><a class="caret-custom dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"></a></span></a>
               {% top_menu_children parent=menuitem %}