kiso_themes 1.0.2

data/lib/generators/kiso_themes/templates/rails6/kiso_themes/parallax.js

@@ -0,0 +1,14 @@
+//= require vendor/parallax/parallax
+
+(function() {
+
+  function initParallax() {
+    $('[data-parallax="scroll"]').parallax();
+  }
+
+  KisoThemes.hookOnPageLoad( function() {
+    KisoThemes.jsLibIsActive('parallax') && initParallax.call(this)
+  })
+
+})()
+

data/lib/generators/kiso_themes/templates/rails6/kiso_themes/popper.js

@@ -0,0 +1 @@
+//= require vendor/popper/popper

data/lib/generators/kiso_themes/templates/rails6/kiso_themes/prettify.js

@@ -0,0 +1,12 @@
+//= require vendor/prettify/prettify
+
+(function() {
+  function initPrettify() {
+    PR.prettyPrint()
+  }
+
+  KisoThemes.hookOnPageLoad( function() {
+    KisoThemes.jsLibIsActive('prettify') && initPrettify.call(this)
+  })
+})()
+

data/lib/generators/kiso_themes/templates/rails6/kiso_themes/prism.js

@@ -0,0 +1,10 @@
+//= require vendor/prism/prism
+
+(function() {
+  function initPrism() {
+  }
+
+  KisoThemes.hookOnPageLoad( function() {
+    KisoThemes.jsLibIsActive('prism') && initPrism.call(this)
+  })
+})()

data/lib/generators/kiso_themes/templates/rails6/kiso_themes/sheets.js

@@ -0,0 +1,98 @@
+
+(function() {
+  function initFormSheets() {
+    // This is the fix for when Webkit decides to autofill a field,
+    // and it causes the label being used as a placeholder to be seen underneath
+    // the autofilled text.
+    var attemptCount = 0;
+    var intervalId = window.setInterval(function(){
+      try {
+        $('.form-sheet').find('input:-webkit-autofill').each(function(){
+          hideLabel(this);
+          attemptCount++;
+
+          if(attemptCount > 3) {
+            clearInterval(intervalId);
+          }
+        });
+      } catch( e ) { /* Do Nothing */ }
+    }, 300);
+
+    // Use label as placeholder in sheet forms, as placeholder can't be styled fully in most browsers.
+
+    $(".form-sheet").find("input, textarea")
+
+    .bind("keydown.formsheet", function(e) {
+      checkForChange(e)
+    })
+
+    .change(function() {
+      if (this.value == "") {
+        showLabel(this)
+      } else {
+        hideLabel(this)
+      }
+    })
+
+    .focus(function() {
+      findLabel(this).addClass("focused")
+    })
+
+    .blur(function() {
+      if (this.value == "") {
+        showLabel(this)
+      } else {
+        hideLabel(this)
+      }
+
+      findLabel(this).removeClass("focused")
+    })
+
+    // Ensure inputs with some values on load have their label hidden.
+    .each(function() {
+      $(this).triggerHandler("blur")
+    })
+
+    // Apply .focused class to inputs already focused on page load.
+    .filter(":focus")
+    .each(function() {
+      findLabel(this).addClass("focused")
+    })
+    .end()
+
+    function checkForChange(e) {
+      if(	e.keyCode == 9  || // Skip Tab
+         e.keyCode == 16 || // Skip Shift
+           e.keyCode == 17 || // Skip Control
+             e.keyCode == 18 || // Skip Option
+               e.keyCode == 91 || // Skip LCommand
+                 e.keyCode == 93    // Skip RCommand
+        ) return;
+
+      hideLabel(e.target)
+    }
+
+    function hideLabel(input) {
+      findLabel(input).hide()
+      $(input).unbind("keydown.formsheet")
+    }
+
+    function showLabel(input) {
+      findLabel(input).show()
+      $(input).bind("keydown.form-sheet", function(e) {
+        checkForChange(e)
+      })
+    }
+
+    function findLabel(input) {
+      return $(input).parents(".form-group").find("label.form-label")
+    }
+  }
+
+  KisoThemes.hookOnPageLoad( function() {
+    KisoThemes.jsLibIsActive('form-sheets') && initFormSheets.call(this)
+  })
+
+
+})()
+

data/lib/generators/kiso_themes/templates/rails6/kiso_themes/sidenav.js

@@ -0,0 +1,77 @@
+(function (){
+
+  function getSideNavHeight() {
+    var hasSideNavHeader = $('.navbar-header').length > 0
+    return hasSideNavHeader ? $('.nav-side-menu').outerHeight() - $('.navbar-header').outerHeight() : $('.nav-side-menu').outerHeight()
+  }
+
+  function initSidenav() {
+    var width = document.body.clientWidth;
+    var sideNavTrackColor = KisoThemes.getRootCssVariable('--sidenav-track-color');
+
+    var sideNavContainer = $('.nav-side-container')
+
+    if(!sideNavContainer.length) {
+      return
+    }
+
+    sideNavContainer = $(sideNavContainer[0]);
+
+    $('.SideNavToggle').on('click', function() {
+      $('body').toggleClass(
+        'show-sidebar'
+      )
+    })
+
+    if (!Modernizr.touch && width > 992) {
+      sideNavContainer.slimScroll({
+        height: getSideNavHeight(),
+        color: sideNavTrackColor,
+        size: '4px',
+        opacity: 0.9,
+        wheelStep: 15,
+        distance: '0',
+        railVisible: false,
+        railOpacity: 1
+      });
+
+      sideNavContainer.mouseover();
+    } else {
+      sideNavContainer.slimScroll({ destroy: 'true' });
+
+      sideNavContainer.mouseover();
+    }
+
+    $(window).on('resize', KisoThemes.debounce(function() {
+      if (Modernizr.touch) return;
+
+      width = document.body.clientWidth;
+
+      if (width < 992) {
+        sideNavContainer.slimScroll({ destroy: 'true' });
+        sideNavContainer.height('auto')
+
+        sideNavContainer.mouseover();
+      } else {
+        sideNavContainer.slimScroll({ destroy: 'true' });
+        sideNavContainer.slimScroll({
+          height: getSideNavHeight(),
+          color: sideNavTrackColor,
+          size: '4px',
+          opacity: 0.9,
+          wheelStep: 15,
+          distance: '0',
+          railVisible: false,
+          railOpacity: 1
+        });
+
+        sideNavContainer.mouseover();
+      }
+    }, 250));
+  }
+
+  KisoThemes.hookOnPageLoad( function() {
+    KisoThemes.jsLibIsActive('sidenav') && initSidenav.call(this)
+  })
+})()
+

data/lib/generators/kiso_themes/templates/rails6/kiso_themes/slimscroll.js

@@ -0,0 +1 @@
+//= require vendor/slimscroll/slimscroll

data/lib/generators/kiso_themes/templates/rails6/kiso_themes/sparklines.js

@@ -0,0 +1 @@
+//= require vendor/sparklines/jquery.sparkline

data/lib/generators/kiso_themes/templates/views/analytics/analytics_dashboard_1.html.erb

@@ -0,0 +1,55 @@
+<%= content_for :js_libs, "modernizr demo-dashboard chartjs" %>
+
+<div class="container-fluid">
+  <div class="row">
+    <div class="col-xs-12 col-sm-12 col-md-9 col-lg-9">
+      <div class="row">
+      <% metric_names.each do |metric| %>
+        <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6">
+          <div class="card card-metric card-full-bleed inspectable">
+            <!-- component-title: Metric Card -->
+            <div class="card-body">
+              <canvas class='metric-graph metric-random-graph'></canvas>
+              <div class="metric-header">
+                <h6><%= metric[:name] %></h6>
+                <div class="metric-value"><%= random_value metric[:type] %></div>
+              </div>
+              <div class="metric-details">
+                <span>
+                  <% direction = increase_or_decrease %>
+                  <i class="fa <%=increase_or_decrease_chevron direction %> <%= direction == :increase ? 'text-success' : 'text-danger' %>"></i> <%= random_percent %> SINCE 30 Days Ago
+                </span>
+              </div>
+            </div>
+          </div>
+        </div>
+        <% end %>
+      </div>
+    </div>
+    <div class="col-xs-12 col-sm-12 col-md-3 col-lg-3">
+      <div class="card card-default inspectable">
+        <!-- component-title: Timeline -->
+        <div class="card-header">
+          <h6>Sales Activity</h6>
+        </div>
+        <div class="card-body">
+          <ul class="left-timeline">
+              <% types = [ { klass: 'refund', css_class: 'badge badge-danger'},  { klass: 'purchase', css_class: 'badge badge-success'}, { klass: 'cancellation', css_class: 'badge badge-light'}] %>
+              <% (1..10).each do |index|%>
+                <li class="timeline-item">
+                  <% instance = types[Random.rand(types.length)] %>
+                  <time class='<%= instance[:css_class]%>'>
+                    <strong>$<%=Random.rand(120) %></strong>
+                  </time>
+                  <div class="activity-text">
+                    <strong>Internet Genie</strong>
+                    <small class="text-muted"><%=instance[:klass].upcase %> - <%=time_ago_in_words( DateTime.now-(index.minutes) ) %></small>
+                  </header>
+                </li>
+              <% end %>
+          </ul>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

data/lib/generators/kiso_themes/templates/views/analytics/analytics_dashboard_1.html.haml

@@ -0,0 +1,36 @@
+= content_for :js_libs, "modernizr demo-dashboard chartjs"
+.container-fluid
+  .row
+    .col-xs-12.col-sm-12.col-md-9.col-lg-9
+      .row
+        - metric_names.each do |metric|
+          .col-xs-12.col-sm-12.col-md-6.col-lg-6
+            .card.card-metric.card-full-bleed
+              .card-body
+                %canvas.metric-graph.metric-random-graph
+                .metric-header
+                  %h6= metric[:name]
+                  .metric-value= random_value metric[:type]
+                .metric-details
+                  %span
+                    - direction = increase_or_decrease
+                    %i{class: "fa #{increase_or_decrease_chevron direction} #{direction == :increase ? 'text-success' : 'text-danger'}"}
+                    = random_percent
+                    SINCE 30 Days Ago
+    .col-xs-12.col-sm-12.col-md-3.col-lg-3
+      .card.card-default
+        %h3.card-header Sales Activity
+        .card-body
+          %ul.left-timeline
+            - types = [ { klass: 'refund', css_class: 'badge badge-danger'},  { klass: 'purchase', css_class: 'badge badge-success'}, { klass: 'cancellation', css_class: 'badge badge-light'}]
+            - (1..10).each do |index|
+              %li.timeline-item
+                - instance = types[Random.rand(types.length)]
+                %time{class: "#{instance[:css_class]}"}
+                  %strong
+                    $#{Random.rand(120)}
+                .activity-text
+                  %strong Internet Genie
+                  %small.text-muted
+                    = instance[:klass].upcase
+                    \- #{time_ago_in_words( DateTime.now-(index.minutes) )}

data/lib/generators/kiso_themes/templates/views/analytics/analytics_dashboard_1.html.slim

@@ -0,0 +1,36 @@
+= content_for :js_libs, "modernizr demo-dashboard chartjs"
+.container-fluid
+  .row
+    .col-xs-12.col-sm-12.col-md-9.col-lg-9
+      .row
+        - metric_names.each do |metric|
+          .col-xs-12.col-sm-12.col-md-6.col-lg-6
+            .card.card-metric.card-full-bleed
+              .card-body
+                canvas.metric-graph.metric-random-graph
+                .metric-header
+                  h6= metric[:name]
+                  .metric-value= random_value metric[:type]
+                .metric-details
+                  span
+                    - direction = increase_or_decrease
+                    i class: "fa #{increase_or_decrease_chevron direction} #{direction == :increase ? 'text-success' : 'text-danger'}" 
+                    = random_percent
+                    | SINCE 30 Days Ago
+    .col-xs-12.col-sm-12.col-md-3.col-lg-3
+      .card.card-default
+        h3.card-header Sales Activity
+        .card-body
+          ul.left-timeline
+            - types = [ { klass: 'refund', css_class: 'badge badge-danger'},  { klass: 'purchase', css_class: 'badge badge-success'}, { klass: 'cancellation', css_class: 'badge badge-light'}]
+            - (1..10).each do |index|
+              li.timeline-item
+                - instance = types[Random.rand(types.length)]
+                time class: "#{instance[:css_class]}" 
+                  strong
+                    | $#{Random.rand(120)}
+                .activity-text
+                  strong Internet Genie
+                  small.text-muted
+                    = instance[:klass].upcase
+                    | \- #{time_ago_in_words( DateTime.now-(index.minutes) )}

data/lib/generators/kiso_themes/templates/views/analytics/analytics_detail_1.html.erb

@@ -0,0 +1,52 @@
+<%= content_for :js_libs, "modernizr demo-dashboard chartjs" %>
+
+<div class="container-fluid">
+  <div class="card card-metric card-metric-detail inspectable">
+    <!-- component-title: Metric Detail Card -->
+    <div class="card-header">
+      <h3>BOUNCE RATE</h3>
+      <div class="current-value flex-column flex-md-row">
+        <h2>32%</h2>
+        <p><i class="fa fa-chevron-down text-danger"></i> 10%</p>
+      </div>
+    </div>
+    <div class="card-body">
+      <div class="metric-detail-graph">
+        <canvas class='metric-random-graph detail-graph'></canvas>
+      </div>
+      <div class="metric-footer container-fluid">
+        <div class="row">
+          <div class="value col-12 col-md-3 pb-4 pb-md-0">
+            <h4>
+              12%
+              <small><i class="fa fa-chevron-down text-danger"></i> 1%</small>
+            </h4>
+            <h6 class="text-muted">3 MONTHS AGO</h6>
+          </div>
+          <div class="value col-12 col-md-3 pb-4 pb-md-0">
+            <h4>
+              45%
+              <small><i class="fa fa-chevron-up text-success"></i> 18%</small>
+            </h4>
+            <h6 class="text-muted">6 MONTHS AGO</h6>
+          </div>
+          <div class="value col-12 col-md-3 pb-4 pb-md-0">
+            <h4>
+              50%
+              <small><i class="fa fa-chevron-down text-danger"></i> 12%</small>
+            </h4>
+            <h6 class="text-muted">9 MONTHS AGO</h6>
+          </div>
+          <div class="value col-12 col-md-3 pb-4 pb-md-0">
+            <h4>
+              68%
+              <small><i class="fa fa-chevron-up text-success"></i> 20%</small>
+            </h4>
+            <h6 class="text-muted">12 MONTHS AGO</h6>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+

data/lib/generators/kiso_themes/templates/views/analytics/analytics_detail_1.html.haml

@@ -0,0 +1,44 @@
+= content_for :js_libs, "modernizr demo-dashboard chartjs"
+.container-fluid
+  .card.card-metric.card-metric-detail.inspectable
+    / component-title: Metric Detail Card
+    .card-header
+      %h3 BOUNCE RATE
+      .current-value.flex-column.flex-md-row
+        %h2 32%
+        %p
+          %i.fa.fa-chevron-down.text-danger
+          10%
+    .card-body
+      .metric-detail-graph
+        %canvas.metric-random-graph.detail-graph
+      .metric-footer.container-fluid
+        .row
+          .value.col-12.col-md-3.pb-4.pb-md-0
+            %h4
+              12%
+              %small
+                %i.fa.fa-chevron-down.text-danger
+                1%
+            %h6.text-muted 3 MONTHS AGO
+          .value.col-12.col-md-3.pb-4.pb-md-0
+            %h4
+              45%
+              %small
+                %i.fa.fa-chevron-up.text-success
+                18%
+            %h6.text-muted 6 MONTHS AGO
+          .value.col-12.col-md-3.pb-4.pb-md-0
+            %h4
+              50%
+              %small
+                %i.fa.fa-chevron-down.text-danger
+                12%
+            %h6.text-muted 9 MONTHS AGO
+          .value.col-12.col-md-3.pb-4.pb-md-0
+            %h4
+              68%
+              %small
+                %i.fa.fa-chevron-up.text-success
+                20%
+            %h6.text-muted 12 MONTHS AGO

data/lib/generators/kiso_themes/templates/views/analytics/analytics_detail_1.html.slim

@@ -0,0 +1,44 @@
+= content_for :js_libs, "modernizr demo-dashboard chartjs"
+.container-fluid
+  .card.card-metric.card-metric-detail.inspectable
+    /! component-title: Metric Detail Card
+    .card-header
+      h3 BOUNCE RATE
+      .current-value.flex-column.flex-md-row
+        h2 32%
+        p
+          i.fa.fa-chevron-down.text-danger
+          | 10%
+    .card-body
+      .metric-detail-graph
+        canvas.metric-random-graph.detail-graph
+      .metric-footer.container-fluid
+        .row
+          .value.col-12.col-md-3.pb-4.pb-md-0
+            h4
+              | 12%
+              small
+                i.fa.fa-chevron-down.text-danger
+                | 1%
+            h6.text-muted 3 MONTHS AGO
+          .value.col-12.col-md-3.pb-4.pb-md-0
+            h4
+              | 45%
+              small
+                i.fa.fa-chevron-up.text-success
+                | 18%
+            h6.text-muted 6 MONTHS AGO
+          .value.col-12.col-md-3.pb-4.pb-md-0
+            h4
+              | 50%
+              small
+                i.fa.fa-chevron-down.text-danger
+                | 12%
+            h6.text-muted 9 MONTHS AGO
+          .value.col-12.col-md-3.pb-4.pb-md-0
+            h4
+              | 68%
+              small
+                i.fa.fa-chevron-up.text-success
+                | 20%
+            h6.text-muted 12 MONTHS AGO

data/lib/generators/kiso_themes/templates/views/app_pages/user_account/_user_account/_avatar_upload.html.erb

@@ -0,0 +1,15 @@
+
+  <div class="fileinput fileinput-avatar fileinput-new d-flex flex-column align-items-center" data-provides="fileinput" style="height: 180px; width: 200px">
+    <div class="fileinput-new thumbnail" style="width: 200px; height: 150px;">
+      <%= random_avatar 128, 'rounded-circle shadow' %>
+    </div>
+    <div class="fileinput-preview fileinput-exists avatar rounded-circle"></div>
+    <div class="avatar-controls">
+      <span class="btn btn-sm btn-dark btn-link btn-file">
+        <span class="fileinput-new"><%= theme_icon_tag "upload" %></span>
+        <span class="fileinput-exists"><%= theme_icon_tag "upload" %></span>
+        <input type="file" name="...">
+      </span>
+      <a href="#" class="btn btn-dark btn-sm btn-link fileinput-exists" data-dismiss="fileinput"><%= theme_icon_tag "close" %></a>
+    </div>
+  </div>

data/lib/generators/kiso_themes/templates/views/app_pages/user_account/_user_account/_avatar_upload.html.haml

@@ -0,0 +1,10 @@
+.fileinput.fileinput-avatar.fileinput-new.d-flex.flex-column.align-items-center{"data-provides" => "fileinput", style: "height: 180px; width: 200px"}
+  .fileinput-new.thumbnail{style: "width: 200px; height: 150px;"}
+    = random_avatar 128, 'rounded-circle shadow'
+  .fileinput-preview.fileinput-exists.avatar.rounded-circle
+  .avatar-controls
+    %span.btn.btn-sm.btn-dark.btn-link.btn-file
+      %span.fileinput-new= theme_icon_tag "upload"
+      %span.fileinput-exists= theme_icon_tag "upload"
+      %input{name: "...", type: "file"}/
+    %a.btn.btn-dark.btn-sm.btn-link.fileinput-exists{"data-dismiss" => "fileinput", href: "#"}= theme_icon_tag "close"

data/lib/generators/kiso_themes/templates/views/app_pages/user_account/_user_account/_avatar_upload.html.slim

@@ -0,0 +1,10 @@
+.fileinput.fileinput-avatar.fileinput-new.d-flex.flex-column.align-items-center data-provides="fileinput", style: "height: 180px; width: 200px" 
+  .fileinput-new.thumbnail style: "width: 200px; height: 150px;" 
+    = random_avatar 128, 'rounded-circle shadow'
+  .fileinput-preview.fileinput-exists.avatar.rounded-circle
+  .avatar-controls
+    span.btn.btn-sm.btn-dark.btn-link.btn-file
+      span.fileinput-new= theme_icon_tag "upload"
+      span.fileinput-exists= theme_icon_tag "upload"
+      input name: "...", type: "file" /
+    a.btn.btn-dark.btn-sm.btn-link.fileinput-exists data-dismiss="fileinput", href: "#" = theme_icon_tag "close"

data/lib/generators/kiso_themes/templates/views/app_pages/user_account/_user_account/_billing.html.erb

@@ -0,0 +1,48 @@
+<h5>BILLING DETAILS</h5>
+<div class="d-flex align-items-center mb-4">
+  <img src="<%= asset_path('kiso_themes/creditcards/visa.png') %>" />
+  <p class="m-0 ml-3"><strong>Visa</strong> card ending in 1234.</p>
+  <button class="btn btn-outline-primary ml-auto">Update Card</button>
+</div>
+<table class="table table-responsive-sm">
+  <thead>
+    <th>Invoice Period</th>
+    <th>Amount</th>
+    <th></th>
+  </thead>
+  <tbody>
+  <tr>
+    <td>
+      <a href="javascript:">January 2017</a>
+    </td>
+    <td>
+      $9.00 USD
+    </td>
+    <td class="text-right">
+      <a href="#">Download</a>
+    </td>
+  </tr>
+  <tr>
+    <td>
+      <a href="javascript:">February 2017</a>
+    </td>
+    <td>
+      $9.00 USD
+    </td>
+    <td class="text-right">
+      <a href="javascript:">Download</a>
+    </td>
+  </tr>
+  <tr>
+    <td>
+      <a href="javascript:">March 2017</a>
+    </td>
+    <td>
+      $9.00 USD
+    </td>
+    <td class="text-right">
+      <a href="javascript:">Download</a>
+    </td>
+  </tr>
+  </tbody>
+</table>

data/lib/generators/kiso_themes/templates/views/app_pages/user_account/_user_account/_billing.html.haml

@@ -0,0 +1,34 @@
+%h5 BILLING DETAILS
+.d-flex.align-items-center.mb-4
+  %img{src: "#{asset_path('kiso_themes/creditcards/visa.png')}"}/
+  %p.m-0.ml-3
+    %strong Visa
+    card ending in 1234.
+  %button.btn.btn-outline-primary.ml-auto Update Card
+%table.table.table-responsive-sm
+  %thead
+    %th Invoice Period
+    %th Amount
+    %th
+  %tbody
+    %tr
+      %td
+        %a{href: "javascript:"} January 2017
+      %td
+        $9.00 USD
+      %td.text-right
+        %a{href: "#"} Download
+    %tr
+      %td
+        %a{href: "javascript:"} February 2017
+      %td
+        $9.00 USD
+      %td.text-right
+        %a{href: "javascript:"} Download
+    %tr
+      %td
+        %a{href: "javascript:"} March 2017
+      %td
+        $9.00 USD
+      %td.text-right
+        %a{href: "javascript:"} Download

data/lib/generators/kiso_themes/templates/views/app_pages/user_account/_user_account/_billing.html.slim

@@ -0,0 +1,34 @@
+h5 BILLING DETAILS
+.d-flex.align-items-center.mb-4
+  img src: "#{asset_path('kiso_themes/creditcards/visa.png')}" /
+  p.m-0.ml-3
+    strong Visa
+    | card ending in 1234.
+  button.btn.btn-outline-primary.ml-auto Update Card
+table.table.table-responsive-sm
+  thead
+    th Invoice Period
+    th Amount
+    th
+  tbody
+    tr
+      td
+        a href: "javascript:"  January 2017
+      td
+        | $9.00 USD
+      td.text-right
+        a href: "#"  Download
+    tr
+      td
+        a href: "javascript:"  February 2017
+      td
+        | $9.00 USD
+      td.text-right
+        a href: "javascript:"  Download
+    tr
+      td
+        a href: "javascript:"  March 2017
+      td
+        | $9.00 USD
+      td.text-right
+        a href: "javascript:"  Download