Mirrors/tabler
1
0
Fork 0
mirror of https://github.com/tabler/tabler.git synced 2026-07-30 15:04:38 +04:00
Code Issues Projects Releases Wiki Activity

pagination, charts, avatars docs

Browse Source
This commit is contained in:
chomik
2019-04-12 22:28:00 +02:00
parent a36d596215
commit a41020fb35
20 changed files with 253 additions and 173 deletions
Download Patch File Download Diff File Expand all files Collapse all files
js/app/charts.js
+56 -15
View File
@@ -41,48 +41,89 @@
/*
Apexcharts default configuration
charts default configuration
*/
if (window.Apex) {
Apex.grid = {
window.Apex = {
grid: {
show: false,
padding: {
right: 0,
left: 0,
bottom: 0,
top: 0
}
};
},
Apex.dataLabels = {
dataLabels: {
enabled: false
};
},
Apex.plotOptions = {
plotOptions: {
pie: {
expandOnClick: false,
},
};
},
Apex.chart = {
chart: {
toolbar: {
show: false,
},
zoom: {
enabled: false
},
animations: {
enabled: false,
}
};
},
Apex.stroke = {
stroke: {
width: 2,
curve: 'smooth',
};
},
Apex.fill = {
fill: {
type: 'solid',
opacity: 1
};
},
Apex.legend = {
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
}
}
}
}
pages/_data/charts.yml
+2 -1
View File
@@ -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
+99
View File
@@ -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
-3
View File
@@ -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
+3 -1
View File
@@ -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
+1 -1
View File
@@ -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
+2 -2
View File
@@ -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
+1 -1
View File
@@ -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
View File
@@ -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
-1
View File
@@ -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
+20 -1
View File
@@ -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
-84
View File
@@ -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
+6 -4
View File
@@ -133,8 +133,10 @@ layout: default
<div class="card-body">
<div>Traffic monitor</div>
<div class="row">
<div class="col-6">
Lorem ipsum dolor sit amet, consectetur
<div class="col-6 align-self-end">
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
+4
View File
@@ -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
+7 -6
View File
@@ -97,11 +97,10 @@ $colors: (
) !default;
$avatar-sizes: (
("xs", 1.25rem, 1rem),
("sm", 1.5rem, 1rem),
("md", 2.5rem, 1rem),
("lg", 3.75rem, 1.25rem),
("xl", 5rem, 2rem)
"sm": 1.25rem,
"md": 3rem,
"lg": 4.5rem,
"xl": 6rem
) !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
+23 -26
View File
@@ -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;
}
.avatar-icon {
width: 1.25em;
height: 1.25em;
vertical-align: text-bottom;
@at-root a#{&} {
cursor: pointer;
}
}
@each $avatar-size, $size in $avatar-sizes {
.avatar-#{$avatar-size} {
width: $size;
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
+2 -1
View File
@@ -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 -1
View File
@@ -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
+1 -1
View File
@@ -2,7 +2,7 @@
width: 1em;
height: 1em;
font-size: 1em;
vertical-align: -2px;
vertical-align: -.2em;
}
.icon-md {
scss/utils/_text.scss
+1 -1
View File
@@ -61,7 +61,7 @@
h5,
h6 {
margin-top: 1.5em;
font-weight: 400;
font-weight: 600;
}
}