Genius/hextra
1
0
Fork 0
forked from drowl87/hextra_mirror
Code Pull Requests Activity

fix: properly handle tabs overflow (#422)

Browse Source 
* fix: properly handle tabs overflow

* chore: rebuild css
This commit is contained in:
Xin 2024-07-10 01:11:51 +01:00 committed by GitHub
parent 56f6f19978
commit e3b582676e
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
5 changed files with 30 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
assets/css/compiled/main.css
View File

@ -914,9 +914,15 @@ video {
.hx-overflow-x-hidden {
overflow-x: hidden;
}
.hx-overflow-y-hidden {
overflow-y: hidden;
}
.hx-overscroll-contain {
overscroll-behavior: contain;
}
.hx-overscroll-x-contain {
overscroll-behavior-x: contain;
}
.hx-text-ellipsis {
text-overflow: ellipsis;
}

6
assets/js/tabs.js
View File

@ -1,14 +1,14 @@
document.querySelectorAll('.tabs-toggle').forEach(function (button) {
document.querySelectorAll('.hextra-tabs-toggle').forEach(function (button) {
button.addEventListener('click', function (e) {
// set parent tabs to unselected
const tabs = Array.from(e.target.parentElement.querySelectorAll('.tabs-toggle'));
const tabs = Array.from(e.target.parentElement.querySelectorAll('.hextra-tabs-toggle'));
tabs.map(tab => tab.dataset.state = '');
// set current tab to selected
e.target.dataset.state = 'selected';
// set all panels to unselected
const panelsContainer = e.target.parentElement.nextElementSibling;
const panelsContainer = e.target.parentElement.parentElement.nextElementSibling;
Array.from(panelsContainer.children).forEach(function (panel) {
panel.dataset.state = '';
});

6
exampleSite/hugo_stats.json
View File

@ -222,6 +222,8 @@
"hextra-footer",
"hextra-scrollbar",
"hextra-sidebar-collapsible-button",
"hextra-tabs-panel",
"hextra-tabs-toggle",
"hextra-toc",
"highlight",
"hover:dark:hx-bg-primary-500/10",
@ -392,7 +394,9 @@
"hx-overflow-x-auto",
"hx-overflow-x-hidden",
"hx-overflow-y-auto",
"hx-overflow-y-hidden",
"hx-overscroll-contain",
"hx-overscroll-x-contain",
"hx-p-0.5",
"hx-p-1",
"hx-p-1.5",
@ -603,8 +607,6 @@
"steps",
"subheading-anchor",
"success-icon",
"tabs-panel",
"tabs-toggle",
"theme-toggle",
"xl:hx-block"
],

2
layouts/shortcodes/tab.html
View File

@ -1,7 +1,7 @@
{{- $defaultIndex := int ((.Parent.Get "defaultIndex") | default "0") -}}
<div
class="tabs-panel hx-rounded hx-pt-6 hx-hidden data-[state=selected]:hx-block"
class="hextra-tabs-panel hx-rounded hx-pt-6 hx-hidden data-[state=selected]:hx-block"
id="tabs-panel-{{ .Ordinal }}"
role="tabpanel"
{{ if eq .Ordinal $defaultIndex }}tabindex="0"{{ end }}

5
layouts/shortcodes/tabs.html
View File

@ -5,11 +5,11 @@
{{ errorf "no items provided" }}
{{- end -}}
<div class="hextra-scrollbar hx-overflow-x-auto hx-overflow-y-hidden hx-overscroll-x-contain">
<div class="hx-mt-4 hx-flex hx-w-max hx-min-w-full hx-border-b hx-border-gray-200 hx-pb-px dark:hx-border-neutral-800">
{{- range $i, $item := $items -}}
<button
class="tabs-toggle data-[state=selected]:hx-border-primary-500 data-[state=selected]:hx-text-primary-600 hx-mr-2 hx-rounded-t hx-p-2 hx-font-medium hx-leading-5 hx-transition-colors -hx-mb-0.5 hx-select-none hx-border-b-2 hx-border-transparent hx-text-gray-600 hover:hx-border-gray-200 hover:hx-text-black dark:hx-text-gray-200 dark:hover:hx-border-neutral-800 dark:hover:hx-text-white"
class="hextra-tabs-toggle data-[state=selected]:hx-border-primary-500 data-[state=selected]:hx-text-primary-600 hx-mr-2 hx-rounded-t hx-p-2 hx-font-medium hx-leading-5 hx-transition-colors -hx-mb-0.5 hx-select-none hx-border-b-2 hx-border-transparent hx-text-gray-600 hover:hx-border-gray-200 hover:hx-text-black dark:hx-text-gray-200 dark:hover:hx-border-neutral-800 dark:hover:hx-text-white"
role="tab"
type="button"
aria-controls="tabs-panel-{{ $i }}"
@ -21,6 +21,7 @@
</button>
{{- end -}}
</div>
</div>
<div>
{{ .Inner }}
</div>