From ccf89d9757a6db5d9111c805e8f974a30048bdab Mon Sep 17 00:00:00 2001 From: Adrien Delhorme Date: Wed, 26 Nov 2014 15:51:29 +0100 Subject: [PATCH] Port frontend to bootstrap 3 Part of #1569 --- docs/source/releases/v1.1.rst | 2 + oscar/apps/search/forms.py | 6 +- oscar/static/oscar/js/oscar/ui.js | 2 +- oscar/static/oscar/less/page/checkout.less | 19 ++-- oscar/static/oscar/less/page/forms.less | 7 ++ oscar/static/oscar/less/page/header.less | 35 ++++-- oscar/static/oscar/less/page/layout.less | 15 ++- oscar/static/oscar/less/page/mixins.less | 9 +- oscar/static/oscar/less/page/plugins.less | 6 +- .../static/oscar/less/page/product_lists.less | 19 +++- .../static/oscar/less/page/product_page.less | 15 ++- oscar/static/oscar/less/page/promotions.less | 6 +- oscar/static/oscar/less/page/reviews.less | 4 +- oscar/static/oscar/less/page/type.less | 33 +++--- oscar/static/oscar/less/page/wells.less | 8 +- oscar/static/oscar/less/styles.less | 101 ++++++++--------- oscar/templates/README.rst | 12 +- oscar/templates/oscar/basket/basket.html | 1 - .../oscar/basket/partials/basket_content.html | 67 +++++------ .../oscar/basket/partials/basket_quick.html | 18 +-- .../oscar/basket/partials/basket_totals.html | 2 +- oscar/templates/oscar/catalogue/browse.html | 5 +- oscar/templates/oscar/catalogue/category.html | 8 +- oscar/templates/oscar/catalogue/detail.html | 20 ++-- .../partials/add_to_basket_form.html | 4 +- .../partials/add_to_basket_form_compact.html | 2 +- .../catalogue/partials/add_to_wishlist.html | 8 +- .../oscar/catalogue/partials/review.html | 4 +- .../reviews/partials/review_stars.html | 2 +- .../catalogue/reviews/review_detail.html | 4 - .../oscar/catalogue/reviews/review_form.html | 4 +- .../oscar/catalogue/reviews/review_list.html | 10 +- .../catalogue/reviews/review_product.html | 6 +- oscar/templates/oscar/checkout/checkout.html | 32 +++--- oscar/templates/oscar/checkout/gateway.html | 17 +-- oscar/templates/oscar/checkout/layout.html | 4 +- oscar/templates/oscar/checkout/nav.html | 106 +++++++++--------- .../oscar/checkout/payment_details.html | 2 +- oscar/templates/oscar/checkout/preview.html | 8 +- .../oscar/checkout/shipping_address.html | 38 +++---- .../oscar/checkout/shipping_methods.html | 18 +-- oscar/templates/oscar/checkout/thank_you.html | 42 +++---- .../oscar/checkout/user_address_form.html | 6 +- .../customer/address/address_delete.html | 5 +- .../oscar/customer/address/address_form.html | 1 - .../oscar/customer/address/address_list.html | 4 +- .../oscar/customer/baseaccountpage.html | 2 - .../oscar/customer/email/email_detail.html | 1 - .../history/recently_viewed_products.html | 4 +- .../oscar/customer/login_registration.html | 11 +- .../oscar/customer/notifications/detail.html | 3 +- .../oscar/customer/notifications/list.html | 6 +- .../oscar/customer/order/order_detail.html | 3 +- .../oscar/customer/order/order_list.html | 6 +- .../oscar/customer/partials/nav_account.html | 8 +- .../profile/change_password_form.html | 5 +- .../customer/profile/profile_delete.html | 4 +- .../oscar/customer/profile/profile_form.html | 5 +- .../oscar/customer/registration.html | 7 +- .../customer/wishlists/wishlists_delete.html | 8 +- .../wishlists/wishlists_delete_product.html | 8 +- .../customer/wishlists/wishlists_detail.html | 9 +- .../customer/wishlists/wishlists_form.html | 7 +- .../customer/wishlists/wishlists_list.html | 4 +- oscar/templates/oscar/error.html | 6 +- oscar/templates/oscar/flatpages/default.html | 3 +- oscar/templates/oscar/layout.html | 6 +- oscar/templates/oscar/layout_2_col.html | 8 +- oscar/templates/oscar/layout_3_col.html | 10 +- oscar/templates/oscar/offer/detail.html | 14 +-- oscar/templates/oscar/offer/list.html | 7 +- oscar/templates/oscar/offer/range.html | 5 +- oscar/templates/oscar/partials/brand.html | 2 +- oscar/templates/oscar/partials/form.html | 8 +- .../templates/oscar/partials/form_field.html | 11 +- .../templates/oscar/partials/form_fields.html | 8 +- .../oscar/partials/form_fields_inline.html | 2 +- .../templates/oscar/partials/mini_basket.html | 6 +- .../oscar/partials/nav_accounts.html | 73 ++++++------ .../oscar/partials/nav_checkout.html | 6 +- .../templates/oscar/partials/nav_primary.html | 33 +++--- oscar/templates/oscar/partials/search.html | 8 +- .../oscar/promotions/baseproductlist.html | 4 +- .../oscar/promotions/singleproduct.html | 6 +- .../registration/password_reset_complete.html | 4 +- .../registration/password_reset_confirm.html | 6 +- .../registration/password_reset_done.html | 2 - .../registration/password_reset_form.html | 7 +- oscar/templates/oscar/search/results.html | 6 +- setup.py | 3 + sites/demo/settings.py | 1 + sites/sandbox/settings.py | 1 + sites/us/settings.py | 1 + tests/config.py | 1 + 94 files changed, 549 insertions(+), 557 deletions(-) diff --git a/docs/source/releases/v1.1.rst b/docs/source/releases/v1.1.rst index 6b916343714..5eeb0b4b1c4 100644 --- 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 index ffeb5cc4b6d..e808f67f010 100644 --- 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 index 6906cfe08f0..e5c57b9ccc8 100644 --- 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 index 389e0cf7691..c457ab31a39 100644 --- 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,11 +25,11 @@ 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; @@ -37,6 +37,7 @@ input[type="text"][id*="quantity"], input[type="number"][id*="quantity"] { } .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 index 37298c80699..b5888577627 100644 --- 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 index f6adb681dda..4dbb99e9001 100644 --- a/oscar/static/oscar/less/page/header.less +++ b/oscar/static/oscar/less/page/header.less @@ -1,30 +1,37 @@ // 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; } @@ -32,6 +39,8 @@ 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; } } -} \ No newline at end of file +} diff --git a/oscar/static/oscar/less/page/layout.less b/oscar/static/oscar/less/page/layout.less index 4ef07025105..832c3c26fe4 100644 --- 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 index ff2da0b121a..f96ec82bcd3 100644 --- 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; \ No newline at end of file +@imagecontainerheight: 165px; + +@form-actions-bg-color: #f5f5f5; +@form-actions-border-color: #e5e5e5; + +// Custom colors +@white: #fff; +@black: #000; \ No newline at end of file diff --git a/oscar/static/oscar/less/page/plugins.less b/oscar/static/oscar/less/page/plugins.less index fc668c2714b..6fcd4ffc933 100644 --- 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 index 6a62e3eb1f7..9b552014366 100644 --- 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 index 0772a34647b..54d06b3a98e 100644 --- a/oscar/static/oscar/less/page/product_page.less +++ b/oscar/static/oscar/less/page/product_page.less @@ -2,10 +2,10 @@ // ----------- .availability { &.outofstock { - color:@red; + color:@brand-danger; } &.instock { - color:@green; + color:@brand-success; } } @@ -13,9 +13,10 @@ // ----------- .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 index 2a6edb2aa88..9f40664f839 100644 --- 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; } diff --git a/oscar/static/oscar/less/page/reviews.less b/oscar/static/oscar/less/page/reviews.less index 64246225dc0..5f932bde148 100644 --- a/oscar/static/oscar/less/page/reviews.less +++ b/oscar/static/oscar/less/page/reviews.less @@ -1,9 +1,9 @@ // Review styles .review { - margin-bottom:@baseLineHeight; + margin-bottom:@line-height-computed; .clearfix(); h3 { - margin-bottom: @baseLineHeight / 2; + margin-bottom: @line-height-computed / 2; overflow: hidden; text-overflow: ellipsis; } diff --git a/oscar/static/oscar/less/page/type.less b/oscar/static/oscar/less/page/type.less index e02dd5b2c7f..efda90dfd3a 100644 --- a/oscar/static/oscar/less/page/type.less +++ b/oscar/static/oscar/less/page/type.less @@ -11,11 +11,11 @@ form, .table, .page-header, .sub-header { - margin:0 0 @baseLineHeight; + margin:0 0 @line-height-computed; } ul, ol { - margin-bottom:@baseLineHeight; + margin-bottom:@line-height-computed; } .page-header, .sub-header, @@ -26,30 +26,37 @@ ol { } // Heading fonts a little smaller -h1, .h1 { font-size: @baseFontSize * 2.15; line-height: @baseLineHeight * 2; } // 30px -h2, .h2 { font-size: @baseFontSize * 1.75; line-height: @baseLineHeight * 2; } // 24px -h3, .h3 { font-size: @baseFontSize * 1.25; line-height: @baseLineHeight * 1.2; } // 18px -h4, .h4 { font-size: @baseFontSize * 1.15; line-height: @baseLineHeight * 1.2; } // 16px -h5, .h5 { font-size: @baseFontSize; line-height: @baseLineHeight; } // 14px +h1, .h1 { font-size: @font-size-base * 2.15; line-height: 1.3; } // 30px +h2, .h2 { font-size: @font-size-base * 1.75; line-height: 1.3; } // 24px +h3, .h3 { font-size: @font-size-base * 1.25; line-height: 1.4; } // 18px +h4, .h4 { font-size: @font-size-base * 1.15; line-height: 1.4; } // 16px +h5, .h5 { font-size: @font-size-base; line-height: @line-height-base; } // 14px + +.h1, +.h2, +.h3 { + margin-top: 0; + margin-bottom: 0; +} // Page / sub headers consistant .sub-header { - padding-bottom: (@baseLineHeight / 2) - 1; - border-bottom: 1px solid @grayLighter; + padding-bottom: (@line-height-computed / 2) - 1; + border-bottom: 1px solid @gray-lighter; } .page-header { h1,h2 { - font-size: @baseFontSize * 2.14; + font-size: @font-size-base * 2.14; line-height: 40px; } } // Sub header a little lighter .sub-header { h2,h3,h4 { - font-size: @baseFontSize * 1.6; // 22px - line-height: @baseLineHeight * 1.5; + font-size: @font-size-base * 1.6; // 22px + line-height: @line-height-base * 1.5; font-weight:normal; - color:@grayDark; + color:@gray-dark; } } diff --git a/oscar/static/oscar/less/page/wells.less b/oscar/static/oscar/less/page/wells.less index f5d75a9d99b..341a7cce4e1 100644 --- a/oscar/static/oscar/less/page/wells.less +++ b/oscar/static/oscar/less/page/wells.less @@ -3,12 +3,12 @@ .clearfix(); } .well-success { - background-color: @successBackground; - border-color: @successBorder; + background-color: @state-success-bg; + border-color: @state-success-border; } .well-info { - background-color: @infoBackground; - border-color: @infoBorder; + background-color: @state-info-bg; + border-color: @state-info-border; } .well-blank { background-color: @white; diff --git a/oscar/static/oscar/less/styles.less b/oscar/static/oscar/less/styles.less index 6ba1d18fb7e..589fe4fdb04 100644 --- a/oscar/static/oscar/less/styles.less +++ b/oscar/static/oscar/less/styles.less @@ -1,70 +1,57 @@ -/*! - * Bootstrap v2.3.1 - * - * Copyright 2012 Twitter, Inc - * Licensed under the Apache License v2.0 - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Designed and built with all the love in the world @twitter by @mdo and @fat. - */ - // Core variables and mixins -@import "bootstrap/variables.less"; // Modify this for custom colors, font-sizes, etc -@import "bootstrap/mixins.less"; +@import "bootstrap3/variables.less"; +@import "bootstrap3/mixins.less"; // Oscar variables @import "page/mixins.less"; // Kept separate for bootstrap updates - but should be imported into bootstap mixins. -// CSS Reset -@import "bootstrap/reset.less"; +// Reset and dependencies +@import "bootstrap3/normalize.less"; +@import "bootstrap3/print.less"; +@import "bootstrap3/glyphicons.less"; -// Grid system and page structure -@import "bootstrap/scaffolding.less"; -@import "bootstrap/grid.less"; -@import "bootstrap/layouts.less"; +// Core CSS +@import "bootstrap3/scaffolding.less"; +@import "bootstrap3/type.less"; +@import "bootstrap3/code.less"; +@import "bootstrap3/grid.less"; +@import "bootstrap3/tables.less"; +@import "bootstrap3/forms.less"; +@import "bootstrap3/buttons.less"; -// Base CSS -@import "bootstrap/type.less"; -@import "bootstrap/code.less"; -@import "bootstrap/forms.less"; -@import "bootstrap/tables.less"; +// Components +@import "bootstrap3/component-animations.less"; +@import "bootstrap3/dropdowns.less"; +@import "bootstrap3/button-groups.less"; +@import "bootstrap3/input-groups.less"; +@import "bootstrap3/navs.less"; +@import "bootstrap3/navbar.less"; +@import "bootstrap3/breadcrumbs.less"; +@import "bootstrap3/pagination.less"; +@import "bootstrap3/pager.less"; +@import "bootstrap3/labels.less"; +@import "bootstrap3/badges.less"; +@import "bootstrap3/jumbotron.less"; +@import "bootstrap3/thumbnails.less"; +@import "bootstrap3/alerts.less"; +@import "page/alerts.less"; +@import "bootstrap3/progress-bars.less"; +@import "bootstrap3/media.less"; +@import "bootstrap3/list-group.less"; +@import "bootstrap3/panels.less"; +@import "bootstrap3/responsive-embed.less"; +@import "bootstrap3/wells.less"; +@import "bootstrap3/close.less"; // Components: Icons / Fonts @import "font-awesome/font-awesome.less"; // Replaced sprites with font-awesome @import "font-awesome/font-awesome-ie7.less"; -// Components: common -@import "bootstrap/dropdowns.less"; -@import "bootstrap/wells.less"; -@import "bootstrap/component-animations.less"; -@import "bootstrap/close.less"; - -// Components: Buttons & Alerts -@import "bootstrap/buttons.less"; -@import "bootstrap/button-groups.less"; -@import "bootstrap/alerts.less"; // Note: alerts share common CSS with buttons and thus have styles in buttons.less -@import "page/alerts.less"; - -// Components: Nav -@import "bootstrap/navs.less"; -@import "bootstrap/navbar.less"; -@import "bootstrap/breadcrumbs.less"; -@import "bootstrap/pagination.less"; -@import "bootstrap/pager.less"; - -// Components: Popovers -@import "bootstrap/modals.less"; -@import "bootstrap/tooltip.less"; -@import "bootstrap/popovers.less"; - -// Components: Misc -@import "bootstrap/thumbnails.less"; -@import "bootstrap/media.less"; -@import "bootstrap/labels-badges.less"; -@import "bootstrap/progress-bars.less"; -@import "bootstrap/accordion.less"; -@import "bootstrap/carousel.less"; -@import "bootstrap/hero-unit.less"; +// Components w/ JavaScript +@import "bootstrap3/modals.less"; +@import "bootstrap3/tooltip.less"; +@import "bootstrap3/popovers.less"; +@import "bootstrap3/carousel.less"; // Oscar: Unique @import "page/layout.less"; @@ -79,6 +66,6 @@ @import "page/wells.less"; @import "page/plugins.less"; - // Utility classes -@import "bootstrap/utilities.less"; // Has to be last to override when necessary \ No newline at end of file +@import "bootstrap3/utilities.less"; +@import "bootstrap3/responsive-utilities.less"; diff --git a/oscar/templates/README.rst b/oscar/templates/README.rst index 1dbd0f3a571..03de9c53095 100644 --- a/oscar/templates/README.rst +++ b/oscar/templates/README.rst @@ -9,14 +9,14 @@ Forms should be marked-up as::
{% csrf_token %} {% include 'partials/form_fields.html' %} -
- +
+ or cancel
-The ``.form-actions`` class aligns the buttons with the fields and adds a gray -background. +The ``.form-group`` class aligns the buttons with the fields. The ``.forms-actions`` +class adds a gray background. Alternatively, use:: @@ -25,10 +25,10 @@ Alternatively, use:: {% include 'partials/form_fields.html' %}
- + or cancel
-The ``.control-group`` class aligns the buttons with the fields. +The ``.control-group`` class aligns the buttons with the fields. \ No newline at end of file diff --git a/oscar/templates/oscar/basket/basket.html b/oscar/templates/oscar/basket/basket.html index 78c677d5600..664872d07e7 100644 --- a/oscar/templates/oscar/basket/basket.html +++ b/oscar/templates/oscar/basket/basket.html @@ -10,7 +10,6 @@ diff --git a/oscar/templates/oscar/basket/partials/basket_content.html b/oscar/templates/oscar/basket/partials/basket_content.html index 6e907bf23c0..fb1ac921a58 100644 --- a/oscar/templates/oscar/basket/partials/basket_content.html +++ b/oscar/templates/oscar/basket/partials/basket_content.html @@ -2,6 +2,7 @@ {% load thumbnail %} {% load currency_filters %} {% load purchase_info_tags %} +{% load widget_tweaks %} {% if basket_warnings %}
{% trans "Important messages about items in your basket" %}
@@ -23,18 +24,18 @@

{% trans "You could be missing out on offers!" %}

{% if not basket.is_empty %} {% block basket_form_headers %} -
-
-

{% trans "Items to buy now" %}

-

{% trans "Quantity" %}

-

{% trans "Price" %}

-

{% trans "Total" %}

+ {% endblock %} {% block basket_form_main %} -
+ {% csrf_token %} {{ formset.management_form }} @@ -42,8 +43,8 @@

{% trans "Items to buy now" %}

{% with line=form.instance product=form.instance.product %} {% purchase_info_for_line request line as session %}
-
-
+
+
{{ form.id }} {% with image=product.primary_image %} {% thumbnail image.original "100x100" upscale=False as thumb %} @@ -53,15 +54,15 @@

{% trans "Items to buy now" %}

{% endthumbnail %} {% endwith %}
-
+

{{ line.description }}

{{ session.availability.message }}

-
-
+
+

- {{ form.quantity }} - + {% render_field form.quantity class+="form-control" %} +

{% trans "Remove" %} @@ -81,7 +82,7 @@

{{ line.description }}

-
+

{% if line.is_tax_known %} {{ line.unit_price_incl_tax|currency:line.price_currency }} @@ -90,7 +91,7 @@

{{ line.description }}

{% endif %}

-
+

{% if line.is_tax_known %} {{ line.line_price_incl_tax|currency:line.price_currency }} @@ -106,15 +107,15 @@

{{ line.description }}

{% endblock %} -
+
{% block vouchers %} {# Hide the entire section if a custom BasketView doesn't pass in a voucher form #} {% if voucher_form %} -
+

{% trans "Voucher/promo code" %}

- +