Port frontend to bootstrap 3

Part of #1569
django-oscar · Nov 30, 2014 · ccf89d9 · ccf89d9
1 parent e747f7d
commit ccf89d9
Show file tree

Hide file tree

Showing 94 changed files with 549 additions and 557 deletions.
diff --git a/docs/source/releases/v1.1.rst b/docs/source/releases/v1.1.rst
@@ -26,6 +26,8 @@ Compatibility
 What's new in Oscar 1.1?
 ------------------------
 
+* The frontend templates have been updated to use bootstrap 3 instead of version 2.
+
 .. _minor_changes_in_1.1:
 
 Minor changes

diff --git a/oscar/apps/search/forms.py b/oscar/apps/search/forms.py
@@ -39,7 +39,11 @@ class SearchForm(FacetedSearchForm):
     # focus on the search widget.
     q = forms.CharField(
         required=False, label=_('Search'),
-        widget=SearchInput({"placeholder": _('Search'), "tabindex": "1"}))
+        widget=SearchInput({
+            "placeholder": _('Search'),
+            "tabindex": "1",
+            "class": "form-control"
+        }))
 
     # Search
     RELEVANCY = "relevancy"

diff --git a/oscar/static/oscar/js/oscar/ui.js b/oscar/static/oscar/js/oscar/ui.js
@@ -128,7 +128,7 @@ var oscar = (function(o, $) {
         },
         initNav: function() {
             // Initial navigation for desktop
-            var $sidebar = $('aside.span3'),
+            var $sidebar = $('aside.col-sm-3'),
                 $browse = $('[data-navigation="dropdown-menu"]'),
                 $browseOpen = $browse.parent().find('> a[data-toggle]');
             // Set width of nav dropdown to be same as sidebar

diff --git a/oscar/static/oscar/less/page/checkout.less b/oscar/static/oscar/less/page/checkout.less
@@ -3,7 +3,7 @@
 
 //Set Width of all quantity fields
 input[type="text"][id*="quantity"], input[type="number"][id*="quantity"] {
-    width:30px;
+    width: 55px;
 }
 // Quantity on the basket
 .checkout-quantity {
@@ -16,7 +16,7 @@ input[type="text"][id*="quantity"], input[type="number"][id*="quantity"] {
 // Basket items like table headers
 .basket-title {
     clear:both;
-    border-bottom:1px solid lighten(@grayLight, 30%);
+    border-bottom:1px solid lighten(@gray-light, 30%);
     padding:0 10px;
     h4 {
         margin:0;
@@ -25,18 +25,19 @@ input[type="text"][id*="quantity"], input[type="number"][id*="quantity"] {
 
 // Basket items
 .basket-items {
-    border-bottom:1px solid lighten(@grayLight, 30%);
+    border-bottom:1px solid lighten(@gray-light, 30%);
     padding:10px;
     margin-bottom:20px;
     &:nth-child(even) {
-        background:lighten(@grayLighter, 4%);
+        background:lighten(@gray-lighter, 4%);
     }
     img {
         margin-left:auto;
         margin-right:auto;
     }
     .price_color {
         .h4();
+        color:@brand-success;
         font-weight:bold;
     }
 }
@@ -71,19 +72,19 @@ input[type="text"][id*="quantity"], input[type="number"][id*="quantity"] {
         span:first-child {
         display:block;
         font-weight:bold;
-        margin-bottom:@baseLineHeight / 2;
+        margin-bottom:@line-height-computed / 2;
         }
     }
     .btn-primary,
     .btn-success {
         position:absolute;
-        bottom: @gridGutterWidth;
-        left: @gridGutterWidth;
+        bottom: @grid-gutter-width;
+        left: @grid-gutter-width;
     }
     .address-controls {
         position:absolute;
-        top: @gridGutterWidth;
-        right: @gridGutterWidth;
+        top: @grid-gutter-width;
+        right: @grid-gutter-width;
     }
 }
 

diff --git a/oscar/static/oscar/less/page/forms.less b/oscar/static/oscar/less/page/forms.less
@@ -50,3 +50,10 @@ form {
         }
     }
 }
+
+.form-actions {
+    margin: @line-height-computed 0;
+    padding: @line-height-computed;
+    background-color: @form-actions-bg-color;
+    border-top: solid 1px @form-actions-border-color;
+}
diff --git a/oscar/static/oscar/less/page/header.less b/oscar/static/oscar/less/page/header.less
@@ -1,37 +1,46 @@
 // OSCAR HEADER
 // -----------
 
-.navbar-static-top.navbar .nav > li > a {
-  padding:10px 15px;
-}
-
 .header {
     position:relative;
     z-index:2;
-    .page_inner {
-        padding:50px 0 40px;
+
+    @media (min-width: @screen-sm-min) {
+        .page_inner {
+            padding:50px 0 40px;
+        }
     }
     h1 {
         line-height:inherit;
         margin:0;
         font-size:30px;
     }
+
+    .navbar-static-top {
+        margin-bottom: 0; // remove 18px margin for default navbar
+    }
 }
 
 //Language select
-#language_selector select {
-    width:100px;
+@media (min-width: @screen-sm-min) {
+    #language_selector select {
+        width:100px;
+    }
 }
 
 // Basket Mini Dropdown
 .basket-mini {
+    margin-right: @grid-gutter-width/2;
+
     .btn-group {
         margin-left:10px;
     }
     .dropdown-menu {
         width:400px;
         padding-bottom:0px;
         max-width:none;
+        z-index: 9999;
+
         li {
             display:block;
         }
@@ -41,7 +50,7 @@
 // Basket Mini Item
 .basket-mini-item {
     li {
-        border-top:1px solid @grayLighter;
+        border-top:1px solid @gray-lighter;
         padding:10px 15px;
         &:first-child {
             border-top:none;
@@ -58,7 +67,7 @@
         }
     }
     a {
-        color:@linkColor;
+        color:@link-color;
         font-weight:inherit;
         white-space:normal;
         &.btn {
@@ -70,8 +79,10 @@
         -moz-border-radius: 0 0px 6px 6px;
         border-radius: 0 0px 6px 6px;
         margin:0px;
+        overflow: hidden;
+
         h4 {
-            margin-bottom:@baseLineHeight / 2;
+            margin-bottom:@line-height-computed / 2;
         }
     }
-}
+}
diff --git a/oscar/static/oscar/less/page/layout.less b/oscar/static/oscar/less/page/layout.less
@@ -2,21 +2,20 @@
 // -----------
 
 body {
-    background-color: @grayLighter;
-    padding-bottom: 50px;
+    background-color: @gray-lighter;
 }
+
 .container-fluid {
-    padding:0px;
-    margin:0px auto;
     // Here is the page width: editable in page/mixins.less
-    max-width:@oscarpagewidth;
+    max-width: @oscarpagewidth;
 }
-.row-fluid {
+
+.row {
     .box-sizing(border-box);
 }
 
 // The page container
-.page {
+.page .page_inner {
     background:@white;
     -webkit-border-radius: 0 0 6px 6px;
     -moz-border-radius: 0 0 6px 6px;
@@ -29,6 +28,6 @@ body {
 // Some padding for the inner container
 // Also useful for mobile
 .page_inner {
-    padding:@gridGutterWidth;
+    padding:@grid-gutter-width;
     .clearfix();
 }
diff --git a/oscar/static/oscar/less/page/mixins.less b/oscar/static/oscar/less/page/mixins.less
@@ -4,4 +4,11 @@
 // Page width
 @oscarpagewidth: 960px;
 // Image height
-@imagecontainerheight: 165px;
+@imagecontainerheight: 165px;
+
+@form-actions-bg-color: #f5f5f5;
+@form-actions-border-color: #e5e5e5;
+
+// Custom colors
+@white: #fff;
+@black: #000;
diff --git a/oscar/static/oscar/less/page/plugins.less b/oscar/static/oscar/less/page/plugins.less
@@ -4,7 +4,7 @@
 
 // Carousel overrides, idicators in the center bottom
 .carousel {
-  margin-bottom: @baseLineHeight * 2;
+  margin-bottom: @line-height-computed * 2;
 }
 .carousel-indicators {
   top: auto;
@@ -59,7 +59,7 @@
   .carousel-indicators {
     position:static;
     margin-top:1%;
-    *margin-bottom:@baseLineHeight;
+    *margin-bottom:@line-height-computed;
     width:auto;
     display:block;
     .clearfix();
@@ -68,7 +68,7 @@
       height:auto;
       display: block;
       float: left;
-      margin:@baseLineHeight/4;
+      margin:@line-height-computed/4;
       text-indent: 0;
       background-color:#fff;
       .opacity(50);

diff --git a/oscar/static/oscar/less/page/product_lists.less b/oscar/static/oscar/less/page/product_lists.less
@@ -1,14 +1,22 @@
 //no margin on lists
 ol,
 ul {
-    &.row-fluid {
+    &.row {
         margin-left:0;
+        padding-left:0;
         list-style: none;
+
+        &.no-padding {
+            [class*="col-"] {
+                padding-left: 0;
+                padding-right: 0;
+            }
+        }
     }
 }
 
 //Remove margin if condition
-.row-fluid [class*="span"] {
+.row [class*="col-"] {
     &.no-margin {
         margin-left:0;
     }
@@ -21,7 +29,7 @@ ul {
     height:370px;
     overflow:hidden;
     text-align:center;
-    margin: @baseLineHeight 0;
+    margin: @line-height-computed 0;
     position:relative;
     p, h3, h2, form {
         margin-bottom:0;
@@ -32,6 +40,7 @@ ul {
     }
     .price_color {
         .h4();
+        color:@brand-success;
     }
     .availability,
     .price_color {
@@ -41,7 +50,7 @@ ul {
     .image_container,
     .availability,
     .price_color {
-        margin-bottom: @baseLineHeight / 2;
+        margin-bottom: @line-height-computed / 2;
     }
     // This could be set to 100% but this gives a little more space around products.
     .product_price {
@@ -71,6 +80,6 @@ ul {
 
 // Add a hover state for thumbnail
 a:hover .thumbnail {
-    border-color: @linkColor;
+    border-color: @link-color;
     .box-shadow(0 1px 4px rgba(0,105,214,.25));
 }
diff --git a/oscar/static/oscar/less/page/product_page.less b/oscar/static/oscar/less/page/product_page.less
@@ -2,20 +2,21 @@
 // -----------
 .availability {
     &.outofstock {
-        color:@red;
+        color:@brand-danger;
     }
     &.instock {
-    color:@green;
+        color:@brand-success;
     }
 }
 
 // PRICE SIZE/COLOR
 // -----------
 .price_color {
     display:block;
-    color:@green;
+    color:@brand-success;
     font-weight:bold;
 }
+
 .product_main .price_color {font-size: 26px; }
 .product_pod .price_color { margin-top:0 }
 .es-carousel .price_color { font-size:20px; }
@@ -28,6 +29,12 @@
 .review_read,
 .side_categories {
     .well();
+    li {
+        ul,
+        ol {
+            padding-left: 25/14em;
+        }
+    }
 }
 
 // Wish lists
@@ -51,7 +58,7 @@
 }
 .add-to-basket .btn,
 .btn-wishlist {
-    margin-bottom:@baseLineHeight;
+    margin-bottom:@line-height-computed;
 }
 
 #add_review_form {

diff --git a/oscar/static/oscar/less/page/promotions.less b/oscar/static/oscar/less/page/promotions.less
@@ -3,7 +3,7 @@
     .image_container {
         @imagecontainerheight: 210px;
         min-height: @imagecontainerheight;
-        margin-bottom: @baseLineHeight;
+        margin-bottom: @line-height-computed;
         img {
             max-height: @imagecontainerheight - 10;
         }
@@ -17,8 +17,8 @@
         h3 {
             .h5();
         }
-        .row-fluid {
-            > [class*="span"] {
+        .row {
+            > [class*="col-"] {
                 float:none;
                 width:auto;
             }