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

Adding accesibility fixes.

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 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');

8
public/css/styles.css
View File

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

7
public/css/styles.scss
View File

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

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">
%= 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
templates/page/_mobile_menu.html.ep
View File

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