lato_view 1.1.4 → 1.1.5

data/app/assets/javascripts/lato_view/build/Util.js

@@ -3,12 +3,12 @@ var Util = (function($) {
 
   /*
   * Debounce any function
-  * @params: 
+  * @params:
   * func: function to test.
   * wait: the time interval for the next function execution.
   * immediate: triggers the function on the leading edge, instead of the trailing.
   * @return: a function, that, as long as it continues to be invoked, will not be triggered.
-  */ 
+  */
   var debounce = function(func, wait, immediate) {
     var timeout;
     return function() {
@@ -26,7 +26,7 @@ var Util = (function($) {
 
   /*
   * Check if the value given is a number.
-  * @params: 
+  * @params:
   * value: value to test
   * @return: boolean
   */
@@ -36,7 +36,7 @@ var Util = (function($) {
 
   /*
   * Check if two strings have the same value.
-  * @params: 
+  * @params:
   * firstValue: value to test.
   * secondValue: value to compare to.
   * @return: boolean
@@ -47,7 +47,7 @@ var Util = (function($) {
 
   /*
   * Check if a string is empty
-  * @params: 
+  * @params:
   * value: value to test
   * @return: boolean
   */
@@ -57,7 +57,7 @@ var Util = (function($) {
 
   /*
   * Check if the lenght of a given value respects the limit given.
-  * @params: 
+  * @params:
   * el: element to test
   * limit: limit to give. Ex: max, min, between
   * minValue: minimum value to respect
@@ -80,12 +80,28 @@ var Util = (function($) {
     }
   };
 
+  /*
+  * Goes through each item in the array and ask "Will you work?"
+  * @params:
+  * properties: properties to test
+  * @return: boolean
+  */
+  var getSupportedPropertyName = function(properties) {
+    for (var i = 0; i < properties.length; i++) {
+      if (typeof document.body.style[properties[i]] !== 'undefined') {
+        return properties[i];
+      }
+    }
+    return null;
+  }
+
   return {
     debounce: debounce,
     isNumber: isNumber,
     isEqual: isEqual,
     isEmptyString: isEmptyString,
-    checkLength: checkLength
+    checkLength: checkLength,
+    getSupportedPropertyName: getSupportedPropertyName
   };
-  
-})(jQuery);
+
+})(jQuery);

data/app/assets/javascripts/lato_view/build/Validator.js

@@ -8,7 +8,7 @@ var Validator = (function($) {
   * @return: boolean
   */
   var _isEmail = function(value) {
-    return !/[0-9\-\.\_a-z]+@[0-9\-\.a-z]+\.[a-z]+/.test(value) ? true : false;
+    return /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/.test(value) ? true : false;
   };
 
   /*
@@ -48,28 +48,41 @@ var Validator = (function($) {
   * attribute: data-attribute of form-control
   * @return: boolean
   */
-  var isInputRequired = function(attribute) {
-    if($('.form-control[' + attribute + ']').length) {
+  var isInputRequired = function(inputs) {
+    if (inputs !== null && inputs.length) {
       var passed = false;
-      var $requiredInputs = '';
-
-      var isTextarea = $('.form-control[' + attribute + ']').find('.textarea').length;
-      var $allInputs = $('.form-control[' + attribute + ']').find('.input, .textarea');
-      var $onlyInput = $('.form-control[' + attribute + ']').find('.input');
-
-      var errorMessage = $('.required-hidden-message').text();
+      var results = [];
+      $.each(inputs, function(i, el) {
+        var passed = false;
+        var $requiredInputs = '';
+
+        var isTextarea = $(el).find('.textarea').length;
+        var $allInputs = $(el).find('.input, .textarea');
+        var $onlyInput = $(el).find('.input');
+
+        var errorMessage = $('.required-hidden-message').text();
+        $requiredInputs = isTextarea ? $allInputs : $onlyInput;
+
+        $requiredInputs.each(function(i, el) {
+          if ($(this).val() === '') {
+            passed = false;
+            $(this).parent('.form-control').addClass('form-required');
+            $requiredInputs.next('.input-error-message').text(errorMessage);
+          } else {
+            $(this).parent('.form-control').removeClass('form-required');
+            $requiredInputs.next('.input-error-message').text();
+          }
+        });
 
-      $requiredInputs = isTextarea ? $allInputs : $onlyInput;
+        results.push(passed);
+      });
 
-      $requiredInputs.each(function() {
-        if($(this).val() === '') {
+      $.each(results, function(i, val) {
+        if (!val) {
           passed = false;
-          $(this).parent('.form-control').addClass('form-required');
-          $requiredInputs.next('.input-error-message').text(errorMessage);
+          return false
         } else {
           passed = true;
-          $(this).parent('.form-control').removeClass('form-required');
-          $requiredInputs.next('.input-error-message').text();
         }
       });
 
@@ -114,49 +127,58 @@ var Validator = (function($) {
   * input: input to control
   * @return: undefined
   */
-  var isInputEmail = function(input) {
-    if ($(input).length) {
+  var isInputEmail = function(inputs) {
+
+    if (inputs !== null && inputs.length) {
       var passed = false;
       var results = [];
-      var isSuggestion = $(input).parent('.eac-input-wrap').length;
-      var $suggestionControl = $(input).parent('.eac-input-wrap').parent('.form-control');
-      var $baseControl = $(input).parent('.form-control');
-
-      // Distinguish when we have email suggestion or not
-      var $formControl = isSuggestion ? $suggestionControl : $baseControl;
+      $.each($(inputs), function(i, el) {
+        var isSuggestion = $(el).parent('.eac-input-wrap').length;
+        var $suggestionControl = $(el).parent('.eac-input-wrap').parent('.form-control');
+        var $baseControl = $(el).parent('.form-control');
 
-      var errorMessage = $('.email-hidden-message').text();
+        // Distinguish when we have email suggestion or not
+        var $formControl = isSuggestion ? $suggestionControl : $baseControl;
+        var errorMessage = $('.email-hidden-message').text();
 
-      $(input).each(function () {
-        var $value = $(this).val();
-        passed = _isEmail($value) && !Util.isEmptyString($value);
-        results[results.length] = passed;
-      });
+        var value = $(el).val();
 
-      passed = results.indexOf(false);
+        if (_isEmail(value) && !Util.isEmptyString(value)) {
+          passed = true;
 
-      if(passed === -1) {
+          $formControl.removeClass('form-error');
 
-        $formControl.addClass('form-error');
-
-        // Distinguish when we have email suggestion or not
-        if ($(input).parent('.eac-input-wrap').length) {
-          $(input).parent('.eac-input-wrap').next('.input-error-message').text(errorMessage);
+          // Distinguish when we have email suggestion or not
+          if ($(el).parent('.eac-input-wrap').length) {
+            $(el).parent('.eac-input-wrap').next('.input-error-message').text('');
+          } else {
+            $(el).next('.input-error-message').text('');
+          }
         } else {
-          $(input).next('.input-error-message').text(errorMessage);
+          passed = false;
+          $formControl.addClass('form-error');
+
+          // Distinguish when we have email suggestion or not
+          if ($(el).parent('.eac-input-wrap').length) {
+            $(el).parent('.eac-input-wrap').next('.input-error-message').text(errorMessage);
+          } else {
+            $(el).next('.input-error-message').text(errorMessage);
+          }
         }
-        
-      } else {
 
-        $formControl.removeClass('form-error');
+        results.push(passed);
+      });
 
-        // Distinguish when we have email suggestion or not
-        if ($(input).parent('.eac-input-wrap').length) {
-          $(input).parent('.eac-input-wrap').next('.input-error-message').text('');
+      console.log(results);
+
+      $.each(results, function(i, val) {
+        if (!val) {
+          passed = false;
+          return false
         } else {
-          $(input).next('.input-error-message').text('');
+          passed = true;
         }
-      }
+      });
 
       return passed;
     }
@@ -164,7 +186,7 @@ var Validator = (function($) {
 
   /*
   * Check if two password inputs have the same value.
-  * @params: 
+  * @params:
   * firstInput: first input to test
   * secondInput: second input to test
   * @return: boolean

data/app/assets/stylesheets/lato_view/config/_config.scss

@@ -1,9 +1,9 @@
 // Project config map
 $_settings: (
-  'use-flex-grid'   :     false,
-  'use-opentype'    :     false,
-  'use-font-smooth' :     true,
-  'minor-typo'      :     true
+  'use-flex-grid'   :    false,
+  'use-opentype'    :    false,
+  'use-font-smooth' :    true,
+  'minor-typo'      :    true
 );
 
 // Retrieve data from the map

data/app/assets/stylesheets/lato_view/config/templates/_base-template.scss

@@ -36,6 +36,7 @@ $selection-bg      : $text-color !default;
 // Content block
 $content-block-bg            : $white !default;
 $content-block-shadow        : 0 1px 4px rgba($text-color, 0.25) !default;
+$content-block-shadow        : 0px 11px 20px rgba($text-color, 0.08);
 $content-block-padding       : 20px !default;
 $content-block-margin-bottom : 30px !default;
 $content-block-title-size    : 30px !default;
@@ -54,6 +55,7 @@ $nav-width                     : 85.3% !default;
 $nav-bg                        : $white !default;
 $nav-color                     : $text-color !default;
 $nav-shadow                    : 0 1px 4px rgba($text-color, 0.25) !default;
+$nav-shadow                    : 0px 11px 20px rgba($text-color, 0.04);
 $nav-padding-vertical          : 10px !default;
 $nav-base-padding              : $nav-padding-vertical 0 !default;
 $nav-actions-color             : $ship-cove !default;
@@ -85,6 +87,7 @@ $form-control-border-color    : $form-input-border-color !default;
 $form-control-checked-bg      : $ebony-clay !default;
 $form-control-checked-color   : $white !default;
 $form-autocomplete-color      : $dusty-gray !default;
+$form-control-check-hover     : $robin-blue !default;
 
 // Input file
 $input-file-bg : $ship-cove !default;
@@ -130,6 +133,11 @@ $select-dropdown-active-bg : rgba($form-input-hover-border-color, 0.67) !default
 // Arranger
 $arranger-text-color : darken($ship-cove, 15%) !default;
 
+// Confirmation Popup
+$confirmation-popup-container-bg : transparent !default;
+$confirmation-popup-bg           : $white !default;
+$confirmation-popup-max-width    : 550px !default;
+
 // Dropdown
 $drop-bg                           : $ebony-clay !default;
 $drop-links-bg                     : $ebony-clay !default;
@@ -150,9 +158,23 @@ $flash-shadow     : 0 1px 4px rgba(41, 59, 90, 0.25) !default;
 $pagination-current-bg    : $rhino !default;
 $pagination-current-color : $white !default;
 
+// Step
+$step-paginate-spacing     : 35px !default;
+$step-index-base-color     : $ship-cove !default;
+$step-index-active-color   : $text-color !default;
+$step-index-base-size      : 40px !default;
+$step-index-base-spacing   : 25px !default;
+$step-index-shadow         : 0px 4px 14px rgba($text-color, 0.2) !default;
+$step-index-active-shadow  : 0px 8px 18px rgba($text-color, 0.3) !default;
+
 // Search Bar
 $search-bar-bg           : $white !default;
 $search-bar-shadow       : 0px 2px 6px rgba(black, 0.1) !default;
 $search-bar-focus-shadow : 0px 2px 8px rgba(black, 0.15) !default;
 $search-button-bg        : $robin-blue !default;
 $search-button-color     : $white !default;
+
+// VIEWS
+$login-view-base-bg            :  $catskill-white !default;
+$login-view-first-gradient-bg  :  $catskill-white !default;
+$login-view-second-gradient-bg :  lighten($ship-cove, 22%) !default;

data/app/assets/stylesheets/lato_view/config/templates/_black-template.scss

@@ -10,10 +10,10 @@ $rhino          : #040303;
 $ebony-clay     : #262626;
 $ship-cove      : #040303;
 $robin-blue     : #fff;
-$jungle-green   : #26b75e;
-$scarlet        : #e32908;
-$radical-red    : #ff2f6c;
-$yellow-sea     : #ffae03;
+$jungle-green   : darken(#26b75e, 15%);
+$scarlet        : darken(#e32908, 10%);
+$radical-red    : darken(#ff2f6c, 20%);
+$yellow-sea     : darken(#ffae03, 5%);
 
 // Statuses colors
 $success-color : $jungle-green !default;
@@ -41,7 +41,7 @@ $content-block-margin-bottom : 30px !default;
 $content-block-title-size    : 30px !default;
 
 // Button colors.
-$button-bg    : #00c8e7 !default;
+$button-bg    : lighten($ebony-clay , 20%) !default;
 $button-color : $white !default;
 
 // Button-Group
@@ -57,7 +57,7 @@ $nav-shadow                    : 0 1px 4px rgba($text-color, 0.25) !default;
 $nav-padding-vertical          : 10px !default;
 $nav-base-padding              : $nav-padding-vertical 0 !default;
 $nav-actions-color             : $ship-cove !default;
-$nav-account-img-bg            : $ship-cove !default;
+$nav-account-img-bg            : lighten($ebony-clay, 20%) !default;
 $nav-account-drop-shadow       : $text-color !default;
 $nav-account-drop-border-color : $catskill-white !default;
 $nav-account-drop-left-stripe  : $robin-blue !default;
@@ -85,6 +85,7 @@ $form-control-border-color    : $form-input-border-color !default;
 $form-control-checked-bg      : $ebony-clay !default;
 $form-control-checked-color   : $white !default;
 $form-autocomplete-color      : $dusty-gray !default;
+$form-control-check-hover     : $ebony-clay !default;
 
 // Input file
 $input-file-bg : $ship-cove !default;
@@ -130,6 +131,11 @@ $select-dropdown-active-bg : rgba($form-input-hover-border-color, 0.67) !default
 // Arranger
 $arranger-text-color : darken($ship-cove, 15%) !default;
 
+// Confirmation Popup
+$confirmation-popup-container-bg : transparent !default;
+$confirmation-popup-bg           : $white !default;
+$confirmation-popup-max-width    : 550px !default;
+
 // Dropdown
 $drop-bg                           : $ebony-clay !default;
 $drop-links-bg                     : $ebony-clay !default;
@@ -150,9 +156,23 @@ $flash-shadow     : 0 1px 4px rgba(41, 59, 90, 0.25) !default;
 $pagination-current-bg    : $rhino !default;
 $pagination-current-color : $white !default;
 
+// Step
+$step-paginate-spacing     : 35px !default;
+$step-index-base-color     : $ship-cove !default;
+$step-index-active-color   : $text-color !default;
+$step-index-base-size      : 40px !default;
+$step-index-base-spacing   : 25px !default;
+$step-index-shadow         : 0px 4px 14px rgba($text-color, 0.2) !default;
+$step-index-active-shadow  : 0px 8px 18px rgba($text-color, 0.3) !default;
+
 // Search Bar
 $search-bar-bg           : $white !default;
 $search-bar-shadow       : 0px 2px 6px rgba(black, 0.1) !default;
 $search-bar-focus-shadow : 0px 2px 8px rgba(black, 0.15) !default;
 $search-button-bg        : $robin-blue !default;
 $search-button-color     : $white !default;
+
+// VIEWS
+$login-view-base-bg            :  $ebony-clay !default;
+$login-view-first-gradient-bg  :  lighten($ebony-clay , 15%) !default;
+$login-view-second-gradient-bg :  lighten($ebony-clay , 22%) !default;

data/app/assets/stylesheets/lato_view/config/templates/_feral-template.scss

@@ -0,0 +1,190 @@
+// Base colors
+$black        :  #000000;
+$mine-shaft   :  #333333;
+$white        :  #ffffff;
+
+// Project specific colors
+$catskill-white : #edf3f7;
+$dusty-gray     : #999999;
+$rhino          : #293b5a;
+$ebony-clay     : #292f43;
+$ship-cove      : #7b96c4;
+$robin-blue     : #00c8e7;
+$jungle-green   : #26b75e;
+$scarlet        : #e32908;
+$radical-red    : #ff2f6c;
+$yellow-sea     : #efdc5d;
+
+$woodsmoke       :  #0e1014;
+$miska           :  #ced3db;
+$catskill        :  #ebeef5;
+$cadet-blue      :  #9dafc2;
+$fiord           :  #3d3d67;
+$feral-blue      :  #0a47ba;
+$salmon          :  #ff7f67;
+$havelock        :  #4a90e2;
+$turquoise       :  #50e3c2;
+
+// Statuses colors
+$success-color : $turquoise !default;
+$error-color   : $salmon !default;
+$warning-color : $yellow-sea !default;
+
+// BASE
+
+$body-bg           : $catskill-white !default;
+$base-spacing      : $line-base * $font-size-base !default;
+$text-color        : $fiord !default;
+$text-accent-color : $salmon !default;
+$link-color        : $feral-blue !default;
+$base-padding      : $headings-margin-bottom;
+$selection-color   : $body-bg !default;
+$selection-bg      : $text-color !default;
+
+// MODULES
+
+// Content block
+$content-block-bg            : $white !default;
+$content-block-shadow        : 0 1px 4px rgba($text-color, 0.25) !default;
+$content-block-shadow        : 0px 11px 20px rgba($text-color, 0.08);
+$content-block-padding       : 20px !default;
+$content-block-margin-bottom : 30px !default;
+$content-block-title-size    : 30px !default;
+
+// Button colors.
+$button-bg    : $feral-blue !default;
+$button-color : $white !default;
+
+// Button-Group
+$button-group-color  : $feral-blue !default;
+$button-group-bg     : $white !default;
+$button-group-radius : 30px !default;
+
+// Navbar
+$nav-width                     : 85.3% !default;
+$nav-bg                        : $white !default;
+$nav-color                     : $text-color !default;
+$nav-shadow                    : 0 1px 4px rgba($text-color, 0.25) !default;
+$nav-shadow                    : 0px 11px 20px rgba($text-color, 0.04);
+$nav-padding-vertical          : 10px !default;
+$nav-base-padding              : $nav-padding-vertical 0 !default;
+$nav-actions-color             : $cadet-blue !default;
+$nav-account-img-bg            : $cadet-blue !default;
+$nav-account-drop-shadow       : $text-color !default;
+$nav-account-drop-border-color : $catskill-white !default;
+$nav-account-drop-left-stripe  : $feral-blue !default;
+$nav-account-drop-icon-color   : $cadet-blue !default;
+
+// Sidebar
+$sidebar-width             : 200px !default;
+$sidebar-bg                : $feral-blue !default;
+$sidebar-color             : $white !default;
+$sidebar-inactive-color    : $cadet-blue !default;
+$sidebar-icon-active-color : $white !default;
+
+// Form
+$form-input-border-color       : $feral-blue !default;
+$form-input-hover-border-color : $fiord !default;
+$form-input-padding            : 5px 10px !default;
+$form-control-margin           : 15px !default;
+$text-area-min-height          : 80px !default;
+$label-advise-color            : $cadet-blue !default;
+$form-error-color              : $error-color !default;
+$form-required-color           : $warning-color !default;
+
+// Form controls
+$form-control-border-color    : $form-input-border-color !default;
+$form-control-checked-bg      : $fiord !default;
+$form-control-checked-color   : $white !default;
+$form-autocomplete-color      : $cadet-blue !default;
+$form-control-check-hover     : $havelock !default;
+
+// Input file
+$input-file-bg : $cadet-blue !default;
+
+// Password-reveal submodule
+$psw-reveal-width  : 45px !default;
+$psw-reveal-height : 35px !default;
+$psw-eye-bg        : $form-input-border-color !default;
+$psw-eye-size      : 20px !default;
+$psw-inner-size    : $psw-eye-size / 2 !default;
+$psw-active        : $fiord !default;
+
+// Datepicker - Overrides external
+// $pd-font-family          : $font-stack;
+// $pd-text-color           : $mine-shaft !default;
+// $pd-title-color          : $mine-shaft !default;
+// $pd-title-bg             : $white !default;
+// $pd-picker-bg            : $white !default;
+// $pd-picker-border        : #ccc !default;
+// $pd-picker-border-bottom : #bbb !default;
+// $pd-picker-shadow        : rgba($black, 0.5) !default;
+// $pd-th-color             : $ship-cove !default;
+// $pd-day-color            : $ebony-clay !default;
+// $pd-day-bg               : #f5f5f5 !default;
+// $pd-day-hover-color      : $white !default;
+// $pd-day-hover-bg         : $radical-red !default;
+// $pd-day-today-color      : $robin-blue !default;
+// $pd-day-selected-color   : $white !default;
+// $pd-day-selected-bg      : $robin-blue !default;
+// $pd-day-selected-shadow  : #178fe5 !default;
+// $pd-day-disabled-color   : #999 !default;
+// $pd-week-color           : #999 !default;
+$picker-selected         :  $cadet-blue;
+$picker-date-today       :  $salmon;
+$picker-item-hover-color :  $white;
+
+// Select
+$select-border-color       : $form-input-border-color !default;
+$select-focus-border-color : $form-input-hover-border-color !default;
+$select-dropdown-shadow    : 0 1px 4px rgba($text-color, 0.25) !default;
+$select-dropdown-active-bg : rgba($form-input-hover-border-color, 0.67) !default;
+
+// Arranger
+$arranger-text-color : darken($cadet-blue, 5%) !default;
+
+// Confirmation Popup
+$confirmation-popup-container-bg : transparent !default;
+$confirmation-popup-bg           : $white !default;
+$confirmation-popup-max-width    : 550px !default;
+
+// Dropdown
+$drop-bg                           : $feral-blue !default;
+$drop-links-bg                     : $feral-blue !default;
+$drop-links-hover-color            : $havelock !default;
+$drop-active-voice-color           : $fiord !default;
+$drop-active-voice-underline-color : $feral-blue !default;
+$drop-icon-bg                      : $feral-blue !default;
+
+// Flashes
+$flash-default-bg : $fiord !default;
+$flash-danger-bg  : $error-color !default;
+$flash-success-bg : $success-color !default;
+$flash-info-bg    : $feral-blue !default;
+$flash-warning-bg : $warning-color !default;
+$flash-shadow     : 0 1px 4px rgba(41, 59, 90, 0.25) !default;
+
+// Pagination
+$pagination-current-bg    : $fiord !default;
+$pagination-current-color : $white !default;
+
+// Step
+$step-paginate-spacing     : 35px !default;
+$step-index-base-color     : $cadet-blue !default;
+$step-index-active-color   : $text-color !default;
+$step-index-base-size      : 40px !default;
+$step-index-base-spacing   : 25px !default;
+$step-index-shadow         : 0px 4px 14px rgba($text-color, 0.2) !default;
+$step-index-active-shadow  : 0px 8px 18px rgba($text-color, 0.3) !default;
+
+// Search Bar
+$search-bar-bg           : $white !default;
+$search-bar-shadow       : 0px 2px 6px rgba(black, 0.1) !default;
+$search-bar-focus-shadow : 0px 2px 8px rgba(black, 0.15) !default;
+$search-button-bg        : $feral-blue !default;
+$search-button-color     : $white !default;
+
+// VIEWS
+$login-view-base-bg            :  $catskill !default;
+$login-view-first-gradient-bg  :  $cadet-blue !default;
+$login-view-second-gradient-bg :  lighten($cadet-blue, 22%) !default;