fleetio_spark 0.1.0 → 0.1.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 2f1709f4671237a8d93589f2b4f092d69350bf4f9efd6f78718902280c3ebad7
-  data.tar.gz: bc2a350f41e659d2aee5b6b32fa56b52cc71ebf52fee6ea62d8fb2eac7160249
+  metadata.gz: b6932bdc5acd849bd634509c012c9227894fab54da7ef6923e7ad1cdaa18be69
+  data.tar.gz: 44f7b8c0e6235858fafcd7f90fbaaf4283c05326bd72b34543ba91fb1e162e4d
 SHA512:
-  metadata.gz: bd166d415392bb10e3a17175e5df7fe49ecda85c45275f332de273b7f67c8b0c9746dc0aef5c4d2469cd9aae08331b184470de0eef96badac2b097e15e292578
-  data.tar.gz: 8f29f658e0523a1535f1f1820c3911e94b5b8123257dd3c56f7fe87a148453aa3e60d26fc8fae0827034ed39e86125b94a2bedd13bbb6cd1888fc923f9e3f847
+  metadata.gz: 322407626af4f3da9e61f22931e1ee133a2618de04153293cf6d6213832e524c2193aab51d3684a6db7ea829b0e064897da8986c45a53edf734bc349c7926029
+  data.tar.gz: 15425c5ae57892ee391a31b717e796587e15737205eda3ecd383655fc39eaccb5773f703a7e7f161f85ae37b97748fc4b941daf3fb599b6b7ee74020202346cc

data/app/assets/stylesheets/spark/components/_sidebar.scss

@@ -7,8 +7,13 @@
   top: 0;
   left: 0;
   height: 100%;
+  font-size: $base-size;
+  line-height: $base-line-height;
   @include font-smoothing;
 
+  @include at-least( $width-md ) {
+    z-index: 1050;
+  }
 
   .nav-wrapper {
     position: relative;
@@ -26,11 +31,10 @@
     bottom: 0;
     margin: 0;
     padding: 0 0 ($app-nav-header-height + $pad-lg);
-
   }
 
-  .nav-tree-item-icon { 
-    flex-shrink: 0; 
+  .nav-tree-item-icon {
+    flex-shrink: 0;
     width: 18px;
     height: 18px;
 
@@ -74,7 +78,7 @@
       color: rgba($fl-white, 0.5);
     }
 
-    &.active {
+    &.item-active {
       color: $fl-white;
       background-color: darken($primary-sidebar-bg, 3%);
 
@@ -109,9 +113,7 @@
       }
     }
 
-    .active { color: $fl-white; }
-
-    .new,.active {
+    .item-new,.item-active {
       &:before {
         content: "";
         position: absolute;
@@ -125,10 +127,7 @@
       }
     }
 
-    .new:before {
-      background-color: $fl-yellow-600;
-    }
-    .new {
+    .item-new {
       .nav-tree-item-content:after {
         content: " New";
         font-size: 85%;
@@ -136,10 +135,18 @@
         color: $fl-yellow-600;
         margin-left: $pad-xs;
       }
+
+      &:before {
+        background-color: $fl-yellow-600;
+      }
     }
 
-    .active:before { 
-      background-color: $fl-blue-500; 
+    .item-active { 
+      color: $fl-white;
+
+      &:before {
+        background-color: $fl-blue-500;
+      }
     }
   }
 
@@ -169,13 +176,13 @@
     padding: 0 20px;
     text-decoration: none;
     transition: background-color $duration $timing;
-    background-color: darken($primary-sidebar-bg, 3%);
+    background-color: darken($primary-sidebar-bg, 6%);
     line-height: 1.4;
 
     &:hover,
     &:focus {
       color: $fl-white;
-      background-color: darken($primary-sidebar-bg, 6%);
+      background-color: darken($primary-sidebar-bg, 8%);
 
       .dropdown-icon {
         color: inherit
@@ -195,7 +202,7 @@
     margin-right: auto;
     line-height: 1.5;
     padding-right: $pad-base;
-    
+
     &, * {
       white-space: nowrap;
       overflow: hidden;
@@ -234,7 +241,7 @@
     margin-top: -$pad-sm;
     margin-left: $pad-lg;
     padding: $pad-md $pad-base;
-    
+
     .divider {
       margin: $pad-base;
 
@@ -254,6 +261,14 @@
       height: 40px;
     }
 
+    .nav-group {
+      margin: $pad-base 0;
+
+      .nav-header {
+        padding: $pad-sm $pad-base;
+      }
+    }
+
     > li {
       > a,
       > label {

data/app/assets/stylesheets/spark/components/header/_app-nav-header.scss

@@ -11,11 +11,17 @@
   top: 0;
   right: 0;
   left: 0;
+  font-size: $base-size;
+  line-height: $base-line-height;
 
   @include at-least( $width-sm ) {
     padding: 0 $pad-xl;
   }
 
+  @include at-least( $width-md ) {
+    left: $primary-sidebar-width;
+  }
+
   .sidebar-nav-toggle {
     @include circular-button(32px);
     flex-shrink: 0;
@@ -151,4 +157,28 @@
       }
     }
   }
+
+  .user-dropdown {
+    .user-name {
+      padding: 5px $pad-base 6px;
+    }
+
+    .user-menu-btn {
+      .user-avatar {
+        width: 100%;
+        max-width: none;
+        vertical-align: middle;
+        border-radius: 50%;
+        width: 32px;
+        height: 32px;
+      }
+    }
+
+    .dropdown-menu {
+      .user-avatar {
+        width: 40px;
+        height: 40px;
+      }
+    }
+  }
 }

data/app/assets/stylesheets/spark/core/_layout.scss

@@ -7,22 +7,17 @@
   main {
     min-height: 100vh;
   }
-}
 
-.app-layout {
   @include at-least( $width-md ) {
     margin-left: $primary-sidebar-width;
+  }
+}
 
-    .app-nav-header {
-      left: $primary-sidebar-width;
-    }
-    .sidebar-nav { z-index: 1050; }
-
-    .hide-sidebar {
-      .app-layout { margin-left: 0; }
-      .app-nav-header { left: 0; }
-      .sidebar-nav { z-index: -1; }
-    }
+.hide-sidebar {  
+  @include at-least( $width-md ) {
+    .app-layout { margin-left: 0; }
+    .app-nav-header { left: 0; }
+    .sidebar-nav { z-index: -1; }
   }
 }
 

data/app/assets/stylesheets/spark/core/_text.scss

@@ -1,5 +1,3 @@
 body {
   font-family: $base-font;
-  font-size: $base-size;
-  line-height: $base-line-height;
 }

data/app/helpers/spark/menu_helper.rb

@@ -55,6 +55,7 @@ module Spark
 
       def item( content=nil, url=nil, options=nil, &block )
         content, url, options = parse_item_args( content, url, options, &block)
+        return '' if options.delete('if') == false || options.delete('unless') == true
 
         if url
           content_tag( config[:item_tag], role: 'none', class: config[:base_class] + "-item-wrapper" ) do

data/app/helpers/spark/nav_menu_helper.rb

@@ -44,8 +44,10 @@ module Spark
       def item_tree( name, options={}, &block )
         content, url, options = parse_item_args( "#", options, &block)
 
+        return '' if options.delete('if') == false || options.delete('unless') == true
+
         node = Spark::Helpers.dasherize( name.strip.downcase ).gsub('-','_')
-        active  = !!(options.delete( 'active' ) || content.match(/nav-item-active/))
+        active  = !!(options.delete( 'active' ) || content.match(/item-active/))
 
         options.merge!({
           'role' => 'treeitem',
@@ -54,7 +56,11 @@ module Spark
         })
 
         name, options = set_content( name, options )
-        options = add_class( options, config[:base_class] + "-item-wrapper" )
+
+        classes = [config[:base_class] + "-item-wrapper"]
+        classes.push( 'tree-active' ) if !!( options.delete( 'active' ) || content.match(/item-active/))
+
+        options = add_class( options, classes )
 
         content_tag( config[:item_tag], options ) do
           concat link_to( "#", class: config[:base_class] + '-item' ){
@@ -126,8 +132,8 @@ module Spark
         active = is_active?( options.delete( 'active' ) )
 
         classes = []
-        classes.push( 'new' )    if new
-        classes.push( 'active' ) if active
+        classes.push( 'item-new' )    if new
+        classes.push( 'item-active' ) if active
         options = add_class( options, classes )
 
 
@@ -140,8 +146,7 @@ module Spark
         content = capture( &block )
 
         classes = []
-        classes.push( 'new' )    if is_new?( options.delete( 'new' ) ) || content.match(/nav-item-new/)
-        classes.push( 'active' ) if !!( options.delete( 'active' ) || content.match(/nav-item-active/))
+        classes.push( 'tree-new' )    if is_new?( options.delete( 'new' ) ) || content.match(/item-new/)
 
         options = add_class( options, classes )
 

data/lib/fleetio_spark/version.rb

@@ -1,3 +1,3 @@
 module FleetioSpark
-  VERSION = "0.1.0"
+  VERSION = "0.1.1"
 end

data/public/{spark-0.1.0.css → spark-0.1.1.css}

@@ -33,19 +33,16 @@ svg {
   position: relative; }
 .app-layout main {
   min-height: 100vh; }
-
 @media all and (min-width: 1000px) {
   .app-layout {
-    margin-left: 250px; }
-  .app-layout .app-nav-header {
-    left: 250px; }
-  .app-layout .sidebar-nav {
-    z-index: 1050; }
-  .app-layout .hide-sidebar .app-layout {
+    margin-left: 250px; } }
+
+@media all and (min-width: 1000px) {
+  .hide-sidebar .app-layout {
     margin-left: 0; }
-  .app-layout .hide-sidebar .app-nav-header {
+  .hide-sidebar .app-nav-header {
     left: 0; }
-  .app-layout .hide-sidebar .sidebar-nav {
+  .hide-sidebar .sidebar-nav {
     z-index: -1; } }
 
 .app-container {
@@ -308,9 +305,7 @@ body {
     -webkit-transform: perspective(1px) translate3d(0, 0, 0);
             transform: perspective(1px) translate3d(0, 0, 0); } }
 body {
-  font-family: -apple-system, BlinkMacSystemFont, "Avenir Next", Avenir, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
-  font-size: 14px;
-  line-height: 1.5; }
+  font-family: -apple-system, BlinkMacSystemFont, "Avenir Next", Avenir, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; }
 
 .tick-input-label [type=checkbox], .tick-input-label [type=radio] {
   position: absolute;
@@ -714,8 +709,13 @@ input:checked + .check-switch-panel {
   top: 0;
   left: 0;
   height: 100%;
+  font-size: 14px;
+  line-height: 1.5;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale; }
+@media all and (min-width: 1000px) {
+  .sidebar-nav {
+    z-index: 1050; } }
 .sidebar-nav .nav-wrapper {
   position: relative;
   width: auto;
@@ -772,10 +772,10 @@ input:checked + .check-switch-panel {
   -webkit-transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1);
   transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1);
   color: rgba(255, 255, 255, 0.5); }
-.sidebar-nav .nav-tree-item.active {
+.sidebar-nav .nav-tree-item.item-active {
   color: #FFFFFF;
   background-color: #003d6b; }
-.sidebar-nav .nav-tree-item.active + .nav-tree-group {
+.sidebar-nav .nav-tree-item.item-active + .nav-tree-group {
   background-color: #003d6b; }
 .sidebar-nav .nav-tree-item-content {
   width: 100%;
@@ -794,9 +794,7 @@ input:checked + .check-switch-panel {
 .sidebar-nav .nav-tree-group .nav-tree-item:hover, .sidebar-nav .nav-tree-group .nav-tree-item:focus {
   color: #FFFFFF;
   background-color: transparent; }
-.sidebar-nav .nav-tree-group .active {
-  color: #FFFFFF; }
-.sidebar-nav .nav-tree-group .new:before, .sidebar-nav .nav-tree-group .active:before {
+.sidebar-nav .nav-tree-group .item-new:before, .sidebar-nav .nav-tree-group .item-active:before {
   content: "";
   position: absolute;
   display: block;
@@ -806,15 +804,17 @@ input:checked + .check-switch-panel {
   width: 6px;
   height: 6px;
   border-radius: 50%; }
-.sidebar-nav .nav-tree-group .new:before {
-  background-color: #F2AA2A; }
-.sidebar-nav .nav-tree-group .new .nav-tree-item-content:after {
+.sidebar-nav .nav-tree-group .item-new .nav-tree-item-content:after {
   content: " New";
   font-size: 85%;
   letter-spacing: .02em;
   color: #F2AA2A;
   margin-left: 2px; }
-.sidebar-nav .nav-tree-group .active:before {
+.sidebar-nav .nav-tree-group .item-new:before {
+  background-color: #F2AA2A; }
+.sidebar-nav .nav-tree-group .item-active {
+  color: #FFFFFF; }
+.sidebar-nav .nav-tree-group .item-active:before {
   background-color: #0091E6; }
 .sidebar-nav .triggered .nav-tree-group {
   -webkit-transition-property: max-height, opacity, padding;
@@ -846,11 +846,11 @@ input:checked + .check-switch-panel {
   text-decoration: none;
   -webkit-transition: background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1);
   transition: background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1);
-  background-color: #003d6b;
+  background-color: #00345b;
   line-height: 1.4; }
 .sidebar-nav-header > a:hover, .sidebar-nav-header > a:focus {
   color: #FFFFFF;
-  background-color: #00345b; }
+  background-color: #002f51; }
 .sidebar-nav-header > a:hover .dropdown-icon, .sidebar-nav-header > a:focus .dropdown-icon {
   color: inherit; }
 .sidebar-nav-header .dropdown-icon {
@@ -909,6 +909,10 @@ input:checked + .check-switch-panel {
 .sidebar-nav-header .dropdown-menu .user-avatar {
   width: 40px;
   height: 40px; }
+.sidebar-nav-header .dropdown-menu .nav-group {
+  margin: 8px 0; }
+.sidebar-nav-header .dropdown-menu .nav-group .nav-header {
+  padding: 4px 8px; }
 .sidebar-nav-header .dropdown-menu > li > a, .sidebar-nav-header .dropdown-menu > li > label {
   font-size: 14px;
   border-radius: 3px;
@@ -986,10 +990,15 @@ input:checked + .check-switch-panel {
   z-index: 1040;
   top: 0;
   right: 0;
-  left: 0; }
+  left: 0;
+  font-size: 14px;
+  line-height: 1.5; }
 @media all and (min-width: 600px) {
   .app-nav-header {
     padding: 0 24px; } }
+@media all and (min-width: 1000px) {
+  .app-nav-header {
+    left: 250px; } }
 .app-nav-header .sidebar-nav-toggle {
   display: -webkit-box;
   display: -ms-flexbox;
@@ -1114,6 +1123,18 @@ input:checked + .check-switch-panel {
   color: inherit;
   font-size: 10px;
   margin-right: 2px; }
+.app-nav-actions .user-dropdown .user-name {
+  padding: 5px 8px 6px; }
+.app-nav-actions .user-dropdown .user-menu-btn .user-avatar {
+  width: 100%;
+  max-width: none;
+  vertical-align: middle;
+  border-radius: 50%;
+  width: 32px;
+  height: 32px; }
+.app-nav-actions .user-dropdown .dropdown-menu .user-avatar {
+  width: 40px;
+  height: 40px; }
 
 .app-admin-header {
   display: -webkit-box;

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: fleetio_spark
 version: !ruby/object:Gem::Version
-  version: 0.1.0
+  version: 0.1.1
 platform: ruby
 authors:
 - Brandon Mathis
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2019-01-04 00:00:00.000000000 Z
+date: 2019-01-08 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails
@@ -30,14 +30,14 @@ dependencies:
     requirements:
     - - "~>"
       - !ruby/object:Gem::Version
-        version: 1.1.1
+        version: 1.2.4
   type: :runtime
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
     - - "~>"
       - !ruby/object:Gem::Version
-        version: 1.1.1
+        version: 1.2.4
 - !ruby/object:Gem::Dependency
   name: esvg
   requirement: !ruby/object:Gem::Requirement
@@ -180,10 +180,10 @@ files:
 - lib/fleetio_spark.rb
 - lib/fleetio_spark/helper.rb
 - lib/fleetio_spark/version.rb
-- public/spark-0.1.0.css
-- public/spark-0.1.0.css.gz
-- public/spark-0.1.0.js
-- public/spark-0.1.0.js.gz
+- public/spark-0.1.1.css
+- public/spark-0.1.1.css.gz
+- public/spark-0.1.1.js
+- public/spark-0.1.1.js.gz
 homepage: 
 licenses:
 - MIT