Implemented my own tab code, so bootstrap could be removed.

This commit is contained in:
Trygve 2021-02-13 00:21:00 +01:00
parent b3da48ab6d
commit 55bf96bb2b
4 changed files with 118 additions and 68 deletions

View File

@ -26,6 +26,7 @@ body{
background-color: var(--background-color); background-color: var(--background-color);
color: var(--text-color); color: var(--text-color);
font-size: 1.1rem; font-size: 1.1rem;
margin: 0;
} }
body.theme-dark { body.theme-dark {
--background-color: var(--dark-background-color); --background-color: var(--dark-background-color);
@ -218,34 +219,10 @@ h4 {
.hiddendiv { .hiddendiv {
display:none; display:none;
} }
.nav-link {
font-weight: 600;
transition: 0.3s;
}
.nav-link:hover {
box-shadow: 0 .5rem 1rem rgba(0,0,0,.15) !important;
}
.button4:hover {
background-color: #e7e7e7;
}
.status-div{ .status-div{
color: #ffffffa2; color: #ffffffa2;
} }
.nav-pills .nav-link{
border-radius: .25rem;
color: var(--text-accent-color);
}
.nav-pills .nav-link.active{
color: #fff;
background-color: var(--button-color);
}
.nav-link:focus{
transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
outline: none;
box-shadow: 0 0 2px 2px var(--text-accent-color), 0 .5rem 1rem rgba(0,0,0,.15) !important;
}
.result-div{ .result-div{
width: max-content; width: max-content;
margin: auto; margin: auto;
@ -316,7 +293,46 @@ h4 {
outline: none; outline: none;
box-shadow: 0 0 2px 2px var(--button-color), 0 .5rem 1rem rgba(0,0,0,.15); box-shadow: 0 0 2px 2px var(--button-color), 0 .5rem 1rem rgba(0,0,0,.15);
} }
.tab-list{
list-style: none;
display: flex;
flex-wrap: wrap;
margin-left: auto;
margin-right: auto;
justify-content: center;
align-items: center;
}
.tab{
margin: 0.2rem;
}
.tab-button{
display: block;
padding: 0.5rem 1rem;
border-radius: .25rem;
text-decoration: none;
font-weight: 600;
transition: 0.3s;
color: var(--text-accent-color);
}
.tab-button.active{
color: #fff;
background-color: var(--button-color);
}
.tab-button:focus {
transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
outline: none;
box-shadow: 0 0 2px 2px var(--text-accent-color), 0 .5rem 1rem rgba(0,0,0,.15) !important;
}
.tab-button:hover {
box-shadow: 0 .5rem 1rem rgba(0,0,0,.15) !important;
}
.tab-content{
display: none;
}
.tab-content.active{
display: block;
}
@media only screen and (max-width: 600px) { @media only screen and (max-width: 600px) {
header { header {
@ -344,6 +360,13 @@ h4 {
align-self: flex-start; align-self: flex-start;
width: 100%; width: 100%;
} }
.tab-list{
padding: 0;
justify-content: space-around;
}
.tab-button{
padding: 0.5rem;
}
.ResultTable{ .ResultTable{
width: 100%; width: 100%;
margin: 0px; margin: 0px;
@ -392,4 +415,18 @@ h4 {
--tr-color: var(--tr-color-dark); --tr-color: var(--tr-color-dark);
--button-color: var(--button-color-dark); --button-color: var(--button-color-dark);
} }
} }
.alert-div{
color: #664d03;
background-color: #fff3cd;
border-color: #ffecb5;
position: relative;
padding: 1rem 1rem;
margin-bottom: 1rem;
border: 1px solid transparent;
border-top-color: transparent;
border-right-color: transparent;
border-bottom-color: transparent;
border-left-color: transparent;
border-radius: .25rem;
}

View File

@ -7,7 +7,6 @@
<title>Liveresultater</title> <title>Liveresultater</title>
<link rel="icon" type="image/png" href="./common/kok-144x144.png"> <link rel="icon" type="image/png" href="./common/kok-144x144.png">
<link rel="stylesheet" href="common/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="common/main.css"> <link rel="stylesheet" href="common/main.css">
</head> </head>
@ -34,19 +33,19 @@
</div> </div>
</header> </header>
<div class="container alert alert-warning hiddendiv" role="alert" id="ConnectionAlert"> <ul class="tab-list" id="classes-tabs" role="tablist" style="margin-bottom: 1rem; margin-top: 1rem;">
Du har mistet kontakten med serveren. Last inn sida nytt får å koble til igjen <button type="button" class="btn btn-warning" onclick="location.reload()">Last inn nytt</button> <li class="tab" role="presentation">
</div> <a class="tab-button active" id="alle-tab" data-toggle="tab" href="#alle" onclick="changeTab('alle')" role="tab" aria-controls="alle" aria-selected="true">Alle klasser</a>
<ul class="container nav nav-pills bd-highlight" id="classes-tabs" role="tablist" style="margin-bottom: 1rem; margin-top: 1rem;">
<li class="nav-item" role="presentation">
<a class="nav-link active" id="alle-tab" data-toggle="tab" href="#alle" role="tab" aria-controls="alle" aria-selected="true">Alle klasser</a>
</li> </li>
</ul> </ul>
<div class="tab-content" id="classes-tab-content"> <div class="container alert alert-warning hiddendiv" role="alert" id="ConnectionAlert">
<div class="tab-pane fade show active" id="alle" role="tabpanel" aria-labelledby="alle"> Du har mistet kontakten med serveren. Last inn sida nytt får å koble til igjen <button type="button" class="btn btn-warning" onclick="location.reload()">Last inn nytt</button>
</div>
<div class="tab-container" id="classes-tab-content">
<div class="tab-content active" id="alle" role="tabpanel" aria-labelledby="alle">
<div class="all-result" id="alle-cont"></div> <div class="all-result" id="alle-cont"></div>
</div> </div>
</div> </div>
@ -55,6 +54,6 @@
<script src="liveresults.js"></script> <script src="liveresults.js"></script>
<script src="common/bootstrap/js/bootstrap.min.js"></script> <script src="ui.js"></script>
</body> </body>
</html> </html>

View File

@ -2,10 +2,8 @@ var tabsCreated = false;
function createTabs(tabArray, tabNameArray) { function createTabs(tabArray, tabNameArray) {
for (let i = 0; i < tabArray.length; i++) { for (let i = 0; i < tabArray.length; i++) {
let startStrTab = '<li class="nav-item" role="presentation"><a class="nav-link" role="tab" data-toggle="tab"' let StrTab = `<li class="tab" role="presentation"><a class="tab-button" role="tab" data-toggle="tab" onclick="changeTab('${tabArray[i]}')" id="${tabArray[i]}-tab" href="#${tabArray[i]}" aria-controls="${tabArray[i]}" aria-selected="false">${tabNameArray[i].Class.Name}</a></li>`;
//console.log(tabNameArray) let StrCont = '<div class="tab-content" id="' + tabArray[i]+'" role="tabpanel" aria-labelledby="' + tabArray[i] + '-tab"></div>'
let StrTab = startStrTab + 'id="' + tabArray[i] + '-tab" href="#' + tabArray[i] + '" aria-controls="' + tabArray[i] + '" aria-selected="false">' + tabNameArray[i].Class.Name + '</a></li>';
let StrCont = '<div class="tab-pane fade show" id="' + tabArray[i]+'" role="tabpanel" aria-labelledby="' + tabArray[i] + '-tab"></div>'
document.getElementById("classes-tabs").innerHTML += StrTab; document.getElementById("classes-tabs").innerHTML += StrTab;
document.getElementById("classes-tab-content").innerHTML += StrCont; document.getElementById("classes-tab-content").innerHTML += StrCont;
tabsCreated = true; tabsCreated = true;
@ -287,30 +285,3 @@ function showHideSplits(className) {
} }
var interval = setInterval(checkConnection, 10000); var interval = setInterval(checkConnection, 10000);
//theme
function applyTheme(theme) {
document.body.classList.remove("theme-auto", "theme-light", "theme-dark");
document.body.classList.add(`theme-${theme}`);
}
document.addEventListener("DOMContentLoaded", () => {
document.querySelector("#theme").addEventListener("change", function() {
applyTheme(this.value);
});
});
document.addEventListener("DOMContentLoaded", () => {
const savedTheme = localStorage.getItem("theme") || "auto";
applyTheme(savedTheme);
for (const optionElement of document.querySelectorAll("#theme option")) {
optionElement.selected = savedTheme === optionElement.value;
}
document.querySelector("#theme").addEventListener("change", function () {
localStorage.setItem("theme", this.value);
applyTheme(this.value);
});
});

43
ui.js Normal file
View File

@ -0,0 +1,43 @@
function changeTab(selected){
let selectElement = document.getElementById(selected);
if (!selectElement.classList.contains('active')) {
let tabContList = document.getElementsByClassName('tab-content active');
let tabBtnList = document.getElementsByClassName('tab-button active');
let selectTabBtn = document.getElementById(`${selected}-tab`);
if (tabContList[0]) {
tabContList[0].classList.remove('active');
tabBtnList[0].classList.remove('active');
}
selectElement.classList.add('active');
selectTabBtn.classList.add('active');
};
};
//theme
function applyTheme(theme) {
document.body.classList.remove("theme-auto", "theme-light", "theme-dark");
document.body.classList.add(`theme-${theme}`);
}
document.addEventListener("DOMContentLoaded", () => {
document.querySelector("#theme").addEventListener("change", function() {
applyTheme(this.value);
});
});
document.addEventListener("DOMContentLoaded", () => {
const savedTheme = localStorage.getItem("theme") || "auto";
applyTheme(savedTheme);
for (const optionElement of document.querySelectorAll("#theme option")) {
optionElement.selected = savedTheme === optionElement.value;
}
document.querySelector("#theme").addEventListener("change", function () {
localStorage.setItem("theme", this.value);
applyTheme(this.value);
});
});