From b061e1710871a0715b452bdcc052bcff7bf757eb Mon Sep 17 00:00:00 2001
From: codecalm <codecalm@gmail.com>
Date: Wed, 20 Apr 2022 22:38:33 +0200
Subject: [PATCH] small ui improvements

---
 .gitignore                                    |  3 +-
 src/pages/_includes/cards/sign-in.html        |  2 +-
 src/pages/_includes/cards/small-stats.html    |  1 -
 .../_includes/parts/charts/activity.html      | 38 ++++++++++++++++++
 .../_includes/parts/form/input-color.html     |  4 ++
 .../parts/form/input-image-people.html        |  6 ++-
 src/pages/charts.html                         | 39 +------------------
 7 files changed, 50 insertions(+), 43 deletions(-)
 create mode 100644 src/pages/_includes/parts/charts/activity.html

diff --git a/.gitignore b/.gitignore
index 4ae8b14f2..4b905ee11 100644
--- a/.gitignore
+++ b/.gitignore
@@ -21,4 +21,5 @@ node_modules/
 /svg-tmp/
 /components/
 /percy.sh
-/src/pages/playground.html
\ No newline at end of file
+/src/pages/playground.html
+/src/pages/features.html
\ No newline at end of file
diff --git a/src/pages/_includes/cards/sign-in.html b/src/pages/_includes/cards/sign-in.html
index b13d22a12..be53c6d91 100644
--- a/src/pages/_includes/cards/sign-in.html
+++ b/src/pages/_includes/cards/sign-in.html
@@ -4,7 +4,7 @@
 
 		<div class="mb-3">
 			<label class="form-label">Email address</label>
-			<input type="email" class="form-control" placeholder="Enter email">
+			<input type="email" class="form-control" placeholder="Enter email" autocomplete="off">
 		</div>
 		<div class="mb-2">
 			<label class="form-label">
diff --git a/src/pages/_includes/cards/small-stats.html b/src/pages/_includes/cards/small-stats.html
index a7d15e552..9c2f72e36 100644
--- a/src/pages/_includes/cards/small-stats.html
+++ b/src/pages/_includes/cards/small-stats.html
@@ -36,7 +36,6 @@
 
 			{% 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 %}
diff --git a/src/pages/_includes/parts/charts/activity.html b/src/pages/_includes/parts/charts/activity.html
new file mode 100644
index 000000000..66c332720
--- /dev/null
+++ b/src/pages/_includes/parts/charts/activity.html
@@ -0,0 +1,38 @@
+<div class="card">
+	<div class="card-body">
+		<div class="d-flex">
+			<h3 class="card-title">Active users</h3>
+			<div class="ms-auto">
+				{% include parts/dropdown/days.html %}
+			</div>
+		</div>
+
+		<div class="row">
+			<div class="col">
+				{% include ui/chart.html chart-id="active-users-2" %}
+			</div>
+			<div class="col-md-auto">
+				<div class="divide-y divide-y-fill">
+					<div class="px-3">
+						<div class="text-muted">
+							<span class="status-dot bg-primary"></span> Mobile
+						</div>
+						<div class="h2">11,425</div>
+					</div>
+					<div class="px-3">
+						<div class="text-muted">
+							<span class="status-dot bg-azure"></span> Desktop
+						</div>
+						<div class="h2">6,458</div>
+					</div>
+					<div class="px-3">
+						<div class="text-muted">
+							<span class="status-dot bg-green"></span> Tablet
+						</div>
+						<div class="h2">3,985</div>
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
+</div>
\ No newline at end of file
diff --git a/src/pages/_includes/parts/form/input-color.html b/src/pages/_includes/parts/form/input-color.html
index 0dd91f4a8..c11df2778 100644
--- a/src/pages/_includes/parts/form/input-color.html
+++ b/src/pages/_includes/parts/form/input-color.html
@@ -1,4 +1,8 @@
+{% assign colors = '' | split: ',' %}
+{% unless include.hide-black-white %}
 {% assign colors = 'dark,white' | split: ',' %}
+{% endunless %}
+
 {% for color in site.colors limit: 9 %}
 {% assign colors = colors | push: color[0] %}
 {% endfor %}
diff --git a/src/pages/_includes/parts/form/input-image-people.html b/src/pages/_includes/parts/form/input-image-people.html
index 8497ef50c..fcd64b932 100644
--- a/src/pages/_includes/parts/form/input-image-people.html
+++ b/src/pages/_includes/parts/form/input-image-people.html
@@ -1,14 +1,16 @@
 {% assign limit = include.limit | default: 9 %}
+{% assign offset = include.offset | default: 8 %}
+{% assign avatar-size = include.avatar-size | default: "md" %}
 <div class="mb-3">
 	<label class="form-label">Person Check</label>
 	<div class="row g-2">
-		{% for person in site.data.people limit: limit offset: 8 %}
+		{% for person in site.data.people limit: limit offset: offset %}
 		<div class="col-auto">
 			<label class="form-imagecheck mb-2">
 				<input name="form-imagecheck" type="checkbox" value="{{ forloop.index }}" class="form-imagecheck-input" {% if forloop.index == 2 or forloop.index == 4  or forloop.index == 7 %} checked{% endif %}/>
 				<span class="form-imagecheck-figure">
 					<span class="form-imagecheck-image">
-						{% include ui/avatar.html size="md" person=person %}
+						{% include ui/avatar.html size=avatar-size person=person %}
 					</span>
 				</span>
 			</label>
diff --git a/src/pages/charts.html b/src/pages/charts.html
index a464188a6..e61547bd0 100644
--- a/src/pages/charts.html
+++ b/src/pages/charts.html
@@ -7,44 +7,7 @@ libs: apexcharts
 
 <div class="row row-cards">
 	<div class="col-6">
-		<div class="card">
-			<div class="card-body">
-				<div class="d-flex">
-					<h3 class="card-title">Active users</h3>
-					<div class="ms-auto">
-						{% include parts/dropdown/days.html %}
-					</div>
-				</div>
-
-				<div class="row">
-					<div class="col">
-						{% include ui/chart.html chart-id="active-users-2" %}
-					</div>
-					<div class="col-md-auto">
-						<div class="divide-y divide-y-fill">
-							<div class="px-3">
-								<div class="text-muted">
-									<span class="status-dot bg-primary"></span> Mobile
-								</div>
-								<div class="h2">11,425</div>
-							</div>
-							<div class="px-3">
-								<div class="text-muted">
-									<span class="status-dot bg-azure"></span> Desktop
-								</div>
-								<div class="h2">6,458</div>
-							</div>
-							<div class="px-3">
-								<div class="text-muted">
-									<span class="status-dot bg-green"></span> Tablet
-								</div>
-								<div class="h2">3,985</div>
-							</div>
-						</div>
-					</div>
-				</div>
-			</div>
-		</div>
+		{% include parts/charts/activity.html %}
 	</div>
 
 	<div class="col-4">