Many improvements
This commit is contained in:
parent
55bf96bb2b
commit
fff37bd48e
@ -9,7 +9,7 @@
|
||||
--dark-background-color: #121212;
|
||||
--dark-text-color: #eeeeee;
|
||||
}
|
||||
|
||||
html{ height: 100% }
|
||||
|
||||
body{
|
||||
--accent-color:#303f9f;
|
||||
@ -27,6 +27,14 @@ body{
|
||||
color: var(--text-color);
|
||||
font-size: 1.1rem;
|
||||
margin: 0;
|
||||
height: 100%;
|
||||
display: grid;
|
||||
grid-template-areas:
|
||||
'header'
|
||||
'menu'
|
||||
'main'
|
||||
'footer';
|
||||
grid-template-rows: auto auto 1fr auto;
|
||||
}
|
||||
body.theme-dark {
|
||||
--background-color: var(--dark-background-color);
|
||||
@ -40,6 +48,7 @@ body.theme-dark {
|
||||
--button-color: var(--button-color-dark);
|
||||
}
|
||||
header {
|
||||
grid-area: header;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
@ -64,7 +73,24 @@ header div{
|
||||
margin-left: auto;
|
||||
align-items: center;
|
||||
}
|
||||
footer {
|
||||
grid-area: footer;
|
||||
border-radius: 0.4rem;
|
||||
outline-style: solid;
|
||||
outline-width: thin;
|
||||
outline-color: var(--table-border);
|
||||
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
footer p{
|
||||
margin: 0.5rem;
|
||||
line-height: 1.5;
|
||||
|
||||
}
|
||||
.tab-container{
|
||||
grid-area: main;
|
||||
}
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
line-height: 1.1rem;
|
||||
@ -135,7 +161,7 @@ h4 {
|
||||
gap: 1rem;
|
||||
/* Your container needs a fixed height, and it
|
||||
* needs to be taller than your tallest column. */
|
||||
height: 400rem;
|
||||
height: 200rem;
|
||||
}
|
||||
.all-result::before,
|
||||
.all-result::after {
|
||||
@ -215,6 +241,10 @@ h4 {
|
||||
.theme-select {
|
||||
margin-left: unset;
|
||||
}
|
||||
.splits-table{
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
.hiddendiv {
|
||||
display:none;
|
||||
@ -238,6 +268,7 @@ h4 {
|
||||
}
|
||||
.splits-table{
|
||||
display: none;
|
||||
max-width: 100vw;
|
||||
}
|
||||
.splits-table td:first-child{
|
||||
position: sticky;
|
||||
@ -255,7 +286,23 @@ h4 {
|
||||
min-width: 600px;
|
||||
margin: auto;
|
||||
}
|
||||
a{
|
||||
color: var(--text-accent-color);
|
||||
border-bottom: 1px solid var(--text-accent-color);
|
||||
border-bottom-style: inset;
|
||||
text-decoration: none;
|
||||
padding: 0 1px 0;
|
||||
margin: 0 -1px 0;
|
||||
}
|
||||
a:hover{
|
||||
border-bottom-width: 3px;
|
||||
margin-bottom: -2px;
|
||||
}
|
||||
select{
|
||||
cursor: pointer;
|
||||
}
|
||||
.fancy-button {
|
||||
cursor: pointer;
|
||||
background-color: transparent;
|
||||
color: var(--text-accent-color);
|
||||
text-align: center;
|
||||
@ -294,6 +341,7 @@ h4 {
|
||||
box-shadow: 0 0 2px 2px var(--button-color), 0 .5rem 1rem rgba(0,0,0,.15);
|
||||
}
|
||||
.tab-list{
|
||||
grid-area: menu;
|
||||
list-style: none;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
@ -306,12 +354,13 @@ h4 {
|
||||
margin: 0.2rem;
|
||||
}
|
||||
.tab-button{
|
||||
all: revert;
|
||||
display: block;
|
||||
padding: 0.5rem 1rem;
|
||||
border-radius: .25rem;
|
||||
text-decoration: none;
|
||||
font-weight: 600;
|
||||
transition: 0.3s;
|
||||
transition: 0.15s;
|
||||
color: var(--text-accent-color);
|
||||
}
|
||||
.tab-button.active{
|
||||
@ -325,7 +374,7 @@ h4 {
|
||||
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;
|
||||
box-shadow: 0 .5rem 1rem rgba(0,0,0,.15);
|
||||
}
|
||||
.tab-content{
|
||||
display: none;
|
||||
@ -352,6 +401,7 @@ h4 {
|
||||
flex: 1;
|
||||
width: fit-content;
|
||||
justify-items: left;
|
||||
max-width: 50vw;
|
||||
}
|
||||
.status-div{
|
||||
margin-left: auto;
|
||||
@ -360,6 +410,9 @@ h4 {
|
||||
align-self: flex-start;
|
||||
width: 100%;
|
||||
}
|
||||
footer{
|
||||
width: 100%;
|
||||
}
|
||||
.tab-list{
|
||||
padding: 0;
|
||||
justify-content: space-around;
|
||||
|
||||
@ -35,7 +35,7 @@
|
||||
|
||||
<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>
|
||||
<a class="tab-button active" id="alle-tab" data-toggle="tab" href="#tab-alle" onclick="changeTab('alle')" role="tab" aria-controls="alle" aria-selected="true">Alle klasser</a>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
@ -50,10 +50,8 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="liveresults" class="container"></div>
|
||||
|
||||
|
||||
<script src="liveresults.js"></script>
|
||||
<footer><p>Denne sida er fri programmvare under <a href="http://www.gnu.org/licenses/agpl-3.0.html">AGPL 3.0</a>. Kildekoden er tilgjengelig <a href="https://gitlab.com/Trygve/simple-liveresults">her</a>. </p></footer>
|
||||
<script src="ui.js"></script>
|
||||
<script src="liveresults.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -1,8 +1,10 @@
|
||||
// @license magnet:?xt=urn:btih:0b31508aeb0634b347b8270c7bee4d411b5d4109&dn=agpl-3.0.txt AGPL-v3
|
||||
|
||||
var tabsCreated = false;
|
||||
|
||||
function createTabs(tabArray, tabNameArray) {
|
||||
for (let i = 0; i < tabArray.length; i++) {
|
||||
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 StrTab = `<li class="tab" role="presentation"><a class="tab-button" role="tab" data-toggle="tab" onclick="changeTab('${tabArray[i]}')" id="${tabArray[i]}-tab" href="#tab-${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;
|
||||
@ -232,7 +234,7 @@ if (typeof(EventSource) !== "undefined") {
|
||||
lastMessage = parseInt(statusArray[3], 10);
|
||||
//console.log(statusArray);
|
||||
document.getElementById("lastUpdate").innerHTML = "Siste oppdatering: " + mkDateStr(statusArray[1]);
|
||||
document.getElementById("lastMessage").innerHTML = "Siste sjekket: " + mkDateStr(statusArray[2]);
|
||||
document.getElementById("lastMessage").innerHTML = "Sist sjekket: " + mkDateStr(statusArray[2]);
|
||||
updateInt = parseInt(statusArray[0], 10);
|
||||
//console.log(updateInt);
|
||||
//check if update has accured
|
||||
@ -285,3 +287,8 @@ function showHideSplits(className) {
|
||||
}
|
||||
|
||||
var interval = setInterval(checkConnection, 10000);
|
||||
|
||||
if (window.location.hash) {
|
||||
changeTab(window.location.hash.replace(/#tab-/g,''));
|
||||
}
|
||||
// @license-end
|
||||
|
||||
3
ui.js
3
ui.js
@ -1,3 +1,4 @@
|
||||
// @license magnet:?xt=urn:btih:0b31508aeb0634b347b8270c7bee4d411b5d4109&dn=agpl-3.0.txt AGPL-v3
|
||||
function changeTab(selected){
|
||||
let selectElement = document.getElementById(selected);
|
||||
if (!selectElement.classList.contains('active')) {
|
||||
@ -40,4 +41,4 @@ document.addEventListener("DOMContentLoaded", () => {
|
||||
applyTheme(this.value);
|
||||
});
|
||||
});
|
||||
|
||||
// @license-end
|
||||
|
||||
Loading…
Reference in New Issue
Block a user