Adding accesibility fixes.
This commit is contained in:
parent
f94663fddf
commit
f5436d6818
@ -5,26 +5,41 @@ require('tablesort/src/sorts/tablesort.number');
|
||||
|
||||
let fakeSearchInput
|
||||
let searchMobile
|
||||
window.onload = () => {
|
||||
document.addEventListener("DOMContentLoaded", function () {
|
||||
const menu_expand = document.querySelector('a.menu-expand');
|
||||
const mobile_foldable = document.querySelector('nav.mobile-foldable');
|
||||
const transparentFullscreenHide = document.querySelector('div.transparent-fullscreen-hide');
|
||||
const contentsWithoutMenu = document.querySelector('div.contents-without-menu')
|
||||
const tables = document.querySelectorAll('table')
|
||||
|
||||
fillFarmaciaGuardia();
|
||||
loadAd()
|
||||
addEasterEggAnimation()
|
||||
|
||||
if (menu_expand !== null && mobile_foldable !== null && transparentFullscreenHide !== null) {
|
||||
if (menu_expand !== null && mobile_foldable !== null && transparentFullscreenHide !== null && contentsWithoutMenu !== null) {
|
||||
mobile_foldable.toggleAttribute('aria-hidden')
|
||||
if (mobile_foldable.getAttribute('aria-hidden') !== null) {
|
||||
mobile_foldable.setAttribute('aria-hidden', true);
|
||||
}
|
||||
transparentFullscreenHide.addEventListener('click', () => {
|
||||
mobile_foldable.classList.remove('show');
|
||||
transparentFullscreenHide.classList.remove('show');
|
||||
menu_expand.classList.remove('active');
|
||||
contentsWithoutMenu.removeAttribute('aria-hidden')
|
||||
mobile_foldable.setAttribute('aria-hidden', true)
|
||||
});
|
||||
menu_expand.addEventListener('click', () => {
|
||||
menu_expand.classList.toggle('active');
|
||||
mobile_foldable.classList.toggle('show');
|
||||
transparentFullscreenHide.classList.toggle('show');
|
||||
contentsWithoutMenu.toggleAttribute('aria-hidden')
|
||||
if (contentsWithoutMenu.getAttribute('aria-hidden') !== null) {
|
||||
contentsWithoutMenu.setAttribute('aria-hidden', true);
|
||||
}
|
||||
mobile_foldable.toggleAttribute('aria-hidden')
|
||||
if (mobile_foldable.getAttribute('aria-hidden') !== null) {
|
||||
mobile_foldable.setAttribute('aria-hidden', true);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
@ -46,7 +61,7 @@ window.onload = () => {
|
||||
searchMobile = document.querySelector('nav.mobile-shortcuts div.search')
|
||||
fakeSearchInput = searchMobile.querySelector('input')
|
||||
addListenersSearch()
|
||||
};
|
||||
}, false);
|
||||
|
||||
function fillFarmaciaGuardia() {
|
||||
const farmaciaName = document.querySelector('#farmacia-name');
|
||||
|
||||
@ -200,13 +200,14 @@ body {
|
||||
body div.transparent-fullscreen-hide.show {
|
||||
display: block; }
|
||||
body nav.mobile-foldable {
|
||||
visibility: hidden;
|
||||
position: fixed;
|
||||
left: 100%;
|
||||
width: 70%;
|
||||
top: 60px;
|
||||
height: calc(100% - 60px);
|
||||
z-index: 500;
|
||||
transition: left 0.5s ease-in;
|
||||
transition: left 0.5s ease-in, visibility 0.5s ease-in;
|
||||
background: white; }
|
||||
body nav.mobile-foldable > a:first-child {
|
||||
margin-top: 30px; }
|
||||
@ -230,7 +231,8 @@ body {
|
||||
display: list-item;
|
||||
font-size: 1em; }
|
||||
body nav.mobile-foldable.show {
|
||||
left: 30%; }
|
||||
left: 30%;
|
||||
visibility: visible; }
|
||||
body nav.mobile-shortcuts > a {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@ -238,6 +240,8 @@ body {
|
||||
body nav.mobile-shortcuts > a.active {
|
||||
background: white;
|
||||
color: #dcdcf5; }
|
||||
body nav.mobile-shortcuts > a.active:focus {
|
||||
background: #f2eb8c; }
|
||||
body a.menu-expand {
|
||||
padding-bottom: 9px; }
|
||||
body a.menu-expand .open-menu-icon-hover {
|
||||
|
||||
@ -296,13 +296,14 @@ body {
|
||||
}
|
||||
|
||||
nav.mobile-foldable {
|
||||
visibility: hidden;
|
||||
position: fixed;
|
||||
left: 100%;
|
||||
width: 70%;
|
||||
top: 60px;
|
||||
height: calc(100% - 60px);
|
||||
z-index: 500;
|
||||
transition: left 0.5s ease-in;
|
||||
transition: left 0.5s ease-in, visibility 0.5s ease-in;
|
||||
background: $background_sidebar;
|
||||
|
||||
& > a:first-child {
|
||||
@ -339,6 +340,7 @@ body {
|
||||
|
||||
nav.mobile-foldable.show {
|
||||
left: 30%;
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
nav.mobile-shortcuts > a {
|
||||
@ -348,6 +350,9 @@ body {
|
||||
&.active {
|
||||
background: $background_sidebar;
|
||||
color: $color_sidebar;
|
||||
&:focus {
|
||||
background: $color_div;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
File diff suppressed because one or more lines are too long
@ -58,43 +58,45 @@
|
||||
<div class="complete-container">
|
||||
%= include 'page/_mobile_menu', categories => $categories
|
||||
%= include 'page/_mobile_foldable', categories => $categories
|
||||
<div class="search-in-page">
|
||||
<a href="#" class="down">
|
||||
<img alt="Next result" src="/img/down.svg"/>
|
||||
</a>
|
||||
<a href="#" class="up">
|
||||
<img alt="Previous result" src="/img/up.svg"/>
|
||||
</a>
|
||||
</div>
|
||||
<div class="page-contents">
|
||||
<div class="contents-without-menu">
|
||||
<div class="search-in-page">
|
||||
<a href="#" class="down">
|
||||
<img alt="Next result" src="/img/down.svg"/>
|
||||
</a>
|
||||
<a href="#" class="up">
|
||||
<img alt="Previous result" src="/img/up.svg"/>
|
||||
</a>
|
||||
</div>
|
||||
<div class="page-contents">
|
||||
%= include 'page/_desktop_menu', categories => $categories, current_category_slug => $current_category_slug
|
||||
<div class="description android open-browser-container">
|
||||
<a href="<%= $current_route %>" class="open-in-browser">
|
||||
<img alt="" src="/img/firefox.svg"/>
|
||||
<span>Abrir en el navegador.</span>
|
||||
</a>
|
||||
</div>
|
||||
<div class="description android open-browser-container">
|
||||
<a href="<%= $current_route %>" class="open-in-browser">
|
||||
<img alt="" src="/img/firefox.svg"/>
|
||||
<span>Abrir en el navegador.</span>
|
||||
</a>
|
||||
</div>
|
||||
% if ($is_android) {
|
||||
<div class="description no-android-app open-browser-container">
|
||||
<a href="https://play.google.com/store/apps/details?id=info.burguillos.bi" class="open-in-browser">
|
||||
<img alt="" src="/img/play-store.svg"/>
|
||||
<span>Prueba nuestra aplicación para Android. Más fácil, mejor.</span>
|
||||
</a>
|
||||
</div>
|
||||
<div class="description no-android-app open-browser-container">
|
||||
<a href="https://play.google.com/store/apps/details?id=info.burguillos.bi" class="open-in-browser">
|
||||
<img alt="" src="/img/play-store.svg"/>
|
||||
<span>Prueba nuestra aplicación para Android. Más fácil, mejor.</span>
|
||||
</a>
|
||||
</div>
|
||||
% }
|
||||
<%= content %></body>
|
||||
<div class="description android">
|
||||
<a href="#" class="pin-to-home">Añade esta página a la pantalla de inicio de tu móvil.</a>
|
||||
<%= content %></body>
|
||||
<div class="description android">
|
||||
<a href="#" class="pin-to-home">Añade esta página a la pantalla de inicio de tu móvil.</a>
|
||||
</div>
|
||||
<hr/>
|
||||
<div class="footer description">
|
||||
<p>©2022-2023 Sergio Iglesias</p>
|
||||
<p>Enterate de todas las novedades de Burguillos.info:</p>
|
||||
<a class="suscribe-category-rss" href="/all.rss">
|
||||
<img src="/img/rss.svg" alt="Icono de suscripción rss"/>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<hr/>
|
||||
<div class="footer description">
|
||||
<p>©2022-2023 Sergio Iglesias</p>
|
||||
<p>Enterate de todas las novedades de Burguillos.info:</p>
|
||||
<a class="suscribe-category-rss" href="/all.rss">
|
||||
<img src="/img/rss.svg" alt="Icono de suscripción rss"/>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
%= include 'ads/_carousel'
|
||||
</div>
|
||||
</div>
|
||||
</html>
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
<nav class="mobile-shortcuts">
|
||||
<a class="go-to-index" href="<%='/'.$categories->{index}{slug}%>"><%== $categories->{index}{menu_text} %></a>
|
||||
%= include 'page/_search_bar'
|
||||
<a class="menu-expand">
|
||||
<a class="menu-expand" href="#">
|
||||
<img class="open-menu-icon" src="/img/hamburger-menu-yellow.webp" alt="Expandir el menú."/>
|
||||
<img class="open-menu-icon-hover" src="/img/hamburger-menu-purple.webp" alt="Expandir el menú."/>
|
||||
</a>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user