updated checkout nav, updated icon set, styles/templates for checkout…

… area
django-oscar · Apr 15, 2013 · 83321e8 · 83321e8
1 parent d98f344
commit 83321e8
Show file tree

Hide file tree

Showing 27 changed files with 588 additions and 79 deletions.
diff --git a/sites/demo/static/demo/fonts/icomoon.dev.svg b/sites/demo/static/demo/fonts/icomoon.dev.svg
diff --git a/sites/demo/static/demo/fonts/icomoon.eot b/sites/demo/static/demo/fonts/icomoon.eot
diff --git a/sites/demo/static/demo/fonts/icomoon.svg b/sites/demo/static/demo/fonts/icomoon.svg
diff --git a/sites/demo/static/demo/fonts/icomoon.ttf b/sites/demo/static/demo/fonts/icomoon.ttf
diff --git a/sites/demo/static/demo/fonts/icomoon.woff b/sites/demo/static/demo/fonts/icomoon.woff
diff --git a/sites/demo/static/demo/fonts/lte-ie7.js b/sites/demo/static/demo/fonts/lte-ie7.js
@@ -20,7 +20,10 @@ window.onload = function() {
 			'icon-mail' : '&#xe008;',
 			'icon-plus' : '&#x2b;',
 			'icon-noun_project_62' : '&#x21;',
-			'icon-arrow-down' : '&#x22;'
+			'icon-arrow-down' : '&#x22;',
+			'icon-check-alt' : '&#x23;',
+			'icon-x-altx-alt' : '&#x24;',
+			'icon-checkout-half-wheel' : '&#x25;'
 		},
 		els = document.getElementsByTagName('*'),
 		i, attr, html, c, el;

diff --git a/sites/demo/static/demo/img/ui/sprite.png b/sites/demo/static/demo/img/ui/sprite.png
diff --git a/sites/demo/static/demo/js/site/ui.js b/sites/demo/static/demo/js/site/ui.js
@@ -59,6 +59,21 @@
         });
     }
 
+    function matchHeight(hasChanged) {
+      if (!hasChanged) {
+        return;
+      }
+      var matchHeight = $('[data-behaviours~="match-height"]');
+
+      if(matchHeight.length > 1) {
+        var rowHeight = matchHeight.closest('.row-fluid').height() - 40;
+
+        matchHeight.each(function() {
+          $(this).css('min-height', rowHeight);
+        });
+      }    
+    }
+
 
     // Register modernizr function against all viewports
     site.responsive.register(svgModernizr);
@@ -71,6 +86,5 @@
     site.responsive.register(megaCarousel, ['desktop', 'tablet']);
     site.responsive.register(productCarousel, ['desktop', 'tablet']);
     site.responsive.register(productSingleCarousel, ['desktop', 'tablet']);
-    // site.responsive.register(productAffix, ['desktop', 'tablet']);
 
 }(site, jQuery));
diff --git a/sites/demo/static/demo/less/bootstrap/forms.less b/sites/demo/static/demo/less/bootstrap/forms.less
@@ -603,6 +603,11 @@ input.search-query {
   select {
     .input-block-level();
   }
+  .checkbox, .radio {
+    input {
+      width:auto;
+    }
+  }
 }
 .form-search label,
 .form-inline label,

diff --git a/sites/demo/static/demo/less/bootstrap/layouts.less b/sites/demo/static/demo/less/bootstrap/layouts.less
@@ -20,6 +20,6 @@ body {
 }
 
 .page_inner {
-   padding:@gridGutterWidth 0;
+   padding:@gridGutterWidth 0 50px;
    .clearfix();
 }
diff --git a/sites/demo/static/demo/less/bootstrap/type.less b/sites/demo/static/demo/less/bootstrap/type.less
@@ -119,12 +119,18 @@ h3 {
 // -------------------------
 
 .page-header {
+  .clearfix();
   margin: 0 0 (@baseLineHeight * 1.5);
   h1 {
     font-size:@headingTwoSize;
     line-height: 38px;
     text-transform: uppercase;
   }
+  .verisign {
+    position: relative;
+    top:-10px;
+    float:right;
+  }
 }
 .well .sub-header {
   margin: 0 0 (@baseLineHeight);

diff --git a/sites/demo/static/demo/less/page/checkout.less b/sites/demo/static/demo/less/page/checkout.less
@@ -19,6 +19,7 @@
       margin-bottom: 18px;
   }
 }
+//Basket column names
 .basket-title {
   clear:both;
   border:1px solid #ddd;
@@ -40,6 +41,7 @@
     border-bottom-width:1px;
   }
 }
+//Basket list item
 .basket-items {
   border-bottom:1px solid lighten(@grayLight, 30%);
   padding:15px 0;
@@ -95,52 +97,35 @@
 .checkout-proceed {
   float:right;
   text-align: right;
-  > span {
+  margin-bottom:30px;
+  span {
+    display:inline-block;
+    text-align: left;
+    margin:0 20px;
+  }
+  .credit-cards {
+    margin:0;
+  }
+  > strong {
     font-size:@headingFourSize;
     text-transform: uppercase;
     display:block;
     margin:20px 0;
   }
 }
-
-.shipping_address {
-  h2 {
-    margin-bottom: @baseLineHeight;
-  }
-}
+//Shipping addresses
 .choose-block {
-  margin-top:10px;
   ul {
     .remove_bullets();
     .clearfix();
     li {
-        width: @third;
-        float: left;
         .default-address {
             background-color: @grayLighter;
       }
     }
   }
-  .well {
-    position:relative;
-    form {
-      position:relative;
-      padding-bottom:35px;
-      margin-bottom:0;
-      .ship-address {
-          bottom: 0;
-          position: absolute;
-      }
-    }
-    .remove-item {
-      position:absolute;
-      bottom: 10px;
-      right: 19px;
-      margin-bottom: 0;
-      input {
-          margin-bottom: 0;
-        }
-    }
+  form {
+    margin-bottom:0;
   }
   .well-info.default-address {
     background-color: @successBackground;
@@ -160,35 +145,34 @@
     }
   } 
 }
-
-.total {
-  background-color:#FDF5D9!important;
+.shipping-payment {
+  .span6 > .well {
+    min-height:380px;
+  }
 }
+//Checkout navigation
 .checkoutNav {
+  .container-fluid {
+    max-width: 960px;
+  }
   position: relative;
-  margin:30px 0 60px;
-  hr {
-    margin:0;
-    border-top:2px solid @navbarInverseBackground;
+  margin:30px 0 50px;
+  background:#F2F2F2;
+  padding:5px 0; 
+  border-top:2px solid @navbarInverseBackground;
+  border-bottom:1px solid #DDD;
+  i {
+    display:none;
+    vertical-align: bottom;
     position: absolute;
-    bottom:0;
-    left:0;
     width:100%;
-  }
-  i {
-    font-size: @headingTwoSize;
-    line-height: @headingFourSize;
-    vertical-align: middle;
-    position: relative;
-    top:5px;
-  }
-  div {
-    height:25px;
-    overflow: hidden;
+    left:0;
+    top:-25px;
   }
   ul {
     .clearfix();
     li {
+      position: relative;
       list-style: none;
       display:block;
       text-align: center;
@@ -199,11 +183,45 @@
       text-transform: uppercase;
       color:@navbarInverseBackground;
       font-size: 18px;
+      &.visited {
+        color:@green;
+        i:first-child + i {
+          display:inline-block;
+          font-size: @headingThreeSize;
+          line-height: @headingThreeSize;
+        }
+        a {
+          color:@green;
+        }
+      }
       &.active {
-        color:@blue;
-        border-bottom:2px solid yellow;
+        i:first-child {
+          display:inline-block;
+          font-size: @headingTwoSize;
+          line-height: @headingTwoSize;
+          height:32px;
+          overflow: hidden;
+          top:-38px;
+        }
       }
     }
   }
 }
+//Footer and Checkout images
+.credit-cards,
+.verisign {
+  display:inline-block;
+  vertical-align: middle;
+  margin:0 4px;
+}
+.credit-cards {
+  width:178px;
+  height:21px;
+  background: url(/static/demo/img/ui/sprite.png) 0 -49px repeat transparent;
+}
+.verisign {
+  width:100px;
+  height:49px;
+  background: url(/static/demo/img/ui/sprite.png) 0 0 repeat transparent;
+}
 
diff --git a/sites/demo/static/demo/less/page/head_foot.less b/sites/demo/static/demo/less/page/head_foot.less
@@ -52,10 +52,20 @@
       left:0;
     }
   }
+  .credit-cards,
+  .verisign {
+    margin:0;
+  }
+  .credit-cards {
+    margin-top:5px;
+  }
 }
 //Checkout header
 .checkout-page .header-content {
   margin-top:10px;
+  p {
+    margin-bottom:30px;
+  }
 }
 // OSCAR FOOTER UNIQUE STYLES
 // -----------
@@ -113,6 +123,10 @@
 .footer-disclaimer {
   font-size: @fontSizeSmall;
   line-height: @baseLineHeight * 2;
-  text-align: right;
   background: #091624;
+  .clearfix();
+  p {
+    margin:0;
+    text-align: center;
+  }
 }