improve accessibility features

This commit is contained in:
Insugeny_athq
2019-06-14 20:53:26 +02:00
parent 7bff562770
commit a7c2880e92
2 changed files with 12 additions and 10 deletions

View File

@@ -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;
} }

View File

@@ -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>