Make the tabs container a class, to make it reusable for other tab groups

This commit is contained in:
cmdr2 2023-02-06 13:48:18 +05:30
parent ded6a41f86
commit 0b3a35c4b6
4 changed files with 6 additions and 3 deletions

View File

@ -32,7 +32,7 @@
<div id="server-status-color"></div> <div id="server-status-color"></div>
<span id="server-status-msg">Stable Diffusion is starting..</span> <span id="server-status-msg">Stable Diffusion is starting..</span>
</div> </div>
<div id="tab-container"> <div class="tab-container">
<span id="tab-main" class="tab active"> <span id="tab-main" class="tab active">
<span><i class="fa fa-image icon"></i> Generate</span> <span><i class="fa fa-image icon"></i> Generate</span>
</span> </span>

View File

@ -1029,7 +1029,7 @@ input::file-selector-button {
} }
/* TABS */ /* TABS */
#tab-container { .tab-container {
display: flex; display: flex;
align-items: flex-end; align-items: flex-end;
} }

View File

@ -1466,6 +1466,9 @@ function linkTabContents(tab) {
tab.addEventListener("click", event => selectTab(tab.id)) tab.addEventListener("click", event => selectTab(tab.id))
} }
function isTabActive(tab) {
return tab.classList.contains("active")
}
let pauseClient = false let pauseClient = false

View File

@ -9,7 +9,7 @@
} }
} }
document.querySelector('#tab-container')?.insertAdjacentHTML('beforeend', ` document.querySelector('.tab-container')?.insertAdjacentHTML('beforeend', `
<span id="tab-news" class="tab"> <span id="tab-news" class="tab">
<span><i class="fa fa-bolt icon"></i> What's new?</span> <span><i class="fa fa-bolt icon"></i> What's new?</span>
</span> </span>