Many improvements

This commit is contained in:
Trygve 2021-07-07 20:03:05 +02:00
parent 55bf96bb2b
commit fff37bd48e
4 changed files with 71 additions and 12 deletions

View File

@ -9,7 +9,7 @@
--dark-background-color: #121212; --dark-background-color: #121212;
--dark-text-color: #eeeeee; --dark-text-color: #eeeeee;
} }
html{ height: 100% }
body{ body{
--accent-color:#303f9f; --accent-color:#303f9f;
@ -27,6 +27,14 @@ body{
color: var(--text-color); color: var(--text-color);
font-size: 1.1rem; font-size: 1.1rem;
margin: 0; margin: 0;
height: 100%;
display: grid;
grid-template-areas:
'header'
'menu'
'main'
'footer';
grid-template-rows: auto auto 1fr auto;
} }
body.theme-dark { body.theme-dark {
--background-color: var(--dark-background-color); --background-color: var(--dark-background-color);
@ -40,6 +48,7 @@ body.theme-dark {
--button-color: var(--button-color-dark); --button-color: var(--button-color-dark);
} }
header { header {
grid-area: header;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
@ -64,7 +73,24 @@ header div{
margin-left: auto; margin-left: auto;
align-items: center; 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 { table {
border-collapse: collapse; border-collapse: collapse;
line-height: 1.1rem; line-height: 1.1rem;
@ -135,7 +161,7 @@ h4 {
gap: 1rem; gap: 1rem;
/* Your container needs a fixed height, and it /* Your container needs a fixed height, and it
* needs to be taller than your tallest column. */ * needs to be taller than your tallest column. */
height: 400rem; height: 200rem;
} }
.all-result::before, .all-result::before,
.all-result::after { .all-result::after {
@ -215,6 +241,10 @@ h4 {
.theme-select { .theme-select {
margin-left: unset; margin-left: unset;
} }
.splits-table{
margin-left: 0;
margin-right: 0;
}
} }
.hiddendiv { .hiddendiv {
display:none; display:none;
@ -238,6 +268,7 @@ h4 {
} }
.splits-table{ .splits-table{
display: none; display: none;
max-width: 100vw;
} }
.splits-table td:first-child{ .splits-table td:first-child{
position: sticky; position: sticky;
@ -255,7 +286,23 @@ h4 {
min-width: 600px; min-width: 600px;
margin: auto; 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 { .fancy-button {
cursor: pointer;
background-color: transparent; background-color: transparent;
color: var(--text-accent-color); color: var(--text-accent-color);
text-align: center; 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); box-shadow: 0 0 2px 2px var(--button-color), 0 .5rem 1rem rgba(0,0,0,.15);
} }
.tab-list{ .tab-list{
grid-area: menu;
list-style: none; list-style: none;
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
@ -306,12 +354,13 @@ h4 {
margin: 0.2rem; margin: 0.2rem;
} }
.tab-button{ .tab-button{
all: revert;
display: block; display: block;
padding: 0.5rem 1rem; padding: 0.5rem 1rem;
border-radius: .25rem; border-radius: .25rem;
text-decoration: none; text-decoration: none;
font-weight: 600; font-weight: 600;
transition: 0.3s; transition: 0.15s;
color: var(--text-accent-color); color: var(--text-accent-color);
} }
.tab-button.active{ .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; box-shadow: 0 0 2px 2px var(--text-accent-color), 0 .5rem 1rem rgba(0,0,0,.15) !important;
} }
.tab-button:hover { .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{ .tab-content{
display: none; display: none;
@ -352,6 +401,7 @@ h4 {
flex: 1; flex: 1;
width: fit-content; width: fit-content;
justify-items: left; justify-items: left;
max-width: 50vw;
} }
.status-div{ .status-div{
margin-left: auto; margin-left: auto;
@ -360,6 +410,9 @@ h4 {
align-self: flex-start; align-self: flex-start;
width: 100%; width: 100%;
} }
footer{
width: 100%;
}
.tab-list{ .tab-list{
padding: 0; padding: 0;
justify-content: space-around; justify-content: space-around;

View File

@ -35,7 +35,7 @@
<ul class="tab-list" id="classes-tabs" role="tablist" style="margin-bottom: 1rem; margin-top: 1rem;"> <ul class="tab-list" id="classes-tabs" role="tablist" style="margin-bottom: 1rem; margin-top: 1rem;">
<li class="tab" role="presentation"> <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> </li>
</ul> </ul>
@ -50,10 +50,8 @@
</div> </div>
</div> </div>
<div id="liveresults" class="container"></div> <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="liveresults.js"></script>
<script src="ui.js"></script> <script src="ui.js"></script>
<script src="liveresults.js"></script>
</body> </body>
</html> </html>

View File

@ -1,8 +1,10 @@
// @license magnet:?xt=urn:btih:0b31508aeb0634b347b8270c7bee4d411b5d4109&dn=agpl-3.0.txt AGPL-v3
var tabsCreated = false; 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 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>' 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-tabs").innerHTML += StrTab;
document.getElementById("classes-tab-content").innerHTML += StrCont; document.getElementById("classes-tab-content").innerHTML += StrCont;
@ -232,7 +234,7 @@ if (typeof(EventSource) !== "undefined") {
lastMessage = parseInt(statusArray[3], 10); lastMessage = parseInt(statusArray[3], 10);
//console.log(statusArray); //console.log(statusArray);
document.getElementById("lastUpdate").innerHTML = "Siste oppdatering: " + mkDateStr(statusArray[1]); 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); updateInt = parseInt(statusArray[0], 10);
//console.log(updateInt); //console.log(updateInt);
//check if update has accured //check if update has accured
@ -285,3 +287,8 @@ function showHideSplits(className) {
} }
var interval = setInterval(checkConnection, 10000); var interval = setInterval(checkConnection, 10000);
if (window.location.hash) {
changeTab(window.location.hash.replace(/#tab-/g,''));
}
// @license-end

3
ui.js
View File

@ -1,3 +1,4 @@
// @license magnet:?xt=urn:btih:0b31508aeb0634b347b8270c7bee4d411b5d4109&dn=agpl-3.0.txt AGPL-v3
function changeTab(selected){ function changeTab(selected){
let selectElement = document.getElementById(selected); let selectElement = document.getElementById(selected);
if (!selectElement.classList.contains('active')) { if (!selectElement.classList.contains('active')) {
@ -40,4 +41,4 @@ document.addEventListener("DOMContentLoaded", () => {
applyTheme(this.value); applyTheme(this.value);
}); });
}); });
// @license-end