tabs: nested tabs content is not displayed #468

This commit is contained in:
Sören Weber 2023-02-07 18:06:34 +01:00
parent fbdb71e6fa
commit 56bc99b79a
No known key found for this signature in database
GPG key ID: BEC6D55545451B6D
3 changed files with 20 additions and 17 deletions

View file

@ -18,7 +18,7 @@
{{- range $idx, $tab := $tabs }} {{- range $idx, $tab := $tabs }}
<div <div
data-tab-item="{{ .name }}" data-tab-item="{{ .name }}"
class="tab-item {{ cond (eq $idx 0) "active" ""}}" class="tab-content-text {{ cond (eq $idx 0) "active" ""}}"
> >
{{ .content | safeHTML }} {{ .content | safeHTML }}
</div> </div>

View file

@ -1,4 +1,8 @@
#body .tab-nav-button { #body .tab-panel{
margin-bottom: 1.5rem;
margin-top: 1.5rem;
}
#body .tab-nav-button{
background-color: rgba( 134, 134, 134, .166 ); background-color: rgba( 134, 134, 134, .166 );
border-color: rgba( 134, 134, 134, .333 ); border-color: rgba( 134, 134, 134, .333 );
border-radius: 4px 4px 0 0; border-radius: 4px 4px 0 0;
@ -16,27 +20,23 @@
padding: 6px 12px; padding: 6px 12px;
position: relative; position: relative;
} }
#body .tab-nav-button.direction-rtl { #body .tab-nav-button.direction-rtl{
float: right; float: right;
} }
#body .tab-nav-button:first-child { #body .tab-nav-button:first-child{
margin-inline-start: 9px; margin-inline-start: 9px;
} }
#body .tab-nav-button:not(.active) { #body .tab-nav-button:not(.active){
border-bottom-color: rgba( 134, 134, 134, .1 ); border-bottom-color: rgba( 134, 134, 134, .1 );
margin-top: 8px; margin-top: 8px;
padding-bottom: 2px !important; padding-bottom: 2px !important;
padding-top: 2px !important; padding-top: 2px !important;
} }
#body .tab-nav-button:not(.active) span { #body .tab-nav-button:not(.active) span{
opacity: .8; opacity: .8;
} }
#body .tab-panel { #body .tab-content{
margin-bottom: 1.5rem;
margin-top: 1.5rem;
}
#body .tab-content {
background-color: transparent; background-color: transparent;
border-color: rgba( 134, 134, 134, .333 ); border-color: rgba( 134, 134, 134, .333 );
border-style: solid; border-style: solid;
@ -48,15 +48,15 @@
padding: 8px; padding: 8px;
z-index: 10; z-index: 10;
} }
#body .tab-content .tab-item{ #body .tab-content-text{
display: none; display: none;
} }
#body .tab-content .tab-item.active{ #body .tab-content-text.active{
display: block; display: block;
} }
#body .tab-item pre{ #body .tab-content-text pre{
margin-bottom: 0; margin-bottom: 0;
margin-top: 0; margin-top: 0;
} }

View file

@ -59,17 +59,20 @@ function switchTab(tabGroup, tabId) {
return !!e.querySelector( '[data-tab-item="'+tabId+'"]' ); return !!e.querySelector( '[data-tab-item="'+tabId+'"]' );
}); });
var allTabItems = tabs && tabs.reduce( function( a, e ){ var allTabItems = tabs && tabs.reduce( function( a, e ){
return a.concat( Array.from( e.querySelectorAll( '.tab-nav-button, .tab-item' ) ) ); return a.concat( Array.from( e.querySelectorAll( '[data-tab-item]' ) ).filter( function( es ){
return es.parentNode.parentNode == e;
}) );
}, [] ); }, [] );
var targetTabItems = tabs && tabs.reduce( function( a, e ){ var targetTabItems = tabs && tabs.reduce( function( a, e ){
return a.concat( Array.from( e.querySelectorAll( '[data-tab-item="'+tabId+'"]' ) ) ); return a.concat( Array.from( e.querySelectorAll( '[data-tab-item="'+tabId+'"]' ) ).filter( function( es ){
return es.parentNode.parentNode == e;
}) );
}, [] ); }, [] );
// if event is undefined then switchTab was called from restoreTabSelection // if event is undefined then switchTab was called from restoreTabSelection
// so it's not a button event and we don't need to safe the selction or // so it's not a button event and we don't need to safe the selction or
// prevent page jump // prevent page jump
var isButtonEvent = event && event.target && event.target.getBoundingClientRect; var isButtonEvent = event && event.target && event.target.getBoundingClientRect;
if(isButtonEvent){ if(isButtonEvent){
// save button position relative to viewport // save button position relative to viewport
var yposButton = event.target.getBoundingClientRect().top; var yposButton = event.target.getBoundingClientRect().top;