homepage activity

src/pages/_data/activity.yml

@@ -0,0 +1,18 @@
+- text: "%p commented on your <strong>\"I'm not a witch.\"</strong> post."
+- text: "It's <strong>%p</strong>'s birthday. Wish him well!"
+- text: "%p posted <strong>\"Well, what do you want?\"</strong>."
+- text: "%p created a new project <strong>Morning alarm clock</strong>."
+- text: "%p liked your photo."
+- text: "%p registered new client as <strong>%c</strong>."
+- text: "%p closed a new deal on project <strong>Pen Pineapple Apple Pen</strong>."
+- text: "%p created a new project for <strong>%c</strong>."
+- text: "%p change status of <strong>Tabler Icons</strong> from <strong>open</strong> to <strong>closed</strong>."
+- text: "%p liked <strong>Tabler UI Kit</strong>."
+- text: "%p posted new video."
+- text: "%p and 3 others followed you."
+- text: "%p upload 3 new photos to category <strong>Inspirations</strong>."
+- text: "%p made a <strong>$10</strong> donation."
+- text: "%p created a profile."
+- text: "%p hosted the event <strong>Tabler UI Birthday</strong>."
+- text: "%p mentioned you on <strong>Best of 2020</strong>."
+- text: "%p sent a Review Request to <strong>Amanda Blake</strong>."

src/pages/_includes/cards/activity.html

@@ -0,0 +1,5 @@
+<div class="card" style="height: calc(24rem + 10px)">
+	<div class="card-body card-body-scrollable card-body-scrollable-shadow">
+		{% include parts/activity.html %}
+	</div>
+</div>

src/pages/_includes/layout/homepage.html

@@ -89,19 +89,32 @@
 		{% include cards/development-activity.html %}
 	</div>
 
-	<div class="col-sm-6 col-xl-3">
-		{% include cards/small-stats.html color="blue" icon="currency-dollar" count="132" subtitle="Sales" description="12 waiting payments" %}
+	<div class="col-md-8">
+		{% include cards/activity.html %}
 	</div>
-	<div class="col-sm-6 col-xl-3">
-		{% include cards/small-stats.html color="green" icon="shopping-cart" count="78" subtitle="Orders" description="32 shipped" %}
-	</div>
-	<div class="col-sm-6 col-xl-3">
-		{% include cards/small-stats.html chart-position="left" chart-type="pie" chart-data="56/100" chart-label="56%" color="red" count="1352" subtitle="Members" description="163 registered today" %}
-	</div>
-	<div class="col-sm-6 col-xl-3">
-		{% include cards/small-stats.html color="yellow" chart-type="pie" chart-data="22/100" color="yellow" count="132" subtitle="Comments" description="16 waiting" %}
+
+	<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" %}
+			</div>
+			<div class="col-12">
+				{% include cards/small-stats.html color="green" icon="shopping-cart" count="78" subtitle="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" %}
+			</div>
+			<div class="col-12">
+				{% include cards/small-stats.html icon="brand-twitter" color="twitter" count="623" subtitle="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" %}
+			</div>
+		</div>
 	</div>
 
+
+
 	<div class="col-md-12 col-lg-8">
 		{% include cards/most-visited-pages.html %}
 	</div>

src/pages/_includes/parts/activity.html

@@ -0,0 +1,24 @@
+{% assign limit = include.limit | default: false %}
+<div class="divide-y-4">
+	{% for item in site.data.activity limit:limit %}
+	{% assign person = site.data.people[forloop.index] %}
+		<div>
+			<div class="row">
+				<div class="col-auto">
+					{% include ui/avatar.html person=person %}
+				</div>
+				<div class="col">
+					<div class="text-truncate">
+						{{ item.text | replace: '%p', person.full_name | replace: '%c', person.company }}
+					</div>
+					<div class="text-muted">2 days ago</div>
+				</div>
+				{% if forloop.index < 5 %}
+				<div class="col-auto align-self-center">
+					<div class="badge bg-primary"></div>
+				</div>
+				{% endif %}
+			</div>
+		</div>
+	{% endfor %}
+</div>

src/pages/activity.html

@@ -0,0 +1,21 @@
+---
+title: Activity
+page-header: Activity
+---
+
+<div class="row">
+	<div class="col-6">
+		<div class="card">
+			<div class="card-body">
+				{% include parts/activity.html %}
+			</div>
+		</div>
+	</div>
+	<div class="col-6">
+		<div class="card">
+			<div class="card-body">
+
+			</div>
+		</div>
+	</div>
+</div>

src/scss/_variables.scss

@@ -216,9 +216,8 @@ $spacers: (
   1: $spacer / 4,
   2: $spacer / 2,
   3: $spacer,
-  4: $spacer * 1.5,
-  5: $spacer * 3,
-  6: $spacer * 4.5
+  4: $spacer * 2,
+  5: $spacer * 4,
 ) !default;
 
 $negative-spacers: if($enable-negative-margins, negativify-map($spacers), null) !default;

src/scss/ui/_grid.scss

@@ -1,3 +1,7 @@
+.row > * {
+  min-width: 0;
+}
+
 .col-separator {
   border-left: 1px solid $border-color;
 }