diff --git a/ReallifeGamemode.Client/assets/css/onlinelist/style.css b/ReallifeGamemode.Client/assets/css/onlinelist/style.css index 28dd56ed..668595aa 100644 --- a/ReallifeGamemode.Client/assets/css/onlinelist/style.css +++ b/ReallifeGamemode.Client/assets/css/onlinelist/style.css @@ -19,8 +19,8 @@ html, body { } body { - margin: 15vh auto 0; - width: 32vw; + margin: 10vh auto 0; + width: 35vw; color: white; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; font-size: 1em; @@ -49,13 +49,23 @@ h2 { -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; - margin-bottom: 1.5em; + margin-bottom: 1em; padding: 1em 1em 0; } +.factions { + position: -webkit-sticky; + position: sticky; + top: 0; + z-index: 3; + padding: 1em 0; + background-color: #404040; + font-size: .9em; +} + .wrapper { - min-height: 50vh; - max-height: 70vh; + min-height: 60vh; + max-height: 80vh; overflow-y: scroll; border-radius: .25em; background-color: rgba(0, 0, 0, 0.75); @@ -74,7 +84,7 @@ table { table th { position: -webkit-sticky; position: sticky; - top: 0; + top: 3em; text-align: left; z-index: 2; background-color: black; @@ -203,18 +213,6 @@ ol.inline.stats { justify-content: center; } -ol.inline.stats:first-of-type { - margin-top: 1em !important; -} - -ol.inline.stats:last-of-type { - margin-bottom: 1em; -} - -ol.inline.stats:not(:last-of-type) { - margin-bottom: .125em; -} - ol.inline.stats abbr { text-decoration: none; } diff --git a/ReallifeGamemode.Client/assets/css/onlinelist/style.css.map b/ReallifeGamemode.Client/assets/css/onlinelist/style.css.map index 74b823b9..948e65a4 100644 --- a/ReallifeGamemode.Client/assets/css/onlinelist/style.css.map +++ b/ReallifeGamemode.Client/assets/css/onlinelist/style.css.map @@ -1,9 +1,9 @@ { "version": 3, - "mappings": "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", + "mappings": "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", "sources": [ "style.scss" ], "names": [], "file": "style.css" -} \ No newline at end of file +} diff --git a/ReallifeGamemode.Client/assets/css/onlinelist/style.scss b/ReallifeGamemode.Client/assets/css/onlinelist/style.scss index 6486aa77..a97d1792 100644 --- a/ReallifeGamemode.Client/assets/css/onlinelist/style.scss +++ b/ReallifeGamemode.Client/assets/css/onlinelist/style.scss @@ -9,9 +9,9 @@ html, body { margin: unset; } *, *:before, *:after { box-sizing: inherit; } body { - margin: 15vh auto 0; + margin: 10vh auto 0; - width: 32vw; + width: 35vw; color: white; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; @@ -30,13 +30,22 @@ h2 { font-size: 1.125em; } display: flex; justify-content: space-between; align-items: flex-start; - margin-bottom: 1.5em; + margin-bottom: 1em; padding: 1em 1em 0; } +.factions { + position: sticky; + top: 0; + z-index: 3; + padding: 1em 0; + background-color: #404040; + font-size: .9em; +} + .wrapper { - min-height: 50vh; - max-height: 70vh; + min-height: 60vh; + max-height: 80vh; overflow-y: scroll; border-radius: .25em; @@ -52,7 +61,7 @@ table { th { position: sticky; - top: 0; + top: 3em; text-align: left; z-index: 2; @@ -129,10 +138,6 @@ ol.inline { ol.inline.stats { justify-content: center; - - &:first-of-type { margin-top: 1em !important; } - &:last-of-type { margin-bottom: 1em; } - &:not(:last-of-type) { margin-bottom: .125em; } abbr { text-decoration: none; } -} +} \ No newline at end of file diff --git a/ReallifeGamemode.Client/assets/html/onlinelist/index.html b/ReallifeGamemode.Client/assets/html/onlinelist/index.html index ed0290f9..5e54c6d3 100644 --- a/ReallifeGamemode.Client/assets/html/onlinelist/index.html +++ b/ReallifeGamemode.Client/assets/html/onlinelist/index.html @@ -5,7 +5,7 @@ Spielerliste - +
@@ -14,6 +14,21 @@

Spieler: 0

+
+
    +
  1. LSPD: 0
    2. +
  2. FIB: 0
    3. +
  3. LSED: 0
    4. + +
  4. GSF: 0
    5. +
  5. FYB: 0
    6. +
  6. LSV: 0
    7. + +
  7. WZN: 0
    8. +
  8. ZIVI: 0
    9. +
+
+ @@ -27,26 +42,8 @@
- -
    -
  1. LSPD: 0
    2. -
  2. FIB: 0
    3. -
  3. LSED: 0
    4. -
- -
    -
  1. GSF: 0
    2. -
  2. FYB: 0
    3. -
  3. LSV: 0
    4. -
- -
    -
  1. WZN: 0
    2. -
  2. Zivilisten: 0
    3. -
- - - + + diff --git a/ReallifeGamemode.Client/assets/js/onlinelist/script.js b/ReallifeGamemode.Client/assets/js/onlinelist/script.js index e6a5154c..a662711b 100644 --- a/ReallifeGamemode.Client/assets/js/onlinelist/script.js +++ b/ReallifeGamemode.Client/assets/js/onlinelist/script.js @@ -1,12 +1,9 @@ window.onbeforeunload = () => { window.scrollTo(0, 0); } -$(document).ready(function () { - mp.trigger('CEF:PlayerList_Loaded'); -}); - setPlayerCount = (factionId, value) => { if (factionId == -1) { document.getElementById('player-count').innerHTML = value; + addTableSorting(); } else if (factionId >= 0 && factionId <= 9) { document.getElementById(factionId).innerHTML = value; } @@ -30,3 +27,34 @@ function addPlayerEntry(userId, userName, factionId, userPing) { var factionName = getFactionNameByFactionId(factionId); document.getElementById('players').innerHTML += `${userId} ${userName} ${factionName} ${userPing}`; } + +// https://www.jstips.co/en/javascript/detect-document-ready-in-pure-js/ +document.onreadystatechange = () => { + if (document.readyState === 'complete') { mp.trigger('CEF:PlayerList_Loaded'); } +}; + +// Sortierung von https://codepen.io/selbekk/pen/LNOZKL +function addTableSorting() { + const headers = Array.from(document.querySelectorAll('th')); + const rows = Array.from(document.querySelectorAll('tbody tr')); + + function sort(e) { + const index = headers.indexOf(e.target); + const sortVal = e.target.classList.contains('is-asc') ? 1 : -1; + rows.sort((a, b) => { + const aValue = a.children[index].innerHTML; + const bValue = b.children[index].innerHTML; + if(aValue > bValue) { return sortVal; } + if(aValue < bValue) { return -sortVal; } + return 0; + }) + + e.target.classList.add('is-sorted'); + e.target.classList.toggle('is-asc'); + const body = document.querySelector('tbody'); + body.innerHTML = ''; + rows.forEach(row => body.appendChild(row)); + } + + headers.forEach(header => header.addEventListener('click', sort)); +}