Mirrors/tabler
1
0
Fork 0
mirror of https://github.com/tabler/tabler.git synced 2025-12-21 17:34:25 +04:00
Code Issues Projects Releases Wiki Activity

Accessibility and semantic improvements (#2488)

Browse Source
This commit is contained in:
Paweł Kuna
2025-09-17 16:34:36 +02:00
committed by GitHub
parent 736e60408b
commit 596237e8cc
24 changed files with 174 additions and 110 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
preview/pages/form-layout.html
View File

@@ -21,20 +21,24 @@ page-libs: [litepicker]
<form class="space-y">
<div class="row">
<div class="col-6">
<input type="text" placeholder="Name" class="form-control" />
<label class="form-label visually-hidden" for="basic-name">Name</label>
<input type="text" placeholder="Name" class="form-control" id="basic-name" name="name" />
</div>
<div class="col-6">
<input type="email" placeholder="Email address" class="form-control" />
<label class="form-label visually-hidden" for="basic-email">Email address</label>
<input type="email" placeholder="Email address" class="form-control" id="basic-email" name="email" />
</div>
</div>
<div>
<input type="password" placeholder="Password" class="form-control" />
<label class="form-label visually-hidden" for="basic-password">Password</label>
<input type="password" placeholder="Password" class="form-control" id="basic-password" name="password" />
</div>
<div>
<input type="password" placeholder="Confirm Password" class="form-control" />
<label class="form-label visually-hidden" for="basic-password-confirm">Confirm Password</label>
<input type="password" placeholder="Confirm Password" class="form-control" id="basic-password-confirm" name="password_confirm" />
</div>
<div>
@@ -55,31 +59,31 @@ page-libs: [litepicker]
<form>
<div class="space-y">
<div>
<label class="form-label">
<label class="form-label" for="example-first-name">
First Name
</label>
<input type="text" placeholder="Enter first name" class="form-control">
<input type="text" placeholder="Enter first name" class="form-control" id="example-first-name" name="first_name">
</div>
<div>
<label class="form-label">
<label class="form-label" for="example-last-name">
Last Name
</label>
<input type="text" placeholder="Enter last name" class="form-control">
<input type="text" placeholder="Enter last name" class="form-control" id="example-last-name" name="last_name">
</div>
<div>
<label class="form-label">
<label class="form-label" for="example-email">
Email
</label>
<input type="email" placeholder="Enter email address" class="form-control">
<input type="email" placeholder="Enter email address" class="form-control" id="example-email" name="email">
</div>
<div>
<label class="form-label">
<label class="form-label" for="example-subject">
Select Subject
</label>
<select class="form-select">
<select class="form-select" id="example-subject" name="subject">
<option>
Option 1
</option>
@@ -96,10 +100,10 @@ page-libs: [litepicker]
</div>
<div>
<label class="form-label">
<label class="form-label" for="example-message">
Message
</label>
<textarea placeholder="Enter your message" rows="6" class="form-control"></textarea>
<textarea placeholder="Enter your message" rows="6" class="form-control" id="example-message" name="message"></textarea>
</div>
<div>

4
preview/pages/job-listing.html
View File

@@ -46,9 +46,9 @@ permalink: job-listing.html
<div class="small text-secondary">Only show companies that can sponsor a visa</div>
</div>
<div class="form-label">Location</div>
<label class="form-label" for="job-location">Location</label>
<div class="mb-4">
<select class="form-select">
<select class="form-select" id="job-location" name="location">
<option>Anywhere</option>
<option>London</option>
<option>San Francisco</option>

2
preview/pages/marketing/real-estate.html
View File

@@ -12,7 +12,7 @@ permalink: marketing/real-estate.html
<div class="col-xl-6 col-lg-8 text-center">
<form novalidate="" class="row row-cols-1 row-cols-md-auto g-3 align-items-center">
<div class="col flex-grow-1">
<input id="inputEmail" type="text" placeholder="Search properties near you..." class="form-control form-control-solid" />
<input id="inputEmail" type="text" placeholder="Search properties near you..." class="form-control form-control-solid" aria-label="Search properties near you" />
</div>
<div class="col"><button type="submit" class="btn btn-teal fw-500">Search</button></div>
</form>

15
preview/pages/settings.html
View File

@@ -19,16 +19,16 @@ permalink: settings.html
<div class="row g-3">
<div class="col-md">
<div class="form-label">Business Name</div>
<input type="text" class="form-control" value="{{ people[0].company }}">
<label class="form-label" for="business-name">Business Name</label>
<input type="text" class="form-control" id="business-name" name="business-name" value="{{ people[0].company }}">
</div>
<div class="col-md">
<div class="form-label">Business ID</div>
<input type="text" class="form-control" value="560afc32">
<label class="form-label" for="business-id">Business ID</label>
<input type="text" class="form-control" id="business-id" name="business-id" value="560afc32">
</div>
<div class="col-md">
<div class="form-label">Location</div>
<input type="text" class="form-control"
<label class="form-label" for="location">Location</label>
<input type="text" class="form-control" id="location" name="location"
value="{{ people[0].city }}, {{ people[0].country }}">
</div>
</div>
@@ -39,7 +39,8 @@ permalink: settings.html
<div>
<div class="row g-2">
<div class="col-auto">
<input type="text" class="form-control w-auto" value="{{ people[0].email }}">
<label for="email" class="form-label visually-hidden">Email</label>
<input type="text" class="form-control w-auto" id="email" name="email" value="{{ people[0].email }}">
</div>
<div class="col-auto">{% include "ui/button.html" text="Change" %}</div>
</div>

9
preview/pages/signatures.html
View File

@@ -66,12 +66,12 @@ document.querySelector("#signature-advanced-png").addEventListener("click", func
<p class="card-subtitle">Please confirm the transfer of funds by signing below.</p>
<form action="">
<div class="mb-3">
<label class="form-label required">First name</label>
<input type="text" class="form-control" />
<label class="form-label required" for="signature-first-name">First name</label>
<input type="text" class="form-control" id="signature-first-name" name="first_name" />
</div>
<div class="mb-3">
<label class="form-label required">Last name</label>
<input type="text" class="form-control" />
<label class="form-label required" for="signature-last-name">Last name</label>
<input type="text" class="form-control" id="signature-last-name" name="last_name" />
</div>
<div class="mb-3">
<label class="form-label required">Signature</label>
@@ -105,6 +105,7 @@ document.querySelector("#signature-advanced-png").addEventListener("click", func
<div class="mt-4">
<div class="row">
<div class="col">
<label for="signature-advanced-color" class="form-label visually-hidden">Pen color</label>
<input href="" type="color" id="signature-advanced-color" class="w-100 form-control form-control-color" />
</div>
<div class="col">

2
shared/includes/layout/footer.html
View File

@@ -3,6 +3,7 @@
<div class="container-xl">
<div class="row text-center align-items-center flex-row-reverse">
<div class="col-lg-auto ms-lg-auto">
<nav aria-label="Footer">
<ul class="list-inline list-inline-dots mb-0">
<li class="list-inline-item"><a href="{{ site.docsUrl }}" target="_blank" class="link-secondary" rel="noopener">Documentation</a></li>
<li class="list-inline-item"><a href="{{ page | relative }}/license.html" class="link-secondary">License</a></li>
@@ -14,6 +15,7 @@
</a>
</li>
</ul>
</nav>
</div>
<div class="col-12 col-lg-auto mt-3 mt-lg-0">
<ul class="list-inline list-inline-dots mb-0">

4
shared/includes/layout/navbar-menu.html
View File

@@ -11,7 +11,7 @@
{% for level-1 in menu %}
{% assign icon = level-1[1].icon %}
<li class="nav-item{% if level-1[0] == current-page[0] or level-1[1].active %} active{% endif %}{% if level-1[1].children %} dropdown{% endif %}">
<a class="nav-link{% if level-1[1].children %} dropdown-toggle{% endif %}{% if level-1[1].disabled %} disabled{% endif %}" {% if level-1[1].children %}href="#navbar-{{ level-1[0] }}" data-bs-toggle="dropdown" data-bs-auto-close="{% if include.keep-open %}false{% else %}outside{% endif %}" role="button" aria-expanded="{% if include.auto-open and level-1[0] == current-page[0] %}true{% else %}false{% endif %}" {% else %}href="{{ page | relative }}/{{ level-1[1].url }}" {% endif %}>
<a class="nav-link{% if level-1[1].children %} dropdown-toggle{% endif %}{% if level-1[1].disabled %} disabled{% endif %}" {% if level-1[1].children %}href="#navbar-{{ level-1[0] }}" data-bs-toggle="dropdown" data-bs-auto-close="{% if include.keep-open %}false{% else %}outside{% endif %}" role="button" aria-haspopup="true" aria-expanded="{% if include.auto-open and level-1[0] == current-page[0] %}true{% else %}false{% endif %}" {% else %}href="{{ page | relative }}/{{ level-1[1].url }}" {% endif %}{% if level-1[0] == current-page[0] or level-1[1].active %} aria-current="page"{% endif %}>
{% unless hide-icons %}
<span class="nav-link-icon d-md-none d-lg-inline-block">{% include "ui/icon.html" icon=icon %}</span>
{% endunless %}
@@ -47,7 +47,7 @@
{% if level-2[1].children %}<div class="dropend">{% endif %}
<a class="dropdown-item{% if level-2[1].children %} dropdown-toggle{% endif %}{% if level-1[0] == current-page[0] and level-2[0] == current-page[1] and current-page.size == 2 %} active{% endif %}{% if level-2[1].color %} text-{{ level-2[1].color }}{% endif %}" {% if level-2[1].children %}href="#sidebar-{{ level-2[0] }}" data-bs-toggle="dropdown" data-bs-auto-close="{% if include.keep-open %}false{% else %}outside{% endif %}" role="button" aria-expanded="false" {% else %}href="{% if level-2[1].url contains 'http://' or level-2[1].url contains 'https://'%}{{ level-2[1].url }}{% else %}{{ page | relative }}/{{ level-2[1].url }}{% endif %}"{% endif %}{% if level-2[1].url contains 'http://' or level-2[1].url contains 'https://'%} target="_blank" rel="noopener"{% endif %}>
<a class="dropdown-item{% if level-2[1].children %} dropdown-toggle{% endif %}{% if level-1[0] == current-page[0] and level-2[0] == current-page[1] and current-page.size == 2 %} active{% endif %}{% if level-2[1].color %} text-{{ level-2[1].color }}{% endif %}" {% if level-2[1].children %}href="#sidebar-{{ level-2[0] }}" data-bs-toggle="dropdown" data-bs-auto-close="{% if include.keep-open %}false{% else %}outside{% endif %}" role="button" aria-haspopup="true" aria-expanded="false" {% else %}href="{% if level-2[1].url contains 'http://' or level-2[1].url contains 'https://'%}{{ level-2[1].url }}{% else %}{{ page | relative }}/{{ level-2[1].url }}{% endif %}"{% endif %}{% if level-2[1].url contains 'http://' or level-2[1].url contains 'https://'%} target="_blank" rel="noopener"{% endif %}{% if level-1[0] == current-page[0] and level-2[0] == current-page[1] and current-page.size == 2 %} aria-current="page"{% endif %}>
{% if level-2[1].icon %}
{% assign icon = level-2[1].icon %}
{% include "ui/icon.html" icon=icon class="icon-inline me-1" %}

2
shared/includes/layout/navbar-search.html
View File

@@ -1,7 +1,7 @@
{% assign breakpoint = include.breakpoint | default: 'lg' %}
<div{% if include.class %} class="{{ include.class }}"{% endif %}>
<form action="{{ page | relative }}/" method="get" autocomplete="off" novalidate>
<form action="{{ page | relative }}/" method="get" autocomplete="off" novalidate role="search">
{% include "ui/form/input-icon.html" prepend=true rounded=include.rounded aria-label="Search in website" %}
</form>
</div>

6
shared/includes/layout/navbar-side.html
View File

@@ -30,18 +30,22 @@
{% include "ui/icon.html" icon="bell" %}
<span class="badge bg-red"></span>
</a>
<!-- BEGIN NAVBAR NOTIFICATIONS -->
<div class="dropdown-menu dropdown-menu-arrow dropdown-menu-end dropdown-menu-card">
{% include "cards/navbar-notifications.html" %}
</div>
<!-- END NAVBAR NOTIFICATIONS -->
</div>
<div class="nav-item dropdown d-none d-md-flex me-3">
<a href="#" class="nav-link px-0" data-bs-toggle="dropdown" tabindex="-1" aria-label="Show app menu" data-bs-auto-close="outside" aria-expanded="false">
{% include "ui/icon.html" icon="apps" %}
</a>
<!-- BEGIN NAVBAR APPS -->
<div class="dropdown-menu dropdown-menu-arrow dropdown-menu-end dropdown-menu-card">
{% include "cards/navbar-apps.html" %}
</div>
<!-- END NAVBAR APPS -->
</div>
</div>
@@ -56,6 +60,7 @@
</div>
{% endunless %}
</a>
<!-- BEGIN USER MENU -->
<div class="dropdown-menu dropdown-menu-end dropdown-menu-arrow"{% if include.dark %} data-bs-theme="light"{% endif %}>
<a href="#" class="dropdown-item">Status</a>
<a href="{{ page | relative }}/profile.html" class="dropdown-item">Profile</a>
@@ -64,5 +69,6 @@
<a href="{{ page | relative }}/settings.html" class="dropdown-item">Settings</a>
<a href="{{ page | relative }}/sign-in.html" class="dropdown-item">Logout</a>
</div>
<!-- END USER MENU -->
</div>
</div>

2
shared/includes/layout/navbar-toggler.html
View File

@@ -1,5 +1,5 @@
<!-- BEGIN NAVBAR TOGGLER -->
<button class="navbar-toggler" type="button" data-bs-toggle="collapse"{% if include.target %} data-bs-target="#{{ include.target }}" aria-controls="{{ include.target }}"{% endif %} aria-expanded="false" aria-label="Toggle navigation">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse"{% if include.target %} data-bs-target="#{{ include.target }}" aria-controls="{{ include.target }}"{% endif %} aria-expanded="false" aria-label="{% if include.target == 'sidebar-menu' %}Toggle sidebar navigation{% else %}Toggle primary navigation{% endif %}">
<span class="navbar-toggler-icon"></span>
</button>
<!-- END NAVBAR TOGGLER -->

22
shared/includes/layout/navbar.html
View File

@@ -18,12 +18,20 @@
{% if condensed %}
<div class="collapse navbar-collapse" id="navbar-menu">
{% if include.hide-search %}
<!-- BEGIN NAVBAR MENU -->
<nav aria-label="Primary">
{% include "layout/navbar-menu.html" sample=include.sample hide-icons=include.hide-icons %}
</nav>
<!-- END NAVBAR MENU -->
{% elsif include.hide-menu %}
{% include "layout/navbar-search.html" rounded=include.transparent %}
{% else %}
<div class="d-flex flex-column flex-md-row flex-fill align-items-stretch align-items-md-center">
<!-- BEGIN NAVBAR MENU -->
<nav aria-label="Primary">
{% include "layout/navbar-menu.html" sample=include.sample hide-icons=include.hide-icons %}
</nav>
<!-- END NAVBAR MENU -->
{% unless condensed %}
{% assign search-class = "ms-md-auto ps-md-4 py-2 py-md-0 me-md-4 order-first order-md-last flex-grow-1" %}
@@ -31,7 +39,9 @@
{% assign search-class = search-class | append: " flex-md-grow-0" %}
{% endunless %}
<!-- BEGIN NAVBAR SEARCH -->
{% include "layout/navbar-search.html" breakpoint=breakpoint rounded=include.transparent class=search-class %}
<!-- END NAVBAR SEARCH -->
{% endunless %}
</div>
{% endif %}
@@ -41,14 +51,20 @@
</header>
{% unless condensed %}
<header class="navbar-expand-{{ breakpoint }}">
<div class="navbar-expand-{{ breakpoint }}">
<div class="collapse navbar-collapse" id="navbar-menu">
<div class="navbar"{% if include.dark-secondary %} data-bs-theme="dark"{% endif %}>
<div class="container-xl">
<div class="row flex-column flex-md-row flex-fill align-items-center">
<div class="col">
<!-- BEGIN NAVBAR MENU -->
<nav aria-label="Primary">
{% include "layout/navbar-menu.html" sample=include.sample hide-icons=include.hide-icons long-titles=true %}
</nav>
<!-- END NAVBAR MENU -->
</div>
{% unless include.hide-search %}
<div class="col-2 d-none d-xxl-block">
{% include "layout/navbar-search.html" breakpoint=breakpoint class="my-2 my-md-0 flex-grow-1 flex-md-grow-0 order-first order-md-last" %}
@@ -56,6 +72,7 @@
{% endunless %}
<div class="col col-md-auto">
<!-- BEGIN NAVBAR NAV -->
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#" data-bs-toggle="offcanvas" data-bs-target="#offcanvasSettings">
@@ -69,12 +86,13 @@
</a>
</li>
</ul>
<!-- END NAVBAR NAV -->
</div>
</div>
</div>
</div>
</div>
</div>
</header>
{% endunless %}
{% if include.sticky %}

6
shared/includes/layout/page-header.html
View File

@@ -9,7 +9,7 @@
{% if page-header-file %}
{% include "layout/headers/{{ page-header-file }}.html" %}
{% elsif page-header %}
<div class="page-header{% if class %} {{ class }}{% endif %} d-print-none{% if layout-navbar-overlap and layout-navbar-dark %} text-white{% endif %}" aria-label="Page header">
<div class="page-header{% if class %} {{ class }}{% endif %} d-print-none{% if layout-navbar-overlap and layout-navbar-dark %} text-white{% endif %}">
<div class="container-xl">
<div class="row g-2 align-items-center">
<div class="col">
@@ -19,12 +19,12 @@
{{ pretitle }}
</div>
{% endif %}
<h2 class="page-title">
<h1 class="page-title">
{% if page-icon %}
{% include "ui/icon.html" icon=page-icon %}
{% endif %}
{{ page-header }}
</h2>
</h1>
{% if description %}
<div class="text-secondary mt-1">{{ description }}</div>

2
shared/includes/layout/skip-link.html Normal file
View File

@@ -0,0 +1,2 @@
<a href="#content" class="visually-hidden-focusable skip-link">Skip to main content</a>

38
shared/includes/marketing/navbar.html
View File

@@ -8,36 +8,38 @@
data-bs-target="#navbarTogglerDemo01"
aria-controls="navbarTogglerDemo01"
aria-expanded="false"
aria-label="Toggle navigation"
aria-label="Toggle primary navigation"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarTogglerDemo01">
<nav class="navbar-nav ms-auto">
<div class="nav-item">
<nav aria-label="Primary">
<ul class="navbar-nav ms-auto">
<li class="nav-item">
<a class="nav-link active" href="{{ page | relative }}/marketing"><span class="nav-link-title">Home</span></a>
</div>
<div class="nav-item">
</li>
<li class="nav-item">
<a class="nav-link" href="{{ page | relative }}/marketing/testimonials.html"><span class="nav-link-title">Testimonials</span></a>
</div>
<div class="nav-item">
</li>
<li class="nav-item">
<a class="nav-link" href="{{ page | relative }}/marketing/pricing.html"><span class="nav-link-title">Pricing</span></a>
</div>
<div class="nav-item">
</li>
<li class="nav-item">
<a class="nav-link" href="{{ page | relative }}/marketing/about.html"><span class="nav-link-title">About</span></a>
</div>
<div class="nav-item">
</li>
<li class="nav-item">
<a class="nav-link" href="{{ page | relative }}/marketing/text.html"><span class="nav-link-title">Text</span></a>
</div>
<div class="nav-item">
</li>
<li class="nav-item">
<a class="nav-link" href="{{ page | relative }}/marketing/hero.html"><span class="nav-link-title">App</span></a>
</div>
<div class="nav-item">
</li>
<li class="nav-item">
<a class="nav-link" href="{{ page | relative }}/marketing/real-estate.html"><span class="nav-link-title">Real estate</span></a>
</div>
<div class="nav-item ms-4">
</li>
<li class="nav-item ms-4">
<a href="#" class="btn btn-primary">Buy now</a>
</div>
</li>
</ul>
</nav>
</div>
</div>

4
shared/includes/parts/nav/nav-aside.html
View File

@@ -2,14 +2,14 @@
<div class="subheader mb-2">Category</div>
{% assign items = "Games,Clothing,Jewelery,Toys" | split: "," %}
<div class="list-group list-group-transparent mb-3">
<nav class="list-group list-group-transparent mb-3">
{% for item in items %}
<a class="list-group-item list-group-item-action d-flex align-items-center{% if forloop.first %} active{% endif %}" href="#">
{{ item }}
<small class="text-secondary ms-auto">{{ forloop.index | random_number: 11, 200 }}</small>
</a>
{% endfor %}
</div>
</nav>
<div class="subheader mb-2">Rating</div>
{% assign items = "5 stars,4 stars,3 stars,2 and less stars" | split: "," %}

4
shared/includes/settings.html
View File

@@ -3,9 +3,9 @@
{% include "ui/icon.html" icon="brush" %}
</a>
<form class="offcanvas offcanvas-start offcanvas-narrow" tabindex="-1" id="offcanvasSettings">
<form class="offcanvas offcanvas-start offcanvas-narrow" tabindex="-1" id="offcanvasSettings" role="dialog" aria-modal="true" aria-labelledby="offcanvasSettingsTitle">
<div class="offcanvas-header">
<h2 class="offcanvas-title">Theme Settings</h2>
<h2 class="offcanvas-title" id="offcanvasSettingsTitle">Theme Settings</h2>
<button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body d-flex flex-column">

10
shared/includes/ui/breadcrumb.html
View File

@@ -1,9 +1,11 @@
{% assign breadcrumb-pages = include.pages | default: "Home,Library,Data" | split: "," -%}
<ol class="breadcrumb{% if include.class %} {{ include.class }}{% endif %}{% if include.separator %} breadcrumb-{{ include.separator }}{% endif %}" aria-label="breadcrumbs">
<!-- BEGIN BREADCRUMB -->
<nav aria-label="Breadcrumb">
<ol class="breadcrumb{% if include.class %} {{ include.class }}{% endif %}{% if include.separator %} breadcrumb-{{ include.separator }}{% endif %}">
{%- for page in breadcrumb-pages -%}
{%- if forloop.last -%}
<li class="breadcrumb-item active" aria-current="page">
<a href="#">{{ page }}</a>
{{ page }}
</li>
{%- else -%}
<li class="breadcrumb-item">
@@ -17,4 +19,6 @@
</li>
{%- endif -%}
{%- endfor -%}
</ol>
</ol>
</nav>
<!-- END BREADCRUMB -->

2
shared/includes/ui/icon.html
View File

@@ -27,5 +27,5 @@
<!-- Download SVG icon from http://tabler.io/icons/icon/{{ icon-name }} -->
{% assign svg-icon = icons[icon-name].svg[icon-type] | default: '' -%}
{%- assign svg-icon = svg-icon | replace: '<path stroke="none" d="M0 0h24v24H0z" fill="none"/>', '' -%}
{{ svg-icon | replace_regex: 'class=\"[^"]+\"', replace-to }}
{{ svg-icon | replace_regex: 'class=\"[^"]+\"', replace-to | replace: 'class="', 'aria-hidden="true" focusable="false" class="' }}
{%- endif -%}

2
shared/includes/ui/pagination.html
View File

@@ -2,6 +2,7 @@
{% assign offset = include.offset | default: count -%}
{% assign count-offset = count | minus: offset | plus: 1 -%}
{% assign active-item = include.active-item | default: 3 -%}
<!-- BEGIN PAGINATION -->
<ul class="pagination{% if include.class %} {{ include.class }}{% endif %}">
{% if include.first-last -%}
<li class="page-item disabled">
@@ -53,3 +54,4 @@
</li>
{% endif -%}
</ul>
<!-- END PAGINATION -->

1
shared/layouts/base.html
View File

@@ -45,6 +45,7 @@
{% assign layout-dark = layout-dark | default: site.layoutDark %}
<body{% if layout.body-class or body-class %} class="{% if layout.body-class %} {{ layout.body-class }}{% endif %}{% if body-class %} {{ body-class }}{% endif %}"{% endif %}>
{% include "layout/skip-link.html" %}
<!-- BEGIN GLOBAL THEME SCRIPT -->
<script src="{{ page | relative }}/dist/js/tabler-theme{% if environment != 'development' %}.min{% endif %}.js{% if environment != 'development' %}?{{ 'now' | date: '%s' }}{% endif %}"{% if environment == 'preview' %} integrity="{{ sri.js-theme }}"{% endif %}></script>
<!-- END GLOBAL THEME SCRIPT -->

8
shared/layouts/default.html
View File

@@ -18,10 +18,12 @@ layout: base
{% endunless %}
<div class="page-wrapper{% if layout-wrapper-full %} page-wrapper-full{% endif %}">
<!-- BEGIN PAGE HEADER -->
{% include "layout/page-header.html" %}
<!-- END PAGE HEADER -->
<!-- BEGIN PAGE BODY -->
<div class="page-body">
<main id="content" class="page-body">
{% if layout-wrapper-full %}
{{ content }}
{% else %}
@@ -34,9 +36,11 @@ layout: base
{% endunless %}
{% endif %}
</div>
</main>
<!-- END PAGE BODY -->
<!-- BEGIN FOOTER -->
{% include "layout/footer.html" %}
<!-- END FOOTER -->
</div>
</div>

10
shared/layouts/docs/default.html
View File

@@ -81,8 +81,13 @@
<body class="d-flex flex-column" style="background: var(--tblr-bg-surface)">
<script src="/dist/js/tabler-theme{% if environment != 'development' %}.min{% endif %}.js"></script>
<!-- BEGIN NAVBAR -->
<header role="banner">
{% include "docs/navbar.html" %}
<div class="flex-fill">
</header>
<!-- END NAVBAR -->
<!-- BEGIN PAGE BODY -->
<main id="content" class="flex-fill">
<div class="container">
<div class="row g-0">
<div class="col-docs d-none d-lg-block border-end">
@@ -154,7 +159,8 @@
</div>
</div>
</div>
</div>
</main>
<!-- END PAGE BODY -->
{% for lib in libs -%}
{% if docs-libs contains lib[0] or libs.global-libs contains lib[0] or lib[0] == "clipboard" -%}

11
shared/layouts/marketing.html
View File

@@ -3,11 +3,19 @@ layout: base
body-class: body-marketing body-gradient
plugins: marketing
---
<!-- BEGIN NAVBAR -->
<header role="banner">
{% include "marketing/navbar.html" %}
</header>
<!-- END NAVBAR -->
<!-- BEGIN PAGE BODY -->
<main id="content">
{{ content }}
</main>
<!-- END PAGE BODY -->
<!-- BEGIN FOOTER -->
<footer class="footer">
<div class="container">
<div class="py-3">
@@ -162,3 +170,4 @@ plugins: marketing
</div>
</div>
</footer>
<!-- END FOOTER -->

10
shared/layouts/settings.html
View File

@@ -4,25 +4,26 @@ title: Settings
page-header: Account Settings
---
<!-- BEGIN PAGE BODY -->
<div class="card">
<div class="row g-0">
<div class="col-12 col-md-3 border-end">
<div class="card-body">
<h4 class="subheader">Business settings</h4>
<div class="list-group list-group-transparent">
<nav class="list-group list-group-transparent">
<a href="{{ page | relative }}/settings.html" class="list-group-item list-group-item-action d-flex align-items-center{% if page.fileSlug == 'settings' %} active{% endif %}">My Account</a>
<a href="#" class="list-group-item list-group-item-action d-flex align-items-center">My Notifications</a>
<a href="#" class="list-group-item list-group-item-action d-flex align-items-center">Connected Apps</a>
<a href="{{ page | relative }}/settings-plan.html" class="list-group-item list-group-item-action d-flex align-items-center{% if page.fileSlug == 'settings-plan' %} active{% endif %}">Plans</a>
<a href="#" class="list-group-item list-group-item-action d-flex align-items-center">Billing & Invoices</a>
</div>
</nav>
<h4 class="subheader mt-4">Experience</h4>
<div class="list-group list-group-transparent">
<nav class="list-group list-group-transparent">
<a href="#" class="list-group-item list-group-item-action">Give Feedback</a>
</div>
</nav>
</div>
</div>
<div class="col-12 col-md-9 d-flex flex-column">
@@ -30,3 +31,4 @@ page-header: Account Settings
</div>
</div>
</div>
<!-- END PAGE BODY -->