diff --git a/_config.yml b/_config.yml index 5ab49963d..2b81433b1 100644 --- a/_config.yml +++ b/_config.yml @@ -6,7 +6,7 @@ title: Tabler description: Premium and Open Source dashboard template with responsive and high quality UI. github_url: https://github.com/tabler/tabler -debug: true +debug: false plugins: - jekyll-random @@ -50,21 +50,22 @@ collections: defaults: - scope: - type: pages + type: "pages" values: layout: default - nav-position: top + menu-layout: horizontal - scope: - type: docs + type: "docs" values: layout: docs - nav-position: top + menu-layout: horizontal - scope: - type: components + type: "components" values: layout: component + menu-layout: horizontal colors: diff --git a/pages/_data/docs.yml b/pages/_data/docs.yml index 8c59bc250..e69de29bb 100644 --- a/pages/_data/docs.yml +++ b/pages/_data/docs.yml @@ -1,28 +0,0 @@ -- page: index -- page: alerts -- page: autosize -- page: avatars -- page: badges -- page: breadcrumb -- page: buttons -- page: cards -- page: carousel -- page: colors -- page: cursors -- page: charts -- page: divider -- page: empty -- page: flags -- page: form-elements -- page: form-helpers -- page: input-mask -- page: progress -- page: ribbons -- page: spinners -- page: steps -- page: tables -- page: tabs -- page: timelines -- page: toasts -- page: tooltips -- page: typography diff --git a/pages/_data/layouts.yml b/pages/_data/layouts.yml index b04b6fda9..7f00b22a7 100644 --- a/pages/_data/layouts.yml +++ b/pages/_data/layouts.yml @@ -1,24 +1,3 @@ - name: sidebar-left title: Left sidebar - url: layout-navbar-left.html -- name: sidebar-right - title: Right sidebar - url: layout-navbar-right.html -- name: sidebar-dark - title: Dark sidebar - url: layout-navbar-dark.html -- name: sidebar-folded - title: Folded sidebar - url: layout-navbar-folded.html -- name: navbar-top - title: Navbar top - url: layout-navbar-top.html -- name: header-dark - title: Dark header - url: layout-header-dark.html -- name: header-sticky - title: Sticky header - url: layout-header-sticky.html -- name: dark-mode - title: Dark mode - url: layout-dark-mode.html + url: layout-test.html diff --git a/pages/_data/menu.yml b/pages/_data/menu.yml index f527075ed..b7be0e589 100644 --- a/pages/_data/menu.yml +++ b/pages/_data/menu.yml @@ -2,11 +2,15 @@ home: url: index.html title: Dashboard icon: home + badge: '' + badge-color: blue forms: url: form-elements.html title: Form elements icon: check-square + badge: New + badge-color: red base: title: Base @@ -15,42 +19,134 @@ base: buttons: url: buttons.html title: Buttons + badge: New cards: url: cards.html title: Cards - c: - url: c.html - title: C + calendar: + title: Calendar + icon: calendar + url: calendar.html + users: + title: Users + icon: users + url: users.html + gallery: + title: Gallery + icon: image + url: gallery.html charts: url: charts.html title: Charts icon: pie-chart -calendar: - title: 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 url: layouts.html +extra: + title: Extra + icon: star + children: + invoice: + icon: file + title: Invoice + url: invoice.html + docs: title: Documentation icon: file-text url: docs/index.html + children: + index: + title: index + url: docs/index.html + alerts: + title: Alerts + url: docs/alerts.html + autosize: + title: Autosize + url: docs/autosize.html + avatars: + title: Avatars + url: docs/avatars.html + badges: + title: Badges + url: docs/badges.html + breadcrumb: + title: Breadcrumb + url: docs/breadcrumb.html + buttons: + title: Buttons + url: docs/buttons.html + cards: + title: Cards + url: docs/cards.html + carousel: + title: Carousel + url: docs/carousel.html + colors: + title: Colors + url: docs/colors.html + cursors: + title: Cursors + url: docs/cursors.html + charts: + title: Charts + url: docs/charts.html + divider: + title: Divider + url: docs/divider.html + empty: + title: Empty states + url: docs/empty.html + flags: + title: Flags + url: docs/flags.html + form-elements: + title: Form elements + url: docs/form-elements.html + form-helpers: + title: Form helpers + url: docs/form-helpers.html + input-mask: + title: Form input mask + url: docs/input-mask.html + progress: + title: Progress + url: docs/progress.html + ribbons: + title: Ribbons + badge: New + url: docs/ribbons.html + spinners: + title: Spinners + url: docs/spinners.html + steps: + title: Steps + url: docs/steps.html + tables: + title: Tables + url: docs/tables.html + tabs: + title: Tabs + url: docs/tabs.html + timelines: + title: Timelines + url: docs/timelines.html + toasts: + title: Toasts + url: docs/toasts.html + tooltips: + title: Tooltips + url: docs/tooltips.html + typography: + title: Typography + url: docs/typography.html + #changelog: # url: changelog.html diff --git a/pages/_docs/alerts.md b/pages/_docs/alerts.md index ffd5c22fc..ba21e10d0 100644 --- a/pages/_docs/alerts.md +++ b/pages/_docs/alerts.md @@ -2,7 +2,7 @@ title: Alerts menu: docs.alerts description: Bootstrap provides an easy way to create predefined alert messages. -bootstrap-link: https://getbootstrap.com/docs/4.4/components/alerts/ +bootstrap-link: components/alerts/ done: true --- diff --git a/pages/_docs/badges.md b/pages/_docs/badges.md index a2de1cde4..e4249c72e 100644 --- a/pages/_docs/badges.md +++ b/pages/_docs/badges.md @@ -2,7 +2,7 @@ title: Badges menu: docs.badges description: A small count and labeling component. -bootstrap-link: https://getbootstrap.com/docs/4.4/components/badge/ +bootstrap-link: components/badge/ done: true --- diff --git a/pages/_docs/breadcrumb.md b/pages/_docs/breadcrumb.md index 3e9403344..bf42d6eff 100644 --- a/pages/_docs/breadcrumb.md +++ b/pages/_docs/breadcrumb.md @@ -2,7 +2,7 @@ title: Breadcrumb menu: docs.breadcrumb description: Indicate the current page’s location within a navigational hierarchy that automatically adds separators via CSS. -bootstrap-link: https://getbootstrap.com/docs/4.4/components/breadcrumb/ +bootstrap-link: components/breadcrumb/ done: true --- diff --git a/pages/_docs/buttons.md b/pages/_docs/buttons.md index aac1663a2..108ff918f 100644 --- a/pages/_docs/buttons.md +++ b/pages/_docs/buttons.md @@ -2,7 +2,7 @@ title: Buttons icon: fe fe-plus-square description: Use Bootstrap’s custom button styles for actions in forms, dialogs, and more. Includes support for a handful of contextual variations, sizes, states, and more. -bootstrap-link: https://getbootstrap.com/docs/4.4/components/buttons/ +bootstrap-link: components/buttons/ done: true --- diff --git a/pages/_docs/cards.md b/pages/_docs/cards.md index b54220fb1..0e2810d7c 100644 --- a/pages/_docs/cards.md +++ b/pages/_docs/cards.md @@ -2,7 +2,7 @@ title: Cards menu: docs.cards description: A card is a flexible and extensible content container. It includes options for headers and footers, a wide variety of content, contextual background colors, and powerful display options. -bootstrap-link: https://getbootstrap.com/docs/4.4/components/card/ +bootstrap-link: components/card/ done: true --- diff --git a/pages/_docs/carousel.md b/pages/_docs/carousel.md index 92a31e2b2..a2a711603 100644 --- a/pages/_docs/carousel.md +++ b/pages/_docs/carousel.md @@ -2,7 +2,7 @@ title: Carousel menu: docs.carousel description: The Carousel is a slideshow for cycling through elements. -bootstrap-link: https://getbootstrap.com/docs/4.4/components/carousel/ +bootstrap-link: components/carousel/ --- {% example html columns=1 %} diff --git a/pages/_docs/colors.md b/pages/_docs/colors.md index 50666443a..a0e3f63cd 100644 --- a/pages/_docs/colors.md +++ b/pages/_docs/colors.md @@ -2,7 +2,7 @@ title: Colors menu: docs.colors description: -bootstrap-link: https://getbootstrap.com/docs/4.4/utilities/colors/ +bootstrap-link: utilities/colors/ done: true --- diff --git a/pages/_docs/divider.md b/pages/_docs/divider.md index e4ff409dc..046f01478 100644 --- a/pages/_docs/divider.md +++ b/pages/_docs/divider.md @@ -1,7 +1,7 @@ --- title: Divider description: A divider visually segments content into groups -bootstrap-link: https://getbootstrap.com/docs/4.4/components/dropdowns/#dividers +bootstrap-link: components/dropdowns/#dividers done: true --- ### Default markup diff --git a/pages/_docs/form-elements.md b/pages/_docs/form-elements.md index 28528d0bd..e939c5483 100644 --- a/pages/_docs/form-elements.md +++ b/pages/_docs/form-elements.md @@ -1,6 +1,6 @@ --- title: Form Elements -bootstrap-link: https://getbootstrap.com/docs/4.4/components/forms/ +bootstrap-link: components/forms/ --- ### Classic Input diff --git a/pages/_docs/progress.md b/pages/_docs/progress.md index 6d686f468..5ad170245 100644 --- a/pages/_docs/progress.md +++ b/pages/_docs/progress.md @@ -1,7 +1,8 @@ --- title: Progress description: A progress bar can be used to show a user how far along he is in a process. -bootstrap-link: https://getbootstrap.com/docs/4.4/components/progress/ +bootstrap-link: components/progress/ +done: true --- ### Default markup @@ -49,5 +50,8 @@ You can also use native HTML5 `` element. Customize the color of the progress bar. You can click [here]({% docs_url colors %}) to see the list of available colors. {% example %} -{% include ui/progress.html size="sm" color="purple"%} +{% include ui/progress.html size="sm" color="red" class="mb-2" value=24 %} +{% include ui/progress.html size="sm" color="green" class="mb-2" value=45 %} +{% include ui/progress.html size="sm" color="purple" class="mb-2" value=64 %} +{% include ui/progress.html size="sm" color="pink" %} {% endexample %} diff --git a/pages/_docs/ribbons.md b/pages/_docs/ribbons.md index 5067c3ae5..ab1b4e68e 100644 --- a/pages/_docs/ribbons.md +++ b/pages/_docs/ribbons.md @@ -1,7 +1,7 @@ --- title: Ribbons menu: docs.ribbons -new: true +done: true --- ### Default markup @@ -14,10 +14,10 @@ new: true You can easily change the position of a ribbon by adding a class to the element. - `ribbon-top` - moves it to the top - `ribbon-right` - moves it to the right - `ribbon-bottom` - moves it to the bottom - `ribbon-left` - moves it to the lefg +- `ribbon-top` - moves it to the top +- `ribbon-right` - moves it to the right +- `ribbon-bottom` - moves it to the bottom +- `ribbon-left` - moves it to the lefg You can also use multiple classes at once for example: `.ribbon.ribbon-top.ribbon-left` moves the ribbon to the top left corner. diff --git a/pages/_docs/spinners.md b/pages/_docs/spinners.md index 1f1c3eeb7..4f216ba7b 100644 --- a/pages/_docs/spinners.md +++ b/pages/_docs/spinners.md @@ -1,7 +1,7 @@ --- title: Spinners menu: docs.spinners -bootstrap-link: https://getbootstrap.com/docs/4.4/components/spinners/ +bootstrap-link: components/spinners/ done: true --- diff --git a/pages/_docs/tables.md b/pages/_docs/tables.md index 7a5de303f..e9e51c5fa 100644 --- a/pages/_docs/tables.md +++ b/pages/_docs/tables.md @@ -1,7 +1,7 @@ --- title: Tables menu: docs.tables -bootstrap-link: https://getbootstrap.com/docs/4.4/content/tables/ +bootstrap-link: content/tables/ --- ### Basic Table diff --git a/pages/_docs/tabs.md b/pages/_docs/tabs.md index aaf25c643..fe5a82de2 100644 --- a/pages/_docs/tabs.md +++ b/pages/_docs/tabs.md @@ -1,7 +1,7 @@ --- title: Tabs menu: docs.tabs -bootstrap-link: https://getbootstrap.com/docs/4.4/components/navs/ +bootstrap-link: components/navs/ --- ### Default markup diff --git a/pages/_docs/toasts.md b/pages/_docs/toasts.md index 6587b1395..1e5598f6b 100644 --- a/pages/_docs/toasts.md +++ b/pages/_docs/toasts.md @@ -2,7 +2,7 @@ title: Toasts menu: docs.toasts description: The toast component is like an alert box that is only shown for a couple of seconds when something happens (i.e. when the user clicks on a button, submits a form, etc.). -bootstrap-link: https://getbootstrap.com/docs/4.4/components/toasts/ +bootstrap-link: components/toasts/ --- diff --git a/pages/_docs/tooltips.md b/pages/_docs/tooltips.md index beee0b2ea..f61b6aabb 100644 --- a/pages/_docs/tooltips.md +++ b/pages/_docs/tooltips.md @@ -2,7 +2,7 @@ title: Tooltips menu: docs.tooltips description: The Tooltip component is small pop-up box that appears when the user moves the mouse pointer over an element. -bootstrap-link: https://getbootstrap.com/docs/4.4/components/tooltips/ +bootstrap-link: components/tooltips/ --- ### Default markup diff --git a/pages/_docs/typography.md b/pages/_docs/typography.md index d0aab89d3..93e0d9140 100644 --- a/pages/_docs/typography.md +++ b/pages/_docs/typography.md @@ -2,7 +2,7 @@ title: Typography menu: docs.typography description: Documentation and examples for common text utilities to control alignment, wrapping, weight, and more. -bootstrap-link: https://getbootstrap.com/docs/4.4/content/typography/ +bootstrap-link: content/typography/ --- ### Headings diff --git a/pages/_includes/layout/customize.html b/pages/_includes/layout/customize.html index 598863aa2..e69de29bb 100644 --- a/pages/_includes/layout/customize.html +++ b/pages/_includes/layout/customize.html @@ -1,40 +0,0 @@ -
-
- - {% include_cached ui/input-selectgroup.html name="color-scheme" values="light,dark" type="radio" class="w-100p" %} -
-
- - {% include_cached ui/input-selectgroup.html name="nav-position" values="top,side" type="radio" class="w-100p" %} -
-
- - {% include_cached ui/input-selectgroup.html name="header-color" values="light,dark" type="radio" class="w-100p" %} -
- - - - -
- - {% include_cached ui/input-selectgroup.html name="sidebar-position" values="left,right" type="radio" class="w-100p" %} -
-
- - {% include_cached ui/input-selectgroup.html name="sidebar-size" values="default,folded" type="radio" class="w-100p" %} -
-
- - {% include_cached ui/input-selectgroup.html name="sidebar-color" values="light,dark" type="radio" class="w-100p" %} -
-
- - {% include_cached ui/input-selectgroup.html name="sidebar-fixed" values="fixed,default" type="radio" class="w-100p" %} -
- - - - - - -
diff --git a/pages/_includes/layout/debug.html b/pages/_includes/layout/debug.html index a9a0e97df..fcb9d7c74 100644 --- a/pages/_includes/layout/debug.html +++ b/pages/_includes/layout/debug.html @@ -1,161 +1,163 @@
- Dark mode - RTL mode - Show cards code - Folded sidebar - Fullscreen - Sticky header - All pages + Dark mode + RTL mode + Show cards code + Folded sidebar + Fullscreen + Sticky header + All pages -
Jekyll {{ jekyll.version }}
+
Jekyll {{ jekyll.version }}
diff --git a/pages/_includes/layout/menu-aside.html b/pages/_includes/layout/menu-aside.html new file mode 100644 index 000000000..1a8084e63 --- /dev/null +++ b/pages/_includes/layout/menu-aside.html @@ -0,0 +1,44 @@ +{% assign current-page = page.menu | default: layout.menu | split: '.' %} + + \ No newline at end of file diff --git a/pages/_includes/layout/menu.html b/pages/_includes/layout/menu.html index bf699d48f..4e23a51c4 100644 --- a/pages/_includes/layout/menu.html +++ b/pages/_includes/layout/menu.html @@ -1,12 +1,10 @@ -{% removeemptylines %} +{% assign current-page = page.menu | default: layout.menu | split: '.' %} + + + \ No newline at end of file diff --git a/pages/_includes/layout/navbar-search.html b/pages/_includes/layout/navbar-search.html new file mode 100644 index 000000000..b4f6f74c9 --- /dev/null +++ b/pages/_includes/layout/navbar-search.html @@ -0,0 +1,5 @@ + diff --git a/pages/_includes/layout/navbar.html b/pages/_includes/layout/navbar.html new file mode 100644 index 000000000..7625e7b04 --- /dev/null +++ b/pages/_includes/layout/navbar.html @@ -0,0 +1,47 @@ +{% assign person-id = include.person-id | default: 12 | minus: 1 %} +{% assign person = site.data.people[person-id] %} + +{% if include.menu-layout != 'vertical' %} + {% include_cached layout/navbar-logo.html class="mr-4" %} +{% endif %} + +{% include_cached layout/navbar-search.html %} + + diff --git a/pages/_includes/layout/page-title-actions.html b/pages/_includes/layout/page-title-actions.html new file mode 100644 index 000000000..20b098390 --- /dev/null +++ b/pages/_includes/layout/page-title-actions.html @@ -0,0 +1,24 @@ +{% assign actions = include.actions %} + + +
+ {% if actions == 'users' %} +
+ + {% include_cached ui/button.html text="New user" color="primary" icon="plus" %} +
+ {% elsif actions == 'calendar' %} +
+ {% include_cached ui/button.html text="Add event" color="primary" icon="plus" %} +
+ {% elsif actions == 'breadcrumb' %} +
+ {% include_cached ui/breadcrumb.html class="breadcrumb-alternate" %} +
+ {% elsif actions == 'buttons' %} + + {% include_cached ui/button.html text="New view" color="secondary" icon="plus" %} + + {% include_cached ui/button.html text="Create new report" color="primary" class="ml-3" %} + {% endif %} +
\ No newline at end of file diff --git a/pages/_includes/layout/page-title.html b/pages/_includes/layout/page-title.html index 296c0f1fc..6f14567fb 100644 --- a/pages/_includes/layout/page-title.html +++ b/pages/_includes/layout/page-title.html @@ -2,45 +2,28 @@
-
-
- {% if page.page-pretitle %} - -
- {{ page.page-pretitle }} -
- {% endif %} -

- {{ page.page-title | default: layout.page-title }} -

-
+
+
+ {% if page.page-pretitle %} + +
+ {{ page.page-pretitle }} +
+ {% endif %} +

+ {{ page.page-title | default: layout.page-title }} +

+
- {% if page.page-title-description %} -
-
{{ page.page-title-description }}
-
- {% endif %} + {% if page.page-title-description %} +
+
{{ page.page-title-description }}
+
+ {% endif %} - {% if page.page-title-actions %} - -
- {% if page.page-title-actions == 'users' %} -
- - {% include_cached ui/button.html text="New user" color="primary" icon="plus" %} -
- {% elsif page.page-title-actions == 'calendar' %} -
- {% include_cached ui/button.html text="Add event" color="primary" icon="plus" %} -
- {% else %} - - {% include_cached ui/button.html text="New view" color="secondary" icon="plus" %} - - {% include_cached ui/button.html text="Create new report" color="primary" class="ml-3" %} - {% endif %} -
- {% endif %} -
+ {% if page.page-title-actions %} + {% include layout/page-title-actions.html actions=page.page-title-actions %} + {% endif %} +
{% endif %} diff --git a/pages/_includes/layout/sidebar.html b/pages/_includes/layout/sidebar.html new file mode 100644 index 000000000..0b0a4ed46 --- /dev/null +++ b/pages/_includes/layout/sidebar.html @@ -0,0 +1,15 @@ + \ No newline at end of file diff --git a/pages/_includes/layout/topmenu.html b/pages/_includes/layout/topmenu.html index 5e67008af..e42726f87 100644 --- a/pages/_includes/layout/topmenu.html +++ b/pages/_includes/layout/topmenu.html @@ -1,6 +1,7 @@ -