pagination, charts, avatars docs

js/app/charts.js

@@ -41,48 +41,89 @@
 
 
 /*
-Apexcharts default configuration
+charts default configuration
  */
 if (window.Apex) {
-  Apex.grid = {
-    padding: {
-      right: 0,
-      left: 0,
-      bottom: 0,
-      top: 0
-    }
-  };
 
-  Apex.dataLabels = {
+  window.Apex = {
-    enabled: false
+    grid: {
-  };
-
-  Apex.plotOptions = {
-    pie: {
-      expandOnClick: false,
-    },
-  };
-
-  Apex.chart = {
-    toolbar: {
       show: false,
+      padding: {
+        right: 0,
+        left: 0,
+        bottom: 0,
+        top: 0
+      }
     },
-    animations: {
+
-      enabled: false,
+    dataLabels: {
+      enabled: false
+    },
+
+    plotOptions: {
+      pie: {
+        expandOnClick: false,
+      },
+    },
+
+    chart: {
+      toolbar: {
+        show: false,
+      },
+      zoom: {
+        enabled: false
+      },
+      animations: {
+        enabled: false,
+      }
+    },
+
+    stroke: {
+      width: 2,
+      curve: 'smooth',
+    },
+
+    fill: {
+      type: 'solid',
+      opacity: 1
+    },
+
+    markers: {
+      strokeWidth: 1
+    },
+
+    legend: {
+      show: false
+    },
+
+    title: {
+      style: {
+        fontSize: '14px',
+        fontFamily: 'inherit'
+      }
+    },
+
+    tooltip: {
+      fillSeriesColor: false
+    },
+
+    xaxis: {
+      labels: {
+        show: false
+      },
+      tooltip: {
+        enabled: false
+      },
+      axisBorder: {
+        show: false
+      }
+    },
+
+    yaxis: {
+      show: false,
+      labels: {
+        show: false
+      }
     }
-  };
+  }
-
-  Apex.stroke = {
-    width: 2,
-    curve: 'smooth',
-  };
-
-  Apex.fill = {
-    type: 'solid',
-    opacity: 1
-  };
-
-  Apex.legend = {
-    show: false
-  };
 }

pages/_data/charts.yml

@@ -330,12 +330,13 @@ usd-eur:
   series:
     - name: USD/EUR
       color: black
-      data: [1.1241, 1.0972, 1.0601, 1.0516, 1.2795, 1.0573, 1.065, 1.1892, 1.1243, 1.1421, 1.1835, 1.1917, 1.1811, 1.1649, 1.1888, 1.1995, 1.2412, 1.2193, 1.2325, 1.2077, 1.1692, 1.168, 1.1686, 1.1601, 1.1608, 1.1317, 1.0318, 1.1465, 1.1444, 1.1371]
+      data: [1.1241, 1.0972, 1.0601, 1.0516, 1.2795, 1.0573, 1.065, 1.1892, 1.1243, 1.1421, 1.1835, 1.1917, 1.1811, 1.1649, 1.1888, 1.1995, 1.2412, 1.2193, 1.2325, 1.2077, 1.1692, 1.168, 1.1686, 1.1601, 1.1608, 1.1317, 1.0318, 1.1465, 1.1444]
 
 devices:
   type: donut
   sparkline: true
   hide-legend: true
+  sparkline: true
   series:
     - name: a
       color: blue-dark

pages/_docs/avatars.md

@@ -0,0 +1,99 @@
+---
+title: Avatars
+description: Create and group avatars of various shapes and sizes with one component.
+---
+
+### Default markup
+
+{% example html wrapper=avatar-list %}
+{% include ui/avatar.html person-id=1 %}
+{% include ui/avatar.html person-id=2 %}
+{% include ui/avatar.html person-id=3 %}
+{% endexample %}
+
+### Avatar size
+
+Using Bootstrap’s typical naming structure, you can create a standard avatar, or scale it up to different sizes based on what’s needed.
+
+{% example html wrapper=avatar-list %}
+{% include ui/avatar.html person-id=10 size="xl" %}
+{% include ui/avatar.html person-id=9 size="lg" %}
+{% include ui/avatar.html person-id=8 size="md" %}
+{% include ui/avatar.html person-id=7 %}
+{% include ui/avatar.html person-id=6 size="sm" %}
+{% endexample %}
+
+### Avatar status
+
+Add an online or offline status indicator to show user's availability.
+
+{% example html wrapper=avatar-list %}
+{% include ui/avatar.html person-id=11 %}
+{% include ui/avatar.html person-id=12 status="danger" %}
+{% include ui/avatar.html person-id=13 status="success" %}
+{% include ui/avatar.html person-id=14 status="warning" %}
+{% include ui/avatar.html person-id=15 status="info" %}
+{% include ui/avatar.html person-id=16 status="gray" %}
+{% endexample %}
+
+### Avatar shape
+
+Change the shape of an avatar with the default Bootstrap image classes.
+
+{% example html wrapper=avatar-list %}
+{% include ui/avatar.html person-id=17 %}
+{% include ui/avatar.html person-id=18 shape="rounded" %}
+{% include ui/avatar.html person-id=19 shape="rounded-circle" %}
+{% include ui/avatar.html person-id=20 shape="rounded-0" %}
+{% include ui/avatar.html person-id=21 shape="rounded-lg" %}
+{% endexample %}
+
+### Initials
+
+{% example html wrapper=avatar-list %}
+{% include ui/avatar.html placeholder="AB" size="xl" %}
+{% include ui/avatar.html placeholder="CD" size="lg" %}
+{% include ui/avatar.html placeholder="EF" size="md" %}
+{% include ui/avatar.html placeholder="GH" %}
+{% include ui/avatar.html placeholder="IJ" size="sm" %}
+{% endexample %}
+
+
+### Avatar initials color
+
+[See more]({% docs_url colors %})
+
+{% example html wrapper=avatar-list %}
+{% include ui/avatar.html placeholder="AB" color="green" %}
+{% include ui/avatar.html placeholder="CD" color="red" %}
+{% include ui/avatar.html placeholder="EF" color="yellow" %}
+{% include ui/avatar.html placeholder="GH" color="blue" %}
+{% include ui/avatar.html placeholder="IJ" color="purple" %}
+{% endexample %}
+
+### Avatar initials icons
+
+{% example html wrapper=avatar-list %}
+{% include ui/avatar.html icon="user" %}
+{% include ui/avatar.html icon="plus" %}
+{% include ui/avatar.html icon="user-plus" %}
+{% endexample %}
+
+### Avatars list
+
+{% example html %}
+<div class="avatar-list">
+{% for person in site.data.people limit: 5 offset: 20 %}
+  {% include ui/avatar.html person=person %}
+{% endfor %}
+</div>
+{% endexample %}
+
+{% example html %}
+<div class="avatar-list avatar-list-stacked">
+  {% for person in site.data.people limit: 5 offset: 30 %}
+  {% include ui/avatar.html person=person element="a" %}
+  {% endfor %}
+  <span class="avatar" element="a">+8</span>
+</div>
+{% endexample %}

pages/_docs/index.md

@@ -26,9 +26,6 @@ When completed, you'll be able to run the various commands provided from the com
 2. Open [http://localhost:4000](http://localhost:4000) in your browser, and voilà.
 3. Any change in `/src` directory will build application and refresh the page.
 
-<div class="alert alert-warning">
-<strong>Warning!</strong> all changes made in <code>_site/</code> folder would be overwriten on application build.
-</div>
 
 ### Bugs and feature requests
 

pages/_includes/js/charts.html

@@ -4,7 +4,9 @@
 {% if data %}
 <script>
 $(document).ready(function(){
-   window.ApexCharts && (new ApexCharts(document.getElementById('{{ include.id }}'), {
+   window.chart = window.chart || {};
+
+   window.ApexCharts && (window.chart["{{ include.chart-id }}"] = new ApexCharts(document.getElementById('{{ include.id }}'), {
       chart: {
          type: '{{ data.type }}',
          height: document.getElementById('{{ include.id }}').offsetHeight,

pages/_includes/parts/navbar.html

@@ -12,7 +12,7 @@
       <a href="{{ site.base }}" class="navbar-brand text-inherit">
          {% if include.icon %}<span class="text-green">{% include ui/icon.html icon=include.icon %}</span>{% endif %}
          {% if include.stamp %}<span class="stamp bg-primary text-white">UI</span>{% endif %}
-         {% if include.logo %}<img src="./img/tabler.svg" alt="" class="navbar-brand-logo mr-3">{% endif %}
+         {% if include.logo %}<img src="{{ site.base }}/img/tabler.svg" alt="" class="navbar-brand-logo mr-3">{% endif %}
          {% if include.title %}<span class="d-inline">{{ include.title }}</span>{% endif %}
       </a>
 

pages/_includes/parts/pagination.html

@@ -7,7 +7,7 @@
             <div class="page-item-subtitle">Previous</div>
             <div class="page-item-title">{{ include.prev-description }}</div>
          {% else %}
-            {% if include.icons %}{% include ui/icon.html icon="chevron-left" %}{% else %}Prev{% endif %}
+            {% if include.icons %}{% include ui/icon.html icon="chevron-left" %}{% else %}{% include ui/icon.html icon="chevron-left" %} Prev{% endif %}
          {% endif %}
       </a>
    </li>
@@ -23,7 +23,7 @@
             <div class="page-item-subtitle">Next</div>
             <div class="page-item-title">{{ include.next-description }}</div>
          {% else %}
-            {% if include.icons %}{% include ui/icon.html icon="chevron-right" %}{% else %}Next{% endif %}
+            {% if include.icons %}{% include ui/icon.html icon="chevron-right" %}{% else %}Next {% include ui/icon.html icon="chevron-right" %}{% endif %}
          {% endif %}
       </a>
    </li>

pages/_includes/ui/avatar.html

@@ -15,5 +15,5 @@
 	{% endunless %}
 {% endif %}
 {% assign element = include.element | default: 'span' %}
-<{{ element }} class="avatar{% if include['size'] %} avatar-{{ include['size'] }}{% endif %}{% if include.thumb %} avatar-thumb{% endif %}{% if include.class %} {{ include.class }}{% endif %}"{% if src %} style="background-image: url({{ site.base }}{{ src }})"{% endif %}>{% if include.status %}<span class="avatar-status bg-{{ include.status }}">{% if include.status-text %}{{ include.status-text }}{% elsif include.status-icon %}{% include ui/icon.html icon=include.status-icon class="avatar-status-icon" %}{% endif %}</span>{% endif %}{% if placeholder %}{{ placeholder }}{% elsif include.icon %}{% include ui/icon.html icon=include.icon class="avatar-icon" %}{% endif %}</{{ element }}>
+<{{ element }} class="avatar{% if include['size'] %} avatar-{{ include['size'] }}{% endif %}{% if include.thumb %} avatar-thumb{% endif %}{% if include.class %} {{ include.class }}{% endif %}{% if include.shape %} {{ include.shape }}{% endif %}{% if include.color %} bg-{{ include.color }}-lt{% endif %}"{% if src %} style="background-image: url({{ site.base }}{{ src }})"{% endif %}>{% if include.status %}<span class="avatar-status bg-{{ include.status }}">{% if include.status-text %}{{ include.status-text }}{% elsif include.status-icon %}{% include ui/icon.html icon=include.status-icon class="avatar-status-icon" %}{% endif %}</span>{% endif %}{% if placeholder %}{{ placeholder }}{% elsif include.icon %}   {% include ui/icon.html icon=include.icon class="avatar-icon" %}{% endif %}</{{ element }}>
 {% endremoveemptylines %}

pages/_includes/ui/icon.html

@@ -1,4 +1,5 @@
 {% capture class %}{% if include.class %} {{ include.class }}{% endif %}{% if include.color %} text-{{ include.color }}{% endif %}{% endcapture %}
+{% assign class = class | strip %}
 {% capture i %}
 {% include icons/{{ include.icon }}.svg %}
 {% endcapture %}

pages/_plugins/jekyll-base.rb

@@ -15,7 +15,6 @@ def get_dir(dir)
 end
 
 module Jekyll
-
   Jekyll::Hooks.register :pages, :pre_render do |page, jekyll|
     jekyll.site['base'] = get_dir(page.dir)
   end

pages/_plugins/jekyll-tags.rb

@@ -1,3 +1,6 @@
+require 'pathname'
+
+
 module Jekyll
   module Tags
     class RemoveEmptyLines < Liquid::Block
@@ -10,9 +13,21 @@ module Jekyll
       def render(context)
         super.strip.gsub /^[\t\s]*$\n/, ''
       end
-
     end
 
+    class DocsUrl < Liquid::Tag
+      def initialize(tag_name, path, tokens)
+        super
+        @path = path.strip
+      end
+
+      def render(context)
+        url = context.environments.first.page.url.sub!(/^\//, '')
+        pageDir = Pathname(url).parent
+
+        ('./' + Pathname('docs/' + @path + '.html').relative_path_from(pageDir).to_s).gsub(/^\.\/\.\./, "..")
+      end
+    end
 
     class CardBlock < Liquid::Block
       def initialize(tag_name, params, tokens)
@@ -38,6 +53,8 @@ module Jekyll
         card_text += super + "\n"
         card_text += '</div>' + "\n"
         card_text += '</div>'
+
+        card_text
       end
     end
   end
@@ -45,3 +62,5 @@ end
 
 Liquid::Template.register_tag('removeemptylines', Jekyll::Tags::RemoveEmptyLines)
 Liquid::Template.register_tag('card', Jekyll::Tags::CardBlock)
+Liquid::Template.register_tag('docs_url', Jekyll::Tags::DocsUrl)
+

pages/avatars.html

@@ -1,84 +0,0 @@
----
----
-
-
-<h1>Simple avatars</h1>
-<div>
-	{% include ui/avatar.html person-id=1 %}
-	{% include ui/avatar.html person-id=2 %}
-	{% include ui/avatar.html person-id=3 %}
-	{% include ui/avatar.html person-id=4 %}
-	{% include ui/avatar.html person-id=5 %}
-</div>
-
-<div>
-	<h1>Avatar size</h1>
-	{% include ui/avatar.html person-id=6 size="sm" %}
-	{% include ui/avatar.html person-id=7 %}
-	{% include ui/avatar.html person-id=9 size="lg" %}
-	{% include ui/avatar.html person-id=10 size="xl" %}
-</div>
-
-<div>
-	{% include ui/avatar.html person-id=11 %}
-	{% include ui/avatar.html person-id=12 status="danger" %}
-	{% include ui/avatar.html person-id=13 status="success" %}
-	{% include ui/avatar.html person-id=14 status="warning" %}
-	{% include ui/avatar.html person-id=15 status="info" %}
-	{% include ui/avatar.html person-id=16 status="gray" %}
-</div>
-
-<div>
-	<h1>Avatar placeholders</h1>
-	{% include ui/avatar.html placeholder="ąę" %}
-	{% include ui/avatar.html placeholder="AB" %}
-	{% include ui/avatar.html placeholder="ć" %}
-	{% include ui/avatar.html placeholder="ы" %}
-</div>
-<div>
-	{% include ui/avatar.html icon="bell" %}
-	{% include ui/avatar.html icon="circle" %}
-	{% include ui/avatar.html icon="disc" %}
-	{% include ui/avatar.html icon="twitter" class="bg-twitter text-white" %}
-</div>
-<div>
-	<span class="avatar avatar-blue">NG</span>
-	<span class="avatar avatar-azure">AM</span>
-	<span class="avatar avatar-indigo">RB</span>
-	<span class="avatar avatar-purple">PR</span>
-	<span class="avatar avatar-pink">WH</span>
-	<span class="avatar avatar-red">MR</span>
-	<span class="avatar avatar-orange">DB</span>
-	<span class="avatar avatar-yellow">PP</span>
-	<span class="avatar avatar-lime">JR</span>
-	<span class="avatar avatar-green">RB</span>
-	<span class="avatar avatar-teal">KH</span>
-	<span class="avatar avatar-cyan">BK</span>
-	<span class="avatar avatar-gray">CA</span>
-	<span class="avatar avatar-gray-dark">CW</span>
-</div>
-
-<div>
-	<h1>Avatars list</h1>
-	<div class="avatar-list">
-		{% include ui/avatar.html person-id=17 %}
-		{% include ui/avatar.html person-id=18 %}
-		{% include ui/avatar.html person-id=19 %}
-		{% include ui/avatar.html person-id=20 %}
-		{% include ui/avatar.html person-id=21 %}
-		{% include ui/avatar.html person-id=22 %}
-	</div>
-</div>
-
-<div>
-	<div class="avatar-list avatar-list-stacked">
-		{% include ui/avatar.html person-id=23 %}
-		{% include ui/avatar.html person-id=24 %}
-		{% include ui/avatar.html person-id=25 %}
-		{% include ui/avatar.html person-id=26 %}
-		{% include ui/avatar.html person-id=27 %}
-		{% include ui/avatar.html person-id=28 %}
-		<span class="avatar">+8</span>
-	</div>
-
-</div>

pages/cards-stats.html

@@ -133,8 +133,10 @@ layout: default
          <div class="card-body">
             <div>Traffic monitor</div>
             <div class="row">
-               <div class="col-6">
+               <div class="col-6 align-self-end">
-                 Lorem ipsum dolor sit amet, consectetur
+                  Desktop<br />
+                  Mobile<br/>
+                  Tablet
                </div>
                <div class="col-6">
                   <div class="chart-square" id="chart-devices"></div>
@@ -144,7 +146,7 @@ layout: default
          </div>
       </div>
    </div>
-   <div class="col-sm-6 col-md-4 col-lg-3">
+   <div class="col-sm-12 col-lg-6">
       <div class="card">
          <div class="card-body">
             <div class="d-flex">
@@ -160,7 +162,7 @@ layout: default
                </div>
             </div>
 
-            <div class="chart-sm" id="chart-usd-eur"></div>
+            <div class="chart-sm" id="chart-usd-eur" style="height: 10rem"></div>
             {% include js/charts.html id="chart-usd-eur" chart-id="usd-eur" %}
          </div>
       </div>

pages/pagination.html

@@ -12,3 +12,7 @@ title: Pagination
 {% card %}
    {% include parts/pagination.html count=0 prev-description="Getting started" next-description="Breadcrumbs" %}
 {% endcard %}
+
+<div>
+   {% include parts/pagination.html icons=true %}
+</div>

scss/_variables.scss

@@ -97,11 +97,10 @@ $colors: (
 ) !default;
 
 $avatar-sizes: (
-  ("xs", 1.25rem, 1rem),
+  "sm": 1.25rem,
-  ("sm", 1.5rem, 1rem),
+  "md": 3rem,
-  ("md", 2.5rem, 1rem),
+  "lg": 4.5rem,
-  ("lg", 3.75rem, 1.25rem),
+  "xl": 6rem
-  ("xl", 5rem, 2rem)
 ) !default;
 
 $font-size-base: .9375rem !default;
@@ -159,7 +158,9 @@ $pagination-border-width: 0 !default;
 $pagination-padding-y: .25rem !default;
 $pagination-padding-x: .25rem !default;
 $pagination-color: $text-muted !default;
-$pagination-disabled-color: $text-muted-light !default;
+$pagination-bg: transparent !default;
+$pagination-disabled-bg: transparent !default;
+$pagination-disabled-color: rgba($text-muted-light, .5) !default;
 
 //docelowo przeniesc gdzieindziej
 $yiq-contrasted-threshold: 200 !default;

scss/ui/_avatars.scss

@@ -5,7 +5,7 @@
   height: 2rem;
   font-size: .875rem;
   font-weight: 400;
-  line-height: 2.5rem;
+  line-height: 2rem;
   color: $text-muted-light;
   text-align: center;
   text-transform: uppercase;
@@ -13,12 +13,23 @@
   user-select: none;
   background: $body-bg no-repeat center/cover;
   border-radius: 50%;
+
+  .icon {
+    font-size: 1.25em;
+  }
+
+  @at-root a#{&} {
+    cursor: pointer;
+  }
 }
 
-.avatar-icon {
+@each $avatar-size, $size in $avatar-sizes {
-  width: 1.25em;
+  .avatar-#{$avatar-size} {
-  height: 1.25em;
+    width: $size;
-  vertical-align: text-bottom;
+    height: $size;
+    line-height: $size;
+    font-size: $size / 2;
+  }
 }
 
 .avatar-status {
@@ -32,20 +43,6 @@
   border-radius: 50%;
 }
 
-.avatar-thumb {
-  margin: 4px;
-  box-shadow: 0 0 0 4px rgba(255, 255, 255, .4);
-}
-
-@each $avatar-size, $size, $font-size in $avatar-sizes {
-  .avatar-#{$avatar-size} {
-    width: $size;
-    height: $size;
-    font-size: $font-size;
-    line-height: $size;
-  }
-}
-
 .avatar-list {
   padding: 0;
   margin: 0 0 -.5rem;
@@ -58,6 +55,13 @@
       margin-right: .5rem;
     }
   }
+
+  a.avatar {
+
+    &:hover {
+      z-index: 1;
+    }
+  }
 }
 
 .avatar-list-stacked {
@@ -69,10 +73,3 @@
     box-shadow: 0 0 0 2px #fff;
   }
 }
-
-@each $vendor, $color in $colors {
-  .avatar-#{$vendor} {
-    color: $color;
-    background-color: rgba($color, .3);
-  }
-}

scss/ui/_charts.scss

@@ -9,11 +9,12 @@
 
 .chart-sm {
   height: 2.5rem;
+  //outline: 1px solid red;
 }
 
 .chart-square {
   height: 5.75rem;
-  outline: 1px solid red;
+  //outline: 1px solid red;
 }
 
 .chart-placeholder {

scss/ui/_examples.scss

@@ -1,8 +1,8 @@
 .example {
   padding: 1.5rem;
-  font-size: px2rem(15px);
   border: 1px solid $border-color;
   border-radius: 3px 3px 0 0;
+  margin: 1rem 0 0;
 }
 
 .example-bg {

scss/ui/_icons.scss

@@ -2,7 +2,7 @@
   width: 1em;
   height: 1em;
   font-size: 1em;
-  vertical-align: -2px;
+  vertical-align: -.2em;
 }
 
 .icon-md {

scss/utils/_text.scss

@@ -61,7 +61,7 @@
     h5,
     h6 {
       margin-top: 1.5em;
-      font-weight: 400;
+      font-weight: 600;
     }
   }