Mirrors/tabler
1
0
Fork 0
mirror of https://github.com/tabler/tabler.git synced 2026-07-23 19:50:59 +04:00
Code Issues Projects Releases Wiki Activity

snippet fixes

Browse Source
This commit is contained in:
codecalm
2020-11-21 17:15:14 +01:00
parent df261777e2
commit 7f56afc852
3 changed files with 57 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/_includes/cards/small-stats.html
+35 -23
View File
@@ -1,33 +1,45 @@
{% assign chart-type = include.chart-type | default: 'line' %}
{% assign chart-position = include.chart-position | default: 'right' %}
<div class="card card-sm">
<div class="card-body d-flex align-items-center">
{% if include.icon %}
<span class="{% if include.color %}bg-{{ include.color }} text-white{% endif %} avatar mr-3">{% include ui/icon.html icon=include.icon %}</span>
{% elsif include.person-id %}
{% include ui/avatar.html person-id=include.person-id class="mr-3 rounded" %}
{% endif %}
<div class="card-body">
<div class="row align-items-center">
{% if include.icon %}
<div class="col-auto">
<span class="{% if include.color %}bg-{{ include.color }} text-white{% endif %} avatar">{% include ui/icon.html icon=include.icon %}</span>
</div>
{% elsif include.person-id %}
<div class="col-auto">
{% include ui/avatar.html person-id=include.person-id %}
</div>
{% elsif include.chart-data and chart-position == "left" %}
<div class="col-auto">
{% include ui/chart-sparkline.html id=include.id data=include.chart-data type=chart-type color=include.color label=include.chart-label label-icon=include.chart-label-icon %}
</div>
{% endif %}
{% if include.chart-data and chart-position == "left" %}
<div class="mr-3">
{% include ui/chart-sparkline.html data=include.chart-data type=chart-type color=include.color label=include.chart-label label-icon=include.chart-label-icon %}
</div>
{% endif %}
<div class="mr-3">
<div class="font-weight-medium">
{{ include.count | default: 1700 | format_number }} {{ include.subtitle }}
{% if include.small-icon %}
{% include ui/icon.html icon=include.small-icon color=include.color class="icon-sm ml-1" %}
{% endif %}
<div class="col">
<div class="font-weight-medium">
{{ include.title | default: 1700 }}
{% if include.small-icon %}
{% include ui/icon.html icon=include.small-icon color=include.color class="icon-sm ml-1" %}
{% endif %}
{% if include.description-value %}
<span class="float-right font-weight-medium text-{{ include.description-value-color | default: 'green' }}">{{ include.description-value }}</span>
{% endif %}
</div>
<div class="text-muted">
{{ include.description | default: "Users" }}
</div>
</div>
<div class="text-muted">{{ include.description | default: "Users" }}</div>
</div>
{% if include.chart-data and chart-position=="right" %}
<div class="ml-auto">
{% include ui/chart-sparkline.html data=include.chart-data type=chart-type color=include.color label=include.chart-label label-icon=include.chart-label-icon %}
{% if include.chart-data and chart-position=="right" %}
<div class="col-auto">
{{ include.id }}
{% include ui/chart-sparkline.html id=include.id data=include.chart-data type=chart-type color=include.color label=include.chart-label label-icon=include.chart-label-icon %}
</div>
{% endif %}
</div>
{% endif %}
</div>
</div>
src/pages/_includes/layout/homepage.html
+5 -5
View File
@@ -96,19 +96,19 @@
<div class="col-md-4">
<div class="row row-cards">
<div class="col-12">
{% include cards/small-stats.html color="blue" icon="currency-dollar" count="132" subtitle="Sales" description="12 waiting payments" %}
{% include cards/small-stats.html color="blue" icon="currency-dollar" title="132 Sales" description="12 waiting payments" %}
</div>
<div class="col-12">
{% include cards/small-stats.html color="green" icon="shopping-cart" count="78" subtitle="Orders" description="32 shipped" %}
{% include cards/small-stats.html color="green" icon="shopping-cart" title="78 Orders" description="32 shipped" %}
</div>
<div class="col-12">
{% include cards/small-stats.html color="yellow" icon="users" count="1352" subtitle="Members" description="163 registered today" %}
{% include cards/small-stats.html color="yellow" icon="users" title="1352 Members" description="163 registered today" %}
</div>
<div class="col-12">
{% include cards/small-stats.html icon="brand-twitter" color="twitter" count="623" subtitle="Shares" description="16 today" %}
{% include cards/small-stats.html icon="brand-twitter" color="twitter" title="623 Shares" description="16 today" %}
</div>
<div class="col-12">
{% include cards/small-stats.html icon="brand-facebook" color="facebook" count="132" subtitle="Likes" description="21 today" %}
{% include cards/small-stats.html icon="brand-facebook" color="facebook" title="132 Likes" description="21 today" %}
</div>
</div>
</div>
src/pages/widgets.html
+17 -8
View File
@@ -37,25 +37,34 @@ libs: jquery, apexcharts
</div>
<div class="col-md-6 col-xl-3">
{% include cards/small-stats.html icon="currency-dollar" color="blue" count=132 subtitle="Sales" description="12 waiting payments" %}
{% include cards/small-stats.html id="currency" icon="currency-dollar" color="blue" title="132 Sales" description="12 waiting payments" %}
</div>
<div class="col-md-6 col-xl-3">
{% include cards/small-stats.html icon="shopping-cart" color="green" count=78 subtitle="Orders" description="32 shipped" %}
{% include cards/small-stats.html id="shopping-cart" icon="shopping-cart" color="green" title="78 Orders" description="32 shipped" %}
</div>
<div class="col-md-6 col-xl-3">
{% include cards/small-stats.html icon="user" color="red" count=1352 subtitle="Members" description="163 registered today" %}
{% include cards/small-stats.html id="user" icon="user" color="red" title="1352 Members" description="163 registered today" %}
</div>
<div class="col-md-6 col-xl-3">
{% include cards/small-stats.html icon="message" color="yellow" count=132 subtitle="Comments" description="16 waitings" %}
{% include cards/small-stats.html id="message" icon="message" color="yellow" title="132 Comments" description="16 waitings" %}
</div>
<div class="col-md-6 col-xl-3">{% include cards/small-stats.html chart-position="left" chart-type="donut" chart-data="56" color="blue" count=132 subtitle="Sales" description="12 waiting payments" %}
<div class="col-md-6 col-xl-3">{% include cards/small-stats.html id="sales" chart-position="left" chart-type="donut" chart-data="56" color="blue" title="132 Sales" description="12 waiting payments" %}
</div>
<div class="col-md-6 col-xl-3">{% include cards/small-stats.html chart-position="left" chart-type="donut" chart-data="56" color="green" count=78 subtitle="Orders" description="32 shipped" %}
<div class="col-md-6 col-xl-3">{% include cards/small-stats.html id="orders" chart-position="left" chart-type="donut" chart-data="56" color="green" title="78 Orders" description="32 shipped" %}
</div>
<div class="col-md-6 col-xl-3">{% include cards/small-stats.html chart-position="left" chart-type="donut" chart-data="56" color="red" count=1352 subtitle="Members" description="163 registered today" %}
<div class="col-md-6 col-xl-3">{% include cards/small-stats.html id="members" chart-position="left" chart-type="donut" chart-data="56" color="red" title="1352 Members" description="163 registered today" %}
</div>
<div class="col-md-6 col-xl-3">{% include cards/small-stats.html chart-position="left" chart-type="donut" chart-data="56" color="yellow" count=132 subtitle="Comments" description="16 waitings" %}
<div class="col-md-6 col-xl-3">{% include cards/small-stats.html id="comments" chart-position="left" chart-type="donut" chart-data="56" color="yellow" title="132 Comments" description="16 waitings" %}
</div>
<div class="col-md-6 col-xl-3">{% include cards/small-stats.html id="sales" icon="arrow-up" color="green-lt" title="$5,256.99" description="Revenue last 30 days" description-value="+4%" %}
</div>
<div class="col-md-6 col-xl-3">{% include cards/small-stats.html id="orders" icon="arrow-down" color="red-lt" title="342" description="Sales last 30 days" description-value="-4.3%" description-value-color="red" %}
</div>
<div class="col-md-6 col-xl-3">{% include cards/small-stats.html id="members" icon="arrow-up" color="green-lt" title="132" description="Customers last 30 days" description-value="+6.8%" %}
</div>
<div class="col-md-6 col-xl-3">{% include cards/small-stats.html id="comments" icon="arrow-down" color="red-lt" title="78" description="Members registered today" description-value="-2%" description-value-color="red" %}
</div>
<div class="col-md-6 col-lg-4">