express_ui 0.1.7 → 0.2.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 6aa4f380be964035ee0c82b302506157877abb3d
-  data.tar.gz: 83807a2e11dfb8869ecdd230178b837f0f4c0954
+  metadata.gz: 38f7fdbd6b91c8b15858ee9cca1a7df85f857c6d
+  data.tar.gz: 9c3f86b2257146e29e9416d47adc34c9ae12bb2c
 SHA512:
-  metadata.gz: b2ff7280ae8d65dc0135e7ec8ee63d56c3f9f2986b0c2240b15e8c3c0f38ed8566e68fac88f9b854963559abfd3eeb0f8683b7ba1b028c017abcd85b473521d2
-  data.tar.gz: a392efcc25ae1c19f4845c085225379ba0698556fc8a30eb73bd482745704ccd566c50fae0dabb4a3cebe5e2c6b7a541ba3f74552d987dfe5ab7e3e21e5cf3b1
+  metadata.gz: cc8489280f5068aa146edfbc03cb0686d14f4a1711e1c1859cbea77de925d460f7d43ecccc378c51b653e781e4027c4a3f1d3e9277798360f49c8c0e40ed12fe
+  data.tar.gz: 3a7cd9e7acfff95c3dccffb4d825709d0669dc348ccd342b4d6049276cd698f228991f1c66bc3e6891a7cabb0d7bde620c277f321aed9d1d75df3e341bf0b21d

data/app/assets/javascripts/express_ui/application.js

@@ -1 +1,47 @@
+//= require jquery
+//= require jquery_ujs
 //= require_tree .
+//= require magnific-popup
+//= require select2
+//= require moment
+//= require fullcalendar
+//= require picker
+//= require picker.date
+//= require forms
+//= require ion.rangeSlider
+//= require picker
+//= require picker.date
+//= require forms
+//= require ion.rangeSlider
+
+$(document).ready(function() {
+  $('.ae-popup-link').magnificPopup();
+  $('.ae-calendar').fullCalendar();
+  $('.ae-select').select2();
+  $('.ae-open-filter').click(function() {
+    $(this).parent().siblings( '.ae-table-filter' ).toggleClass('ae-hidden');
+  	return false;
+  });
+  $('.ae-mega-menu-close').click(function() {
+    $(this).parents( '.ae-table-filter' ).toggleClass('ae-hidden');
+  	return false;
+  });
+  $("#ae-double-slider").ionRangeSlider({
+    hide_min_max: true,
+    keyboard: true,
+    min: 0,
+    max: 5000,
+    from: 1000,
+    to: 4000,
+    type: 'double',
+    step: 1,
+    grid: true
+  });
+  $("#ae-single-slider").ionRangeSlider();
+  $('.ae-datepicker').pickadate({
+    weekdaysShort: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'],
+    showMonthsShort: true,
+    selectYears: true,
+    selectMonths: true
+  });
+});

data/app/assets/javascripts/express_ui/sidebar.js

@@ -0,0 +1,6 @@
+// TODO: Sidebar scripts in mobile that need to be moved to its proper JS folder
+$(document).ready(function() {
+  $(".js-ae-show-left-sidebar").on("click", function() {
+    $(".js-ae-sidebar").toggle();
+  });
+});

data/app/assets/javascripts/express_ui/styleguide.js

@@ -1,16 +1,8 @@
-//= require jquery
-//= require jquery_ujs
 //= require anchorific
 //= require resizable
 
-
 $(function() {
 
-  // TODO: Sidebar scripts in mobile that need to be moved to its proper JS folder
-  $('.js-ae-show-left-sidebar').on('click', function(){
-    $('.js-ae-sidebar').toggle();
-  });
-
   $('.ae-sidebar-right').resizable({
     handles: 'w',
     minWidth: 100,
@@ -26,7 +18,8 @@ $(function() {
     stop: function(event, ui){
       ui.element.css('left', '')
     }
-  })
+  });
+
   $(".js-anchorific-content").anchorific({
     headers: ':header:not(.ae-demo-container :header, h4)'
   });
@@ -48,6 +41,11 @@ $(function() {
       return;
     }
 
+    // TODO: Sidebar scripts in mobile that need to be moved to its proper JS folder
+    if ($(window).width() < 768) {
+      $('.js-ae-sidebar').hide();
+    }
+
     $('html, body').animate({
         scrollTop: $('[id="' + $.attr($selectedLink.closest('a')[0], 'href').substr(1) + '"]').offset().top - $(".ae-header-fixed").height()
     }, 500);
@@ -80,7 +78,8 @@ $(function() {
     $parentContainer.find('.ae-tab.active-tab').removeClass('active-tab')
     $clickedTab.addClass('active-tab')
     $parentContainer.find('.ae-tab-content.active-tab').removeClass('active-tab')
-    $parentContainer.find('#' + tabContent).addClass('active-tab')
+    $parentContainer.find('#' + tabContent).addClass('active-tab');
+    $('.ae-calendar').fullCalendar('render');
   });
 });
 

data/app/assets/stylesheets/express_ui/application.css

@@ -0,0 +1,3 @@
+*= require magnific-popup
+*= require fullcalendar
+*= require select2

data/app/assets/stylesheets/express_ui/atoms/_animations.sass

@@ -22,6 +22,9 @@
   &:hover
     @include easeInOut
 
+.ae-hidden
+  display: none
+
 @keyframes fadeIn
   0%
     opacity: 0

data/app/assets/stylesheets/express_ui/atoms/_buttons.sass

@@ -6,10 +6,17 @@
   cursor: pointer
   text-align: center
 
-input[type="submit"]
-  -webkit-appearance: none !important
+@mixin btn-type($type)
+  background: $type
+  border: 1px solid $type
 
-.ae-btn, input[type="submit"]
+  &.ae-btn-border
+    color: $type !important
+
+  &:active, &:focus
+    @include box-shadow(inset, 2px, 2px, 2px, darken($type, 20%))
+
+.ae-btn
   @include easeInOut
   @include button
   display: inline-block
@@ -30,6 +37,8 @@ input[type="submit"]
     @include box-shadow(inset, 2px, 2px, 2px, darken($secondary-color, 5%))
     outline-color: $primary-color
 
+.ae-btn-block
+  display: block
 
 .ae-btn-default
   background-color: $secondary-color
@@ -40,34 +49,19 @@ input[type="submit"]
     @include box-shadow(inset, 2px, 2px, 2px, darken($secondary-color, 20%))
 
 .ae-btn-primary
-  background-color: $primary-color
-  border: 1px solid $primary-color
+  @include btn-type($primary-color)
   color: #fff !important
 
   *
     color: #fff !important
 
-  &.ae-btn-border
-    color: $primary-color !important
-
-
-  &:active, &:focus
-    @include box-shadow(inset, 2px, 2px, 2px, darken($primary-color, 20%))
-
 .ae-btn-secondary
-  background-color: $secondary-color
-  border: 1px solid $secondary-color
+  @include btn-type($secondary-color)
   color: #fff !important
 
   *
     color: #fff !important
 
-  &.ae-btn-border
-    color: $secondary-color !important
-
-  &:active, &:focus
-    @include box-shadow(inset, 2px, 2px, 2px, darken($secondary-color, 5%))
-
 .ae-btn-success
   background-color: $success
   border: 1px solid $success
@@ -90,26 +84,39 @@ input[type="submit"]
   &:active, &:focus
     @include box-shadow(inset, 2px, 2px, 2px, darken($cancelled, 20%))
 
+.ae-btn-increment
+  cursor: pointer
+  min-width: 26px
+
+.ae-selected
+  @include btn-type($primary-color)
+  color: #fff !important
+
+  *
+    color: #fff !important
 
 .ae-btn-sm
-  padding-top: 0.25em  !important
-  padding-bottom: 0.25em  !important
+  padding:
+    top: rem(8px)
+    bottom: rem(8px)
   @include font-size(16px, 16px)
   max-height: 30px
   line-height: 100%
 
 .ae-btn-md
-  padding-top: 0.45em  !important
-  padding-bottom: 0.45em  !important
+  padding:
+    top: rem(16px)
+    bottom: rem(16px)
   @include font-size(18px, 18px)
-  max-height: 34px
+  max-height: 40px
   line-height: 100%
 
 .ae-btn-lg
-  padding-top: 1em  !important
-  padding-bottom: 1em !important
+  padding:
+    top: rem(22px)
+    bottom: rem(22px)
   @include font-size(20px, 20px)
-  max-height: 40px
+  max-height: 50px
   line-height: 100%
 
 .ae-btn-border

data/app/assets/stylesheets/express_ui/atoms/_headings.sass

@@ -1,17 +1,17 @@
 @mixin h1
-  @include font-size(32px, 24px)
+  @include font-size(32px, 32px)
 
 @mixin h2
-  @include font-size(28px, 20px)
+  @include font-size(28px, 28px)
 
 @mixin h3
-  @include font-size(22px, 18px)
+  @include font-size(24px, 24px)
 
 @mixin h4
-  @include font-size(16px, 16px)
+  @include font-size(20px, 20px)
 
 @mixin h5
-  @include font-size(13px, 13px)
+  @include font-size(16px, 16px)
 
 @mixin h6
   @include font-size(12px, 12px)

data/app/assets/stylesheets/express_ui/atoms/_icons.sass

@@ -1,3 +1,3 @@
 .fa
-  @include font-size(14px, 16px)
+  @include font-size(20px, 20px)
   color: $icon-color

data/app/assets/stylesheets/express_ui/atoms/_typography.sass

@@ -6,6 +6,9 @@
 @mixin header-font
   font-family: 'Lato', sans-serif
 
+@mixin icon-font
+  font-family: FontAwesome
+
 @function rem($size)
   $remSize: $size / 16px
   @return #{$remSize}rem
@@ -14,13 +17,13 @@
   font-size: rem($size)
 
   @include tablet
-    font-size: rem($large_size)
+    font-size: rem($large_size*1.3)
 
   @include desktop
-    font-size: rem($large_size/1.4)
+    font-size: rem($large_size*1.5)
 
 @mixin p
-  @include font-size(18px, 14px)
+  @include font-size(18px, 24px)
   font-weight: normal
 
 .ae-u-text-left

data/app/assets/stylesheets/express_ui/atoms/_variables.sass

@@ -20,6 +20,8 @@ $border-light: #eaeaea
 
 $body-color: #666
 
+$body-background: #fff
+
 $heading-color: #333
 
 $link-color: $primary-color
@@ -48,7 +50,9 @@ $line-height: 14px
 
 $font-size-root: 62.5%
 
-$header-max-height: 3.5em
+$header-height: 55px
+
+$header-max-height: 60px
 
 $container-padding: 0.25em
 // Because all browsers have a default font-size of 16px, setting the font-size to 62.5% on the html element gives it a font-size of 10px (10 / 16 * 100 = 62.5)

data/app/assets/stylesheets/express_ui/molecules/_container.sass

@@ -29,4 +29,27 @@
   .ae-container-table-cell
     @include container-table-cell
 
+.ae-grid
+  float: left
+
+.ae-content
+  @include tablet-max
+    padding-left: 0.5em !important
+    padding-right: 0.5em !important
+  &-container
+    width: 100%
 
+  &-one-half
+    .ae-grid
+      width: (100%/2)
+  &-one-third
+    .ae-grid
+      width: (100%/3)
+  &-one-fourth
+    .ae-grid
+      width: (100%/4)
+
+.ae-content
+  @include tablet-max
+    padding-left: 0.5em !important
+    padding-right: 0.5em !important

data/app/assets/stylesheets/express_ui/molecules/_form_groups.sass

@@ -7,6 +7,9 @@
   @include tablet-max
     top: 34%
 
+  @include desktop
+    top: 30%
+
 .ae-form-horizontal
   @include tablet
     .ae-form-field
@@ -54,13 +57,35 @@
 
   .ae-actions
     width: auto
+    margin: 10px 0 10px 10px
+
+    .ae-btn
+      margin: 0
+
+.ae-form-increment
+  display: flex
+  flex-flow: row nowrap
+  align-items: stretch
+
+  & + &
+    margin-top: 1em
+
+  .ae-form-field
+    position: relative
+
+    .ae-text-field
+      width: 70px
 
   .ae-actions
+    width: auto
     margin: 10px 0 10px 10px
 
     .ae-btn
       margin: 0
 
+      @include tablet-max
+        width: auto
+        display: inline-block
 
 .ae-search-form
   .ae-text-field
@@ -80,7 +105,11 @@
   position: relative
 
   .ae-text-field
-    padding-left: 2em
+    padding-left: 3em
+
+    @include desktop
+      padding-left: 3em
+
 
   & > div
     width: auto

data/app/assets/stylesheets/express_ui/molecules/_forms.sass

@@ -23,6 +23,12 @@ input[type="date"]
 
 .ae-form-field
 
+  .fa
+    @include font-size(28px, 28px)
+
+    @include desktop
+      font-size: 22px
+
   input[type="range"]
     @include box-shadow(0, 0, 0, 0)
 
@@ -75,24 +81,24 @@ input[type="date"]
 
 .ae-input-sm
   @include font-size(16px, 16px)
-  padding: rem(3px)
+  padding: rem(5px)
 
   @include desktop
-    padding: rem(2px)
+    padding: rem(6px)
 
 .ae-input-md
   @include font-size(18px, 18px)
-  padding: rem(12px)
+  padding: rem(14px)
 
   @include desktop
-    padding: rem(5px)
+    padding: rem(12px)
 
 .ae-input-lg
   @include font-size(20px, 20px)
-  padding: rem(16px)
+  padding: rem(20px)
 
   @include desktop
-    padding: rem(7px)
+    padding: rem(18px)
 
 label
   line-height: 1.4
@@ -125,9 +131,10 @@ label
     display: none
   &-label
     border: 1px solid $border-light
-    border-radius: 20px
+    @include border-radius(20px)
     cursor: pointer
     display: block
+    padding: 0
     overflow: hidden
   &-inner
     display: block
@@ -155,7 +162,7 @@ label
   &-button
     background: #FFFFFF
     border: 1px solid $border-dark
-    border-radius: 20px
+    @include border-radius(20px)
     bottom: 0
     display: block
     margin: 5px

data/app/assets/stylesheets/express_ui/molecules/_nav.sass

@@ -30,12 +30,31 @@ nav
     @include button
 
 .ae-nav-main
+  overflow: scroll
+  white-space: nowrap
+  float: none
+
   @include tablet-max
+    background: $gray-background
+    border-top: 1px solid $border-light
+
+  .ae-list-inline .ae-nav-item
+    display: inline-block
     float: none
 
-    .ae-list-inline .ae-nav-item
-      display: inline-block
-      float: none
+  @include tablet
+    text-align: right
+
+  .ae-nav-item
+    float: left
+
+    @include tablet-max
+      border-right: 1px solid $border-light
+      padding: 0.5em
+
+  .ae-nav-item.active
+    @include tablet-max
+      background: $body-background
 
 .ae-breadcrumbs
   .ae-nav-item
@@ -70,7 +89,7 @@ nav
 
 
   [class*="ae-nav-mega-menu-list"]
-    max-height: 140px
+    min-height: 140px
     overflow: scroll
 
   .ae-nav-mega-menu-list-icons
@@ -84,6 +103,11 @@ nav
       padding: 0.5em
       text-align: left
 
+      &-inline
+        a:link
+          display: inline-block !important
+
+
       a:link
         display: block
 
@@ -92,4 +116,5 @@ nav
         vertical-align: middle
         margin-right: 1em
         margin-bottom: 0
+        margin-top: 0
         width: 25px

data/app/assets/stylesheets/express_ui/molecules/_tables.sass

@@ -1,7 +1,6 @@
 table
   width: 100%
   box-shadow: none
-  margin: 1em 0
   border-collapse: collapse
 
   .ae-table-fixed-width
@@ -15,7 +14,7 @@ table
     word-wrap: break-word
     text-align: left
     text-transform: uppercase
-    @include font-size(10px, 12px)
+    @include font-size(20px, 20px)
     vertical-align: top
 
     a:link, a:visited
@@ -65,27 +64,19 @@ table
 
 .ae-table-filter
   background-color: $gray-background
+  animation: fadeIn 0.5s linear
 
-  @include tablet
-    display: flex
-    flex-flow: row
-    flex-wrap: nowrap
-    justify-content: flex-start
-    align-items: stretch
-    align-content: stretch
-
-    *
-      display: flex
-      flex-direction: row
-      flex-wrap: nowrap
-      justify-content: flex-start
-      align-items: center
-      align-content: stretch
+  .select2
+    width: 100% !important
 
   .ae-filter
-    // border-right: 1px solid $border-light
     padding: 0 $container-padding*2
 
+  .ae-filter-heading
+    margin-top: 0
+    margin-bottom: 0
+    padding-top: 0
+
   & + table
     margin-top: 0
     border-top: 1px solid $border-light

data/app/assets/stylesheets/express_ui/organisms/_header.sass

@@ -1,5 +1,6 @@
 header
   background: $gray-background
+  height: $header-height
   max-height: $header-max-height
   @include box-shadow(0, 0, 3px, 0, rgba($border-dark, 0.5))
   @include clearfix
@@ -9,13 +10,16 @@ header
 
   @include tablet-max
     text-align: center
-    height: $header-max-height*2
+    height: $header-max-height
     max-height: 100%
 
   .ae-logo
     float: left
     padding: 0.25em 0.5em
 
+    @include tablet
+      padding: 1em 0.5em
+
     img
       margin: 0
 
@@ -42,7 +46,7 @@ header
 
 
   & + [class*="ae-template-"],   & + [class*="ae-template-master-"]
-    margin-top: ($header-max-height/2.75)
+    margin-top: $header-height
 
     @include tablet-max
       z-index: 99

data/app/assets/stylesheets/express_ui/organisms/_sidebar.sass

@@ -20,10 +20,11 @@
   @include tablet-max
     position: fixed
     left: 10px
-    top: $header-max-height*2.2
+    top: $header-max-height
     right: 10px
     z-index: 99
     margin-right: 0
+    margin-top: 20px
 
 .ae-sidebar-left
   background-color: $primary-color

data/app/assets/stylesheets/express_ui/scripts/_accordion.sass

@@ -0,0 +1,39 @@
+.ae-accordion-trigger
+  background: $primary-color
+  display: block
+  position: relative
+  text-align: left
+  margin-right: 0
+
+  &:not(.collapsed)
+    @include border-radius(3px 3px 0 0 !important)
+
+  &:not(.collapsed):after
+    content: "\f106"
+    @include icon-font
+
+  &.collapsed:after
+    content: "\f107"
+    @include icon-font
+
+  &:after
+    display: block
+    position: absolute
+    right: 16px
+    top: 50%
+    transform: translateY(-50%)
+    font-size: 2em
+
+.ae-accordion-content
+  padding: 0 1em 1em 1em
+  border: 1px solid $border-light
+  border-top: 0
+
+  &.collapsed
+    display: none
+
+  @include tablet
+    margin-bottom: 1em
+
+  @include tablet-max
+    margin-bottom: 0.5em