Mirrors/tabler
1
0
Fork 0
mirror of https://github.com/tabler/tabler.git synced 2026-08-02 08:25:32 +04:00
Code Issues Projects Releases Wiki Activity

sidebar, topbar, navbar rebuilding

Browse Source
This commit is contained in:
codecalm
2019-12-11 21:53:11 +01:00
parent 8e88b3266f
commit 99c3874343
29 changed files with 395 additions and 691 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pages/_data/layouts.yml
+1 -22
View File
@@ -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
pages/_includes/layout/aside.html
+7
View File
@@ -0,0 +1,7 @@
<aside class="sidebar sidebar-dark">
<!-- Sidebar logo -->
{% include_cached parts/navbar-logo.html prefix="sidebar" %}
<!-- Sidebar menu -->
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores commodi consequuntur, doloribus fugiat mollitia nesciunt pariatur quod reiciendis, sequi soluta tempora unde? Ab eligendi molestiae odio, pariatur quisquam quo voluptas.
</aside>
pages/_includes/layout/customize.html
-40
View File
@@ -1,40 +0,0 @@
<form action="#" class="js-layout-form">
<div class="mb-2">
<label class="form-label">Color scheme</label>
{% include_cached ui/input-selectgroup.html name="color-scheme" values="light,dark" type="radio" class="w-100p" %}
</div>
<div class="mb-2">
<label class="form-label">Nav position</label>
{% include_cached ui/input-selectgroup.html name="nav-position" values="top,side" type="radio" class="w-100p" %}
</div>
<div class="mb-2">
<label class="form-label">Header color</label>
{% include_cached ui/input-selectgroup.html name="header-color" values="light,dark" type="radio" class="w-100p" %}
</div>
<!--<div class="mb-2">-->
<!--<label class="form-label">Header fixed</label>-->
<!--{% include_cached ui/input-selectgroup.html name="header-fixed" values="fixed,default" type="radio" class="w-100p" %}-->
<!--</div>-->
<div class="mb-2">
<label class="form-label">Sidebar position</label>
{% include_cached ui/input-selectgroup.html name="sidebar-position" values="left,right" type="radio" class="w-100p" %}
</div>
<div class="mb-2">
<label class="form-label">Sidebar size</label>
{% include_cached ui/input-selectgroup.html name="sidebar-size" values="default,folded" type="radio" class="w-100p" %}
</div>
<div class="mb-2">
<label class="form-label">Sidebar color</label>
{% include_cached ui/input-selectgroup.html name="sidebar-color" values="light,dark" type="radio" class="w-100p" %}
</div>
<div class="mb-2">
<label class="form-label">Sidebar fixed</label>
{% include_cached ui/input-selectgroup.html name="sidebar-fixed" values="fixed,default" type="radio" class="w-100p" %}
</div>
<!--<div class="form-footer">-->
<!--<button type="submit" class="btn btn-primary">Save options</button>-->
<!--</div>-->
</form>
pages/_includes/layout/debug.html
+129 -127
View File
@@ -1,161 +1,163 @@
<div class="debug">
<a href="#" data-debug="dark">Dark mode</a>
<a href="#" data-debug="rtl">RTL mode</a>
<a href="#" data-debug="code">Show cards code</a>
<a href="#" data-debug="folded">Folded sidebar</a>
<a href="#" data-debug="fullscreen">Fullscreen</a>
<a href="#" data-debug="header-sticky">Sticky header</a>
<a href="{{ site.base }}/pages.html">All pages</a>
<a href="#" data-debug="dark">Dark mode</a>
<a href="#" data-debug="rtl">RTL mode</a>
<a href="#" data-debug="code">Show cards code</a>
<a href="#" data-debug="folded">Folded sidebar</a>
<a href="#" data-debug="fullscreen">Fullscreen</a>
<a href="#" data-debug="header-sticky">Sticky header</a>
<a href="{{ site.base }}/pages.html">All pages</a>
<div class="debug-info">Jekyll {{ jekyll.version }}</div>
<div class="debug-info">Jekyll {{ jekyll.version }}</div>
</div>
<style>
.card-debug {
position: absolute;
right: 0;
top: 0;
line-height: 1;
font-size: 11px;
display: none;
}
.card-debug {
position: absolute;
right: 0;
top: 0;
line-height: 1;
font-size: 11px;
display: none;
}
.debug-info {
margin-left: auto;
}
.debug-info {
margin-left: auto;
}
.card-debug a {
display: inline-block;
padding: 2px;
}
.card-debug a {
display: inline-block;
padding: 2px;
}
.card-debug a:hover {
text-decoration: underline;
}
.card-debug a:hover {
text-decoration: underline;
}
.debug {
position: fixed;
bottom: 0;
left: 0;
right: 0;
background: #222;
color: #fff;
padding: .5rem .75rem;
font-size: 12px;
direction: ltr;
text-align: left;
z-index: 3000;
display: flex;
}
.debug {
position: fixed;
bottom: 0;
left: 0;
right: 0;
background: #222;
color: #fff;
padding: .5rem .75rem;
font-size: 12px;
direction: ltr;
text-align: left;
z-index: 3000;
display: flex;
}
.content-page {
padding-bottom: 2rem;
}
.debug a {
color: inherit;
margin-right: 1rem;
}
.debug a {
color: inherit;
margin-right: 1rem;
}
.debug a[data-debug]:after {
content: '';
margin: 0 0 1px .25rem;
width: 6px;
height: 6px;
display: inline-block;
background: rgba(255, 255, 255, .3);
border-radius: 50%;
}
.debug a[data-debug]:after {
content: '';
margin: 0 0 1px .25rem;
width: 6px;
height: 6px;
display: inline-block;
background: rgba(255, 255, 255, .3);
border-radius: 50%;
}
body.show-debug-code .card-debug {
display: block;
}
body.show-debug-code .card-debug {
display: block;
}
@media (max-width: 991.98px) {
.debug {
display: none;
}
}
@media (max-width: 991.98px) {
.debug {
display: none;
}
}
body.show-debug-code a[data-debug="code"]:after,
html[dir="rtl"] a[data-debug="rtl"]:after,
body.theme-dark a[data-debug="dark"]:after,
:fullscreen a[data-debug="fullscreen"]:after,
body.header-sticky a[data-debug="header-sticky"]:after,
body.sidebar-folded a[data-debug="folded"]:after {
background: #5eba00;
}
body.show-debug-code a[data-debug="code"]:after,
html[dir="rtl"] a[data-debug="rtl"]:after,
body.theme-dark a[data-debug="dark"]:after,
:fullscreen a[data-debug="fullscreen"]:after,
body.header-sticky a[data-debug="header-sticky"]:after,
body.sidebar-folded a[data-debug="folded"]:after {
background: #5eba00;
}
</style>
<script>
$(document).ready(function () {
$(document).ready(function () {
var $body = $('body'),
$html = $('html');
var $body = $('body'),
$html = $('html');
$body
.on('click', '[data-debug="dark"]', function (e) {
$body.toggleClass('theme-dark');
$body
.on('click', '[data-debug="dark"]', function (e) {
$body.toggleClass('theme-dark');
e.preventDefault();
return false;
})
.on('click', '[data-debug="code"]', function (e) {
$body.toggleClass('show-debug-code');
e.preventDefault();
return false;
})
.on('click', '[data-debug="code"]', function (e) {
$body.toggleClass('show-debug-code');
e.preventDefault();
return false;
})
.on('click', '[data-debug="folded"]', function (e) {
$('.sidenav').toggleClass('sidenav-folded');
e.preventDefault();
return false;
})
.on('click', '[data-debug="folded"]', function (e) {
$('.sidenav').toggleClass('sidenav-folded');
e.preventDefault();
return false;
})
.on('click', '[data-debug="fullscreen"]', function (e) {
tabler.toggleFullscreen();
e.preventDefault();
return false;
})
.on('click', '[data-debug="fullscreen"]', function (e) {
tabler.toggleFullscreen();
e.preventDefault();
return false;
})
.on('click', '[data-debug="header-sticky"]', function (e) {
$body.toggleClass('header-sticky');
e.preventDefault();
return false;
})
.on('click', '[data-debug="header-sticky"]', function (e) {
$body.toggleClass('header-sticky');
e.preventDefault();
return false;
})
.on('click', '[data-debug="rtl"]', function (e) {
if ($html.attr('dir') === 'rtl') {
$html.attr('dir', 'ltr');
} else {
$html.attr('dir', 'rtl');
}
e.preventDefault();
return false;
})
.on('click', '[data-debug="rtl"]', function (e) {
if ($html.attr('dir') === 'rtl') {
$html.attr('dir', 'ltr');
} else {
$html.attr('dir', 'rtl');
}
e.preventDefault();
return false;
});
e.preventDefault();
return false;
});
$('.card').each(function () {
var $card = $(this),
htmlCode = $card[0].innerHTML.replace(/(^[ \t]*\n)/gm, '');
$('.card').each(function () {
var $card = $(this),
htmlCode = $card[0].innerHTML.replace(/(^[ \t]*\n)/gm, '');
var $button = $('<div class="card-debug"><a href="#" class="text-muted" data-code>code</a></div>'),
$codeLink = $button.find('[data-code]');
var $button = $('<div class="card-debug"><a href="#" class="text-muted" data-code>code</a></div>'),
$codeLink = $button.find('[data-code]');
$codeLink
// .data('htmlCode', htmlCode)
.on('click', function(e){
$codeLink
// .data('htmlCode', htmlCode)
.on('click', function (e) {
var $modal = $('<div class="modal hide"><div class="modal-dialog modal-lg"><div class="modal-content"><div class="modal-body"><pre class="m-0"></pre></div></div></div></div>');
$modal.find('pre').text(htmlCode);
$('body').append($modal);
console.log();
var $modal = $('<div class="modal hide"><div class="modal-dialog modal-lg"><div class="modal-content"><div class="modal-body"><pre class="m-0"></pre></div></div></div></div>');
$modal.find('pre').text(htmlCode);
$('body').append($modal);
console.log();
$modal.modal('show');
$modal.modal('show');
e.preventDefault();
return false;
});
e.preventDefault();
return false;
});
$card.prepend($button);
});
});
$card.prepend($button);
});
});
</script>
pages/_includes/layout/page-title-actions.html
+24
View File
@@ -0,0 +1,24 @@
{% assign actions = include.actions %}
<!-- Page title actions -->
<div class="col-auto ml-auto">
{% if actions == 'users' %}
<div class="d-flex">
<input type="search" class="form-control d-inline-block w-9 mr-3" placeholder="Search user&hellip;"/>
{% include_cached ui/button.html text="New user" color="primary" icon="plus" %}
</div>
{% elsif actions == 'calendar' %}
<div class="d-flex">
{% include_cached ui/button.html text="Add event" color="primary" icon="plus" %}
</div>
{% elsif actions == 'breadcrumb' %}
<div class="d-flex">
{% include_cached ui/breadcrumb.html class="breadcrumb-alternate" %}
</div>
{% elsif actions == 'buttons' %}
<span class="d-none d-sm-inline">
{% include_cached ui/button.html text="New view" color="secondary" icon="plus" %}
</span>
{% include_cached ui/button.html text="Create new report" color="primary" class="ml-3" %}
{% endif %}
</div>
pages/_includes/layout/page-title.html
+21 -38
View File
@@ -2,45 +2,28 @@
<!-- Page title -->
<div class="page-title-box">
<div class="row align-items-center">
<div class="col-auto">
{% if page.page-pretitle %}
<!-- Page pre-title -->
<div class="page-pretitle">
{{ page.page-pretitle }}
</div>
{% endif %}
<h2 class="page-title">
{{ page.page-title | default: layout.page-title }}
</h2>
</div>
<div class="row align-items-center">
<div class="col-auto">
{% if page.page-pretitle %}
<!-- Page pre-title -->
<div class="page-pretitle">
{{ page.page-pretitle }}
</div>
{% endif %}
<h2 class="page-title">
{{ page.page-title | default: layout.page-title }}
</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-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 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_cached ui/button.html text="New user" color="primary" icon="plus" %}
</div>
{% elsif page.page-title-actions == 'calendar' %}
<div class="d-flex">
{% include_cached ui/button.html text="Add event" color="primary" icon="plus" %}
</div>
{% else %}
<span class="d-none d-sm-inline">
{% include_cached ui/button.html text="New view" color="secondary" icon="plus" %}
</span>
{% include_cached ui/button.html text="Create new report" color="primary" class="ml-3" %}
{% endif %}
</div>
{% endif %}
</div>
{% if page.page-title-actions %}
{% include layout/page-title-actions.html actions=page.page-title-actions %}
{% endif %}
</div>
</div>
{% endif %}
pages/_includes/layout/topmenu.html
+1 -1
View File
@@ -1,4 +1,4 @@
<header class="topnav">
<header class="topnav topbar">
<div class="navbar navbar-expand-lg {% if include.dark %}navbar-dark{% else %}navbar-light{% endif %}">
<div class="container{% if include.fluid %}-fluid{% endif %}">
{% include layout/menu.html top=true %}
pages/_includes/layout/topnav.html
+1 -1
View File
@@ -1,4 +1,4 @@
<header class="topnav">
<header class="topnav topbar">
<div class="container{% if include.fluid %}-fluid{% endif %}">
<div class="navbar navbar-expand-lg {% if include.dark %}navbar-dark bg-dark text-white{% else %}navbar-light{% endif %}{% if include.sticky %} navbar-sticky{% endif %}">
{% include_cached parts/navbar.html search=true %}
pages/_includes/parts/navbar-logo.html
+6
View File
@@ -0,0 +1,6 @@
{% assign prefix = include.prefix | default: 'navbar' %}
<a href="{{ site.base }}" class="{{ prefix }}-brand">
<img src="{{ site.base }}/img/logo{% if include.dark %}-white{% endif %}.svg" alt="{{ site.title }}" class="{{ prefix }}-brand-logo {{ prefix }}-brand-logo-lg">
<img src="{{ site.base }}/img/logo-small{% if include.dark %}-white{% endif %}.svg" alt="{{ site.title }}" class="{{ prefix }}-brand-logo {{ prefix }}-brand-logo-sm">
</a>
pages/_includes/parts/navbar-search.html
+2 -7
View File
@@ -1,10 +1,5 @@
<div class="navbar-search">
<div class="navbar-search ml-4 d-none d-lg-block">
<form action="" method="get">
<div class="input-group">
<input type="text" name="q" class="form-control" placeholder="Search...">
<div class="input-group-append">
<button class="btn btn-secondary" type="submit">{% include_cached ui/icon.html icon="search" %}</button>
</div>
</div>
<input type="text" name="q" class="form-control bg-light" placeholder="Search...">
</form>
</div>
pages/_includes/parts/navbar.html
+4 -9
View File
@@ -1,16 +1,11 @@
{% assign person-id = include.person-id | default: 12 | minus: 1 %}
{% assign person = site.data.people[person-id] %}
<a href="{{ site.base }}" class="navbar-brand text-reset mr-md-3">
<img src="{{ site.base }}/img/logo{% if include.dark %}-white{% endif %}.svg" alt="{{ site.title }}" class="d-none d-md-block navbar-brand-logo">
<img src="{{ site.base }}/img/logo-small{% if include.dark %}-white{% endif %}.svg" alt="{{ site.title }}" class="d-md-none navbar-brand-logo">
</a>
{% comment %}
{% if include.search %}
{% include parts/navbar-search.html %}
{% if page.menu-layout != 'vertical' %}
{% include_cached parts/navbar-logo.html %}
{% endif %}
{% endcomment %}
{% include_cached parts/navbar-search.html %}
<ul class="nav navbar-menu align-items-center ml-auto">
<li class="nav-item d-none d-lg-flex mr-3">
pages/_layouts/default.html
+17 -9
View File
@@ -2,17 +2,25 @@
layout: base
---
<div class="layout{% if page.site-layout %} {{ page.site-layout }}{% endif %}">
<div class="wrapper">
{% include layout/topnav.html dark=page.header-dark sticky=page.header-sticky %}
{% include layout/topmenu.html %}
{% if page.menu-layout == 'vertical' %}
{% include layout/aside.html %}
{% endif %}
<div class="">
<div class="content">
{% include layout/topnav.html dark=page.header-dark sticky=page.header-sticky %}
<main class="container-{% if page.container-size %}{{ page.container-size }}{% else %}xl{% endif %}{% if page.fluid %}-fluid{% endif %} my-4 flex-fill">
{% include layout/page-title.html %}
{% if page.menu-layout != 'vertical' %}
{% include layout/topmenu.html %}
{% endif %}
{{ content }}
</main>
</div>
<div class="content-page">
<main class="container{% if page.container-size %}-{{ page.container-size }}{% endif %} my-4 flex-fill">
{% include layout/page-title.html %}
{{ content }}
</main>
</div>
</div>
</div>
pages/homepage.html
-1
View File
@@ -2,7 +2,6 @@
title: Homepage
page-title: Homepage
page-pretitle: Overview
page-title-actions: home
---
<div class="row">
pages/index.html
+1 -1
View File
@@ -2,7 +2,7 @@
title: Dashboard
page-title: Dashboard
page-pretitle: Overview
page-title-actions: true
page-title-actions: buttons
site-layout: layout-collapsed-md
menu: home
---
pages/layout-dark-mode.html
-8
View File
@@ -1,8 +0,0 @@
---
title: Dark mode
dark-theme: true
page-title: Dashboard
menu: layouts
---
{% include layout/layouts.html %}
pages/layout-header-dark.html
-8
View File
@@ -1,8 +0,0 @@
---
title: Dark header
header-dark: true
page-title: Dashboard
menu: layouts
---
{% include layout/layouts.html %}
pages/layout-header-sticky.html
-9
View File
@@ -1,9 +0,0 @@
---
title: Sticky header
menu: layout.header-sticky
page-title: Dashboard
header-sticky: true
menu: layouts
---
{% include layout/layouts.html %}
pages/layout-navbar-dark.html
-10
View File
@@ -1,10 +0,0 @@
---
title: Sidebar white
menu: layout.sidebar-white
sidenav: true
nav-dark: true
page-title: Dashboard
menu: layouts
---
{% include layout/layouts.html %}
pages/layout-navbar-folded.html
-11
View File
@@ -1,11 +0,0 @@
---
title: Folded sidebar
menu: layout.sidebar-folded
sidenav: true
nav-folded: true
nav-dark: true
page-title: Dashboard
menu: layouts
---
{% include layout/layouts.html %}
pages/layout-navbar-left.html
-9
View File
@@ -1,9 +0,0 @@
---
title: Sidebar left
menu: layout.sidebar-left
sidenav: true
page-title: Dashboard
menu: layouts
---
{% include layout/layouts.html %}
pages/layout-navbar-right.html
-10
View File
@@ -1,10 +0,0 @@
---
title: Sidebar right
menu: layout.sidebar-right
sidenav: true
nav-right: true
page-title: Dashboard
menu: layouts
---
{% include layout/layouts.html %}
pages/layout-navbar-top.html
-7
View File
@@ -1,7 +0,0 @@
---
title: Navbar top
page-title: Dashboard
menu: layouts
---
{% include layout/layouts.html %}
pages/layout-test.html
+6 -4
View File
@@ -2,13 +2,15 @@
title: Layout test
sidenav: true
sidenav-dark: true
site-layout: layout-collapsed-sm
page-title: Layout test
page-title-actions: breadcrumb
menu-layout: vertical
---
<div class="card" id="card-test">
<div class="card-body">
<a href="#" class="btn btn-secondary btn-block" data-toggle="menubar">sidebar</a>
<div id="card-body"></div>
<!-- <a href="#" class="btn btn-secondary btn-block" data-toggle="menubar">sidebar</a>-->
<div id="card-size"></div>
<div>
<h1>Well, she turned me into a newt.</h1>
<p>We want a shrubbery!! Burn her anyway! You don't vote for kings. Where'd you get the coconuts?</p>
@@ -44,7 +46,7 @@ site-layout: layout-collapsed-sm
<script>
$(document).ready(function () {
var $test_el = $('#card-test'),
$test_body_el = $('#card-body'),
$test_body_el = $('#card-size'),
test_width = function () {
$test_body_el.text($test_el.width());
};