mirror of
https://github.com/McShelby/hugo-theme-relearn.git
synced 2024-11-27 01:33:04 +00:00
tabs: nested tabs content is not displayed #468
This commit is contained in:
parent
fbdb71e6fa
commit
56bc99b79a
3 changed files with 20 additions and 17 deletions
|
@ -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>
|
||||||
|
|
|
@ -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;
|
||||||
}
|
}
|
||||||
|
|
|
@ -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;
|
||||||
|
|
Loading…
Reference in a new issue