mirror of
https://github.com/tabler/tabler.git
synced 2026-08-01 07:54:38 +04:00
tabler layouts
This commit is contained in:
codecalm
@@ -1,24 +1,35 @@
|
||||
- title: Default tabler layout
|
||||
page: layouts.html
|
||||
config:
|
||||
topmenu: true
|
||||
|
||||
- title: Dark navigation
|
||||
page: layout-dark-navigation.html
|
||||
config:
|
||||
topmenu: true
|
||||
topmenu-dark: true
|
||||
|
||||
- title: Dark topnav
|
||||
page: layout-dark-topnav.html
|
||||
config:
|
||||
topmenu: true
|
||||
topnav-dark: true
|
||||
|
||||
- title: Sidebar
|
||||
page: layout-sidebar.html
|
||||
new: true
|
||||
config:
|
||||
sidebar: true
|
||||
|
||||
- title: Dark sidebar
|
||||
page: layout-sidebar-dark.html
|
||||
new: true
|
||||
config:
|
||||
sidebar: true
|
||||
sidebar-dark: true
|
||||
|
||||
- title: Narrow sidebar
|
||||
page: layout-sidebar-narrow.html
|
||||
new: true
|
||||
config:
|
||||
sidebar: true
|
||||
@@ -26,17 +37,20 @@
|
||||
sidebar-dark: true
|
||||
|
||||
- title: Right sidebar
|
||||
page: layout-sidebar-right.html
|
||||
new: true
|
||||
config:
|
||||
sidebar-right: true
|
||||
|
||||
- title: Sidebar only
|
||||
page: layout-sidebar-only.html
|
||||
new: true
|
||||
config:
|
||||
sidebar: true
|
||||
hide-topnav: true
|
||||
|
||||
- title: Dark mode
|
||||
page: layout-dark.html
|
||||
soon: true
|
||||
config:
|
||||
sidebar: true
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
<div class="row">
|
||||
<div class="col-auto">
|
||||
<a href="{{ site.base }}/{{ layout.page }}" class="position-relative">
|
||||
{% include parts/demo-layout.html topmenu=layout.config.topmenu topmenu-dark=layout.config.topmenu-dark sidebar=layout.config.sidebar sidebar-narrow=layout.config.sidebar-narrow sidebar-right=layout.config.sidebar-right sidebar-dark=layout.config.sidebar-dark hide-topnav=layout.config.hide-topnav %}
|
||||
{% include parts/demo-layout.html config=layout.config %}
|
||||
</a>
|
||||
</div>
|
||||
<div class="col">
|
||||
|
||||
@@ -1,10 +1,10 @@
|
||||
{% assign person-id = include.person-id | default: 12 | minus: 1 %}
|
||||
{% assign person = site.data.people[person-id] %}
|
||||
|
||||
{% if include.menu-layout != 'vertical' %}
|
||||
{% include layout/navbar-logo.html class="mr-4" %}
|
||||
{% else %}
|
||||
{% if page.sidebar %}
|
||||
{% include layout/navbar-search.html class="mr-4" %}
|
||||
{% else %}
|
||||
{% include layout/navbar-logo.html class="mr-4" %}
|
||||
{% endif %}
|
||||
|
||||
<ul class="nav navbar-menu align-items-center ml-auto">
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
<aside class="sidebar sidebar-dark">
|
||||
<aside class="sidebar{% if page.sidebar-dark %} sidebar-dark{% endif %}{% if page.sidebar-narrow %} sidebar-narrow{% endif %}{% if page.sidebar-right %} sidebar-right{% endif %}">
|
||||
<!-- Sidebar logo -->
|
||||
{% include layout/navbar-logo.html prefix="sidebar" %}
|
||||
|
||||
|
||||
@@ -1,18 +1,19 @@
|
||||
{% assign config = include.config %}
|
||||
<div class="border rounded w-8 h-7 bg-light shadow-sm mx-auto d-flex flex-column">
|
||||
<div class="row row-0 flex-fill">
|
||||
{% if include.sidebar %}
|
||||
<div class="{% if include.sidebar-narrow %}col-auto w-2{% else %}col-3{% endif %} {% if include.sidebar-dark %}bg-dark{% else %}border-right bg-white{% endif %}"></div>
|
||||
{% if config.sidebar %}
|
||||
<div class="{% if config.sidebar-narrow %}col-auto w-2{% else %}col-3{% endif %} {% if config.sidebar-dark %}bg-dark{% else %}border-right bg-white{% endif %}"></div>
|
||||
{% endif %}
|
||||
<div class="col">
|
||||
{% unless include.hide-topnav %}
|
||||
<div class="border-bottom h-2 bg-white"></div>
|
||||
{% unless config.hide-topnav %}
|
||||
<div class="h-2 {% if config.topnav-dark %}bg-dark{% else %}border-bottom bg-white{% endif %}"></div>
|
||||
{% endunless %}
|
||||
{% if include.topmenu %}
|
||||
<div class="h-2 {% if include.topmenu-dark %}bg-dark{% else %}border-bottom bg-white{% endif %}"></div>
|
||||
{% if config.topmenu %}
|
||||
<div class="h-2 {% if config.topmenu-dark %}bg-dark{% else %}border-bottom bg-white{% endif %}"></div>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% if include.sidebar-right %}
|
||||
<div class="col-3 {% if include.sidebar-dark %}bg-dark{% else %}border-left bg-white{% endif %}"></div>
|
||||
{% if config.sidebar-right %}
|
||||
<div class="col-3 {% if config.sidebar-dark %}bg-dark{% else %}border-left bg-white{% endif %}"></div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -4,16 +4,16 @@ layout: base
|
||||
|
||||
<div class="wrapper">
|
||||
|
||||
{% if page.menu-layout == 'vertical' %}
|
||||
{% if page.sidebar %}
|
||||
{% include layout/sidebar.html %}
|
||||
{% endif %}
|
||||
|
||||
<div class="content">
|
||||
{% include layout/topnav.html dark=page.header-dark sticky=page.header-sticky %}
|
||||
{% include layout/topnav.html %}
|
||||
|
||||
{% if page.menu-layout != 'vertical' %}
|
||||
{% unless page.sidebar %}
|
||||
{% include layout/topmenu.html %}
|
||||
{% endif %}
|
||||
{% endunless %}
|
||||
|
||||
<div class="content-page">
|
||||
<main class="container{% if page.container-size %}-{{ page.container-size }}{% endif %} my-4 flex-fill">
|
||||
|
||||
@@ -4,7 +4,6 @@ page-title: Dashboard
|
||||
page-pretitle: Overview
|
||||
page-title-actions: buttons
|
||||
menu: home
|
||||
menu-layout: vertical
|
||||
---
|
||||
|
||||
{% include layout/homepage.html %}
|
||||
|
||||
@@ -0,0 +1,6 @@
|
||||
---
|
||||
page-title: Page Layouts
|
||||
menu: layouts
|
||||
---
|
||||
|
||||
{% include layout/layouts.html %}
|
||||
@@ -0,0 +1,6 @@
|
||||
---
|
||||
page-title: Page Layouts
|
||||
menu: layouts
|
||||
---
|
||||
|
||||
{% include layout/layouts.html %}
|
||||
@@ -0,0 +1,6 @@
|
||||
---
|
||||
page-title: Page Layouts
|
||||
menu: layouts
|
||||
---
|
||||
|
||||
{% include layout/layouts.html %}
|
||||
@@ -0,0 +1,8 @@
|
||||
---
|
||||
page-title: Page Layouts
|
||||
menu: layouts
|
||||
sidebar: true
|
||||
sidebar-dark: true
|
||||
---
|
||||
|
||||
{% include layout/layouts.html %}
|
||||
@@ -0,0 +1,9 @@
|
||||
---
|
||||
page-title: Page Layouts
|
||||
menu: layouts
|
||||
sidebar: true
|
||||
sidebar-dark: true
|
||||
sidebar-narrow: true
|
||||
---
|
||||
|
||||
{% include layout/layouts.html %}
|
||||
@@ -0,0 +1,7 @@
|
||||
---
|
||||
page-title: Page Layouts
|
||||
menu: layouts
|
||||
sidebar: true
|
||||
---
|
||||
|
||||
{% include layout/layouts.html %}
|
||||
@@ -0,0 +1,8 @@
|
||||
---
|
||||
page-title: Page Layouts
|
||||
menu: layouts
|
||||
sidebar: true
|
||||
sidebar-right: true
|
||||
---
|
||||
|
||||
{% include layout/layouts.html %}
|
||||
@@ -0,0 +1,7 @@
|
||||
---
|
||||
page-title: Page Layouts
|
||||
menu: layouts
|
||||
sidebar: true
|
||||
---
|
||||
|
||||
{% include layout/layouts.html %}
|
||||
@@ -1,61 +0,0 @@
|
||||
---
|
||||
title: Layout test
|
||||
sidenav: true
|
||||
sidenav-dark: true
|
||||
page-title: Layout test
|
||||
page-title-actions: breadcrumb
|
||||
menu: base.buttons
|
||||
---
|
||||
|
||||
<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-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>
|
||||
<p>And this isn't my nose. This is a false one. But you are dressed as one… Oh, ow! I don't want to talk to you no more, you empty-headed animal food trough water! <strong> I fart in your general direction!</strong> <em> Your mother was a hamster and your father smelt of elderberries!</em> Now leave before I am forced to taunt you a second time!</p>
|
||||
<h2>Burn her!</h2>
|
||||
<p>We shall say 'Ni' again to you, if you do not appease us. The swallow may fly south with the sun, and the house martin or the plover may seek warmer climes in winter, yet these are not strangers to our land.</p>
|
||||
<ol>
|
||||
<li>Oh, ow!</li><li>Be quiet!</li><li>Well, we did do the nose.</li>
|
||||
</ol>
|
||||
|
||||
<h3>What a strange person.</h3>
|
||||
<p>Well, she turned me into a newt. And the hat. She's a witch! Well, how'd you become king, then? She looks like one. Look, my liege!</p>
|
||||
<ul>
|
||||
<li>We found them.</li><li>Well, how'd you become king, then?</li><li>Did you dress her up like this?</li>
|
||||
</ul>
|
||||
|
||||
<p>It's only a model. I'm not a witch. Who's that then? Did you dress her up like this? Look, my liege!</p>
|
||||
<p>Well, she turned me into a newt. The Lady of the Lake, her arm clad in the purest shimmering samite, held aloft Excalibur from the bosom of the water, signifying by divine providence that I, Arthur, was to carry Excalibur. That is why I am your king.</p>
|
||||
<p>Oh, ow! Look, my liege! Burn her! You can't expect to wield supreme power just 'cause some watery tart threw a sword at you! Well, Mercia's a temperate zone!</p>
|
||||
<p>Well, how'd you become king, then? How do you know she is a witch? We shall say 'Ni' again to you, if you do not appease us. You can't expect to wield supreme power just 'cause some watery tart threw a sword at you!</p>
|
||||
<p>Look, my liege! I dunno. Must be a king. A newt? What do you mean? Oh, ow! He hasn't got shit all over him.</p>
|
||||
<p>Now, look here, my good man. She looks like one. And this isn't my nose. This is a false one. Bring her forward!</p>
|
||||
<p>You can't expect to wield supreme power just 'cause some watery tart threw a sword at you! Camelot! Well, how'd you become king, then? Why?</p>
|
||||
<p>And the hat. She's a witch! It's only a model. Well, how'd you become king, then? Well, I didn't vote for you. Why?</p>
|
||||
<p>Ni! Ni! Ni! Ni! Ni! Ni! Ni! Ni! Camelot! We shall say 'Ni' again to you, if you do not appease us. Oh! Come and see the violence inherent in the system! Help, help, I'm being repressed!</p>
|
||||
<p>Why do you think that she is a witch? Knights of Ni, we are but simple travelers who seek the enchanter who lives beyond these woods. Where'd you get the coconuts? …Are you suggesting that coconuts migrate?</p>
|
||||
<p>Well, what do you want? Did you dress her up like this? Knights of Ni, we are but simple travelers who seek the enchanter who lives beyond these woods. On second thoughts, let's not go there. It is a silly place.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% capture_global scripts %}
|
||||
<script>
|
||||
$(document).ready(function () {
|
||||
var $test_el = $('#card-test'),
|
||||
$test_body_el = $('#card-size'),
|
||||
test_width = function () {
|
||||
$test_body_el.text($test_el.width());
|
||||
};
|
||||
|
||||
test_width();
|
||||
|
||||
$(window).on('resize', function () {
|
||||
test_width();
|
||||
});
|
||||
});
|
||||
</script>
|
||||
{% endcapture_global %}
|
||||
@@ -2,7 +2,6 @@
|
||||
page-title: Search results
|
||||
page-title-description: About 2,410 result (0.19 seconds)
|
||||
menu: extra.search-results
|
||||
menu-layout: horizontal
|
||||
---
|
||||
|
||||
<div class="row">
|
||||
|
||||
Reference in New Issue
Block a user