Fixing heading structure on various pages on the public side of the site, relating to issue #1425

oscar/static/oscar/css/styles.css

@@ -7497,6 +7497,11 @@ body {
   margin: 0px auto;
   max-width: 960px;
 }
+.row-fluid {
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+}
 .page {
   background: #ffffff;
   -webkit-border-radius: 0 0 6px 6px;
@@ -7564,21 +7569,25 @@ h1,
 .h1 {
   font-size: 30.099999999999998px;
   line-height: 40px;
+  font-weight: bold;
 }
 h2,
 .h2 {
   font-size: 24.5px;
   line-height: 40px;
+  font-weight: bold;
 }
 h3,
 .h3 {
   font-size: 17.5px;
   line-height: 24px;
+  font-weight: bold;
 }
 h4,
 .h4 {
   font-size: 16.099999999999998px;
   line-height: 24px;
+  font-weight: bold;
 }
 h5,
 .h5 {
@@ -7751,6 +7760,7 @@ ul.row-fluid {
 .product_pod .price_color {
   font-size: 16.099999999999998px;
   line-height: 24px;
+  font-weight: bold;
 }
 .product_pod .availability,
 .product_pod .price_color {
@@ -7930,6 +7940,7 @@ a:hover .thumbnail {
 .sidebar .promotion_single h2 {
   font-size: 17.5px;
   line-height: 24px;
+  font-weight: bold;
 }
 .sidebar .promotion_single h3 {
   font-size: 14px;

oscar/static/oscar/less/page/layout.less

@@ -10,6 +10,9 @@ body {
     // Here is the page width: editable in page/mixins.less
     max-width:@oscarpagewidth;
 }
+.row-fluid {
+    .box-sizing(border-box);
+}
 
 // The page container
 .page {

oscar/templates/oscar/basket/partials/basket_content.html

@@ -25,10 +25,10 @@
     {% block basket_form_headers %}
         <div class="basket-title hidden-phone">
             <div class="row-fluid">
-                <h4 class="span6">{% trans "Items to buy now" %}</h4>
-                <h4 class="span3">{% trans "Quantity" %}</h4>
-                <h4 class="span1 align-right">{% trans "Price" %}</h4>
-                <h4 class="span2 align-right">{% trans "Total" %}</h4>
+                <h2 class="span6 h3">{% trans "Items to buy now" %}</h2>
+                <p class="span3 h3">{% trans "Quantity" %}</p>
+                <p class="span1 h3 align-right">{% trans "Price" %}</p>
+                <p class="span2 h3 align-right">{% trans "Total" %}</p>
             </div>
         </div>
     {% endblock %}
@@ -54,13 +54,15 @@
                                 {% endwith %}
                             </div>
                             <div class="span4">
-                                <h4><a href="{{ product.get_absolute_url }}">{{ line.description }}</a></h4>
+                                <h3><a href="{{ product.get_absolute_url }}">{{ line.description }}</a></h3>
                                 <p class="availability {{ session.availability.code }}">{{ session.availability.message }}</p>
                             </div>
                             <div class="span3">
                                 <div class="checkout-quantity control-group {% if form.errors %}error{% endif %}">
-                                    {{ form.quantity }}
-                                    <button class="btn" type="submit">{% trans "Update" %}</button>
+                                    <p>
+                                        {{ form.quantity }}
+                                        <button class="btn" type="submit">{% trans "Update" %}</button>
+                                    </p>
                                     <p>
                                         <a href="#" data-id="{{ forloop.counter0 }}" data-behaviours="remove" class="inline">{% trans "Remove" %}</a>
                                         {% if request.user.is_authenticated %}
@@ -113,7 +115,7 @@
                 <p id="voucher_form_link"><a href="#voucher" class="btn btn-full">{% trans "I have a voucher code..." %}</a></p>
 
                 <div id="voucher_form_container" style="display:none">
-                    <h4>{% trans "Voucher code" %}</h4>
+                    <h3>{% trans "Voucher code" %}</h3>
                     <form id="voucher_form" action="{% url 'basket:vouchers-add' %}" method="post">
                         {% csrf_token %}
                         {% include "partials/form_fields.html" with form=voucher_form %}
@@ -158,11 +160,11 @@
     {% if request.user.is_authenticated and saved_formset %}
         <div class="well">
             <div class="sub-header">
-                <h3>{% trans "To buy later" %}</h3>
+                <h2>{% trans "Items to buy later" %}</h2>
             </div>
             <div class="row-fluid basket-title hidden-phone">
-                <h4 class="span8">{% trans "Items" %}</h4>
-                <h4 class="span2 align-center">{% trans "Price" %}</h4>
+                <p class="span8 h4">{% trans "Items" %}</p>
+                <p class="span2 h4 align-center">{% trans "Price" %}</p>
                 <div class="span2">&nbsp;</div>
             </div>
             <form action="{% url 'basket:saved' %}" method="post" class="form-stacked later_summary" id="saved_basket_formset">
@@ -183,7 +185,7 @@
                                 {% endwith %}
                             </div>
                             <div class="span6">
-                                <h4><a href="{{ form.instance.product.get_absolute_url }}">{{ form.instance.description }}</a></h4>
+                                <h3><a href="{{ form.instance.product.get_absolute_url }}">{{ form.instance.description }}</a></h3>
                                 <p class="availability {{ session.availability.code }}">{{ session.availability.message }}</p>
                                 <a href="#" data-id="{{ forloop.counter0 }}" data-behaviours="remove">{% trans "Remove" %}</a>
                                 <div style="display:none">

oscar/templates/oscar/basket/partials/basket_quick.html

@@ -20,7 +20,7 @@
                         </div>
                     </div>
                     <div class="span6">
-                        <h5><a href="{{ line.product.get_absolute_url }}">{{ line.description }}</a></h5>
+                        <p><strong><a href="{{ line.product.get_absolute_url }}">{{ line.description }}</a></strong></p>
                     </div>
                     <div class="span1 align-center"><strong>{% trans "Qty" %}</strong> {{ line.quantity }}</div>
                     <div class="span2 price_color align-right">{{ line.unit_price_excl_tax|currency:request.basket.currency }}</div>
@@ -28,13 +28,13 @@
             </li>
         {% endfor %}
         <li class="form-actions">
-            <h4 class="align-right">
+            <p class="align-right">
                 {% if request.basket.is_tax_known %}
                     <small>{% trans "Total:" %} {{ request.basket.total_incl_tax|currency:request.basket.currency }}</small> 
                 {% else %}
                     <small>{% trans "Total:" %} {{ request.basket.total_excl_tax|currency:request.basket.currency }}</small> 
                 {% endif %}
-            </h4>
+            </p>
             <p class="pull-left"><a href="{% url 'basket:summary' %}" class="btn btn-info btn-small">{% trans "View basket" %}</a></p>
             <p class="pull-right"><a href="{% url 'checkout:index' %}" class="btn btn-primary btn-small"><i class="icon-shopping-cart"></i> {% trans "Checkout" %}</a></p>
         </li>

oscar/templates/oscar/basket/partials/basket_totals.html

@@ -6,7 +6,7 @@
     <table class="table table-condensed">
         <tbody>
             <tr>
-                <th colspan="2"><h4>{% trans "Basket" %}</h4></th>
+                <th colspan="2"><h3>{% trans "Basket" %}</h3></th>
             </tr>
             {% with offer_discounts=basket.offer_discounts voucher_discounts=basket.grouped_voucher_discounts %}
                 {% block discount_totals %}
@@ -36,7 +36,7 @@
 
                         {% if voucher_discounts %}
                             <tr>
-                                <th colspan="2"><h4>{% trans "Vouchers" %}</h4></th>
+                                <th colspan="2"><h3>{% trans "Vouchers" %}</h3></th>
                             </tr>
                             {% for discount in voucher_discounts %}
                                 <tr>
@@ -92,7 +92,7 @@
 
                 <tr>
                     <th colspan="2">
-                        <h4>{% trans "Shipping" %}</h4>
+                        <h3>{% trans "Shipping" %}</h3>
                         {% if shipping_methods|length > 1 and editable %}
                             <small>{% trans "Alternative shipping methods can be chosen during checkout" %}</small>
                         {% endif %}
@@ -157,7 +157,7 @@
                     </tr>
                     <tr>
                         <th colspan="2">
-                            <h4>{% trans "Tax" %}</h4>
+                            <h3>{% trans "Tax" %}</h3>
                         </th>
                     </tr>
                     <tr>
@@ -182,7 +182,7 @@
                         <td></td>
                     </tr>
                     <tr>
-                        <th><h4>{% trans "Post order actions" %}</h4><small>{% trans "These will be applied once your order is placed." %}</small></th>
+                        <th><h3>{% trans "Post order actions" %}</h3><small>{% trans "These will be applied once your order is placed." %}</small></th>
                         <td></td>
                     </tr>
                     {% for discount in basket.post_order_actions %}
@@ -202,15 +202,15 @@
                     <td></td>
                 </tr>
                 <tr>
-                    <th class="total"><h4>{% trans "Order total" %}</h4></th>
+                    <th class="total"><h3>{% trans "Order total" %}</h3></th>
                     <td class="total align-right">
-                        <h4 class="price_color">
+                        <h3 class="price_color">
                             {% if order_total.is_tax_known %}
                                 {{ order_total.incl_tax|currency:basket.currency }}
                             {% else %}
                                 {{ order_total.excl_tax|currency:basket.currency }}
                             {% endif %}
-                        </h4>
+                        </h3>
                     </td>
                 </tr>
                 {% if not order_total.is_tax_known %}

oscar/templates/oscar/catalogue/detail.html

@@ -61,7 +61,7 @@
 
         {% block product_main %}
         <div class="span6">
-            {% comment %} 
+            {% comment %}
             This is a but clunky here.  Better to have some kind of JS-driven dashboard menu that 
             pops out when clicked.  A bit like the Django-Debug-Toolbar button
             {% endcomment %}
@@ -76,7 +76,7 @@
 
             {% iffeature "reviews" %}
                 {% if product.rating != None %}
-                    <h4 class="star-rating {{ product.rating|as_stars }}">
+                    <p class="star-rating {{ product.rating|as_stars }}">
                         <i class="icon-star"></i>
                         <i class="icon-star"></i>
                         <i class="icon-star"></i>
@@ -92,14 +92,15 @@
                         </a></small>
                         &nbsp;
                 {% else %}
-                    <h3>
+                    <p>
                 {% endif %}
+
                 {% if product|is_review_permitted:user %}
                     <a id="write_review" href="{% url 'catalogue:reviews-add' product_slug=product.slug product_pk=product.id %}#addreview" class="btn btn-success btn-small">
                         {% trans "Write a review" %}
                     </a>
                 {% endif %}
-                </h3>
+                </p>
             {% endiffeature %}
 
             <hr/>

oscar/templates/oscar/catalogue/partials/stock_record.html

@@ -7,14 +7,14 @@
 
 {% if session.price.exists %}
     {% if session.price.excl_tax == 0 %}
-        <h2 class="price_color">{% trans "Free" %}</h2>
+        <p class="price_color">{% trans "Free" %}</p>
     {% elif session.price.is_tax_known %}
-        <h2 class="price_color">{{ session.price.incl_tax|currency:session.price.currency }}</h2>
+        <p class="price_color">{{ session.price.incl_tax|currency:session.price.currency }}</p>
     {% else %}
-        <h2 class="price_color">{{ session.price.excl_tax|currency:session.price.currency }}</h2>
+        <p class="price_color">{{ session.price.excl_tax|currency:session.price.currency }}</p>
     {% endif %}
 {% else %}
-    <h2 class="price_color">&nbsp;</h2>
+    <p class="price_color">&nbsp;</p>
 {% endif %}
 <p class="{{ session.availability.code }} availability">
     <i class="icon-{% if session.availability.is_available_to_buy %}ok{% else %}remove{% endif %}"></i>

oscar/templates/oscar/catalogue/reviews/review_list.html

@@ -39,8 +39,8 @@
         {% include 'catalogue/reviews/review_product.html' %}
 
         {% if reviews %}
-            <h4>{% trans "Sort by:" %}</h4>
             <form action="." method="get" class="form-inline">
+                <label for="sort_by">{% trans "Sort by:" %}</label>
                 <select name="sort_by">
                     <option value="score">{% trans "Score" %}</option>
                     <option value="recency">{% trans "Recency" %}</option>

oscar/templates/oscar/catalogue/reviews/review_product.html

@@ -15,12 +15,12 @@
         </div>
     </div>
     <div class="span10">
-        <h3><a href="{{ product.get_absolute_url }}">{{ product.get_title }}</a></h3>
+        <h2><a href="{{ product.get_absolute_url }}">{{ product.get_title }}</a></h2>
         {% include "catalogue/partials/stock_record.html" %}
 
         {% iffeature "reviews" %}
             {% if product.rating != None %}
-                <h4 class="star-rating {{ product.rating|as_stars }}">
+                <p class="star-rating h4 {{ product.rating|as_stars }}">
                     <i class="icon-star"></i>
                     <i class="icon-star"></i>
                     <i class="icon-star"></i>
@@ -36,14 +36,14 @@
                     </a></small>
                     &nbsp;
             {% else %}
-                <h4>
+                <p>
             {% endif %}
             {% if product|is_review_permitted:user %}
                 <a id="write_review" href="{% url 'catalogue:reviews-add' product_slug=product.slug product_pk=product.id %}#addreview" class="btn btn-success btn-small">
                     {% trans "Write a review" %}
                 </a>
             {% endif %}
-            </h4>
+            </p>
         {% endiffeature %}
     </div>
 </div>

oscar/templates/oscar/checkout/checkout.html

@@ -34,7 +34,7 @@
                                 {% trans "Change" %}
                             </a>
                         {% endblock %}
-                        <h4>{% trans "Address" %}</h4>
+                        <h3>{% trans "Address" %}</h3>
                         <address>
                             {% for field in shipping_address.active_address_fields %}
                                 {{ field }}<br/>
@@ -65,7 +65,7 @@
                                 {% trans "Change" %}
                             </a>
                         {% endblock %}
-                        <h4>{% trans "Shipping method" %}</h4>
+                        <h3>{% trans "Shipping method" %}</h3>
                         <p>{{ shipping_method.name }}
                             {% if shipping_method.description %}
                                 - {{ shipping_method.description|safe }}
@@ -87,7 +87,7 @@
                     <a href="{% url 'checkout:payment-details' %}" class="pull-right">
                         {% trans "Change" %}
                     </a>
-                    <h4>{% trans "Payment" %}</h4>
+                    <h3>{% trans "Payment" %}</h3>
                     <p>{% trans "Payment details to go here" %}</p>
                 </div>
             </div>
@@ -106,9 +106,9 @@
         </div>
         <div class="basket-title">
             <div class="row-fluid">
-                <h4 class="span9">{% trans "Product" %}</h4>
-                <h4 class="span1 align-center">{% trans "Quantity" %}</h4>
-                <h4 class="span2 align-right">{% trans "Price" %}</h4>
+                <p class="span9 h4">{% trans "Product" %}</p>
+                <p class="span1 h4 align-center">{% trans "Quantity" %}</p>
+                <p class="span2 h4 align-right">{% trans "Price" %}</p>
             </div>
         </div>
         {% for line in basket.all_lines %}
@@ -125,7 +125,7 @@
                         </div>
                     </div>
                     <div class="span7">
-                        <h4><a href="{{ line.product.get_absolute_url }}">{{ line.description }}</a></h4>
+                        <h3><a href="{{ line.product.get_absolute_url }}">{{ line.description }}</a></h3>
                         <span class="availability {{ session.availability.code }}">{{ session.availability.message }}</span>
                     </div>
                     <div class="span1 align-center">
@@ -147,6 +147,9 @@
         <div class="row-fluid">
             <div class="span6">&nbsp;</div>
             <div class="span6">
+                <div class="sub-header">
+                    <h2>{% trans 'Totals' %}</h2>
+                </div>
                 {% include 'basket/partials/basket_totals.html' %}
             </div>
         </div>

oscar/templates/oscar/checkout/thank_you.html

@@ -36,7 +36,7 @@
                     <h2>{% trans "Shipping" %}</h2>
                 </div>
                 <div class="well well-info">
-                    <h4>{% trans "Address" %}</h4>
+                    <h3>{% trans "Address" %}</h3>
                     {% if order.shipping_address %}
                         <address>
                             {% for field in order.shipping_address.active_address_fields %}
@@ -64,7 +64,7 @@
                 </div>
 
                 <div class="well well-info">
-                    <h4>{% trans "Shipping method" %}</h4>
+                    <h3>{% trans "Shipping method" %}</h3>
                     <p>{{ order.shipping_method }}</p>
                 </div>
             {% endblock %}
@@ -76,7 +76,7 @@
                     <h2>{% trans "Payment" %}</h2>
                 </div>
                 <div class="well well-success">
-                    <h4>{% trans "Payment" %}</h4>
+                    <h3>{% trans "Payment" %}</h3>
                     {% for source in order.sources.all %}
                         <p>
                         {% if source.reference %}
@@ -110,15 +110,15 @@
     </div>
 
     <div class="sub-header">
-        <h3>{% trans "Order details" %}</h3>
+        <h2>{% trans "Order details" %}</h2>
     </div>
 
     <div class="basket-title">
         <div class="row-fluid">
-            <h4 class="span6">{% trans "Items purchased" %}</h4>
-            <h4 class="span3 align-center">{% trans "Estimated dispatch date" %}</h4>
-            <h4 class="span1 align-center">{% trans "Quantity" %}</h4>
-            <h4 class="span2 align-right">{% trans "Total" %}</h4>
+            <p class="span6 h4">{% trans "Items purchased" %}</p>
+            <p class="span3 h4 align-center">{% trans "Estimated dispatch date" %}</p>
+            <p class="span1 h4 align-center">{% trans "Quantity" %}</p>
+            <p class="span2 h4 align-right">{% trans "Total" %}</p>
         </div>
     </div>
 
@@ -135,7 +135,7 @@
                     </div>
                 </div>
                 <div class="span4">
-                    <h4><a href="{{ line.product.get_absolute_url }}">{{ line.description }}</a></h4>
+                    <h3><a href="{{ line.product.get_absolute_url }}">{{ line.description }}</a></h3>
                 </div>
                 <div class="span3 align-center">
                     {{ line.est_dispatch_date|default:"-" }}
@@ -160,11 +160,14 @@
         <div class="row-fluid">
             <div class="span6">&nbsp;</div>
             <div class="span6">
+                <div class="sub-header">
+                    <h2>{% trans 'Totals' %}</h2>
+                </div>
 
                 <div id="basket_totals">
                     <table class="table table-condensed">
                         <tr>
-                            <th colspan="2"><h4>{% trans "Basket" %}</h4></th>
+                            <th colspan="2"><h3>{% trans "Basket" %}</h3></th>
                         </tr>
                         {% with discounts=order.basket_discounts %}
                             {% block discount_totals %}
@@ -205,7 +208,7 @@
 
                         {% block shipping_total %}
                             <tr>
-                                <th colspan="2"><h4>{% trans "Shipping" %}</h4></th>
+                                <th colspan="2"><h3>{% trans "Shipping" %}</h3></th>
                             </tr>
                             <tr>
                                 <td>{% trans "Shipping method" %}</td>
@@ -259,7 +262,7 @@
                                         <th colspan="2">&nbsp;</th>
                                     </tr>
                                     <tr>
-                                        <th colspan="2"><h4>{% trans "Post order actions" %}</h4></th>
+                                        <th colspan="2"><h3>{% trans "Post order actions" %}</h3></th>
                                     </tr>
                                     {% for action in order.post_order_actions %}
                                         <tr>
@@ -275,8 +278,8 @@
                                 <th colspan="2">&nbsp;</th>
                             </tr>
                             <tr>
-                                <td class="total"><h4>{% trans "Order total" %}</h4></td>
-                                <td class="total align-right"><h4 class="price_color">{{ order.total_incl_tax|currency:order.currency }}</h4></td>
+                                <td class="total"><h3>{% trans "Order total" %}</h3></td>
+                                <td class="total align-right"><h3 class="price_color">{{ order.total_incl_tax|currency:order.currency }}</h3></td>
                             </tr>
                         {% endblock order_total %}
                     </table>

oscar/templates/oscar/customer/order/order_detail.html

@@ -143,12 +143,12 @@
 
     <hr>
 
-    <h3>{% trans 'Shipping Method' %}</h3>
+    <h2>{% trans 'Shipping Method' %}</h2>
     <p>{{ order.shipping_method }}</p>
 
     <hr>
 
-    <h3>{% trans 'Shipping Address' %}</h3>
+    <h2>{% trans 'Shipping Address' %}</h2>
 
     <table class="table table-striped table-bordered">
         <tr>

oscar/templates/oscar/customer/order/order_list.html

@@ -21,7 +21,7 @@
 
     {% if orders or form.is_bound %}
         <div class="well">
-            <h3>{% trans "Filter" %}</h3>
+            <h2>{% trans "Filter" %}</h2>
             <form action="." method="get" class="form-horizontal">
                 {% include "partials/form_fields.html" with form=form %}
                 <div class="controls">
@@ -33,7 +33,7 @@
     {% endif %}
 
     {% if orders %}
-        <h3>{{ form.description }}</h3>
+        <h2>{{ form.description }}</h2>
         <table class="table table-striped table-bordered">
             <tr>
                 <th>{% trans "Order number" %}</th>

oscar/templates/oscar/offer/detail.html

@@ -39,7 +39,7 @@
         {% endif %}
             <div class="span5">
                 <div class="well">
-                    <h3><i class="icon-exclamation-sign icon-large"></i> {% trans "What you need to do" %}</h3>
+                    <h2 class="h4"><i class="icon-exclamation-sign icon-large"></i> {% trans "What you need to do" %}</h2>
                     <p>{{ upsell_message }}</p>
                 </div>
             </div>

oscar/templates/oscar/offer/list.html

@@ -27,7 +27,7 @@
         <p>{% trans "There are no site offers at the moment." %}</p>
     {% else %}
         {% for offer in offers %}
-        <h4>{{ offer.name }}</h4>
+        <h2>{{ offer.name }}</h2>
         {% if offer.description %}
             <p>{{ offer.description|safe }}</p>
         {% endif %}

oscar/templates/oscar/partials/brand.html

@@ -1 +1 @@
-<h1 class="span7"><a href="{{ homepage_url }}">{% block brand_title %}{{ shop_name }}</a><small> {{ shop_tagline }}</small>{% endblock %}</h1>
+<div class="span7 h1"><a href="{{ homepage_url }}">{% block brand_title %}{{ shop_name }}</a><small> {{ shop_tagline }}</small>{% endblock %}</div>

oscar/templates/oscar/promotions/baseproductlist.html

@@ -4,7 +4,7 @@
 {% block content %}
 <section class="well well-blank">
     <div class="sub-header">
-        <h2>{{ promotion.name }}</h2>
+        <h3>{{ promotion.name }}</h3>
     </div>
 
     {{ promotion.description|safe }}