Mirrors/tabler
1
0
Fork 0
mirror of https://github.com/tabler/tabler.git synced 2025-12-24 02:38:15 +04:00
Code Issues Projects Releases Wiki Activity

homepage, charts, maps refactoring

Browse Source
This commit is contained in:
codecalm
2019-10-28 20:53:15 +01:00
committed by Alex Safian
parent b9c089cab1
commit d3ac58968f
32 changed files with 503 additions and 95 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
js/tabler-charts.js
View File

@@ -46,7 +46,7 @@ if (window.Apex) {
window.Apex = {
chart: {
fontFamily: 'inherit',
foreColor: 'inherit',
foreColor: 'currentColor',
toolbar: {
show: false,
},
@@ -124,8 +124,10 @@ if (window.Apex) {
title: {
margin: 0,
floating: true,
offsetX: 10,
style: {
fontSize: '14px',
fontSize: '18px',
},
},

2
pages/_data/charts.yml
View File

@@ -21,12 +21,14 @@ tasks:
development-activity:
name: Development Activity
title: Development Activity
type: area
groups: [1, 2, 3]
hide-points: true
hide-tooltip: true
remove-padding: true
legend-position: 'top'
sparkline: true
series:
- name: 'Purchases'
color: blue

15
pages/_data/orders.yml Normal file
View File

@@ -0,0 +1,15 @@
- title: Wordpress Plugins
subtitle: HTML, CSS, PHP
color: blue
- title: HTML Templates
subtitle: HTML, CSS, Javascript
color: red
- title: Mobile Apps
subtitle: React Native
color: green
- title: Back-end Plugins
subtitle: Ruby, PHP
color: yellow
- title: Other
subtitle: C#, ASP.NET
color: dark

2
pages/_docs/charts.md
View File

@@ -18,7 +18,7 @@ menu: docs.charts
<div id="{{ key }}" style="height: 16rem"></div>
</div>
</div>
{% include js/charts.html id=key chart-id=data %}
{% include ui/chart.html id=key chart-id=data %}
{% endexample %}
{% endif %}
{% endfor %}

18
pages/_includes/cards/charts/active-users.html Normal file
View File

@@ -0,0 +1,18 @@
<div class="card">
<div class="card-body">
<div class="d-flex">
<div>Active users</div>
<div class="ml-auto">
{% include parts/dropdown/days.html %}
</div>
</div>
<div class="d-flex align-items-baseline">
<div class="h1 mb-3 mr-2">2,986</div>
<div class="mr-auto">
{% include ui/trending.html value=4 %}
</div>
</div>
{% include ui/chart.html chart-id="active-users" class="chart-sm" %}
</div>
</div>

19
pages/_includes/cards/charts/card.html
View File

@@ -1,17 +1,10 @@
{% if include.data %}
{% assign data = include.data %}
{% else %}
{% assign data = site.data.charts[include.name] %}
{% endif %}
{% assign key = 'chart-' | append: include.name %}
{% assign data = site.data.charts[include.chart-id] %}
{% assign height = include.height | default: 10 %}
<div class="card">
{% unless include.hide-title %}
<div class="card-header">
<h3 class="card-title">{{ include.title | default: data.name }}</h3>
</div>
{% endunless %}
<div class="card-body">
<div id="{{ key }}" style="height: {{ include.height | default: 16 }}rem"></div>
{% if include.title %}
<h3 class="card-title">{{ include.title }}</h3>
{% endif %}
{% include ui/chart.html height=height chart-id=include.chart-id %}
</div>
</div>
{% include js/charts.html id=key chart-id=include.name %}

18
pages/_includes/cards/charts/new-clients.html Normal file
View File

@@ -0,0 +1,18 @@
<div class="card">
<div class="card-body">
<div class="d-flex">
<div>New clients</div>
<div class="ml-auto">
{% include parts/dropdown/days.html %}
</div>
</div>
<div class="d-flex align-items-baseline">
<div class="h1 mb-3 mr-2">6,782</div>
<div class="mr-auto">
{% include ui/trending.html value=0 %}
</div>
</div>
{% include ui/chart.html chart-id="new-clients" class="chart-sm" %}
</div>
</div>

7
pages/_includes/cards/charts/revenue.html
View File

@@ -8,11 +8,10 @@
</div>
<div class="d-flex align-items-baseline">
<div class="h1 mb-0 mr-2">$4,300</div>
<div class="mr-auto text-green">
24% {% include ui/icon.html icon="trending-up" class="icon-thin" %}
<div class="mr-auto">
{% include ui/trending.html value=8 %}
</div>
</div>
</div>
<div class="card-chart" id="card-chart-1"></div>
{% include js/charts.html id="card-chart-1" chart-id="revenue-bg" %}
{% include ui/chart.html chart-id="revenue-bg" class="card-chart" %}
</div>

4
pages/_includes/cards/charts/sales.html
View File

@@ -9,9 +9,7 @@
<div class="h1 mb-3">75%</div>
<div class="d-flex mb-2">
<div>Conversion rate</div>
<div class="ml-auto text-green">
24% {% include ui/icon.html icon="trending-up" class="icon-thin" %}
</div>
<div class="ml-auto">{% include ui/trending.html value=7 %}</div>
</div>
{% include ui/progress.html percentage=75 color="blue" size="sm" %}
</div>

2
pages/_includes/cards/company-employees.html
View File

@@ -12,7 +12,7 @@
{% for person in site.data.people limit: 5 offset: 20 %}
<tr>
<td class="w-1">{% include ui/avatar.html src=person.photo %}</td>
<td class="w-1p">{% include ui/avatar.html src=person.photo %}</td>
<td><a href="#" class="text-reset">{{ person.full_name }}</a></td>
<td>{{ person.department }}</td>
<td class="w-1 pr-0">{{ forloop.index | random_number: 30, 90 }}%</td>

58
pages/_includes/cards/development-activity.html Normal file
View File

@@ -0,0 +1,58 @@
<div class="card">
{% include ui/chart.html chart-id="development-activity" height=10 class="mt-4" %}
<div class="table-responsive">
<table class="table card-table table-vcenter">
<thead>
<tr>
<th colspan="2">User</th>
<th>Commit</th>
<th>Date</th>
</tr>
</thead>
<tbody>
<tr>
<td class="w-1p">
{% include ui/avatar.html person-id=10 %}
</td>
<td>{{ site.data.people[10].full_name }}</td>
<td>Initial commit</td>
<td class="text-nowrap text-muted">May 6, 2019</td>
</tr>
<tr>
<td class="w-1p">
{% include ui/avatar.html person-id=17 %}
</td>
<td>{{ site.data.people[17].full_name }}</td>
<td>Main structure</td>
<td class="text-nowrap text-muted">April 22, 2019</td>
</tr>
<tr>
<td class="w-1p">
{% include ui/avatar.html person-id=16 %}
</td>
<td>{{ site.data.people[16].full_name }}</td>
<td>Left sidebar adjustments</td>
<td class="text-nowrap text-muted">April 15, 2019</td>
</tr>
<tr>
<td class="w-1p">
{% include ui/avatar.html person-id=12 %}
</td>
<td>{{ site.data.people[12].full_name }}</td>
<td>Topbar dropdown style</td>
<td class="text-nowrap text-muted">April 8, 2019</td>
</tr>
<tr>
<td class="w-1p">
{% include ui/avatar.html person-id=19 %}
</td>
<td>{{ site.data.people[19].full_name }}</td>
<td>Fixes #625</td>
<td class="text-nowrap text-muted">April 9, 2019</td>
</tr>
</tbody>
</table>
</div>
</div>

8
pages/_includes/cards/invoices.html
View File

@@ -6,7 +6,8 @@
<table class="table card-table table-vcenter text-nowrap datatable">
<thead>
<tr>
<th class="w-1">No.</th>
<th class="w-1p"><input class="form-check-input m-0 align-middle" type="checkbox"></th>
<th class="w-1p">No.</th>
<th>Invoice Subject</th>
<th>Client</th>
<th>VAT No.</th>
@@ -20,6 +21,7 @@
<tbody>
{% for invoice in site.data.invoices limit: 5 %}
<tr>
<td><input class="form-check-input m-0 align-middle" type="checkbox"></td>
<td><span class="text-muted">00{{ forloop.index | plus: 1400 }}</span></td>
<td><a href="invoice.html" class="text-reset">{{ invoice.name }}</a></td>
<td>
@@ -38,9 +40,9 @@
<td>{{ invoice.price }}</td>
<td class="text-right">
<a href="#" class="btn btn-secondary btn-sm">Manage</a>
<span class="dropdown">
<button class="btn btn-secondary btn-sm dropdown-toggle" data-toggle="dropdown">Actions</button>
<button class="btn btn-secondary dropdown-toggle" data-toggle="dropdown">Actions</button>
{% include ui/dropdown-menu.html %}
</span>
</td>
</tr>

2
pages/_includes/cards/map.html
View File

@@ -7,6 +7,6 @@
{% endif %}
<div class="card-body">
{% include ui/map.html map=map color="blue" %}
{% include ui/map.html map-id=map color="blue" %}
</div>
</div>

27
pages/_includes/cards/order-statistics.html Normal file
View File

@@ -0,0 +1,27 @@
<div class="card">
<div class="card-body">
<div>Total orders</div>
<div class="d-flex align-items-baseline mb-3">
<div class="h1 mb-0 mr-2">2,137</div>
<div class="mr-auto">{% include ui/trending.html value=7 %}</div>
</div>
{% include ui/progress.html values="40,15,25,15,5" class="mb-4" %}
<ul class="list-unstyled">
{% for item in site.data.orders %}
<li class="row row-sm leading-tight align-items-center mb-2">
<div class="col-auto"><span class="legend bg-{{ item.color }}"></span></div>
<div class="col">
{{ item.title }}
<div class="text-h6 text-muted">{{ item.subtitle }}</div>
</div>
<div class="col-auto small text-muted"><strong class="text-body">{{ forloop.index | random_number: 500, 2000 | intcomma }}</strong> orders</div>
</li>
{% endfor %}
</ul>
</div>
</div>

2
pages/_includes/cards/small-stats.html
View File

@@ -1,7 +1,7 @@
{% assign chart-type = include.chart-type | default: 'line' %}
{% assign chart-position = include.chart-position | default: 'right' %}
<div class="card">
<div class="card-body p-3 d-flex align-items-center">
<div class="card-body p-3 d-flex align-items-center leading-tight">
{% if include.icon %}
<span class="{% if include.color %}bg-{{ include.color }} text-white{% endif %} stamp mr-3">{% include ui/icon.html icon=include.icon %}</span>
{% elsif include.person-id %}

6
pages/_includes/layout/css.html
View File

@@ -6,8 +6,8 @@
{% endif %}
<!-- Tabler Core -->
<link href="{{ site.base }}/dist/css/tabler.css?{{ site.time | date: '%s' }}" rel="stylesheet" />
<link href="{{ site.base }}/dist/css/tabler{% if jekyll.environment == 'production' %}.min{% endif %}.css?{{ site.time | date: '%s' }}" rel="stylesheet" />
<!-- Tabler Plugins -->
<link href="{{ site.base }}/dist/css/tabler-flags.css?{{ site.time | date: '%s' }}" rel="stylesheet" />
<link href="{{ site.base }}/dist/css/tabler-charts.css?{{ site.time | date: '%s' }}" rel="stylesheet" />
<link href="{{ site.base }}/dist/css/tabler-flags{% if jekyll.environment == 'production' %}.min{% endif %}.css?{{ site.time | date: '%s' }}" rel="stylesheet" />
<link href="{{ site.base }}/dist/css/tabler-charts{% if jekyll.environment == 'production' %}.min{% endif %}.css?{{ site.time | date: '%s' }}" rel="stylesheet" />

63
pages/_includes/layout/homepage.html
View File

@@ -6,47 +6,11 @@
{% include cards/charts/revenue.html %}
</div>
<div class="col-sm-6 col-lg-3">
<div class="card">
<div class="card-body">
<div class="d-flex">
<div>New clients</div>
<div class="ml-auto">
{% include parts/dropdown/days.html %}
</div>
</div>
<div class="d-flex align-items-baseline">
<div class="h1 mb-3 mr-2">6,782</div>
<div class="mr-auto text-red">
5% {% include ui/icon.html icon="trending-down" class="icon-thin" %}
</div>
</div>
<div class="chart-sm" id="chart-active-users"></div>
{% include js/charts.html id="chart-active-users" chart-id="new-clients" %}
</div>
</div>
{% include cards/charts/new-clients.html %}
</div>
<div class="col-sm-6 col-lg-3">
<div class="card">
<div class="card-body">
<div class="d-flex">
<div>Active users</div>
<div class="ml-auto">
{% include parts/dropdown/days.html %}
</div>
</div>
<div class="d-flex align-items-baseline">
<div class="h1 mb-3 mr-2">2,986</div>
<div class="mr-auto text-green">
4% {% include ui/icon.html icon="trending-up" class="icon-thin" %}
</div>
</div>
<div class="chart-sm" id="chart-active-users2"></div>
{% include js/charts.html id="chart-active-users2" chart-id="active-users" %}
</div>
</div>
{% include cards/charts/active-users.html %}
</div>
<div class="col-lg-6">
@@ -73,21 +37,26 @@
{% include cards/map.html title="Top users" %}
</div>
<div class="col-md-4">
{% include cards/charts/card.html name="temperature" title="A" height=12 %}
<div class="col-lg-6">
{% include cards/development-activity.html %}
</div>
<div class="col-md-4">
{% include cards/charts/card.html name="donut" title="B" height=12 %}
</div>
<div class="col-md-4">
{% include cards/charts/card.html name="pie" title="C" height=12 %}
<div class="col-lg-6">
<div class="row row-deck">
<div class="col-md-12">
{% include cards/charts/card.html chart-id="temperature" height=10 %}
</div>
<div class="col-md-12">
{% include cards/charts/card.html chart-id="donut" height=10 %}
</div>
</div>
</div>
{% comment %}
<div class="col-lg-6">
{% comment %}{% include cards/development-activity.html %}{% endcomment %}
<div class="col-md-4">
{% include cards/order-statistics.html %}
</div>
<div class="col-md-6">
<div class="alert alert-primary">Are you in trouble? <a href="{{ site.base }}/docs/index.html" class="alert-link">Read our documentation</a> with code samples.</div>

4
pages/_includes/layout/js.html
View File

@@ -16,3 +16,7 @@
<!-- Tabler Plugins -->
<script src="{{ site.base }}/dist/js/tabler-charts{% if jekyll.environment == 'production' %}.min{% endif %}.js?{{ site.time | date: '%s' }}"></script>
{% removeemptylines %}
{{ site.capture_global.scripts }}
{% endremoveemptylines %}

19
pages/_includes/js/charts.html → pages/_includes/ui/chart.html
View File

@@ -1,14 +1,16 @@
{% capture_global scripts %}
{% removeemptylines %}
{% assign data = site.data.charts[include.chart-id] %}
{% assign id = include.id | default: include.chart-id %}
{% assign height = include.height %}
{% if data %}
<div id="chart-{{ id }}"{% if include.class %} class="{{ include.class }}"{% endif %}{% if height %} style="height: {{ height }}rem"{% endif %}></div>
{% capture_global scripts %}
<script>
document.addEventListener("DOMContentLoaded", function(event) {
{% if jekyll.environment == 'development' %}window.chart = window.chart || {};{% endif %}
{% if jekyll.environment == 'development' %}window.tabler_chart = window.tabler_chart || {};{% endif %}
var el;
window.ApexCharts && ({% if jekyll.environment == 'development' %}window.chart["{{ include.chart-id }}"] = {% endif %}new ApexCharts((el = document.getElementById('{{ include.id }}')), {
window.ApexCharts && ({% if jekyll.environment == 'development' %}window.tabler_chart["chart-{{ include.chart-id }}"] = {% endif %}new ApexCharts((el = document.getElementById('chart-{{ id }}')), {
chart: {
type: '{{ data.type }}',
height: el.offsetHeight,
@@ -28,6 +30,12 @@ document.addEventListener("DOMContentLoaded", function(event) {
},
{% endif %}
{% if data.title %}
title: {
text: '{{ data.title | escape }}'
},
{% endif %}
{% if data.dashed-history or data.stroke-curve %}
stroke: {
{% if data.dashed-history %}
@@ -126,6 +134,5 @@ document.addEventListener("DOMContentLoaded", function(event) {
})).render();
});
</script>
{% endif %}
{% endremoveemptylines %}
{% endcapture_global %}
{% endif %}

6
pages/_includes/ui/map.html
View File

@@ -1,4 +1,4 @@
{% assign id = include.map %}
{% assign id = include.map-id %}
{% assign height = include.height | default: 20 %}
{% assign data = site.data.maps[id] %}
{% assign color = include.color | default: data.color | default: 'green' %}
@@ -7,8 +7,10 @@
<div id="map-{{ id }}" style="height: {{ height }}rem"></div>
{% capture_global scripts %}
<script>
{% if jekyll.environment == 'development' %}window.tabler_map = window.tabler_map || {};{% endif %}
document.addEventListener("DOMContentLoaded", function() {
$('#map-{{ id }}').vectorMap({
{% if jekyll.environment == 'development' %}window.tabler_map["map-{{ id }}"] = {% endif %}$('#map-{{ id }}').vectorMap({
map: '{{ data.map }}',
backgroundColor: 'transparent',
color: 'rgba(120, 130, 140, .1)',

6
pages/_includes/ui/progress.html
View File

@@ -1,7 +1,13 @@
{% assign percentage = include.percentage | default: 38 %}
{% assign colors = include.colors | default: 'blue,red,green,yellow,dark' | split: ',' %}
<div class="progress{% if include['size'] %} progress-{{ include['size'] }}{% endif %}{% if include.class %} {{ include.class }}{% endif %}">
{% if include.indeterminate %}
<div class="progress-bar progress-bar-indeterminate"></div>
{% elsif include.values %}
{% assign values = include.values | split: ',' %}
{% for value in values %}
<div class="progress-bar bg-{{ colors[forloop.index0] }}" style="width: {{ value }}%" role="progressbar" aria-valuenow="{{ value }}" aria-valuemin="0" aria-valuemax="100"></div>
{% endfor %}
{% else %}
<div class="progress-bar{% if include.color %} bg-{{ include.color }}{% endif %}" style="width: {{ percentage }}%" role="progressbar" aria-valuenow="{{ percentage }}" aria-valuemin="0" aria-valuemax="100">
{% if include.show-value %}

15
pages/_includes/ui/trending.html Normal file
View File

@@ -0,0 +1,15 @@
{% assign value = include.value | default: 25 %}
{% if value > 0 %}
{% assign color = 'green' %}
{% assign icon = 'trending-up' %}
{% elsif value == 0 %}
{% assign color = 'yellow' %}
{% assign icon = 'minus' %}
{% else %}
{% assign color = 'red' %}
{% assign icon = 'trending-down' %}
{% endif %}
<span class="text-{{ color }}{% if include.class %} {{ include.class }}{% endif %}">
{{ value }}% {% include ui/icon.html icon=icon class="icon-thin" %}
</span>

2
pages/_layouts/base.html
View File

@@ -45,8 +45,6 @@
{% include layout/js.html %}
{{ site.capture_global.scripts }}
<script>document.body.style.display = 'block';</script>
</body>
</html>

257
pages/_plugins/jekyll-humanize.rb Normal file
View File

@@ -0,0 +1,257 @@
module Jekyll
module Humanize
##
# This is a port of the Django app `humanize` which adds a "human touch"
# to data. Given that Jekyll produces static sites, some of the original
# methods do not make logical sense (e.g. naturaltime).
#
# Source code can be viewed here:
# https://github.com/django/django
#
# Copyright (c) Django Software Foundation and individual contributors.
# All rights reserved.
####################
# PUBLIC METHODS #
####################
def ordinal(value, flag=nil)
##
# Converts an integer to its ordinal as a string. 1 is '1st', 2 is '2nd',
# 3 is '3rd', etc. Works for any integer.
#
# Usage:
# {{ somenum }} >>> 3
# {{ somenum | ordinal }} >>> '3rd'
# {{ somenum | ordinal: "super" }} >>> '3<sup>rd</sup>'
begin
value = value.to_i
flag.to_s.downcase!
rescue Exception => e
puts "#{e.class} #{e}"
return value
end
suffix = ""
suffixes = ["th", "st", "nd", "rd", "th", "th", "th", "th", "th", "th"]
unless [11, 12, 13].include? value % 100 then
suffix = suffixes[value % 10]
else
suffix = suffixes[0]
end
unless flag and flag == "super"
return "#{value}%s" % suffix
else
return "#{value}<sup>%s</sup>" % suffix
end
end
def intcomma(value, delimiter=",")
##
# Converts an integer to a string containing commas every three digits.
# For example, 3000 becomes '3,000' and 45000 becomes '45,000'.
# Optionally supports a delimiter override for commas.
#
# Usage:
# {{ post.content | number_of_words }} >>> 12345
# {{ post.content | number_of_words | intcomma }} >>> '12,345'
# {{ post.content | number_of_words | intcomma: '.' }} >>> '12.345'
begin
orig = value.to_s
delimiter = delimiter.to_s
rescue Exception => e
puts "#{e.class} #{e}"
return value
end
copy = orig.strip
copy = orig.gsub(/^(-?\d+)(\d{3})/, "\\1#{delimiter}\\2")
orig == copy ? copy : intcomma(copy, delimiter)
end
INTWORD_HELPERS = [
[6, "million"],
[9, "billion"],
[12, "trillion"],
[15, "quadrillion"],
[18, "quintillion"],
[21, "sextillion"],
[24, "septillion"],
[27, "octillion"],
[30, "nonillion"],
[33, "decillion"],
[100, "googol"],
]
def intword(value)
##
# Converts a large integer to a friendly text representation. Works best
# for numbers over 1 million. For example, 1000000 becomes '1.0 million',
# 1200000 becomes '1.2 million' and 1200000000 becomes '1.2 billion'.
#
# Usage:
# {{ largenum }} >>> 1200000
# {{ largenum | intword }} >>> '1.2 million'
begin
value = value.to_i
rescue Exception => e
puts "#{e.class} #{e}"
return value
end
if value < 1000000
return value
end
for exponent, text in INTWORD_HELPERS
large_number = 10 ** exponent
if value < large_number * 1000
return "%#{value}.1f #{text}" % (value / large_number.to_f)
end
end
return value
end
def apnumber(value)
##
# For numbers 0-9, returns the number spelled out. Otherwise, returns the
# number. This follows Associated Press style.
#
# Usage:
# {{ num }} >>> 6
# {{ num | apnumber }} >>> six
begin
value = value.to_i
rescue Exception => e
puts "#{e.class} #{e}"
return value
end
unless value >= 0 and value < 10 then
return value
else
return ["zero", "one", "two", "three", "four", "five", "six",
"seven", "eight", "nine"][value]
end
end
def naturalday(date)
##
# For date values that are within a 9 day stretch from present day, this
# will attempt to return the string representation in the format of today,
# tomorrow, yesterday, "in # days" or "# days ago". Otherwise, returns a
# string formatted according to the "date_format" setting in your
# _config.yml file using strftime format (if not defined, it will default
# to "%m/%d/%Y").
#
# Usage:
# TODAY == 01/26/2014
# {{ post.updated }} >>> 01/25/2014
# {{ post.updated | naturalday }} >>> 'yesterday'
# {{ post.date }} >>> 01/19/2014
# {{ post.date | naturalday }} >>> 'seven days ago'
begin
site = @context.registers[:site]
date_format = site.config['humanize']['date_format']
date = time(date).to_date
rescue Exception => e
puts "#{e.class} #{e}"
return date
end
unless date_format then
date_format = "%m/%d/%Y"
end
today = time(Time.now).to_date
delta = (date - today).to_i
case delta
when 0
return "today"
when 1
return "tomorrow"
when 2..9
delta = apnumber(delta)
return "in #{delta} days"
when -1
return "yesterday"
when -9..-2
delta = apnumber(delta * -1)
return "#{delta} days ago"
else
return date.strftime("#{date_format}")
end
end
def filesize(value)
##
# For filesize values in bytes, returns the number rounded to 3
# decimal places with the correct suffix.
#
# Usage:
# {{ bytes }} >>> 123456789
# {{ bytes | filesize }} >>> 117.738 MB
filesize_tb = 1099511627776.0
filesize_gb = 1073741824.0
filesize_mb = 1048576.0
filesize_kb = 1024.0
begin
value = value.to_f
rescue Exception => e
puts "#{e.class} #{e}"
return value
end
if value >= filesize_tb
return "%s TB" % (value / filesize_tb).to_f.round(3)
elsif value >= filesize_gb
return "%s GB" % (value / filesize_gb).to_f.round(3)
elsif value >= filesize_mb
return "%s MB" % (value / filesize_mb).to_f.round(3)
elsif value >= filesize_kb
return "%s KB" % (value / filesize_kb).to_f.round(0)
elsif value == 1
return "1 byte"
else
return "%s bytes" % value.to_f.round(0)
end
end
#####################
# PRIVATE METHODS #
#####################
private
def time(input)
case input
when Time
input
when String
Time.parse(input)
else
Jekyll.logger.error "Invalid Date:", "'#{input}' not valid datetime."
exit(1)
end
end
end
end
Liquid::Template.register_filter(Jekyll::Humanize)

3
pages/charts.html
View File

@@ -7,9 +7,8 @@ menu: charts
{% for chart in site.data.charts %}
{% if chart[1].display %}
{% assign chart-name = chart[0] %}
{% assign chart-data = chart[1] %}
<div class="col-lg-6 col-xl-4">
{% include cards/charts/card.html name=chart-name data=chart-data %}
{% include cards/charts/card.html chart-id=chart-name %}
</div>
{% endif %}
{% endfor %}

2
pages/maps.html
View File

@@ -10,7 +10,7 @@ page-title: Maps
<div class="card">
<div class="card-body">
{% assign id = map[0] %}
{% include ui/map.html map=id %}
{% include ui/map.html map-id=id %}
</div>
</div>
</div>

4
pages/users-list.html
View File

@@ -56,8 +56,8 @@ done: true
<div class="card">
<table class="table card-table table-vcenter">
<tr>
<th class="w-1"></th>
<th class="w-1"></th>
<th class="w-1p"></th>
<th class="w-1p"></th>
<th>Name</th>
<th class="d-none d-sm-table-cell">Date</th>
<th class="d-none d-md-table-cell">Amount</th>

2
scss/tabler.scss
View File

@@ -31,6 +31,7 @@
@import "ui/forms/input.imagecheck";
@import "ui/forms/input.selectgroup";
@import "ui/forms/input.custom";
@import "ui/legend";
@import "ui/lists";
@import "ui/loaders";
@import "ui/login";
@@ -51,6 +52,7 @@
@import "vendor/pace";
@import "vendor/selectize";
@import "vendor/jqvmap";
@import "vendor/apexcharts";
@import "utils/border";
@import "utils/background";

4
scss/ui/_icons.scss
View File

@@ -12,6 +12,10 @@
fill: currentColor;
}
.icon-thin {
stroke-width: 1.5;
}
.icon-md {
font-size: px2rem(20px);
}

7
scss/ui/_legend.scss Normal file
View File

@@ -0,0 +1,7 @@
.legend {
display: inline-block;
background: $gray-300;
width: .75em;
height: .75em;
border-radius: $border-radius;
}

5
scss/ui/_stamps.scss
View File

@@ -1,5 +1,8 @@
.stamp {
display: inline-block;
display: inline-flex;
align-items: center;
justify-content: center;
min-width: px2rem(40px);
height: px2rem(40px);
padding: 0 .25rem;

3
scss/vendor/_apexcharts.scss vendored Normal file
View File

@@ -0,0 +1,3 @@
.apexcharts-title-text {
font-weight: 600;
}