Implemented my own tab code, so bootstrap could be removed.
This commit is contained in:
Trygve
parent
b3da48ab6d
commit
55bf96bb2b
|
|
@ -26,6 +26,7 @@ body{
|
|||
background-color: var(--background-color);
|
||||
color: var(--text-color);
|
||||
font-size: 1.1rem;
|
||||
margin: 0;
|
||||
}
|
||||
body.theme-dark {
|
||||
--background-color: var(--dark-background-color);
|
||||
|
|
@ -218,34 +219,10 @@ h4 {
|
|||
.hiddendiv {
|
||||
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{
|
||||
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{
|
||||
width: max-content;
|
||||
margin: auto;
|
||||
|
|
@ -316,7 +293,46 @@ h4 {
|
|||
outline: none;
|
||||
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) {
|
||||
header {
|
||||
|
|
@ -344,6 +360,13 @@ h4 {
|
|||
align-self: flex-start;
|
||||
width: 100%;
|
||||
}
|
||||
.tab-list{
|
||||
padding: 0;
|
||||
justify-content: space-around;
|
||||
}
|
||||
.tab-button{
|
||||
padding: 0.5rem;
|
||||
}
|
||||
.ResultTable{
|
||||
width: 100%;
|
||||
margin: 0px;
|
||||
|
|
@ -392,4 +415,18 @@ h4 {
|
|||
--tr-color: var(--tr-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;
|
||||
}
|
||||
|
|
|
|||
21
index.php
21
index.php
|
|
@ -7,7 +7,6 @@
|
|||
<title>Liveresultater</title>
|
||||
|
||||
<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">
|
||||
</head>
|
||||
|
||||
|
|
@ -34,19 +33,19 @@
|
|||
</div>
|
||||
</header>
|
||||
|
||||
<div class="container alert alert-warning hiddendiv" role="alert" id="ConnectionAlert">
|
||||
Du har mistet kontakten med serveren. Last inn sida på nytt får å koble til igjen <button type="button" class="btn btn-warning" onclick="location.reload()">Last inn på nytt</button>
|
||||
</div>
|
||||
|
||||
<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>
|
||||
<ul class="tab-list" id="classes-tabs" role="tablist" style="margin-bottom: 1rem; margin-top: 1rem;">
|
||||
<li class="tab" role="presentation">
|
||||
<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>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
<div class="tab-content" id="classes-tab-content">
|
||||
<div class="tab-pane fade show active" id="alle" role="tabpanel" aria-labelledby="alle">
|
||||
<div class="container alert alert-warning hiddendiv" role="alert" id="ConnectionAlert">
|
||||
Du har mistet kontakten med serveren. Last inn sida på nytt får å koble til igjen <button type="button" class="btn btn-warning" onclick="location.reload()">Last inn på 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>
|
||||
</div>
|
||||
|
|
@ -55,6 +54,6 @@
|
|||
|
||||
|
||||
<script src="liveresults.js"></script>
|
||||
<script src="common/bootstrap/js/bootstrap.min.js"></script>
|
||||
<script src="ui.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -2,10 +2,8 @@ var tabsCreated = false;
|
|||
|
||||
function createTabs(tabArray, tabNameArray) {
|
||||
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"'
|
||||
//console.log(tabNameArray)
|
||||
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>'
|
||||
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>`;
|
||||
let StrCont = '<div class="tab-content" id="' + tabArray[i]+'" role="tabpanel" aria-labelledby="' + tabArray[i] + '-tab"></div>'
|
||||
document.getElementById("classes-tabs").innerHTML += StrTab;
|
||||
document.getElementById("classes-tab-content").innerHTML += StrCont;
|
||||
tabsCreated = true;
|
||||
|
|
@ -287,30 +285,3 @@ function showHideSplits(className) {
|
|||
}
|
||||
|
||||
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);
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
});
|
||||
});
|
||||
|
||||
Loading…
Reference in New Issue