sergiotarxz/burguillos.info
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Adding accesibility fixes.

Browse Source
This commit is contained in:
sergiotarxz 2023-09-28 21:40:18 +02:00
parent f94663fddf
commit f5436d6818
6 changed files with 67 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
js-src/index.js
View File

@ -5,26 +5,41 @@ require('tablesort/src/sorts/tablesort.number');
let fakeSearchInput let fakeSearchInput
let searchMobile let searchMobile
window.onload = () => { document.addEventListener("DOMContentLoaded", function () {
const menu_expand = document.querySelector('a.menu-expand'); const menu_expand = document.querySelector('a.menu-expand');
const mobile_foldable = document.querySelector('nav.mobile-foldable'); const mobile_foldable = document.querySelector('nav.mobile-foldable');
const transparentFullscreenHide = document.querySelector('div.transparent-fullscreen-hide'); const transparentFullscreenHide = document.querySelector('div.transparent-fullscreen-hide');
const contentsWithoutMenu = document.querySelector('div.contents-without-menu')
const tables = document.querySelectorAll('table') const tables = document.querySelectorAll('table')
fillFarmaciaGuardia(); fillFarmaciaGuardia();
loadAd() loadAd()
addEasterEggAnimation() 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', () => { transparentFullscreenHide.addEventListener('click', () => {
mobile_foldable.classList.remove('show'); mobile_foldable.classList.remove('show');
transparentFullscreenHide.classList.remove('show'); transparentFullscreenHide.classList.remove('show');
menu_expand.classList.remove('active'); menu_expand.classList.remove('active');
contentsWithoutMenu.removeAttribute('aria-hidden')
mobile_foldable.setAttribute('aria-hidden', true)
}); });
menu_expand.addEventListener('click', () => { menu_expand.addEventListener('click', () => {
menu_expand.classList.toggle('active'); menu_expand.classList.toggle('active');
mobile_foldable.classList.toggle('show'); mobile_foldable.classList.toggle('show');
transparentFullscreenHide.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') searchMobile = document.querySelector('nav.mobile-shortcuts div.search')
fakeSearchInput = searchMobile.querySelector('input') fakeSearchInput = searchMobile.querySelector('input')
addListenersSearch() addListenersSearch()
}; }, false);
function fillFarmaciaGuardia() { function fillFarmaciaGuardia() {
const farmaciaName = document.querySelector('#farmacia-name'); const farmaciaName = document.querySelector('#farmacia-name');

8
public/css/styles.css
View File

@ -200,13 +200,14 @@ body {
body div.transparent-fullscreen-hide.show { body div.transparent-fullscreen-hide.show {
display: block; } display: block; }
body nav.mobile-foldable { body nav.mobile-foldable {
visibility: hidden;
position: fixed; position: fixed;
left: 100%; left: 100%;
width: 70%; width: 70%;
top: 60px; top: 60px;
height: calc(100% - 60px); height: calc(100% - 60px);
z-index: 500; z-index: 500;
transition: left 0.5s ease-in; transition: left 0.5s ease-in, visibility 0.5s ease-in;
background: white; } background: white; }
body nav.mobile-foldable > a:first-child { body nav.mobile-foldable > a:first-child {
margin-top: 30px; } margin-top: 30px; }
@ -230,7 +231,8 @@ body {
display: list-item; display: list-item;
font-size: 1em; } font-size: 1em; }
body nav.mobile-foldable.show { body nav.mobile-foldable.show {
left: 30%; } left: 30%;
visibility: visible; }
body nav.mobile-shortcuts > a { body nav.mobile-shortcuts > a {
display: flex; display: flex;
align-items: center; align-items: center;
@ -238,6 +240,8 @@ body {
body nav.mobile-shortcuts > a.active { body nav.mobile-shortcuts > a.active {
background: white; background: white;
color: #dcdcf5; } color: #dcdcf5; }
body nav.mobile-shortcuts > a.active:focus {
background: #f2eb8c; }
body a.menu-expand { body a.menu-expand {
padding-bottom: 9px; } padding-bottom: 9px; }
body a.menu-expand .open-menu-icon-hover { body a.menu-expand .open-menu-icon-hover {

7
public/css/styles.scss
View File

@ -296,13 +296,14 @@ body {
} }
nav.mobile-foldable { nav.mobile-foldable {
visibility: hidden;
position: fixed; position: fixed;
left: 100%; left: 100%;
width: 70%; width: 70%;
top: 60px; top: 60px;
height: calc(100% - 60px); height: calc(100% - 60px);
z-index: 500; z-index: 500;
transition: left 0.5s ease-in; transition: left 0.5s ease-in, visibility 0.5s ease-in;
background: $background_sidebar; background: $background_sidebar;
& > a:first-child { & > a:first-child {
@ -339,6 +340,7 @@ body {
nav.mobile-foldable.show { nav.mobile-foldable.show {
left: 30%; left: 30%;
visibility: visible;
} }
nav.mobile-shortcuts > a { nav.mobile-shortcuts > a {
@ -348,6 +350,9 @@ body {
&.active { &.active {
background: $background_sidebar; background: $background_sidebar;
color: $color_sidebar; color: $color_sidebar;
&:focus {
background: $color_div;
}
} }
} }

2
public/js/bundle.js
View File

File diff suppressed because one or more lines are too long

68
templates/layouts/default.html.ep
View File

@ -58,43 +58,45 @@
<div class="complete-container"> <div class="complete-container">
%= include 'page/_mobile_menu', categories => $categories %= include 'page/_mobile_menu', categories => $categories
%= include 'page/_mobile_foldable', categories => $categories %= include 'page/_mobile_foldable', categories => $categories
<div class="search-in-page"> <div class="contents-without-menu">
<a href="#" class="down"> <div class="search-in-page">
<img alt="Next result" src="/img/down.svg"/> <a href="#" class="down">
</a> <img alt="Next result" src="/img/down.svg"/>
<a href="#" class="up"> </a>
<img alt="Previous result" src="/img/up.svg"/> <a href="#" class="up">
</a> <img alt="Previous result" src="/img/up.svg"/>
</div> </a>
<div class="page-contents"> </div>
<div class="page-contents">
%= include 'page/_desktop_menu', categories => $categories, current_category_slug => $current_category_slug %= include 'page/_desktop_menu', categories => $categories, current_category_slug => $current_category_slug
<div class="description android open-browser-container"> <div class="description android open-browser-container">
<a href="<%= $current_route %>" class="open-in-browser"> <a href="<%= $current_route %>" class="open-in-browser">
<img alt="" src="/img/firefox.svg"/> <img alt="" src="/img/firefox.svg"/>
<span>Abrir en el navegador.</span> <span>Abrir en el navegador.</span>
</a> </a>
</div> </div>
% if ($is_android) { % if ($is_android) {
<div class="description no-android-app open-browser-container"> <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"> <a href="https://play.google.com/store/apps/details?id=info.burguillos.bi" class="open-in-browser">
<img alt="" src="/img/play-store.svg"/> <img alt="" src="/img/play-store.svg"/>
<span>Prueba nuestra aplicación para Android. Más fácil, mejor.</span> <span>Prueba nuestra aplicación para Android. Más fácil, mejor.</span>
</a> </a>
</div> </div>
% } % }
<%= content %></body> <%= content %></body>
<div class="description android"> <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> <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> </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' %= include 'ads/_carousel'
</div>
</div> </div>
</html> </html>

2
templates/page/_mobile_menu.html.ep
View File

@ -2,7 +2,7 @@
<nav class="mobile-shortcuts"> <nav class="mobile-shortcuts">
<a class="go-to-index" href="<%='/'.$categories->{index}{slug}%>"><%== $categories->{index}{menu_text} %></a> <a class="go-to-index" href="<%='/'.$categories->{index}{slug}%>"><%== $categories->{index}{menu_text} %></a>
%= include 'page/_search_bar' %= 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" 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ú."/> <img class="open-menu-icon-hover" src="/img/hamburger-menu-purple.webp" alt="Expandir el menú."/>
</a> </a>