Added dropdown for choosing theme. Did some refactoring and bug fixing.
This commit is contained in:
Trygve
parent
0b3e621cda
commit
b3da48ab6d
114
common/main.css
114
common/main.css
|
|
@ -2,17 +2,14 @@
|
|||
--accent-color-dark: #045d56;
|
||||
--button-color-dark: #045d56;
|
||||
--text-accent-color-dark: #1eb980;
|
||||
--table-border-dark: #00000000;
|
||||
--table-border-dark: #1b1b1b;
|
||||
--tr-color-dark: #1b1b1b;
|
||||
--tr-nth-color-dark: #121212;
|
||||
--table-highlight-dark: #616161;
|
||||
--dark-background-color: #121212;
|
||||
--dark-text-color: #eeeeee;
|
||||
}
|
||||
body.theme-dark {
|
||||
--background-color: var(--dark-background-color);
|
||||
--text-color: var(dark-text-color);
|
||||
}
|
||||
|
||||
|
||||
body{
|
||||
--accent-color:#303f9f;
|
||||
|
|
@ -29,9 +26,18 @@ body{
|
|||
background-color: var(--background-color);
|
||||
color: var(--text-color);
|
||||
font-size: 1.1rem;
|
||||
min-height: 100vw;
|
||||
}
|
||||
|
||||
body.theme-dark {
|
||||
--background-color: var(--dark-background-color);
|
||||
--text-color: var(--dark-text-color);
|
||||
--tr-nth-color: var(--tr-nth-color-dark);
|
||||
--table-border: var(--table-border-dark);
|
||||
--table-highlight: var(--table-highlight-dark);
|
||||
--accent-color: var(--accent-color-dark);
|
||||
--text-accent-color: var(--text-accent-color-dark);
|
||||
--tr-color: var(--tr-color-dark);
|
||||
--button-color: var(--button-color-dark);
|
||||
}
|
||||
header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
|
@ -64,6 +70,9 @@ table {
|
|||
font-weight: 410;
|
||||
margin: 0.8rem;
|
||||
border-radius: 0.4rem;
|
||||
outline-style: solid;
|
||||
outline-width: thin;
|
||||
outline-color: var(--table-border);
|
||||
}
|
||||
|
||||
td, th {
|
||||
|
|
@ -78,7 +87,7 @@ tr {
|
|||
tr:nth-child(even){background-color: var(--tr-nth-color);}
|
||||
|
||||
tr:hover {
|
||||
background-color: var(--table-highlight);
|
||||
background-color: var(--table-highlight) !important;
|
||||
}
|
||||
tr:visited {
|
||||
background-color:var(--table-highlight);
|
||||
|
|
@ -96,6 +105,7 @@ th {
|
|||
background-color: #4CAF50;
|
||||
color: white;
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size: 20px;
|
||||
margin-bottom: auto;
|
||||
|
|
@ -116,12 +126,15 @@ h4 {
|
|||
|
||||
|
||||
.all-result{
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
display: flex;
|
||||
flex-flow: column wrap;
|
||||
align-content: space-between;
|
||||
align-content: center;
|
||||
gap: 1rem;
|
||||
/* Your container needs a fixed height, and it
|
||||
* needs to be taller than your tallest column. */
|
||||
height: 700rem;
|
||||
height: 400rem;
|
||||
}
|
||||
.all-result::before,
|
||||
.all-result::after {
|
||||
|
|
@ -131,7 +144,6 @@ h4 {
|
|||
order: 2;
|
||||
}
|
||||
.all-result-div{
|
||||
width: 32%;
|
||||
margin-bottom: 2%; /* Optional */
|
||||
}
|
||||
.all-result-div:nth-child(3n+1) { order: 1; }
|
||||
|
|
@ -162,10 +174,48 @@ h4 {
|
|||
body{
|
||||
font-size: 1rem;
|
||||
}
|
||||
}
|
||||
@media only screen and (max-width:1920px){
|
||||
.all-result{
|
||||
display: flex;
|
||||
flex-flow: column wrap;
|
||||
/* Your container needs a fixed height, and it
|
||||
* needs to be taller than your tallest column. */
|
||||
height: 700rem;
|
||||
}
|
||||
.all-result::before,
|
||||
.all-result::after {
|
||||
content: "";
|
||||
flex-basis: 100%;
|
||||
width: 0;
|
||||
order: 2;
|
||||
}
|
||||
.all-result-div{
|
||||
margin-bottom: 2%; /* Optional */
|
||||
}
|
||||
.all-result-div:nth-child(2n+1) { order: 1; }
|
||||
.all-result-div:nth-child(2n) { order: 2; }
|
||||
}
|
||||
.hiddendiv {
|
||||
.theme-select {
|
||||
margin-left: 2rem;
|
||||
}
|
||||
@media only screen and (max-width:1200px){
|
||||
.all-result{
|
||||
flex-direction: column;
|
||||
width: fit-content;
|
||||
align-content: unset;
|
||||
height: max-content;
|
||||
margin: auto;
|
||||
}
|
||||
.all-result-div{
|
||||
max-width: 100%;
|
||||
}
|
||||
.all-result-div:nth-child(n) { order: 1; }
|
||||
.theme-select {
|
||||
margin-left: unset;
|
||||
}
|
||||
}
|
||||
.hiddendiv {
|
||||
display:none;
|
||||
}
|
||||
.nav-link {
|
||||
|
|
@ -191,6 +241,11 @@ h4 {
|
|||
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;
|
||||
|
|
@ -231,7 +286,7 @@ h4 {
|
|||
border: thin solid #3c4043;
|
||||
font-weight: 700;
|
||||
border-radius: 0.25rem;
|
||||
transition: all 0.2s ease 0s;;
|
||||
transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
|
||||
margin: 0.4rem;
|
||||
padding-top: 0.2rem;
|
||||
padding-bottom: 0.2rem;
|
||||
|
|
@ -245,19 +300,21 @@ h4 {
|
|||
background-color: var(--button-color);
|
||||
border: thin solid var(--button-color);
|
||||
font-weight: 700;
|
||||
box-shadow: 0 .5rem 1rem rgba(0,0,0,.15) !important;
|
||||
box-shadow: 0 .5rem 1rem rgba(0,0,0,.15);
|
||||
transition: all 0.4s ease 0s;
|
||||
}
|
||||
}
|
||||
|
||||
.fancy-button:active{
|
||||
background-color: var(--accent-color);
|
||||
box-shadow:0px 10px 13px -6px rgba(0, 0, 0, 0.2),0px 20px 31px 3px rgba(0, 0, 0, 0.14),0px 8px 38px 7px rgba(0,0,0,.12);
|
||||
transform: translateY(3px);
|
||||
color: var(--dark-text-color);
|
||||
transition: 0.1s ease-out;
|
||||
|
||||
}
|
||||
.fancy-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(--button-color), 0 .5rem 1rem rgba(0,0,0,.15);
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -267,7 +324,10 @@ h4 {
|
|||
flex-wrap: wrap;
|
||||
padding-left: 0.2rem;
|
||||
padding-right: 0.2rem;
|
||||
max-height: 5rem;
|
||||
max-height: 7rem;
|
||||
}
|
||||
header select{
|
||||
margin-left: auto;
|
||||
}
|
||||
.header-column{
|
||||
display: flex;
|
||||
|
|
@ -287,6 +347,8 @@ h4 {
|
|||
.ResultTable{
|
||||
width: 100%;
|
||||
margin: 0px;
|
||||
margin-bottom: 0.1rem;
|
||||
margin-top: 0.1rem;
|
||||
border-radius: .4rem;
|
||||
}
|
||||
.result-div{
|
||||
|
|
@ -298,18 +360,6 @@ h4 {
|
|||
margin: 0px;
|
||||
width: 100%;
|
||||
}
|
||||
.all-result{
|
||||
flex-direction: column;
|
||||
width: 100vw;
|
||||
align-content: unset;
|
||||
}
|
||||
.all-result-div{
|
||||
width: 100vh;
|
||||
max-width: 100%;
|
||||
padding: 0px;
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
}
|
||||
.club-collum{
|
||||
display: none;
|
||||
}
|
||||
|
|
@ -323,6 +373,12 @@ h4 {
|
|||
width: 100%;
|
||||
min-width: 0;
|
||||
}
|
||||
.all-result{
|
||||
width: 100%;
|
||||
}
|
||||
.all-result-div {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
@media (prefers-color-scheme: dark) {
|
||||
body.theme-auto {
|
||||
|
|
|
|||
|
|
@ -23,6 +23,14 @@
|
|||
<div class='header-column'>
|
||||
<div class="status-div" id="lastUpdate">status</div>
|
||||
<div class="status-div" id="lastMessage">status</div>
|
||||
<div class="theme-select">
|
||||
Farger:
|
||||
<select id="theme">
|
||||
<option value="auto">Automatisk</option>
|
||||
<option value="light">Lyst</option>
|
||||
<option value="dark">Mørkt</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
|
|
|
|||
|
|
@ -24,7 +24,6 @@ function TimeFormater(stamp) {
|
|||
else{
|
||||
hourString = '';
|
||||
}
|
||||
|
||||
return hourString +("0" + minutes).slice(-2) + ":" + ("0" + seconds).slice(-2);
|
||||
}
|
||||
|
||||
|
|
@ -89,7 +88,7 @@ function loadresults() {
|
|||
//create tables
|
||||
for (let i = 0; i < xmlObj.ClassResult.length; i++) {
|
||||
let resultTable = "";
|
||||
let splitTimes = '<table class="ResultTable splits-table shadow-2" id="'+classesArray[i]+'-splits">' + '<tr class="splits-labels">';
|
||||
let splitTimes = `<table class="ResultTable splits-table" id="${classesArray[i]}-splits"><tr class="splits-labels">`;
|
||||
let winnerTime;
|
||||
let controlArray = [];
|
||||
|
||||
|
|
@ -97,7 +96,7 @@ function loadresults() {
|
|||
splitTimes += '<td></td>'
|
||||
controlArray = Array.from(xmlObj.ClassResult[i].PersonResult[0].Result.SplitTime);
|
||||
for (let s = 0; s < xmlObj.ClassResult[i].PersonResult[0].Result.SplitTime.length; s++){
|
||||
splitTimes += '<td ctrlcode="'+xmlObj.ClassResult[i].PersonResult[0].Result.SplitTime[s].ControlCode+'">' + (s+1) + '-' + xmlObj.ClassResult[i].PersonResult[0].Result.SplitTime[s].ControlCode +'</td>';
|
||||
splitTimes += `<td ctrlcode="${xmlObj.ClassResult[i].PersonResult[0].Result.SplitTime[s].ControlCode}">${(s+1)}-${xmlObj.ClassResult[i].PersonResult[0].Result.SplitTime[s].ControlCode}</td>`;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -167,7 +166,7 @@ function loadresults() {
|
|||
let controlTimeDelta = 0;
|
||||
|
||||
for (let t = 0; t < controlArray.length; t++) {
|
||||
if (typeof(xmlObj.ClassResult[i].PersonResult[k].Result.SplitTime[t].Time)!=='undefined'){
|
||||
if (typeof(xmlObj.ClassResult[i].PersonResult[k].Result.SplitTime && typeof(xmlObj.ClassResult[i].PersonResult[k].Result.SplitTime[t].Time)!=='undefined')!== 'undefined'){
|
||||
controlTime = parseInt(xmlObj.ClassResult[i].PersonResult[k].Result.SplitTime[t].Time, 10)-controlTimeDelta
|
||||
controlTimeDelta += controlTime;
|
||||
splitTimes += '<td>'+ TimeFormater(controlTime) +'<br>'+ TimeFormater(xmlObj.ClassResult[i].PersonResult[k].Result.SplitTime[t].Time)+'</td>'
|
||||
|
|
@ -184,9 +183,15 @@ function loadresults() {
|
|||
splitTimes += "</table></div>"
|
||||
|
||||
let pClassName = classesArray[i].replace(/ |\//g, "_");
|
||||
|
||||
resultTableA = '<div class="result-div"><h4>'+xmlObj.ClassResult[i].Class.Name+'</h4><table class="ResultTable shadow-2" id="'+classesArray[i]+'-table">'+'<tr class="table-labels"><td></td><td>Løper</td><td class="club-collum">Klubb</td><td>Tid</td><td>Diff</td></tr>'+resultTable;
|
||||
let resultTableB = '<div class="result-header"><h4>'+xmlObj.ClassResult[i].Class.Name+'</h4><button class="fancy-button" onclick="showHideSplits(\''+pClassName+'\')">Vis/skjul Strekktider</button></div><div class="result-div"><table class="ResultTable shadow-2" id="'+classesArray[i]+'-table">'+'<tr class="table-labels"><td></td><td>Løper</td><td class="club-collum">Klubb</td><td>Tid</td><td>Diff</td></tr>'+resultTable;
|
||||
let classTitle;
|
||||
if(typeof(xmlObj.ClassResult[i].Course)!=="undefined"){
|
||||
classTitle = '<h4>'+xmlObj.ClassResult[i].Class.Name+' ('+xmlObj.ClassResult[i].Course.Length+'m)</h4>'
|
||||
}
|
||||
else{
|
||||
classTitle = '<h4>'+xmlObj.ClassResult[i].Class.Name+'</h4>'
|
||||
}
|
||||
resultTableA = '<div class="result-div">'+'<h4>'+xmlObj.ClassResult[i].Class.Name+'</h4>'+'<table class="ResultTable" id="'+classesArray[i]+'-table">'+'<tr class="table-labels"><td></td><td>Løper</td><td class="club-collum">Klubb</td><td>Tid</td><td>Diff</td></tr>'+resultTable;
|
||||
let resultTableB = '<div class="result-header">'+classTitle+'<button class="fancy-button" onclick="showHideSplits(\''+pClassName+'\')">Vis/skjul Strekktider</button></div><div class="result-div"><table class="ResultTable" id="'+classesArray[i]+'-table">'+'<tr class="table-labels"><td></td><td>Løper</td><td class="club-collum">Klubb</td><td>Tid</td><td>Diff</td></tr>'+resultTable;
|
||||
splitTimes = '<div class="result-div">'+splitTimes;
|
||||
|
||||
document.getElementById(pClassName).innerHTML = resultTableB+splitTimes;
|
||||
|
|
@ -273,12 +278,39 @@ function showHideSplits(className) {
|
|||
let x = document.getElementById(className+'-table');
|
||||
let y = document.getElementById(className+'-splits');
|
||||
if (x.style.display === "none") {
|
||||
x.style.display = "block";
|
||||
x.style.display = "table";
|
||||
y.style.display = "none";
|
||||
} else {
|
||||
x.style.display = "none";
|
||||
y.style.display = "block";
|
||||
y.style.display = "table";
|
||||
}
|
||||
}
|
||||
|
||||
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);
|
||||
});
|
||||
});
|
||||
|
|
|
|||
Loading…
Reference in New Issue