serg2-mirrors/GDBrowser
1
0
Fork 0
Code Issues 8 Pull requests 10 Projects Releases Packages Wiki Activity Actions

the tab key is pretty cool

Browse source
This commit is contained in:
GDColon 2021-05-28 13:23:59 -04:00
parent 2cc8f87810
commit 8e2c88bb76
4 changed files with 18 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
assets/css/browser.css
View file

@ -464,7 +464,7 @@ input::-webkit-outer-spin-button, input::-webkit-inner-spin-button {
transition-timing-function: ease-in-out;
}
.gdButton:active {
.gdButton:active, .gdButton:focus-visible, a:focus-visible .gdButton {
animation: bounceButton 0.25s ease-in-out forwards;
}
@ -490,13 +490,20 @@ input::-webkit-outer-spin-button, input::-webkit-inner-spin-button {
margin-bottom: 15%;
}
.menuButtonList td {
padding: 1.2vh 2vh;
}
.menuButtonList td a {
display: inline-block;
}
.menuButton {
width: 24vh;
margin: 1.2vh 2vh;
cursor: pointer;
}
.menuButton:active {
.menuButton:active, .menuButton:focus-visible, a:focus-visible .menuButton {
animation: bounceButton 0.25s ease-in-out forwards;
}

4
html/filters.html
View file

@ -242,9 +242,9 @@ $('.lengthDiv').click(function() {
})
$(document).keydown(function(k) {
if (k.which == 13) {
if (!$(':focus-visible').length && k.which == 13) { // enter
if (!$('#customlist').is(':hidden')) k.preventDefault();
else if ($('#filters').is(':hidden')) $('#searchBtn').trigger('click') //enter
else if ($('#filters').is(':hidden')) $('#searchBtn').trigger('click')
}
});

11
html/home.html
View file

@ -25,6 +25,9 @@
<img class="cornerPiece" src="../assets/corner.png" width=7%; style="transform: scaleY(-1)">
</div>
<div style="position:absolute; top: 1.7%; right: 2%; text-align: right; width: 10%;">
<img id="creditsButton" class="gdButton" src="../assets/credits.png" width="60%" onclick="loadCredits()">
</div>
<div class="menu-achievements" style="position:absolute; top: 5.5%; left: 3%; width: 12%;">
<a href="../achievements"><img class="gdButton" src="../assets/achievements.png" width="40%"></a>
@ -37,10 +40,6 @@
<div style="position:absolute; top: -1.5%; right: 10%; text-align: right; width: 10%;">
<a href="../iconkit"><img class="iconRope" src="../assets/iconrope.png" width="40%"></a>
</div>
<div style="position:absolute; top: 1.7%; right: 2%; text-align: right; width: 10%;">
<img id="creditsButton" class="gdButton" src="../assets/credits.png" width="60%" onclick="loadCredits()">
</div>
<div id="dl" style="display: none; position:absolute; top: 15%; right: 0.5%; text-align: center; width: 17%">
<h1 class="smaller" style="margin-bottom: 1%">Note</h1>
@ -50,13 +49,13 @@
<div class="supercenter center" id="menuButtons" style="bottom: 5%;">
<table>
<tr>
<tr class="menuButtonList">
<td><a tabindex="1" href="./search/*?type=saved"><img class="menubutton menu-saved" src="../assets/category-saved.png"></a></td>
<td><a tabindex="1" href="./daily"><img class="menubutton menu-daily" src="../assets/category-daily.png"></a></td>
<td><a tabindex="1" href="./weekly"><img class="menubutton menu-weekly" src="../assets/category-weekly.png"></a></td>
<td><a tabindex="1" href="./gauntlets"><img class="menubutton menu-gauntlets" src="../assets/category-gauntlets.png"></a></td>
</tr>
<tr>
<tr class="menuButtonList">
<td><a tabindex="1" href="./leaderboard"><img class="menubutton menu-leaderboard" src="../assets/category-scores.png"></a></td>
<!-- <img src="./assets/exclamation.png" style="position: absolute; height: 18%; left: 3.5%; bottom: 23%; pointer-events: none; z-index: 50;"> -->
<td><a tabindex="1" href="./search/*?type=hof"><img class="menubutton menu-hof" src="../assets/category-hof.png"></a></td>

2
misc/sizecheck.js
View file

@ -71,7 +71,7 @@ $(document).ready(function() {
// Adds all necessary elements into the tab index (all buttons and links that aren't natively focusable)
const inaccessibleLinkSelector = "*:not(a) > img.gdButton, .leaderboardTab, .gdcheckbox";
const inaccessibleLinkSelector = "*:not(a) > img.gdButton, .leaderboardTab, .gdcheckbox, .diffDiv, .lengthDiv";
document.querySelectorAll(inaccessibleLinkSelector).forEach(elem => {
elem.setAttribute('tabindex', 0);