mirror of
https://github.com/FAUSheppy/open-web-leaderboard.git
synced 2025-12-09 08:28:32 +01:00
improve accessibility features
This commit is contained in:
@@ -24,7 +24,7 @@ body{
|
|||||||
.top-button{
|
.top-button{
|
||||||
float: left;
|
float: left;
|
||||||
margin-right: 10px;
|
margin-right: 10px;
|
||||||
background-color: red;
|
background-color: #FF6B6B;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
color: #583535;
|
color: #583535;
|
||||||
}
|
}
|
||||||
@@ -118,7 +118,6 @@ body{
|
|||||||
margin-bottom: 50px;
|
margin-bottom: 50px;
|
||||||
margin-left: auto;
|
margin-left: auto;
|
||||||
margin-right: auto;
|
margin-right: auto;
|
||||||
background-color: green;
|
|
||||||
min-width: 250px;
|
min-width: 250px;
|
||||||
width: 80%;
|
width: 80%;
|
||||||
max-width: 800px;
|
max-width: 800px;
|
||||||
@@ -127,13 +126,13 @@ body{
|
|||||||
.colum-names{
|
.colum-names{
|
||||||
width: 100%;
|
width: 100%;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
background-color: green;
|
background-color: #00B800;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
}
|
}
|
||||||
|
|
||||||
.line-even{
|
.line-even{
|
||||||
width: 100%;
|
width: 100%;
|
||||||
background-color: grey;
|
background-color: #999999; /* 60% grey */
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
padding-top: 2px;
|
padding-top: 2px;
|
||||||
padding-bottom: 2px;
|
padding-bottom: 2px;
|
||||||
@@ -153,7 +152,7 @@ body{
|
|||||||
}
|
}
|
||||||
|
|
||||||
.endOfBoardIndicator{
|
.endOfBoardIndicator{
|
||||||
background: red;
|
background: #FF6B6B;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,16 +1,17 @@
|
|||||||
<html>
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<title>Leaderboard</title>
|
<title>Leaderboard</title>
|
||||||
|
<meta name="Description" content="Open Web Leaderboard">
|
||||||
<link rel="stylesheet" type="text/css" href="/static/site.css">
|
<link rel="stylesheet" type="text/css" href="/static/site.css">
|
||||||
<link rel="shortcut icon" href="/static/defaultFavicon.ico">
|
<link rel="shortcut icon" href="/static/defaultFavicon.ico">
|
||||||
<script src="static/buttons.js" defer></script>
|
<script src="static/buttons.js" defer></script>
|
||||||
|
|
||||||
<!-- needed for @media-css mofiers -->
|
<!-- needed for @media-css mofiers -->
|
||||||
<meta content="width=device-width, initial-scale=1" name="viewport" />
|
<meta content="width=device-width, initial-scale=1" name="viewport" />
|
||||||
|
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div class=top-bar>
|
<div class=top-bar role="navigation">
|
||||||
<button id="button-backward" type="button" onclick=backward()
|
<button id="button-backward" type="button" onclick=backward()
|
||||||
class=top-button>Backward </button>
|
class=top-button>Backward </button>
|
||||||
<button id="button-forward" type="button" onclick=forward()
|
<button id="button-forward" type="button" onclick=forward()
|
||||||
@@ -20,11 +21,13 @@
|
|||||||
|
|
||||||
<input id="getPlayer" type="text" class=input-field
|
<input id="getPlayer" type="text" class=input-field
|
||||||
placeholder="search player...">
|
placeholder="search player...">
|
||||||
|
<label for="getPlayer">Search for a player.</label>
|
||||||
<input id="gotoRank" type="number" class=input-field-number
|
<input id="gotoRank" type="number" class=input-field-number
|
||||||
placeholder="goto rank...">
|
placeholder="goto rank...">
|
||||||
|
<label for="gotoRank">Jump to a given rank.</label>
|
||||||
{{ findPlayer }}
|
{{ findPlayer }}
|
||||||
</div>
|
</div>
|
||||||
<div class=leaderboard-container>
|
<div class=leaderboard-container role="main">
|
||||||
<div class=colum-names>{{ columNames }}</div>
|
<div class=colum-names>{{ columNames }}</div>
|
||||||
{% for player in playerList %}
|
{% for player in playerList %}
|
||||||
{% set count = loop.index + start %}
|
{% set count = loop.index + start %}
|
||||||
@@ -40,7 +43,7 @@
|
|||||||
{% endfor %}
|
{% endfor %}
|
||||||
{{ endOfBoardIndicator }}
|
{{ endOfBoardIndicator }}
|
||||||
</div>
|
</div>
|
||||||
<div class=footer>
|
<div class=footer role="contentinfo">
|
||||||
<a class="footerLink" href="https://blog.atlantishq.de/about">Impressum/Legal</a>
|
<a class="footerLink" href="https://blog.atlantishq.de/about">Impressum/Legal</a>
|
||||||
<a class="footerLink mid" href="https://blog.atlantishq.de/post/insurgency-rating-1/">
|
<a class="footerLink mid" href="https://blog.atlantishq.de/post/insurgency-rating-1/">
|
||||||
How does it work?</a>
|
How does it work?</a>
|
||||||
|
|||||||
Reference in New Issue
Block a user