mirror of
https://github.com/tabler/tabler.git
synced 2026-08-24 20:04:24 +04:00
sidebar, topbar, navbar rebuilding
This commit is contained in:
codecalm
+129
-127
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user