From 7f56afc8520fcd36021e7c9696671714b3882ff8 Mon Sep 17 00:00:00 2001
From: codecalm <codecalm@gmail.com>
Date: Sat, 21 Nov 2020 17:15:14 +0100
Subject: [PATCH] snippet fixes

---
 src/pages/_includes/cards/small-stats.html | 58 +++++++++++++---------
 src/pages/_includes/layout/homepage.html   | 10 ++--
 src/pages/widgets.html                     | 25 +++++++---
 3 files changed, 57 insertions(+), 36 deletions(-)

diff --git a/src/pages/_includes/cards/small-stats.html b/src/pages/_includes/cards/small-stats.html
index cce493ed2..106be83ec 100644
--- a/src/pages/_includes/cards/small-stats.html
+++ b/src/pages/_includes/cards/small-stats.html
@@ -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>
diff --git a/src/pages/_includes/layout/homepage.html b/src/pages/_includes/layout/homepage.html
index 8b659c066..d240b1e4c 100644
--- a/src/pages/_includes/layout/homepage.html
+++ b/src/pages/_includes/layout/homepage.html
@@ -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>
diff --git a/src/pages/widgets.html b/src/pages/widgets.html
index 0c00dd8c8..f63ba18eb 100644
--- a/src/pages/widgets.html
+++ b/src/pages/widgets.html
@@ -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">