diff --git a/package.json b/package.json index fa11fdd4154caae34a9c3f164346ad39f372f31a..48c2f5d4692466556b447f32e3201510e0e3fb6b 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 7359ad82e0b7f1770c61e10cf1e7db6ed9b93f05..bbcae1f942ab739c1fc3a82e8c9a4d0be773aab9 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 4e0746cd528203b37413d8bd3b6ac9949548c105..899d3e094f26b6d71bb3f564f027c9871fddba44 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 a584c39c0c49e0ec555625e9d8edb9bb53856a15..7a8051b4e65343d348c01ec2861e4714f83b9502 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 c795ac88c501917ef17a8056dee61f08b3711195..9f32dc4c9db2554c770399e40998e66633858bfc 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 fba63825ce0e8b2b4208e816ee46a165f0c178df..07301d02a412a243dd21d8f13a79c9337ae35482 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 e77716ef516e8eb787a908fa2c0c82b4d2c4c86e..bd700c544e37c6422063b13a25a2adb7bde8b426 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 d268ff8a52568fa65638fe28b67ce7d9e0924cac..d7e92e0f37539ed65ff6c9990cd660805f4479bd 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 7c5670502b39a2c9bbacbe1071bfc8777ebe84f4..be62dbe1157dfeafeba0ecfe6b1844774a3e7fba 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 a7c4b23a49c7c5da45b1df0e7a429ad66d7e752d..c839622bab353a8f8dac18af15f3d24de7a6c99c 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 0000000000000000000000000000000000000000..cf8f1d02d85a9fc59ed17a57323501fb427ded62 --- /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 30d325aa951c5b4d980ede70cd3d55a83ecf4b4a..37979e8bf2a9a938c24b4e55095941cf0c20b15b 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 081e0b145bbdb157d97650f23bfb15537963aa08..8bc9a2926e1b086b5d731c19b70c8070090f9020 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 bdd0f06d06a7e6bf38b39ea57aa4a8e1ff512bda..6acfe5fe79966f7768d4d0b906a6b4d7be321ccb 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 a1d7d0b685e108e88002bc1f17d7e385125a25a0..7604cecdee8b0803a7392a5917b6e4b0abc85bb7 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 d8687b222c7405d8c55ddd352f4f843996464313..237a77048dcc0307dfc66e1cd6a5def9586f9e6a 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 1eb0cff78096608b2c6f5654a15df4d421989c8c..bfd5c0856495571b3b9bf6c1de1184ceea4cd4f6 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 194b01a6c6c27ba2edd21417e3c0e351544ae552..0000000000000000000000000000000000000000 --- 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 0000000000000000000000000000000000000000..c1690db9130b7e021ad7dfa3ef5d310d0ee0b312 --- /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 62fe229867c3adc8f25421cb8dd451e74e7883a3..ebfa35a0612b1548b5e0a84ae0b3f4ffd8f69e6e 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 68d735a2f2d58e9196e62fd5b781c3e9a03ef04c..3db499bbfd17924da26a7dc0757602970baf63fb 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 3cde6401a680aa43d383fda63e48678f0a73cd82..47410b9947acbdbe9922c203245e5772a54d7f15 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 47130b73548d594e25db90ea84bd09759f48eb4b..e8700f911ad61e0b12b357bababccff9af6e4060 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 bb14b9432b2e2cb19899872f8e3a74fb6dbd847c..256f35f6d2f65d45eaf188c89c0bf2b46a460d4d 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 e9e8d6372326c1358039032d12383ffad0595281..97ae0c31c6e233f5555616f085b8388b10fd1470 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 8124c47e8e4ef23ddfd6061dde381b54cf0b4934..1ceb3fb7f4c7bec68b64d91013139f12bf49e744 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 a8815c75355af793127e0828bf2df0f3958cfdbb..f5effe31b4ae340bc75ccc775e8300da2ee8afea 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 255508ed3d8e7e0d99a66a1a2b9708089aa11381..699c1b3dbae310a3c01286af9c2444dd9d76c552 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 8a8685f49eb8c3110b718f96283b7094e7b7dfdb..ab5e246ba34887eca4198abfa9f12fffbb2e6823 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 93f804b87d1d06b195cde73fe71b2fa71c212da3..cb7e23ee90c4f9e4ad43be9b1b827f6ef6d23c1e 100644 Binary files a/static/img/photos/8fdeb4785d2b82ef.jpg and b/static/img/photos/8fdeb4785d2b82ef.jpg differ