users list, fullcalendar, snippets

package.json

@@ -92,6 +92,9 @@
   "dependencies": {
     "@fullcalendar/core": "^4.3.1",
     "@fullcalendar/daygrid": "^4.3.0",
+    "@fullcalendar/interaction": "^4.3.0",
+    "@fullcalendar/list": "^4.3.0",
+    "@fullcalendar/timegrid": "^4.3.0",
     "apexcharts": "3.10.0",
     "autosize": "4.0.2",
     "bootstrap": "twbs/bootstrap#9ee9b8a",

pages/_components/progress.html

@@ -3,7 +3,7 @@ title: Progress bar
 columns: 1
 ---
 
-{% include ui/progress-description.html percentage=45 %}
-{% include ui/progress-description.html percentage=32 color="red" %}
-{% include ui/progress-description.html percentage=90 color="yellow" %}
-{% include ui/progress-description.html percentage=51 color="green" %}
+{% include ui/progress-description.html value=45 %}
+{% include ui/progress-description.html value=32 color="red" %}
+{% include ui/progress-description.html value=90 color="yellow" %}
+{% include ui/progress-description.html value=51 color="green" %}

pages/_data/libs.json

@@ -15,13 +15,18 @@
     "selectize/dist/js/selectize.min.js",
 
     "@fullcalendar/core/main.min.js",
-    "@fullcalendar/daygrid/main.min.js"
+    "@fullcalendar/daygrid/main.min.js",
+    "@fullcalendar/interaction/main.min.js",
+    "@fullcalendar/timegrid/main.min.js",
+    "@fullcalendar/list/main.min.js"
   ],
   "css": [
     "jqvmap/dist/jqvmap.min.css",
     "selectize/dist/css/selectize.css",
 
     "@fullcalendar/core/main.min.css",
-    "@fullcalendar/daygrid/main.min.css"
+    "@fullcalendar/daygrid/main.min.css",
+    "@fullcalendar/timegrid/main.min.css",
+    "@fullcalendar/list/main.min.css"
   ]
 }

pages/_data/menu.yml

 home:
   url: index.html
-  title: Home
+  title: Dashboard
   icon: home
 
 forms:
@@ -23,6 +23,16 @@ calendar:
   icon: calendar
   url: calendar.html
 
+users:
+  title: Users
+  icon: users
+  url: users.html
+
+gallery:
+  title: Gallery
+  icon: image
+  url: gallery.html
+
 layouts:
   title: Layouts
   icon: layout

pages/_docs/progress.md

@@ -14,13 +14,13 @@ To create a default progress bar, add a `.progress` class to a `<div>` element:
 ### Small progress
 
 {% example html %}
-{% include ui/progress.html percentage=57 size="sm" %}
+{% include ui/progress.html value=57 size="sm" %}
 {% endexample %}
 
 ### Progress with value
 
 {% example html %}
-{% include ui/progress.html percentage=75 show-value=true %}
+{% include ui/progress.html value=75 show-value=true %}
 {% endexample %}
 
 ### Indeterminate progress

pages/_includes/cards/charts/sales.html

@@ -11,6 +11,6 @@
          <div>Conversion rate</div>
          <div class="ml-auto">{% include ui/trending.html value=7 %}</div>
       </div>
-      {% include ui/progress.html percentage=75 color="blue" size="sm" %}
+      {% include ui/progress.html value=75 color="blue" size="sm" %}
    </div>
 </div>

pages/_includes/cards/progress-multi.html

 <div class="card">
     <div class="card-body">
-        {% include ui/progress.html color="yellow" class="mb-2" percentage=10 %}
-        {% include ui/progress.html color="red" class="mb-2" percentage=30 %}
-        {% include ui/progress.html color="green" class="mb-2" percentage=80 %}
-        {% include ui/progress.html size="xs" color="blue" percentage=70 %}
+        {% include ui/progress.html color="yellow" class="mb-2" value=10 %}
+        {% include ui/progress.html color="red" class="mb-2" value=30 %}
+        {% include ui/progress.html color="green" class="mb-2" value=80 %}
+        {% include ui/progress.html size="xs" color="blue" value=70 %}
     </div>
 </div>

pages/_includes/cards/project-kanban.html

@@ -4,7 +4,7 @@
 {% assign percentage-color = include.percentage-color | default: "green" %}
 {% assign due = include.due | default: "2 days" %}
 <div class="card">
-	{% include ui/progress.html percentage=percentage class="card-progress" color=percentage-color %}
+	{% include ui/progress.html value=percentage class="card-progress" color=percentage-color %}
 	<div class="card-body">
 		<div class="dropdown card-options">
 			<button class="btn-options" type="button" data-toggle="dropdown">

pages/_includes/cards/project-summary.html

@@ -10,5 +10,5 @@
 			{% include ui/avatar-list.html stacked=true offset=include.avatar-offset limit=include.avatar-limit %}
 		</div>
 	</div>
-	{% include ui/progress.html class="card-progress" percentage=include.percentage color=include.percentage-color %}
+	{% include ui/progress.html class="card-progress" value=include.percentage color=include.percentage-color %}
 </div>

pages/_includes/layout/homepage.html

@@ -19,17 +19,17 @@
             {% include cards/project-summary.html stage-color="red" %}
          </div>
          <div class="col-md-6">
-            {% include cards/project-summary.html title="UI Redesign" date="11 Nov 2019" stage="Final review" avatar-limit=3 avatar-offset=9 project-color="green" percentage=80 percentage-color="green" %}
+            {% include cards/project-summary.html title="UI Redesign" date="11 Nov 2019" stage="Final review" avatar-limit=3 avatar-offset=9 project-color="green" value=80 percentage-color="green" %}
          </div>
 
          <div class="col-6 col-sm-4">
-            {% include cards/small-stats-3.html number=43 title="New Tickets" percentage=6 %}
+            {% include cards/small-stats-3.html number=43 title="New Tickets" value=6 %}
          </div>
          <div class="col-6 col-sm-4">
-            {% include cards/small-stats-3.html number="$95" title="Daily Earnings" percentage=-2 %}
+            {% include cards/small-stats-3.html number="$95" title="Daily Earnings" value=-2 %}
          </div>
          <div class="col-6 col-sm-4">
-            {% include cards/small-stats-3.html number=7 title="New Replies" percentage=9 %}
+            {% include cards/small-stats-3.html number=7 title="New Replies" value=9 %}
          </div>
       </div>
    </div>

pages/_includes/layout/page-title.html

@@ -3,11 +3,11 @@
 <div class="page-title-box">
 
    <div class="row align-items-center">
-      <div class="col">
+      <div class="col-auto">
          {% if page.page-pretitle %}
          <!-- Page pre-title -->
          <div class="page-pretitle">
-            Overview
+            {{ page.page-pretitle }}
          </div>
          {% endif %}
          <h2 class="page-title">
@@ -15,13 +15,26 @@
          </h2>
       </div>
 
+      {% if page.page-title-description %}
+      <div class="col-auto">
+         <div class="text-muted text-h5">{{ page.page-title-description }}</div>
+      </div>
+      {% endif %}
+
       {% if page.page-title-actions %}
       <!-- Page title actions -->
-      <div class="col-auto">
-         <span class="d-none d-sm-inline">
-            {% include ui/button.html text="New view" color="secondary" icon="plus" %}
-         </span>
-         {% include ui/button.html text="Create new report" color="primary" class="ml-3" %}
+      <div class="col-auto ml-auto">
+         {% if page.page-title-actions == 'users' %}
+            <div class="d-flex">
+               <input type="search" class="form-control d-inline-block w-9 mr-3" placeholder="Search user&hellip;" />
+               {% include ui/button.html text="New user" color="primary" icon="plus" %}
+            </div>
+         {% else %}
+            <span class="d-none d-sm-inline">
+               {% include ui/button.html text="New view" color="secondary" icon="plus" %}
+            </span>
+            {% include ui/button.html text="Create new report" color="primary" class="ml-3" %}
+         {% endif %}
       </div>
       {% endif %}
    </div>

pages/_includes/ui/badge.html

+<span class="badge bg-{{ include.color }}">{{ include.text }}</span>

pages/_includes/ui/button.html

@@ -2,13 +2,14 @@
 {% assign spinner-class = false %}
 {% assign provider = include.provider | default: 'fe' %}
 {% if include.text %}{% assign spinner-class="mr-2" %}{% endif %}
-{% assign e = include.element | default: 'button' %}
-<{{ e }}{% if e == 'a' %} href="{{ include.href | default: '#' }}"{% endif %}{% if include.type %} type="{{ include.type }}"{% endif %} class="btn{% if include.height %} btn-{{ include.height }}{% endif %}{% if include.color %} btn-{% if include.outline %}outline-{% endif %}{{ include.color }}{% endif %}{% if include.disabled %} disabled{% endif %}{% if include.square %} btn-square{% endif %}{% if include.pill %} btn-pill{% endif %}{% if include['size'] %} btn-{{ include['size'] }}{% endif %}{% if include.class %} {{ include.class }}{% endif %}{% if include.block %} btn-block{% endif %}{% if include.link %} btn-link{% endif %}{% if include.label %} btn-label{% endif %}">
+{% assign e = include.element | default: 'a' %}
+<{{ e }}{% if e == 'a' %} href="{{ include.href | default: '#' }}"{% endif %}{% if include.type %} type="{{ include.type }}"{% endif %} class="btn{% if include.height %} btn-{{ include.height }}{% endif %}{% if include.color %} btn-{% if include.outline %}outline-{% endif %}{{ include.color }}{% endif %}{% if include.disabled %} disabled{% endif %}{% if include.square %} btn-square{% endif %}{% if include.pill %} btn-pill{% endif %}{% if include['size'] %} btn-{{ include['size'] }}{% endif %}{% if include.class %} {{ include.class }}{% endif %}{% if include.block %} btn-block{% endif %}{% if include.link %} btn-link{% endif %}{% if include.label %} btn-label{% endif %}{% if include.icon-only %} btn-icon{% endif %}">
 {% if include.spinner %}
 {% include ui/spinner.html color=false size="sm" class=spinner-class element="span" %}{% endif %}
 {% if include.icon %}{% include ui/icon.html icon=include.icon use-svg=true %}{% endif %}
+{% unless include.icon-only %}
 {{ include.text | default: "Button" }}
 {% if include.icon-right %}{% include ui/icon.html icon=include.icon-right use-svg=true right=true %}{% endif %}
-
+{% endunless %}
 </{{ e }}>
 {% endremoveemptylines %}

pages/_includes/ui/fullcalendar.html

@@ -9,8 +9,22 @@
       var calendarEl = document.getElementById('calendar-{{ calendar-id }}');
 
       window.FullCalendar && ({% if jekyll.environment == 'development' %}window.tabler_calendar["calendar-{{ calendar-id }}"] = {% endif %}new FullCalendar.Calendar(calendarEl, {
-         plugins: ['dayGrid']
-      })).render();
+		   plugins: [ 'interaction', 'dayGrid', 'timeGrid', 'list' ],
+         themeSystem: 'standard',
+
+		   header: {
+			   left: 'prev,next today',
+			   center: 'title',
+			   right: 'dayGridMonth,timeGridWeek,timeGridDay'
+		   },
+		   views: {
+			   dayGridMonth: { buttonText: 'month' },
+			   timeGridWeek: { buttonText: 'week' },
+			   timeGridDay: { buttonText: 'day' }
+		   },
+		   defaultView: 'dayGridMonth',
+
+	   })).render();
 	});
 </script>
 {% endcapture_global %}

pages/_includes/ui/progress-description.html

 {% assign size = include['size'] | default: 'sm' %}
 {% assign color = include.color | default: 'blue' %}
 
-<div class="{% if include.class %}{{ include.class }}{% else %}mb-3{% endif %}">
-   <div class="d-flex mb-1 align-items-center">
-      <div class="text-h5 font-weight-bolder m-0 mr-2">Label</div>
-      <div class="text-h5 text-muted">Description</div>
-      <span class="ml-auto text-h6 text-{{ color }}">{{ include.percentage }}%</span>
+<div{% if include.class %} class="{{ include.class }}"{% endif %}>
+   <div class="d-flex mb-1 align-items-center leading-none">
+      <div class="text-h5 font-weight-bolder m-0">{{ include.label | default: 'Label' }}</div>
+      {% if include.description %}
+         <div class="text-h6 text-muted ml-2">{{ include.description }}</div>
+      {% endif %}
+      <span class="ml-auto text-h6">{{ include.value }}%</span>
    </div>
-   {% include ui/progress.html size=size percentage=include.percentage color=color %}
+   {% include ui/progress.html size=size value=include.value color=color %}
 </div>

pages/_includes/ui/progress.html

-{% assign percentage = include.percentage | default: 38 %}
+{% assign percentage = include.value | default: 38 %}
 {% assign colors = include.colors | default: 'blue,red,green,yellow,dark' | split: ',' %}
 <div class="progress{% if include['size'] %} progress-{{ include['size'] }}{% endif %}{% if include.class %} {{ include.class }}{% endif %}">
    {% if include.indeterminate %}
-   <div class="progress-bar progress-bar-indeterminate"></div>
+      <div class="progress-bar progress-bar-indeterminate"></div>
    {% elsif include.values  %}
-   {% assign values = include.values | split: ',' %}
-   {% for value in values %}
-   <div class="progress-bar bg-{{ colors[forloop.index0] }}" style="width: {{ value }}%" role="progressbar" aria-valuenow="{{ value }}" aria-valuemin="0" aria-valuemax="100"></div>
-   {% endfor %}
+      {% assign values = include.values | split: ',' %}
+      {% for value in values %}
+         <div class="progress-bar bg-{{ colors[forloop.index0] }}" style="width: {{ value }}%" role="progressbar" aria-valuenow="{{ value }}" aria-valuemin="0" aria-valuemax="100"></div>
+      {% endfor %}
    {% else %}
-   <div class="progress-bar{% if include.color %} bg-{{ include.color }}{% endif %}" style="width: {{ percentage }}%" role="progressbar" aria-valuenow="{{ percentage }}" aria-valuemin="0" aria-valuemax="100">
-      {% if include.show-value %}
-      {{ percentage }}%
-      {% else %}
-      <span class="sr-only">{{ percentage }}% Complete</span>
-      {% endif %}
-   </div>
+      <div class="progress-bar{% if include.color %} bg-{{ include.color }}{% endif %}" style="width: {{ percentage }}%" role="progressbar" aria-valuenow="{{ percentage }}" aria-valuemin="0" aria-valuemax="100">
+         {% if include.show-value %}
+            {{ percentage }}%
+         {% else %}
+            <span class="sr-only">{{ percentage }}% Complete</span>
+         {% endif %}
+      </div>
    {% endif %}
 </div>

pages/gallery.html

 ---
 title: Gallery
 page-title: Gallery
+page-title-description: 1-12 of 241 photos
 done: true
+menu: gallery
 ---
 {% assign horizontal = 0 %}
 
@@ -12,10 +14,10 @@ done: true
 	<div class="col-sm-6 col-lg-4">
 		<div class="card p-3">
 			<a href="#" class="mb-4"><img src="{{ site.base }}/img/photos/{{photo.file}}" class="rounded"></a>
-			<div class="d-flex align-items-center">
+			<div class="d-flex align-items-center leading-none">
 				{% include ui/avatar.html person=person class="mr-3" %}
 				<div>
-					<h5 class="m-0">{{ person.full_name }}</h5>
+					<div>{{ person.full_name }}</div>
 					<small class="text-muted">{{ forloop.index | random_date_ago: 10 | timeago }}</small>
 				</div>
 				<div class="ml-auto">
@@ -39,3 +41,7 @@ done: true
 	{% endif %}
 	{% endfor %}
 </div>
+
+<div class="d-flex">
+   {% include parts/pagination.html class="ml-auto" %}
+</div>

pages/snippets.html

@@ -56,8 +56,8 @@ page-title-right: date
 		{% include cards/_full.html %}
 	</div>
 	<div class="col-md-6 col-lg-4">
-		{% include cards/project-kanban.html title="Tabler UI" badge="v1.0" percentage=30 percentage-color="red" limit=4 offset=0 due="72 days" %}
-		{% include cards/project-kanban.html title="Tabler React" percentage=80 offset=20 %}
+		{% include cards/project-kanban.html title="Tabler UI" badge="v1.0" value=30 percentage-color="red" limit=4 offset=0 due="72 days" %}
+		{% include cards/project-kanban.html title="Tabler React" value=80 offset=20 %}
 		{% include cards/_full-2.html %}
 	</div>
 </div>

pages/users-list.html

----
-layout: default
-title: Users list
-page-title: Users
-done: true
----
-
-<div class="row">
-   <div class="col-lg-4">
-      <form class="card">
-         <div class="card-body">
-            <div class="mb-2">
-               <div class="form-label">Filter</div>
-               <input type="text" class="form-control"/>
-            </div>
-            <div class="mb-2">
-               <div class="form-label">Calendar</div>
-               <input type="text" class="form-control"/>
-            </div>
-            <div class="mb-2">
-               <div class="form-label">Group</div>
-               <div class="selectgroup w-100">
-                  <label class="selectgroup-item">
-                     <input type="radio" name="value" value="s" class="selectgroup-input" checked>
-                     <span class="selectgroup-button">S</span>
-                  </label>
-                  <label class="selectgroup-item">
-                     <input type="radio" name="value" value="m" class="selectgroup-input">
-                     <span class="selectgroup-button">M</span>
-                  </label>
-
-                  <label class="selectgroup-item">
-                     <input type="radio" name="value" value="l" class="selectgroup-input">
-                     <span class="selectgroup-button">L</span>
-                  </label>
-                  <label class="selectgroup-item">
-                     <input type="radio" name="value" value="xl" class="selectgroup-input">
-                     <span class="selectgroup-button">XL</span>
-                  </label>
-               </div>
-            </div>
-            <div class="mb-2">
-               <div class="form-label">Country</div>
-               <select class="form-select">
-                  <option value="">United States</option>
-               </select>
-            </div>
-         </div>
-
-         <div class="card-footer text-right">
-            <button type="submit" class="btn btn-primary">Search</button>
-         </div>
-      </form>
-   </div>
-   <div class="col-lg-8">
-      <div class="card">
-         <table class="table card-table table-vcenter">
-            <tr>
-               <th class="w-1p"></th>
-               <th class="w-1p"></th>
-               <th>Name</th>
-               <th class="d-none d-sm-table-cell">Date</th>
-               <th class="d-none d-md-table-cell">Amount</th>
-            </tr>
-            {% for user in site.data.people limit: 20 offset: 40 %}
-            <tr>
-               <th>
-                  <label class="custom-control custom-checkbox">
-                     <input type="checkbox" class="custom-control-input" name="" value="">
-                     <div class="custom-control-label"></div>
-                  </label>
-               </th>
-               <td><span class="avatar d-block rounded" style="background-image: url({{ user.photo }})"></span></td>
-               <td>{{ user.first_name }} {{user.last_name }}</td>
-               <td class="d-none d-sm-table-cell">{{ user.birth_date | date: '%B %d, %Y' }}</td>
-               <td class="d-none d-md-table-cell">${{ forloop.index | random_number: 500, 2000, 2 }}</td>
-            </tr>
-            {% endfor %}
-         </table>
-      </div>
-
-      {% include parts/pagination.html %}
-   </div>
-</div>

pages/users.html

+---
+layout: default
+title: Users list
+page-title: Users
+page-title-actions: users
+page-title-description: 1-18 of 413 people
+done: true
+menu: users
+---
+
+<div class="row">
+   {% for person in site.data.people limit: 18 %}
+   {% assign progress = forloop.index | random_number: 4, 95 %}
+   {% assign online_counter = forloop.index | random_number: 1, 10 %}
+   <div class="col-md-6 col-lg-4">
+      <div class="card">
+         <div class="card-body">
+            <div class="row row-sm align-items-center">
+               <div class="col-auto">
+                  {% include ui/avatar.html person=person size="md" %}
+               </div>
+               <div class="col">
+                  <h3 class="mb-0"><a href="#">{{ person.full_name }}</a></h3>
+                  <div class="text-muted text-h5">{{ person.job_title }}</div>
+               </div>
+               {% comment %}
+               <div class="col-auto">
+                  <!-- todo: better buttons -->
+                  {% include ui/button.html color="twitter" icon="brand/twitter" icon-only=true outline=true %}
+                  {% include ui/button.html color="facebook" icon="brand/facebook" icon-only=true outline=true %}
+               </div>
+               {% endcomment %}
+
+               {% if online_counter > 7 %}
+                  <div class="col-auto leading-none align-self-start">
+                     {% include ui/badge.html text="online" color="green-lt" %}
+                  </div>
+               {% elsif online_counter > 5 %}
+               <div class="col-auto leading-none align-self-start">
+                  {% include ui/badge.html text="offline" color="gray-lt" %}
+               </div>
+               {% endif %}
+            </div>
+            <div class="row align-items-center mt-4">
+               <div class="col">
+                  {% include ui/progress-description.html value=progress size="sm" label="Progress" %}
+               </div>
+               <div class="col-auto">
+                  <div class="btn-list">
+                     {% include ui/button.html text="Chat" color="secondary" size="sm" %}
+                     {% include ui/button.html text="Profile" color="secondary" size="sm" %}
+                  </div>
+               </div>
+            </div>
+         </div>
+      </div>
+   </div>
+   {% endfor %}
+</div>
+
+<div class="d-flex">
+   {% include parts/pagination.html class="ml-auto" %}
+</div>

scss/ui/_buttons.scss

@@ -50,6 +50,12 @@
   border-radius: 10rem;
 }
 
+.btn-icon {
+  .icon {
+    margin: 0 -.5em;
+  }
+}
+
 // stylelint-disable declaration-no-important
 .btn-link {
   box-shadow: none !important;
@@ -82,6 +88,10 @@
     .btn-#{$vendor} {
       @include button-variant($color, $color);
     }
+
+    .btn-outline-#{$vendor} {
+      @include button-outline-variant($color, $color);
+    }
   }
 
 }