feat: add new statistics cards to widgets page and update card styles

preview/pages/widgets.html

@@ -8,6 +8,19 @@ permalink: widgets.html
 ---
 
 <div class="row row-cards">
+	<div class="col-12 col-md-6 col-xxl-3 mb-4 mb-xxl-0">
+		{% include "cards/stat-card.html" title="Earned" value="$2,847" icon="credit-card" %}
+	</div>
+	<div class="col-12 col-md-6 col-xxl-3 mb-4 mb-xxl-0">
+		{% include "cards/stat-card.html" title="Hours logged" value="42.7 hrs" icon="clock" %}
+	</div>
+	<div class="col-12 col-md-6 col-xxl-3 mb-4 mb-md-0">
+		{% include "cards/stat-card.html" title="Avg. time" value="3:28 hrs" icon="slideshow" %}
+	</div>
+	<div class="col-12 col-md-6 col-xxl-3">
+		{% include "cards/stat-card.html" title="Weekly growth" value="18.4%" icon="discount" %}
+	</div>
+
 	<div class="col-lg-6">
 		{% include "cards/project-progress.html" %}
 	</div>
@@ -39,46 +52,64 @@ permalink: widgets.html
 	</div>
 
 	<div class="col-md-6 col-xl-3">
-		{% include "cards/small-stats.html" id="currency" icon="currency-dollar" color="primary" title="132 Sales" description="12 waiting payments" %}
+		{% include "cards/small-stats.html" id="currency" icon="currency-dollar" color="primary" title="132 Sales"
+		description="12 waiting payments" %}
 	</div>
 	<div class="col-md-6 col-xl-3">
-		{% include "cards/small-stats.html" id="shopping-cart" icon="shopping-cart" color="green" title="78 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" id="user" icon="user" color="red" title="1352 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" id="message" icon="message" color="yellow" title="132 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" id="sales" chart-position="left" chart-type="donut" chart-data="56" color="primary" title="132 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="primary" title="132 Sales" description="12 waiting payments" %}
 	</div>
-	<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 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" id="members" chart-position="left" chart-type="donut" chart-data="56" color="red" title="1352 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" id="comments" chart-position="left" chart-type="donut" chart-data="56" color="yellow" title="132 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=true title="$5,256.99" description="Revenue last 30 days" description-value="+4%" %}
+	<div class="col-md-6 col-xl-3">{% include "cards/small-stats.html" id="sales" icon="arrow-up" color="green" lt=true
+		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=true title="342" description="Sales last 30 days" description-value="-4.3%" description-value-color="red" %}
+	<div class="col-md-6 col-xl-3">{% include "cards/small-stats.html" id="orders" icon="arrow-down" color="red" lt=true
+		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=true title="132" description="Customers last 30 days" description-value="+6.8%"  %}
+	<div class="col-md-6 col-xl-3">{% include "cards/small-stats.html" id="members" icon="arrow-up" color="green" lt=true
+		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=true title="78" description="Members registered today" description-value="-2%" description-value-color="red" %}
+	<div class="col-md-6 col-xl-3">{% include "cards/small-stats.html" id="comments" icon="arrow-down" color="red"
+		lt=true title="78" description="Members registered today" description-value="-2%" description-value-color="red" %}
 	</div>
 
 	<div class="col-md-6 col-lg-4">
 		<div class="row row-cards">
-			<div class="col-12">{% include "cards/small-stats.html" chart-type="line" chart-data="20,0,40,30,40,30,80,60" %}</div>
+			<div class="col-12">{% include "cards/small-stats.html" chart-type="line" chart-data="20,0,40,30,40,30,80,60"
-			<div class="col-12">{% include "cards/small-stats.html" chart-type="bar" chart-data="20,40,30,10,40,60,80,70" color="red" icon="heart" %}</div>
+				%}</div>
-			<div class="col-12">{% include "cards/small-stats.html" chart-type="bar" chart-data="20,40,20,-10,-30,10,40,60,80,70" color="green" icon="brand-github" %}</div>
+			<div class="col-12">{% include "cards/small-stats.html" chart-type="bar" chart-data="20,40,30,10,40,60,80,70"
-			<div class="col-12">{% include "cards/small-stats.html" chart-type="donut" chart-data="12" person-id=10 %}</div>
+				color="red" icon="heart" %}</div>
-			<div class="col-12">{% include "cards/small-stats.html" chart-type="donut" chart-data="12" person-id=11 %}</div>
+			<div class="col-12">{% include "cards/small-stats.html" chart-type="bar"
+				chart-data="20,40,20,-10,-30,10,40,60,80,70" color="green" icon="brand-github" %}</div>
+			<div class="col-12">{% include "cards/small-stats.html" chart-type="donut" chart-data="12" person-id=10 %}
+			</div>
+			<div class="col-12">{% include "cards/small-stats.html" chart-type="donut" chart-data="12" person-id=11 %}
+			</div>
 			<div class="col-12">{% include "cards/small-stats.html" chart-type="donut" chart-data="56" person-id=1 %}</div>
 			<div class="col-12">{% include "cards/small-stats.html" color="green" person-id=4 %}</div>
-			<div class="col-12">{% include "cards/small-stats.html" small-icon="trending-down" color="red" person-id=3 %}</div>
+			<div class="col-12">{% include "cards/small-stats.html" small-icon="trending-down" color="red" person-id=3 %}
+			</div>
 			<div class="col-12">{% include "cards/code.html" %}</div>
 		</div>
 	</div>
@@ -89,10 +120,11 @@ permalink: widgets.html
 	</div>
 	<div class="col-md-6 col-lg-4">
 		<div class="row row-cards">
-			<div class="col-12">{% include "cards/project-kanban.html" title="Tabler UI" badge="v1.0" value=30 percentage-color="red" limit=4 offset=0 due="72 days" %}</div>
+			<div class="col-12">{% include "cards/project-kanban.html" title="Tabler UI" badge="v1.0" value=30
+				percentage-color="red" limit=4 offset=0 due="72 days" %}</div>
 			<div class="col-12">{% include "cards/project-kanban.html" title="Tabler React" value=80 offset=20 %}</div>
 			<div class="col-12">{% include "cards/user-info.html" %}</div>
 			<div class="col-12">{% include "cards/configuration.html" %}</div>
 		</div>
 	</div>
-</div>
+</div>

shared/includes/cards/code.html

@@ -3,7 +3,7 @@
 		<h3 class="card-title">Card with code</h3>
 	</div>
 	<div class="card-code">
-{% highlight scss %}
+{% highlight css %}
 .card-footer {
 	background: transparent;
 

shared/includes/cards/configuration.html

@@ -18,7 +18,7 @@
 			<dd class="col-7">tabler</dd>
 
 			<dt class="col-5">Location:</dt>
-			<dd class="col-7">{% include "ui/flag.html" flag="pl" %} Poland</dd>
+			<dd class="col-7">{% include "ui/flag.html" flag="pl" size="xxs" %} Poland</dd>
 
 			<dt class="col-5">IP Address:</dt>
 			<dd class="col-7">46.113.11.3</dd>

shared/includes/cards/stat-card.html

@@ -0,0 +1,17 @@
+{% assign title = include.title | default: "Title" %}
+{% assign value = include.value | default: "" %}
+{% assign icon = include.icon | default: "user" %}
+<div class="card">
+	<div class="card-body">
+		<div class="row align-items-center">
+			<div class="col">
+				<h4 class="subheader mb-1">{{ title }}</h4>
+				<div class="h3 m-0">{{ value }}</div>
+			</div>
+			<div class="col-auto">
+				{% include "ui/avatar.html" icon=icon size="lg" %}
+			</div>
+		</div>
+	</div>
+</div>
+