diff --git a/package.json b/package.json index 256d122e5..91458d422 100644 --- a/package.json +++ b/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", diff --git a/pages/_components/progress.html b/pages/_components/progress.html index 7359ad82e..bbcae1f94 100644 --- a/pages/_components/progress.html +++ b/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" %} diff --git a/pages/_data/libs.json b/pages/_data/libs.json index 4e0746cd5..899d3e094 100644 --- a/pages/_data/libs.json +++ b/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" ] } diff --git a/pages/_data/menu.yml b/pages/_data/menu.yml index a584c39c0..7a8051b4e 100644 --- a/pages/_data/menu.yml +++ b/pages/_data/menu.yml @@ -1,6 +1,6 @@ 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 diff --git a/pages/_docs/progress.md b/pages/_docs/progress.md index c795ac88c..9f32dc4c9 100644 --- a/pages/_docs/progress.md +++ b/pages/_docs/progress.md @@ -14,13 +14,13 @@ To create a default progress bar, add a `.progress` class to a `
` 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 diff --git a/pages/_includes/cards/charts/sales.html b/pages/_includes/cards/charts/sales.html index fba63825c..07301d02a 100644 --- a/pages/_includes/cards/charts/sales.html +++ b/pages/_includes/cards/charts/sales.html @@ -11,6 +11,6 @@
Conversion rate
{% include ui/trending.html value=7 %}
- {% include ui/progress.html percentage=75 color="blue" size="sm" %} + {% include ui/progress.html value=75 color="blue" size="sm" %} diff --git a/pages/_includes/cards/progress-multi.html b/pages/_includes/cards/progress-multi.html index e77716ef5..bd700c544 100644 --- a/pages/_includes/cards/progress-multi.html +++ b/pages/_includes/cards/progress-multi.html @@ -1,8 +1,8 @@
- {% 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 %}
diff --git a/pages/_includes/cards/project-kanban.html b/pages/_includes/cards/project-kanban.html index d268ff8a5..d7e92e0f3 100644 --- a/pages/_includes/cards/project-kanban.html +++ b/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" %}
- {% include ui/progress.html percentage=percentage class="card-progress" color=percentage-color %} + {% include ui/progress.html value=percentage class="card-progress" color=percentage-color %}
- {% 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 %}
diff --git a/pages/_includes/layout/homepage.html b/pages/_includes/layout/homepage.html index 7c5670502..be62dbe11 100644 --- a/pages/_includes/layout/homepage.html +++ b/pages/_includes/layout/homepage.html @@ -19,17 +19,17 @@ {% include cards/project-summary.html stage-color="red" %}
- {% 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" %}
- {% 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 %}
- {% 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 %}
- {% 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 %}
diff --git a/pages/_includes/layout/page-title.html b/pages/_includes/layout/page-title.html index a7c4b23a4..c839622ba 100644 --- a/pages/_includes/layout/page-title.html +++ b/pages/_includes/layout/page-title.html @@ -3,11 +3,11 @@
-
+
{% if page.page-pretitle %}
- Overview + {{ page.page-pretitle }}
{% endif %}

@@ -15,13 +15,26 @@

+ {% if page.page-title-description %} +
+
{{ page.page-title-description }}
+
+ {% endif %} + {% if page.page-title-actions %} -
- - {% include ui/button.html text="New view" color="secondary" icon="plus" %} - - {% include ui/button.html text="Create new report" color="primary" class="ml-3" %} +
+ {% if page.page-title-actions == 'users' %} +
+ + {% include ui/button.html text="New user" color="primary" icon="plus" %} +
+ {% else %} + + {% include ui/button.html text="New view" color="secondary" icon="plus" %} + + {% include ui/button.html text="Create new report" color="primary" class="ml-3" %} + {% endif %}
{% endif %}
diff --git a/pages/_includes/ui/badge.html b/pages/_includes/ui/badge.html new file mode 100644 index 000000000..cf8f1d02d --- /dev/null +++ b/pages/_includes/ui/badge.html @@ -0,0 +1 @@ +{{ include.text }} diff --git a/pages/_includes/ui/button.html b/pages/_includes/ui/button.html index 30d325aa9..37979e8bf 100644 --- a/pages/_includes/ui/button.html +++ b/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 %} {% endremoveemptylines %} diff --git a/pages/_includes/ui/fullcalendar.html b/pages/_includes/ui/fullcalendar.html index 081e0b145..8bc9a2926 100644 --- a/pages/_includes/ui/fullcalendar.html +++ b/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(); }); {% endcapture_global %} diff --git a/pages/_includes/ui/progress-description.html b/pages/_includes/ui/progress-description.html index bdd0f06d0..6acfe5fe7 100644 --- a/pages/_includes/ui/progress-description.html +++ b/pages/_includes/ui/progress-description.html @@ -1,11 +1,13 @@ {% assign size = include['size'] | default: 'sm' %} {% assign color = include.color | default: 'blue' %} -
-
-
Label
-
Description
- {{ include.percentage }}% + +
+
{{ include.label | default: 'Label' }}
+ {% if include.description %} +
{{ include.description }}
+ {% endif %} + {{ include.value }}%
- {% include ui/progress.html size=size percentage=include.percentage color=color %} + {% include ui/progress.html size=size value=include.value color=color %}
diff --git a/pages/_includes/ui/progress.html b/pages/_includes/ui/progress.html index a1d7d0b68..7604cecde 100644 --- a/pages/_includes/ui/progress.html +++ b/pages/_includes/ui/progress.html @@ -1,20 +1,20 @@ -{% assign percentage = include.percentage | default: 38 %} +{% assign percentage = include.value | default: 38 %} {% assign colors = include.colors | default: 'blue,red,green,yellow,dark' | split: ',' %}
{% if include.indeterminate %} -
+
{% elsif include.values %} - {% assign values = include.values | split: ',' %} - {% for value in values %} -
- {% endfor %} + {% assign values = include.values | split: ',' %} + {% for value in values %} +
+ {% endfor %} {% else %} -
- {% if include.show-value %} - {{ percentage }}% - {% else %} - {{ percentage }}% Complete - {% endif %} -
+
+ {% if include.show-value %} + {{ percentage }}% + {% else %} + {{ percentage }}% Complete + {% endif %} +
{% endif %}
diff --git a/pages/gallery.html b/pages/gallery.html index d8687b222..237a77048 100644 --- a/pages/gallery.html +++ b/pages/gallery.html @@ -1,7 +1,9 @@ --- 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
-
+
{% include ui/avatar.html person=person class="mr-3" %}
-
{{ person.full_name }}
+
{{ person.full_name }}
{{ forloop.index | random_date_ago: 10 | timeago }}
@@ -39,3 +41,7 @@ done: true {% endif %} {% endfor %}
+ +
+ {% include parts/pagination.html class="ml-auto" %} +
diff --git a/pages/snippets.html b/pages/snippets.html index 1eb0cff78..bfd5c0856 100644 --- a/pages/snippets.html +++ b/pages/snippets.html @@ -56,8 +56,8 @@ page-title-right: date {% include cards/_full.html %}
- {% 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 %}
diff --git a/pages/users-list.html b/pages/users-list.html deleted file mode 100644 index 194b01a6c..000000000 --- a/pages/users-list.html +++ /dev/null @@ -1,84 +0,0 @@ ---- -layout: default -title: Users list -page-title: Users -done: true ---- - -
-
-
-
-
-
Filter
- -
-
-
Calendar
- -
-
-
Group
-
- - - - - -
-
-
-
Country
- -
-
- -
- -
-
-
-
-
- - - - - - - - - {% for user in site.data.people limit: 20 offset: 40 %} - - - - - - - - {% endfor %} -
NameDateAmount
- - {{ user.first_name }} {{user.last_name }}{{ user.birth_date | date: '%B %d, %Y' }}${{ forloop.index | random_number: 500, 2000, 2 }}
-
- - {% include parts/pagination.html %} -
-
diff --git a/pages/users.html b/pages/users.html new file mode 100644 index 000000000..c1690db91 --- /dev/null +++ b/pages/users.html @@ -0,0 +1,63 @@ +--- +layout: default +title: Users list +page-title: Users +page-title-actions: users +page-title-description: 1-18 of 413 people +done: true +menu: users +--- + +
+ {% 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 %} +
+
+
+
+
+ {% include ui/avatar.html person=person size="md" %} +
+
+

{{ person.full_name }}

+
{{ person.job_title }}
+
+ {% comment %} +
+ + {% 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 %} +
+ {% endcomment %} + + {% if online_counter > 7 %} +
+ {% include ui/badge.html text="online" color="green-lt" %} +
+ {% elsif online_counter > 5 %} +
+ {% include ui/badge.html text="offline" color="gray-lt" %} +
+ {% endif %} +
+
+
+ {% include ui/progress-description.html value=progress size="sm" label="Progress" %} +
+
+
+ {% include ui/button.html text="Chat" color="secondary" size="sm" %} + {% include ui/button.html text="Profile" color="secondary" size="sm" %} +
+
+
+
+
+
+ {% endfor %} +
+ +
+ {% include parts/pagination.html class="ml-auto" %} +
diff --git a/scss/ui/_buttons.scss b/scss/ui/_buttons.scss index 62fe22986..ebfa35a06 100644 --- a/scss/ui/_buttons.scss +++ b/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); + } } } diff --git a/static/img/photos/1b73704b282a8ec6.jpg b/static/img/photos/1b73704b282a8ec6.jpg index 68d735a2f..3db499bbf 100644 Binary files a/static/img/photos/1b73704b282a8ec6.jpg and b/static/img/photos/1b73704b282a8ec6.jpg differ diff --git a/static/img/photos/35b88fc04a518c1b.jpg b/static/img/photos/35b88fc04a518c1b.jpg index 3cde6401a..47410b994 100644 Binary files a/static/img/photos/35b88fc04a518c1b.jpg and b/static/img/photos/35b88fc04a518c1b.jpg differ diff --git a/static/img/photos/36e273986ed577b8.jpg b/static/img/photos/36e273986ed577b8.jpg index 47130b735..e8700f911 100644 Binary files a/static/img/photos/36e273986ed577b8.jpg and b/static/img/photos/36e273986ed577b8.jpg differ diff --git a/static/img/photos/3d2998219313cd37.jpg b/static/img/photos/3d2998219313cd37.jpg index bb14b9432..256f35f6d 100644 Binary files a/static/img/photos/3d2998219313cd37.jpg and b/static/img/photos/3d2998219313cd37.jpg differ diff --git a/static/img/photos/546fd146c83f428c.jpg b/static/img/photos/546fd146c83f428c.jpg index e9e8d6372..97ae0c31c 100644 Binary files a/static/img/photos/546fd146c83f428c.jpg and b/static/img/photos/546fd146c83f428c.jpg differ diff --git a/static/img/photos/6ab3200b14549f8a.jpg b/static/img/photos/6ab3200b14549f8a.jpg index 8124c47e8..1ceb3fb7f 100644 Binary files a/static/img/photos/6ab3200b14549f8a.jpg and b/static/img/photos/6ab3200b14549f8a.jpg differ diff --git a/static/img/photos/6d35d9a2bd6c63c2.jpg b/static/img/photos/6d35d9a2bd6c63c2.jpg index a8815c753..f5effe31b 100644 Binary files a/static/img/photos/6d35d9a2bd6c63c2.jpg and b/static/img/photos/6d35d9a2bd6c63c2.jpg differ diff --git a/static/img/photos/75b555b99d5b38c4.jpg b/static/img/photos/75b555b99d5b38c4.jpg index 255508ed3..699c1b3db 100644 Binary files a/static/img/photos/75b555b99d5b38c4.jpg and b/static/img/photos/75b555b99d5b38c4.jpg differ diff --git a/static/img/photos/8a26974ee6444acd.jpg b/static/img/photos/8a26974ee6444acd.jpg index 8a8685f49..ab5e246ba 100644 Binary files a/static/img/photos/8a26974ee6444acd.jpg and b/static/img/photos/8a26974ee6444acd.jpg differ diff --git a/static/img/photos/8fdeb4785d2b82ef.jpg b/static/img/photos/8fdeb4785d2b82ef.jpg index 93f804b87..cb7e23ee9 100644 Binary files a/static/img/photos/8fdeb4785d2b82ef.jpg and b/static/img/photos/8fdeb4785d2b82ef.jpg differ