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"> <form class="space-y">
<div class="row"> <div class="row">
<div class="col-6"> <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>
<div class="col-6"> <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> </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>
<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>
<div> <div>
@@ -55,31 +59,31 @@ page-libs: [litepicker]
<form> <form>
<div class="space-y"> <div class="space-y">
<div> <div>
<label class="form-label"> <label class="form-label" for="example-first-name">
First Name First Name
</label> </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>
<div> <div>
<label class="form-label"> <label class="form-label" for="example-last-name">
Last Name Last Name
</label> </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>
<div> <div>
<label class="form-label"> <label class="form-label" for="example-email">
Email Email
</label> </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>
<div> <div>
<label class="form-label"> <label class="form-label" for="example-subject">
Select Subject Select Subject
</label> </label>
<select class="form-select"> <select class="form-select" id="example-subject" name="subject">
<option> <option>
Option 1 Option 1
</option> </option>
@@ -96,10 +100,10 @@ page-libs: [litepicker]
</div> </div>
<div> <div>
<label class="form-label"> <label class="form-label" for="example-message">
Message Message
</label> </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>
<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 class="small text-secondary">Only show companies that can sponsor a visa</div>
</div> </div>
<div class="form-label">Location</div> <label class="form-label" for="job-location">Location</label>
<div class="mb-4"> <div class="mb-4">
<select class="form-select"> <select class="form-select" id="job-location" name="location">
<option>Anywhere</option> <option>Anywhere</option>
<option>London</option> <option>London</option>
<option>San Francisco</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"> <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"> <form novalidate="" class="row row-cols-1 row-cols-md-auto g-3 align-items-center">
<div class="col flex-grow-1"> <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>
<div class="col"><button type="submit" class="btn btn-teal fw-500">Search</button></div> <div class="col"><button type="submit" class="btn btn-teal fw-500">Search</button></div>
</form> </form>

15
preview/pages/settings.html
View File

@@ -19,16 +19,16 @@ permalink: settings.html
<div class="row g-3"> <div class="row g-3">
<div class="col-md"> <div class="col-md">
<div class="form-label">Business Name</div> <label class="form-label" for="business-name">Business Name</label>
<input type="text" class="form-control" value="{{ people[0].company }}"> <input type="text" class="form-control" id="business-name" name="business-name" value="{{ people[0].company }}">
</div> </div>
<div class="col-md"> <div class="col-md">
<div class="form-label">Business ID</div> <label class="form-label" for="business-id">Business ID</label>
<input type="text" class="form-control" value="560afc32"> <input type="text" class="form-control" id="business-id" name="business-id" value="560afc32">
</div> </div>
<div class="col-md"> <div class="col-md">
<div class="form-label">Location</div> <label class="form-label" for="location">Location</label>
<input type="text" class="form-control" <input type="text" class="form-control" id="location" name="location"
value="{{ people[0].city }}, {{ people[0].country }}"> value="{{ people[0].city }}, {{ people[0].country }}">
</div> </div>
</div> </div>
@@ -39,7 +39,8 @@ permalink: settings.html
<div> <div>
<div class="row g-2"> <div class="row g-2">
<div class="col-auto"> <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>
<div class="col-auto">{% include "ui/button.html" text="Change" %}</div> <div class="col-auto">{% include "ui/button.html" text="Change" %}</div>
</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> <p class="card-subtitle">Please confirm the transfer of funds by signing below.</p>
<form action=""> <form action="">
<div class="mb-3"> <div class="mb-3">
<label class="form-label required">First name</label> <label class="form-label required" for="signature-first-name">First name</label>
<input type="text" class="form-control" /> <input type="text" class="form-control" id="signature-first-name" name="first_name" />
</div> </div>
<div class="mb-3"> <div class="mb-3">
<label class="form-label required">Last name</label> <label class="form-label required" for="signature-last-name">Last name</label>
<input type="text" class="form-control" /> <input type="text" class="form-control" id="signature-last-name" name="last_name" />
</div> </div>
<div class="mb-3"> <div class="mb-3">
<label class="form-label required">Signature</label> <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="mt-4">
<div class="row"> <div class="row">
<div class="col"> <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" /> <input href="" type="color" id="signature-advanced-color" class="w-100 form-control form-control-color" />
</div> </div>
<div class="col"> <div class="col">

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

@@ -3,17 +3,19 @@
<div class="container-xl"> <div class="container-xl">
<div class="row text-center align-items-center flex-row-reverse"> <div class="row text-center align-items-center flex-row-reverse">
<div class="col-lg-auto ms-lg-auto"> <div class="col-lg-auto ms-lg-auto">
<ul class="list-inline list-inline-dots mb-0"> <nav aria-label="Footer">
<li class="list-inline-item"><a href="{{ site.docsUrl }}" target="_blank" class="link-secondary" rel="noopener">Documentation</a></li> <ul class="list-inline list-inline-dots mb-0">
<li class="list-inline-item"><a href="{{ page | relative }}/license.html" class="link-secondary">License</a></li> <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="{{ site.githubUrl }}" target="_blank" class="link-secondary" rel="noopener">Source code</a></li> <li class="list-inline-item"><a href="{{ page | relative }}/license.html" class="link-secondary">License</a></li>
<li class="list-inline-item"> <li class="list-inline-item"><a href="{{ site.githubUrl }}" target="_blank" class="link-secondary" rel="noopener">Source code</a></li>
<a href="{{ site.githubSponsorsUrl }}" target="_blank" class="link-secondary" rel="noopener"> <li class="list-inline-item">
{% include "ui/icon.html" icon="heart" inline=true filled=true color="pink" %} <a href="{{ site.githubSponsorsUrl }}" target="_blank" class="link-secondary" rel="noopener">
Sponsor {% include "ui/icon.html" icon="heart" inline=true filled=true color="pink" %}
</a> Sponsor
</li> </a>
</ul> </li>
</ul>
</nav>
</div> </div>
<div class="col-12 col-lg-auto mt-3 mt-lg-0"> <div class="col-12 col-lg-auto mt-3 mt-lg-0">
<ul class="list-inline list-inline-dots mb-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 %} {% for level-1 in menu %}
{% assign icon = level-1[1].icon %} {% 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 %}"> <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 %} {% unless hide-icons %}
<span class="nav-link-icon d-md-none d-lg-inline-block">{% include "ui/icon.html" icon=icon %}</span> <span class="nav-link-icon d-md-none d-lg-inline-block">{% include "ui/icon.html" icon=icon %}</span>
{% endunless %} {% endunless %}
@@ -47,7 +47,7 @@
{% if level-2[1].children %}<div class="dropend">{% endif %} {% 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 %} {% if level-2[1].icon %}
{% assign icon = level-2[1].icon %} {% assign icon = level-2[1].icon %}
{% include "ui/icon.html" icon=icon class="icon-inline me-1" %} {% 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' %} {% assign breakpoint = include.breakpoint | default: 'lg' %}
<div{% if include.class %} class="{{ include.class }}"{% endif %}> <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" %} {% include "ui/form/input-icon.html" prepend=true rounded=include.rounded aria-label="Search in website" %}
</form> </form>
</div> </div>

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

@@ -30,18 +30,22 @@
{% include "ui/icon.html" icon="bell" %} {% include "ui/icon.html" icon="bell" %}
<span class="badge bg-red"></span> <span class="badge bg-red"></span>
</a> </a>
<!-- BEGIN NAVBAR NOTIFICATIONS -->
<div class="dropdown-menu dropdown-menu-arrow dropdown-menu-end dropdown-menu-card"> <div class="dropdown-menu dropdown-menu-arrow dropdown-menu-end dropdown-menu-card">
{% include "cards/navbar-notifications.html" %} {% include "cards/navbar-notifications.html" %}
</div> </div>
<!-- END NAVBAR NOTIFICATIONS -->
</div> </div>
<div class="nav-item dropdown d-none d-md-flex me-3"> <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"> <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" %} {% include "ui/icon.html" icon="apps" %}
</a> </a>
<!-- BEGIN NAVBAR APPS -->
<div class="dropdown-menu dropdown-menu-arrow dropdown-menu-end dropdown-menu-card"> <div class="dropdown-menu dropdown-menu-arrow dropdown-menu-end dropdown-menu-card">
{% include "cards/navbar-apps.html" %} {% include "cards/navbar-apps.html" %}
</div> </div>
<!-- END NAVBAR APPS -->
</div> </div>
</div> </div>
@@ -56,6 +60,7 @@
</div> </div>
{% endunless %} {% endunless %}
</a> </a>
<!-- BEGIN USER MENU -->
<div class="dropdown-menu dropdown-menu-end dropdown-menu-arrow"{% if include.dark %} data-bs-theme="light"{% endif %}> <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="#" class="dropdown-item">Status</a>
<a href="{{ page | relative }}/profile.html" class="dropdown-item">Profile</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 }}/settings.html" class="dropdown-item">Settings</a>
<a href="{{ page | relative }}/sign-in.html" class="dropdown-item">Logout</a> <a href="{{ page | relative }}/sign-in.html" class="dropdown-item">Logout</a>
</div> </div>
<!-- END USER MENU -->
</div> </div>
</div> </div>

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

@@ -1,5 +1,5 @@
<!-- BEGIN NAVBAR TOGGLER --> <!-- 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> <span class="navbar-toggler-icon"></span>
</button> </button>
<!-- END NAVBAR TOGGLER --> <!-- END NAVBAR TOGGLER -->

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

@@ -18,20 +18,30 @@
{% if condensed %} {% if condensed %}
<div class="collapse navbar-collapse" id="navbar-menu"> <div class="collapse navbar-collapse" id="navbar-menu">
{% if include.hide-search %} {% if include.hide-search %}
{% include "layout/navbar-menu.html" sample=include.sample hide-icons=include.hide-icons %} <!-- 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 %} {% elsif include.hide-menu %}
{% include "layout/navbar-search.html" rounded=include.transparent %} {% include "layout/navbar-search.html" rounded=include.transparent %}
{% else %} {% else %}
<div class="d-flex flex-column flex-md-row flex-fill align-items-stretch align-items-md-center"> <div class="d-flex flex-column flex-md-row flex-fill align-items-stretch align-items-md-center">
{% include "layout/navbar-menu.html" sample=include.sample hide-icons=include.hide-icons %} <!-- 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 %} {% 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" %} {% 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" %}
{% unless include.fluid-search %} {% unless include.fluid-search %}
{% assign search-class = search-class | append: " flex-md-grow-0" %} {% assign search-class = search-class | append: " flex-md-grow-0" %}
{% endunless %} {% endunless %}
<!-- BEGIN NAVBAR SEARCH -->
{% include "layout/navbar-search.html" breakpoint=breakpoint rounded=include.transparent class=search-class %} {% include "layout/navbar-search.html" breakpoint=breakpoint rounded=include.transparent class=search-class %}
<!-- END NAVBAR SEARCH -->
{% endunless %} {% endunless %}
</div> </div>
{% endif %} {% endif %}
@@ -41,14 +51,20 @@
</header> </header>
{% unless condensed %} {% unless condensed %}
<header class="navbar-expand-{{ breakpoint }}"> <div class="navbar-expand-{{ breakpoint }}">
<div class="collapse navbar-collapse" id="navbar-menu"> <div class="collapse navbar-collapse" id="navbar-menu">
<div class="navbar"{% if include.dark-secondary %} data-bs-theme="dark"{% endif %}> <div class="navbar"{% if include.dark-secondary %} data-bs-theme="dark"{% endif %}>
<div class="container-xl"> <div class="container-xl">
<div class="row flex-column flex-md-row flex-fill align-items-center"> <div class="row flex-column flex-md-row flex-fill align-items-center">
<div class="col"> <div class="col">
{% include "layout/navbar-menu.html" sample=include.sample hide-icons=include.hide-icons long-titles=true %} <!-- 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> </div>
{% unless include.hide-search %} {% unless include.hide-search %}
<div class="col-2 d-none d-xxl-block"> <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" %} {% 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 %} {% endunless %}
<div class="col col-md-auto"> <div class="col col-md-auto">
<!-- BEGIN NAVBAR NAV -->
<ul class="navbar-nav"> <ul class="navbar-nav">
<li class="nav-item"> <li class="nav-item">
<a class="nav-link" href="#" data-bs-toggle="offcanvas" data-bs-target="#offcanvasSettings"> <a class="nav-link" href="#" data-bs-toggle="offcanvas" data-bs-target="#offcanvasSettings">
@@ -69,12 +86,13 @@
</a> </a>
</li> </li>
</ul> </ul>
<!-- END NAVBAR NAV -->
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</header> </div>
{% endunless %} {% endunless %}
{% if include.sticky %} {% if include.sticky %}

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

@@ -9,7 +9,7 @@
{% if page-header-file %} {% if page-header-file %}
{% include "layout/headers/{{ page-header-file }}.html" %} {% include "layout/headers/{{ page-header-file }}.html" %}
{% elsif page-header %} {% 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="container-xl">
<div class="row g-2 align-items-center"> <div class="row g-2 align-items-center">
<div class="col"> <div class="col">
@@ -19,12 +19,12 @@
{{ pretitle }} {{ pretitle }}
</div> </div>
{% endif %} {% endif %}
<h2 class="page-title"> <h1 class="page-title">
{% if page-icon %} {% if page-icon %}
{% include "ui/icon.html" icon=page-icon %} {% include "ui/icon.html" icon=page-icon %}
{% endif %} {% endif %}
{{ page-header }} {{ page-header }}
</h2> </h1>
{% if description %} {% if description %}
<div class="text-secondary mt-1">{{ description }}</div> <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>

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

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

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

@@ -2,14 +2,14 @@
<div class="subheader mb-2">Category</div> <div class="subheader mb-2">Category</div>
{% assign items = "Games,Clothing,Jewelery,Toys" | split: "," %} {% 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 %} {% for item in items %}
<a class="list-group-item list-group-item-action d-flex align-items-center{% if forloop.first %} active{% endif %}" href="#"> <a class="list-group-item list-group-item-action d-flex align-items-center{% if forloop.first %} active{% endif %}" href="#">
{{ item }} {{ item }}
<small class="text-secondary ms-auto">{{ forloop.index | random_number: 11, 200 }}</small> <small class="text-secondary ms-auto">{{ forloop.index | random_number: 11, 200 }}</small>
</a> </a>
{% endfor %} {% endfor %}
</div> </nav>
<div class="subheader mb-2">Rating</div> <div class="subheader mb-2">Rating</div>
{% assign items = "5 stars,4 stars,3 stars,2 and less stars" | split: "," %} {% 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" %} {% include "ui/icon.html" icon="brush" %}
</a> </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"> <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> <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div> </div>
<div class="offcanvas-body d-flex flex-column"> <div class="offcanvas-body d-flex flex-column">

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

@@ -1,20 +1,24 @@
{% assign breadcrumb-pages = include.pages | default: "Home,Library,Data" | split: "," -%} {% 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 -->
{%- for page in breadcrumb-pages -%} <nav aria-label="Breadcrumb">
{%- if forloop.last -%} <ol class="breadcrumb{% if include.class %} {{ include.class }}{% endif %}{% if include.separator %} breadcrumb-{{ include.separator }}{% endif %}">
<li class="breadcrumb-item active" aria-current="page"> {%- for page in breadcrumb-pages -%}
<a href="#">{{ page }}</a> {%- if forloop.last -%}
</li> <li class="breadcrumb-item active" aria-current="page">
{%- else -%} {{ page }}
<li class="breadcrumb-item"> </li>
{% if forloop.first and include.home-icon-%}
<a href="{{ site.baseurl }}/">
{% include "ui/icon.html" icon="home" %}
</a>
{%- else -%} {%- else -%}
<a href="#">{{ page }}</a> <li class="breadcrumb-item">
{% if forloop.first and include.home-icon-%}
<a href="{{ site.baseurl }}/">
{% include "ui/icon.html" icon="home" %}
</a>
{%- else -%}
<a href="#">{{ page }}</a>
{%- endif -%}
</li>
{%- endif -%} {%- endif -%}
</li> {%- endfor -%}
{%- endif -%} </ol>
{%- endfor -%} </nav>
</ol> <!-- 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 }} --> <!-- Download SVG icon from http://tabler.io/icons/icon/{{ icon-name }} -->
{% assign svg-icon = icons[icon-name].svg[icon-type] | default: '' -%} {% assign svg-icon = icons[icon-name].svg[icon-type] | default: '' -%}
{%- assign svg-icon = svg-icon | replace: '<path stroke="none" d="M0 0h24v24H0z" fill="none"/>', '' -%} {%- 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 -%} {%- endif -%}

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

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

1
shared/layouts/base.html
View File

@@ -45,6 +45,7 @@
{% assign layout-dark = layout-dark | default: site.layoutDark %} {% 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 %}> <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 --> <!-- 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> <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 --> <!-- END GLOBAL THEME SCRIPT -->

8
shared/layouts/default.html
View File

@@ -18,10 +18,12 @@ layout: base
{% endunless %} {% endunless %}
<div class="page-wrapper{% if layout-wrapper-full %} page-wrapper-full{% endif %}"> <div class="page-wrapper{% if layout-wrapper-full %} page-wrapper-full{% endif %}">
<!-- BEGIN PAGE HEADER -->
{% include "layout/page-header.html" %} {% include "layout/page-header.html" %}
<!-- END PAGE HEADER -->
<!-- BEGIN PAGE BODY --> <!-- BEGIN PAGE BODY -->
<div class="page-body"> <main id="content" class="page-body">
{% if layout-wrapper-full %} {% if layout-wrapper-full %}
{{ content }} {{ content }}
{% else %} {% else %}
@@ -34,9 +36,11 @@ layout: base
{% endunless %} {% endunless %}
{% endif %} {% endif %}
</div> </main>
<!-- END PAGE BODY --> <!-- END PAGE BODY -->
<!-- BEGIN FOOTER -->
{% include "layout/footer.html" %} {% include "layout/footer.html" %}
<!-- END FOOTER -->
</div> </div>
</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)"> <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> <script src="/dist/js/tabler-theme{% if environment != 'development' %}.min{% endif %}.js"></script>
<!-- BEGIN NAVBAR -->
<header role="banner">
{% include "docs/navbar.html" %} {% 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="container">
<div class="row g-0"> <div class="row g-0">
<div class="col-docs d-none d-lg-block border-end"> <div class="col-docs d-none d-lg-block border-end">
@@ -154,7 +159,8 @@
</div> </div>
</div> </div>
</div> </div>
</div> </main>
<!-- END PAGE BODY -->
{% for lib in libs -%} {% for lib in libs -%}
{% if docs-libs contains lib[0] or libs.global-libs contains lib[0] or lib[0] == "clipboard" -%} {% 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 body-class: body-marketing body-gradient
plugins: marketing plugins: marketing
--- ---
<!-- BEGIN NAVBAR -->
<header role="banner">
{% include "marketing/navbar.html" %} {% include "marketing/navbar.html" %}
</header>
<!-- END NAVBAR -->
<!-- BEGIN PAGE BODY -->
<main id="content">
{{ content }} {{ content }}
</main>
<!-- END PAGE BODY -->
<!-- BEGIN FOOTER -->
<footer class="footer"> <footer class="footer">
<div class="container"> <div class="container">
<div class="py-3"> <div class="py-3">
@@ -162,3 +170,4 @@ plugins: marketing
</div> </div>
</div> </div>
</footer> </footer>
<!-- END FOOTER -->

12
shared/layouts/settings.html
View File

@@ -4,29 +4,31 @@ title: Settings
page-header: Account Settings page-header: Account Settings
--- ---
<!-- BEGIN PAGE BODY -->
<div class="card"> <div class="card">
<div class="row g-0"> <div class="row g-0">
<div class="col-12 col-md-3 border-end"> <div class="col-12 col-md-3 border-end">
<div class="card-body"> <div class="card-body">
<h4 class="subheader">Business settings</h4> <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="{{ 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">My Notifications</a>
<a href="#" class="list-group-item list-group-item-action d-flex align-items-center">Connected Apps</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="{{ 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> <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> <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> <a href="#" class="list-group-item list-group-item-action">Give Feedback</a>
</div> </nav>
</div> </div>
</div> </div>
<div class="col-12 col-md-9 d-flex flex-column"> <div class="col-12 col-md-9 d-flex flex-column">
{{ content }} {{ content }}
</div> </div>
</div> </div>
</div> </div>
<!-- END PAGE BODY -->