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

Improving menu.

This commit is contained in:
Sergiotarxz 2023-09-28 16:32:33 +02:00
parent 046f65b8b8
commit d9db9d2595
5 changed files with 47 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
js-src/index.js
View File

@ -8,15 +8,17 @@ let searchMobile
window.onload = () => {
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 tables = document.querySelectorAll('table')
fillFarmaciaGuardia();
loadAd()
addEasterEggAnimation()
if (menu_expand !== null && mobile_foldable !== null) {
if (menu_expand !== null && mobile_foldable !== null && transparentFullscreenHide !== null) {
menu_expand.addEventListener('click', () => {
mobile_foldable.classList.toggle('show');
transparentFullscreenHide.classList.toggle('show');
});
}

22
public/css/styles.css
View File

@ -172,28 +172,42 @@ body {
padding: 10%;
width: 60%;
height: 60%; }
body div.transparent-fullscreen-hide {
position: fixed;
background: black;
left: 0;
width: 100%;
opacity: 40%;
top: 60px;
height: calc(100% - 60px);
z-index: 250;
display: none; }
body div.transparent-fullscreen-hide.show {
display: block; }
body nav.mobile-foldable {
position: fixed;
background: blueviolet;
color: #f2eb8c;
left: 100%;
width: 100%;
width: 80%;
top: 60px;
height: calc(100% - 60px);
z-index: 500;
transition: left 0.5s ease-in; }
body nav.mobile-foldable a {
display: block;
font-size: 1.7em;
font-size: 1.3em;
width: 100%;
height: auto;
padding-left: auto;
padding-right: auto; }
body nav.mobile-foldable div.child-categories-mobile {
padding-left: 10%; }
padding-left: 40px; }
body nav.mobile-foldable div.child-categories-mobile a {
font-size: 1em; }
body nav.mobile-foldable.show {
display: block;
left: 0; }
left: 20%; }
body nav.mobile-shortcuts > a {
display: flex;
align-items: center;

26
public/css/styles.scss
View File

@ -260,12 +260,27 @@ body {
}
}
div.transparent-fullscreen-hide {
position: fixed;
background: black;
left: 0;
width: 100%;
opacity: 40%;
top: 60px;
height: calc(100% - 60px);
z-index: 250;
display: none;
&.show {
display: block;
}
}
nav.mobile-foldable {
position: fixed;
background: $background_div;
color: $color_div;
left: 100%;
width: 100%;
width: 80%;
top: 60px;
height: calc(100% - 60px);
z-index: 500;
@ -277,20 +292,23 @@ body {
//background: $color_div;
//color: $background_div;
display: block;
font-size: 1.7em;
font-size: 1.3em;
width: 100%;
height: auto;
padding-left: auto;
padding-right: auto;
}
div.child-categories-mobile {
padding-left: 10%;
padding-left: 40px;
a {
font-size: 1em;
}
}
}
nav.mobile-foldable.show {
display: block;
left: 0;
left: 20%;
}

2
public/js/bundle.js
View File

File diff suppressed because one or more lines are too long

4
templates/page/_mobile_foldable.html.ep
View File

@ -1,3 +1,5 @@
<div class="transparent-fullscreen-hide">
</div>
<nav class="mobile-foldable" id="mobile-foldable"><%
my $first = 1;
for my $category_key (sort {
@ -9,7 +11,7 @@ for my $category_key (sort {
}
%><a href="<%= '/'.$category->{slug} %>"><%==$category->{menu_text}%></a><div class="child-categories-mobile"><%
for my $child_category ($category->{children}->@*) {
%><a href="<%="/$child_category->{slug}"%>">* <%==$child_category->{menu_text}%></a><%
%><a href="<%="/$child_category->{slug}"%>"><%==$child_category->{menu_text}%></a><%
}%></div><%
}
%></nav>