new tasks dashboard (#1062)

src/pages/_data/menu.yml

@@ -155,10 +155,13 @@ extra:
     music:
       title: Music
       url: music.html
+    tasks:
+      title: Tasks
+      url: tasks.html
+      badge: New
     uptime:
       title: Uptime monitor
       url: uptime.html
-      badge: New
     widgets:
       title: Widgets
       url: widgets.html

src/pages/_data/tasks-list.yml

@@ -0,0 +1,13 @@
+- name: Extend the data model.
+  checked: true
+- name: Verify the event flow.
+  checked: false
+- name: Database backup and maintenance
+  checked: false
+- name: Identify the implementation team.
+  checked: true
+- name: Define users and workflow
+  checked: false
+- name: Check Pull Requests
+  checked: true
+

src/pages/_data/tasks.yml

@@ -1,13 +1,83 @@
-- name: Extend the data model.
-  checked: true
-- name: Verify the event flow.
-  checked: false
-- name: Database backup and maintenance
-  checked: false
-- name: Identify the implementation team.
-  checked: true
-- name: Define users and workflow
-  checked: false
-- name: Check Pull Requests
-  checked: true
-
+columns:
+  - name: To Do
+    tasks:
+      - name: Enable analytics tracking
+        users: 4
+        users-offset: 6
+        comments: 2
+        image: static/projects/dashboard-1.png
+        likes: 7
+      - name: User should receive a daily digest email
+        description: Dedicated form for a category of users that will perform actions.
+        users: 1
+        users-offset: 4
+        due-date: 10 Sep
+        likes: 6
+      - name: Change license and remove references to products
+        color: yellow
+        favorite: true
+        comments: 4
+        likes: 34
+  - name: In Progress
+    tasks:
+      - name: Write a release note for Admin v1.0
+        color: green
+        comments: 11
+        subtasks:
+          - name: Implement new designs
+            done: true
+          - name: Usability testing
+          - name: Design navigation changes
+      - name: Product Update - Q4 2021
+        description: Dedicated form for a category of users that will perform actions.
+        starred: true
+        users: 2
+        users-offset: 7
+        comments: 6
+        likes: 11
+      - name: Code HTML email template for welcome email
+        image: static/projects/dashboard-3.png
+        comments: 11
+  - name: Test
+    tasks:
+      - name: Design new diagrams
+        color: red
+        users: 2
+        users-offset: 9
+        comments: 9
+        likes: 6
+      - name: Improve animation loader
+        favorite: true
+        likes: 5
+        users: 1
+        users-offset: 11
+        comments: 6
+        image: static/projects/dashboard-2.png
+      - name: iOS App home page
+        users: 2
+        users-offset: 2
+      - name: Changelog 1.7
+        color: blue
+        due-date: 10 Jan
+        comments: 6
+  - name: Completed
+    tasks:
+      - name: Enable analytics tracking
+        users: 1
+        users-offset: 7
+        likes: 1
+      - name: Coordinate with business development
+        description: This content is a little bit longer.
+        favorite: true
+        likes: 7
+        users: 5
+        subtasks:
+          - name: Find out the old contract documents
+            done: true
+          - name: Organize meeting sales associates to understand need in detail
+          - name: Make sure to cover every small details
+      - name: Managing teams
+        description: Publishing industries for previewing layouts and visual <a href="#">#family</a> 🔥
+        users: 2
+        likes: 4
+        users-offset: 10

src/pages/_includes/cards/tasks.html

@@ -4,7 +4,7 @@ <h3 class="card-title">Tasks</h3>
 	</div>
 	<div class="table-responsive">
 		<table class="table card-table table-vcenter">
-			{% for task in site.data.tasks %}
+			{% for task in site.data.tasks-list %}
 			<tr>
 				<td class="w-1 pe-0">
 					<input type="checkbox" class="form-check-input m-0 align-middle" aria-label="Select task"{% if task.checked %} checked{% endif %} >

src/pages/_includes/layout/header-actions/add-board.html

@@ -0,0 +1 @@
+{% include ui/button.html color="primary" icon="plus" text="Add board" %}

src/pages/_includes/parts/tasks.html

@@ -0,0 +1,100 @@
+{% assign data = include.data | default: site.data.tasks %}
+
+<div class="row{% if include.class %} {{ include.class }}{% endif %}">
+	{% for column in data.columns %}
+	<div class="col-12 col-md-6 col-lg">
+		<h2 class="mb-3">{{ column.name }}</h2>
+
+		<div class="mb-4">
+			<div class="row row-cards">
+				{% for task in column.tasks %}
+				<div class="col-12">
+					<div class="card card-sm">
+						{% if task.color %}
+						<div class="card-status-top bg-{{ task.color }}"></div>
+						{% endif %}
+
+						{% if task.starred %}
+						<div class="ribbon ribbon-top ribbon-bookmark bg-yellow">
+							{% include ui/icon.html icon="star" %}
+						</div>
+						{% endif %}
+
+						<div class="card-body">
+							<h3 class="card-title">{{ task.name }}</h3>
+
+							{% if task.description %}
+							<div class="text-muted">{{ task.description }}</div>
+							{% endif %}
+
+							{% if task.image %}
+							<div class="ratio ratio-16x9">
+								<img src="{{ site.base }}/{{ task.image }}" class="rounded object-cover" alt="{{ task.name }}">
+							</div>
+							{% endif %}
+
+							<div class="mt-4">
+								<div class="row">
+									<div class="col">
+										{% if task.users %}
+										{% include ui/avatar-list.html limit=task.users offset=task.users-offset stacked=true size="xs" %}
+										{% endif %}
+									</div>
+
+									{% if task.due-date %}
+									<div class="col-auto">
+										<a href="#" class="link-warning">
+											{% include ui/icon.html icon="calendar" %}
+											{{ task.due-date }}
+										</a>
+									</div>
+									{% endif %}
+
+									<div class="col-auto text-muted">
+										{% include ui/switch-icon.html icon="heart" icon-b-color="red" variant="scale" active=task.favorite %}
+										{% if task.likes %}{{ task.likes }}{% endif %}
+									</div>
+
+									{% if task.subtasks %}
+									<div class="col-auto">
+										<a href="#" class="link-muted">
+											{% include ui/icon.html icon="activity" %}
+											1/{{ task.subtasks.size }}
+										</a>
+									</div>
+									{% endif %}
+									{% if task.comments %}
+									<div class="col-auto">
+										<a href="#" class="link-muted">{% include ui/icon.html icon="message" %} {{ task.comments }}</a>
+									</div>
+									{% endif %}
+									<div class="col-auto">
+										<a href="#" class="link-muted">{% include ui/icon.html icon="share" %}</a>
+									</div>
+								</div>
+							</div>
+
+							{% if task.subtasks %}
+							<div class="divide-y-2 mt-4">
+								{% for subtask in task.subtasks %}
+								<div>
+									{% if subtask.done %}
+									{% include ui/icon.html icon="check" color="muted" %}
+									<span class="text-muted text-decoration-line-through">{{ subtask.name }}</span>
+									{% else %}
+									{% include ui/icon.html icon="check" color="green" %}
+									{{ subtask.name }}
+									{% endif %}
+								</div>
+								{% endfor %}
+							</div>
+							{% endif %}
+						</div>
+					</div>
+				</div>
+				{% endfor %}
+			</div>
+		</div>
+	</div>
+	{% endfor %}
+</div>

src/pages/_includes/ui/switch-icon.html

@@ -9,7 +9,7 @@
 	{% assign icon-b-class = include.icon-b-class %}
 {% endif %}
 
-<button class="switch-icon{% if include.variant %} switch-icon-{{ include.variant }}{% endif %}" data-bs-toggle="switch-icon">
+<button class="switch-icon{% if include.variant %} switch-icon-{{ include.variant }}{% endif %}{% if include.active %} active{% endif %}" data-bs-toggle="switch-icon">
 	<span class="switch-icon-a text-{{ icon-a-color }}">
 		{% include ui/icon.html icon=icon %}
 	</span>

src/pages/tasks.html

@@ -0,0 +1,21 @@
+---
+title: Tasks
+page-header: Tabler Inc. Tasks
+page-header-actions: add-board
+menu: extra.tasks
+---
+
+<ul class="nav nav-bordered mb-4">
+	<li class="nav-item">
+		<a class="nav-link active" aria-current="page" href="#">View all</a>
+	</li>
+	<li class="nav-item">
+		<a class="nav-link" href="#">Marketing</a>
+	</li>
+	<li class="nav-item">
+		<a class="nav-link" href="#">Development</a>
+	</li>
+</ul>
+
+
+{% include parts/tasks.html %}

src/scss/_variables.scss

@@ -215,7 +215,7 @@ $code-line-height: 1.25rem !default;
 // Avatars
 $avatar-size: 2.5rem !default;
 $avatar-sizes: (
-  "xs": 1.25rem,
+  "xs": 1.5rem,
   "sm": 2rem,
   "md": 3.75rem,
   "lg": 5rem,

src/scss/ui/_cards.scss

@@ -325,7 +325,7 @@
   }
 
   .card-sm > & {
-    padding: .75rem;
+    padding: 1rem;
   }
 
   .card-md > & {

src/scss/ui/_icons.scss

@@ -24,6 +24,12 @@
   fill: currentColor;
 }
 
+.icon-sm {
+  width: 1rem;
+  height: 1rem;
+  stroke-width: 1;
+}
+
 .icon-md {
   width: 2.5rem;
   height: 2.5rem;

src/scss/ui/_nav.scss

@@ -39,6 +39,7 @@
     margin: 0 0 (- $nav-bordered-border-width );
     border: 0;
     border-bottom: $nav-bordered-link-active-border-width solid transparent;
+    color: $text-muted;
   }
 
   .nav-link.active,

src/scss/ui/_switch-icon.scss

@@ -6,6 +6,7 @@
   background: transparent;
   width: $icon-size;
   height: $icon-size;
+  vertical-align: bottom;
   position: relative;
   cursor: pointer;