Merge branch 'ecomm-method' of https://github.com/volusion-angular/theme

into ecomm-method
volusion-angular-themes · Jun 11, 2014 · a1cdb1d · a1cdb1d
2 parents d6f9cd5 + b920853
commit a1cdb1d
Show file tree

Hide file tree

Showing 17 changed files with 193 additions and 121 deletions.
diff --git a/Gruntfile.js b/Gruntfile.js
@@ -218,6 +218,7 @@ module.exports = function(grunt) {
           src: [
             '<%= yeoman.dist %>/scripts/{,*/}*.js',
             '<%= yeoman.dist %>/styles/{,*/}*.css',
+            '!<%= yeoman.dist %>/styles/overrides.css',
             '<%= yeoman.dist %>/images/**/*.{png,jpg,jpeg,gif,webp,svg}',
             '<%= yeoman.dist %>/fonts/*'
           ]
@@ -346,7 +347,8 @@ module.exports = function(grunt) {
             'bower_components/**',
             'images/**/*.{gif,jpeg,jpg,png,svg,webp}',
             'fonts/*',
-            'translations/{,*/}*.json'
+            'translations/{,*/}*.json',
+            'styles/overrides.css'
           ]
         }, {
           expand: true,
@@ -369,6 +371,14 @@ module.exports = function(grunt) {
           '!bower_components/**/*.html'
         ],
         dest: '.tmp'
+      },
+      overrides: {
+        expand: true,
+        cwd: '<%= yeoman.app %>',
+        src: [
+          'styles/overrides.css'
+        ],
+        dest: '.tmp/styles'
       }
     },
 
@@ -457,6 +467,7 @@ module.exports = function(grunt) {
       'bower-install',
       'compass:server',
       'copy:scripts',
+      'copy:overrides',
       'copy:components',
       'htmlmin',
       'browserify:test',
@@ -495,6 +506,7 @@ module.exports = function(grunt) {
     'svgmin',
     'concat:generated',
     'copy:scripts',
+    'copy:overrides',
     'copy:components',
     'htmlmin',
     'ngmin',

diff --git a/app/index.html b/app/index.html
@@ -22,6 +22,7 @@
   <!-- endbower -->
   <link rel="stylesheet" href="/bower_components/easyzoom/css/easyzoom.css" />
   <!-- endbuild -->
+  <link rel="stylesheet" data-ng-href="{{ overridesCSS }}">
 </head>
 <body role="document" data-ng-controller="IndexCtrl">
   <!-- Google Tag Manager -->

diff --git a/app/scripts/app.js b/app/scripts/app.js
@@ -5,7 +5,7 @@ var enquire = require('enquire');
 require('./theme');
 
 angular.module('volusion.directives', []);
-angular.module('volusion.filters', []);
+angular.module('volusion.filters', ['volusion.services']);
 angular.module('volusion.services', ['ngCookies', 'ngResource', 'pascalprecht.translate', 'services.config']);
 angular.module('volusion.decorators', ['pascalprecht.translate', 'services.config']);
 angular.module('volusion.controllers', ['ui.router', 'volusion.services']);
@@ -142,7 +142,7 @@ angular.module('volusionApp')
         }
       });
   })
-  .run(function ($templateCache, snapRemote, $rootScope) {
+  .run(function ($templateCache, snapRemote, $rootScope, cacheBustFilter, $window) {
 
     $rootScope.isInDesktopMode = true;
 
@@ -162,6 +162,13 @@ angular.module('volusionApp')
       snapRemote.close();
     });
 
+    $rootScope.$on('$stateChangeError', function(event, toState, toParams, fromState, fromParams, error) {
+      event.preventDefault();
+      if (error.status === 404) {
+        $window.location.replace('/404.html');
+      }
+    });
+
     $templateCache.put('views/i18n.html', require('./views/i18n.html'));
     $templateCache.put('views/home.html', require('./views/home.html'));
     $templateCache.put('views/style-guide.html', require('./views/style-guide.html'));
@@ -174,4 +181,5 @@ angular.module('volusionApp')
     $templateCache.put('views/partials/header.html', require('./views/partials/header.html'));
     $templateCache.put('views/partials/mobile-menu.html', require('./views/partials/mobile-menu.html'));
     $templateCache.put('views/partials/social-sharing.html', require('./views/partials/social-sharing.html'));
+    $rootScope.overridesCSS = cacheBustFilter('/styles/overrides.css');
   });
diff --git a/app/scripts/filters/cacheBust.js b/app/scripts/filters/cacheBust.js
@@ -0,0 +1,18 @@
+'use strict';
+
+function appendTokenToUrl(url, token) {
+  var separator = (url.indexOf('?') > -1) ? '&' : '?';
+  return url + separator + '_=' + token;
+}
+
+angular.module('volusion.filters').filter('cacheBust', [
+  'tokenGenerator',
+  function(tokenGenerator) {
+    return  function(url) {
+      if (!url || !url.trim()) {
+        return url;
+      }
+      return appendTokenToUrl(url, tokenGenerator.getCacheBustingToken()._);
+    };
+  }
+]);
diff --git a/app/styles/components/th/_cart-summary.scss b/app/styles/components/th/_cart-summary.scss
@@ -34,7 +34,6 @@
 @include respond-to(md-and-up) {
     .th-cart-summary {
       position: relative;
-      top: 30px;
       right: 13px;
     }
 }

diff --git a/app/styles/components/th/_helpers.scss b/app/styles/components/th/_helpers.scss
@@ -1,3 +1,10 @@
+%backface-visibility {
+  backface-visibility:hidden;
+  -webkit-backface-visibility:hidden;
+  -moz-backface-visibility:hidden;
+  -ms-backface-visibility:hidden;
+}
+
 %inline-block {
   @include inline-block;
 }

diff --git a/app/styles/components/th/_product.scss b/app/styles/components/th/_product.scss
@@ -49,28 +49,31 @@
   text-transform: uppercase;
   color: map-get($colors, regular-price);
 
-  span {
-    @include inline-block;
-  }
-
   .th-price {
+    @include inline-block;
+    margin-right: 1px;
     font-size: 1.6rem;
     padding: 0 4px 0 0;
     font-weight: bold;
-    vertical-align: middle;
+  }
+
+  .th-reg-price {
+    @include inline-block;
+    white-space: nowrap;
   }
 
   .th-now-price {
     color: map-get($colors, sales-price);
     border-left: 1px solid map-get($colors, border);
     padding-left: 6px;
     margin-left: 3px;
+    white-space: nowrap;
   }
 
   .th-price-text {
+    @include inline-block;
     font-size: 1.2rem;
     font-weight: normal;
-    vertical-align: middle;
   }
 
   .strike {

diff --git a/app/styles/components/th/_search.scss b/app/styles/components/th/_search.scss
@@ -1,110 +1,67 @@
 .th-search {
-  display: none;
-}
-
-.th-search--small__input {
-  text-transform: uppercase;
-  font-family: $font-family-condensed-reg;
-  font-size: 1.4rem;
-  color: map-get($colors, text);
-  float: left;
-  padding: 12px 10px;
-  border: 0;
-  width: 80%;
-  background: map-get($colors, component-bg);
-}
-
-.th-search--small__btn {
-  float: right;
-  border: 0;
-  font-size: 1.5rem;
-  padding-top: 12px;
-  padding-bottom: 11px;
-  padding-right: 4px;
-
-  &:hover {
-      background: none;
-  }
-}
-
-.th-search--small__group {
-  width: 100%;
-  margin-bottom: 0;
-  overflow: hidden;
-}
+  padding: 0 10px 0;
+  margin-top: 15px;
+  min-width: 48px;
+  height: 48px;
+  position: relative;
 
-@include respond-to(md-and-up) {
-
-
-  .th-search {
+  @include respond-to(md-and-up) {
     @include inline-block;
-    padding: 0;
     margin: 0;
+    padding: 0;
+    border: 0;
+    border-bottom: 0;
+    height: 46px;
+  }
 
-    .glyphicon-search {
-      display: inline;
-    }
-
-    .th-search__group {
-      width: 0;
-    }
-
-    .th-search__input {
-      display: none;
-      margin: 0;
-      width: 100%;
+  &__input {
+    cursor: pointer;
+    border-color: map-get($colors, border);
+    border-width: 1px;
+    border-style: solid;
+    background: transparent;
+    padding: 10px;
+    height: 48px;
+    width: 100%;
+
+    @include respond-to(md-and-up) {
+      width: 48px;
+      height: 40px;
+      z-index:3;
+      text-indent: -99px;
+      position: absolute;
+      top: 3px;
+      right: 8px;
+      border-color: transparent;
     }
 
-    .th-search__btn {
-      background: map-get($colors, btnDefaultBg);
-      border-color: map-get($colors, border--lightest);
-      color: map-get($colors, text--light);
-      width: 30px;
-      padding:0;
-      font-size: 1.6rem;
+    &:focus {
 
-      &:hover {
-          background: none;
-      }
-    }
+      outline: none;
 
-    &:hover {
-      .th-search__group {
+      @include respond-to(md-and-up) {
         @include single-transition(all, 200ms, ease);
-        width: 205px;
-      }
-
-      .th-search__input {
-        @include inline-block;
+        border-color: map-get($colors, border);
+        width: 200px;
+        text-indent: 0;
+        z-index: 1;
       }
     }
 
   }
 
-  .th-search--small {
-    display: none;
-  }
-
-}
-
-@include respond-to(lg) {
-
-  .th-search {
-    @include inline-block;
-
-    .th-search__group {
-      height: 31px;
-    }
-
-    .th-search__input {
-      display: none;
-      margin: 0;
+  &__submit {
+    position: absolute;
+    background: transparent;
+    border: 0;
+    top: 14px;
+    right: 19px;
+    z-index:2;
+
+    @include respond-to(md-and-up) {
+      top: 15px;
+      right: 13px;
     }
-
-  }
-
-  .th-search--small {
-    display: none;
   }
 
 }
diff --git a/app/styles/components/vn/_showcase.scss b/app/styles/components/vn/_showcase.scss
@@ -1,6 +1,8 @@
 /* SHOWCASE */
-
 .vn-showcase {
+  @extend %backface-visibility;
+  position: relative;
+  z-index: 2;
   background-color: $body-bg;
   padding-top: 46px;
   padding-bottom: 20px;

diff --git a/app/styles/core/_forms.scss b/app/styles/core/_forms.scss
@@ -1 +1,5 @@
 @import "bootstrap/forms";
+
+.input-group-btn:first-child > .btn, .input-group-btn:first-child > .btn-group {
+  border-right: 0;
+}
diff --git a/app/styles/overrides.css b/app/styles/overrides.css
diff --git a/app/styles/style-guide/_theme-vars.scss b/app/styles/style-guide/_theme-vars.scss
@@ -107,8 +107,8 @@ $line-height-large:         1.33 !default;
 $line-height-small:         1.5 !default;
 
 $border-radius-base:        0 !default;
-$border-radius-large:       3px !default;
-$border-radius-small:       3px !default;
+$border-radius-large:       0 !default;
+$border-radius-small:       0 !default;
 
 //** Global color for active items (e.g., navs or dropdowns).
 $component-active-color:    map-get($colors, componentActiveColor) !default;

diff --git a/app/views/partials/header.html b/app/views/partials/header.html
@@ -37,16 +37,6 @@
       <div class="col-md-7 hidden-xs hidden-sm">
         <div class="collapse navbar-collapse " id="th-main-menu" data-ng-class="!navCollapsed && 'in'" data-ng-click="navCollapsed=true">
 
-          <!-- Search -->
-          <div class="th-search--small">
-            <form class="navbar-form" role="search">
-              <div class="form-group th-search--small__group">
-                <input type="text" class="th-search--small__input" placeholder="Search">
-                <button type="submit" class="th-btn-submit btn btn-default th-search--small__btn"><span class="glyphicon glyphicon-search"></span></button>
-              </div>
-            </form>
-          </div>
-
           <!-- Categories -->
           <ul class="nav navbar-nav">
             <li class="dropdown" data-ng-repeat="category in categories">
@@ -61,12 +51,14 @@
 
       <div class="col-xs-3 col-md-3">
         <div class="th-cart-summary pull-right">
-          <form class="navbar-form th-search hidden-xs hidden-sm" role="search">
-            <div class="form-group th-search__group">
-              <input type="text" class="form-control th-search__input" placeholder="Search">
-            </div>
-            <button type="submit" class="btn btn-default th-search__btn"><span class="glyphicon glyphicon-search"></span></button>
-          </form>
+          <div class="th-search hidden-xs hidden-sm">
+              <form class="th-search__form">
+                  <input type="text" class="th-search__input" placeholder="Search...">
+                  <button type="submit" class="th-search__submit">
+                      <span class="glyphicon glyphicon-search th-search__icon"></span>
+                  </button>
+              </form>
+          </div>
           <span class="th-my-cart">
             <a data-legacy-link="{{viewCart()}}" class="th-my-cart__link">
               <span class="th-my-cart__text" data-translate="index.myCart">My Bag</span>