nicolo/caprigis
1
1
Fork 0
Code Issues 1 Pull Requests Packages Projects Releases Wiki Activity

Add burger + some map responsiveness

Browse Source
This commit is contained in:
Nicolò P. 2024-06-13 18:33:29 +02:00
parent f7ecd4326a
commit 038dcc0b7a
4 changed files with 19 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
css/app.css
View File

@ -121,23 +121,6 @@ a:visited {
padding-right: 33px; padding-right: 33px;
} }
/* Leaflef map container */ /* Leaflef map container */
@media (max-width: 840px) { #map {
.map-sm { height: calc(100vh - 107px);
height: 450px;
}
}
@media (min-width: 840px) and (max-width: 960px) {
.map-sm {
height: 600px;
}
}
@media (min-width: 960px) and (max-width: 1280px) {
.map-lg {
height: 700px;
}
}
@media (min-width: 1280px) {
.map-lg {
height: 800px;
}
} }

10
index.html
View File

@ -14,9 +14,15 @@
<span class="navbar-item is-size-3"> <span class="navbar-item is-size-3">
Carta archeologica di Capri Carta archeologica di Capri
</span> </span>
<a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false" data-target="nav-menu">
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
</a>
</div> </div>
<hr class="navbar-divider"> <hr class="navbar-divider">
<div class="navbar-menu ml-3"> <div class="navbar-menu ml-3" id="nav-menu">
<button class="navbar-item button is-size-5 is-white" role="button" id="siti"> <button class="navbar-item button is-size-5 is-white" role="button" id="siti">
<i class="fa fa-list mr-2"></i> Siti indagati <i class="fa fa-list mr-2"></i> Siti indagati
</button> </button>
@ -57,7 +63,7 @@
</aside> </aside>
</div> </div>
<div class="column is-full"> <div class="column is-full">
<div id="map" class="map-lg map-sm"></div> <div id="map"></div>
</div> </div>
</div> </div>
<div class="modal"> <div class="modal">

1
js/index.js
View File

@ -7,5 +7,6 @@ document.addEventListener('DOMContentLoaded', async () => {
UI.addCenterMapControl(map, GIS.CENTER_COORDS, GIS.INIT_ZOOM); UI.addCenterMapControl(map, GIS.CENTER_COORDS, GIS.INIT_ZOOM);
UI.toggleMenu('siti'); UI.toggleMenu('siti');
UI.toggleBurger('navbar-burger');
UI.sitesMenu('.menu-list', map, sites); UI.sitesMenu('.menu-list', map, sites);
}); });

8
js/ui.js
View File

@ -40,6 +40,14 @@ UI.addCenterMapControl = function (map, centerCoords, zoom) {
let centerCtr = new L.Control.CenterControl(); let centerCtr = new L.Control.CenterControl();
map.addControl(centerCtr); map.addControl(centerCtr);
} }
UI.toggleBurger = function(burgerClass) {
const burger = document.querySelector(`.${burgerClass}`);
burger.addEventListener('click', () => {
burger.classList.toggle('is-active');
const menuId = burger.getAttribute('data-target');
document.querySelector(`#${menuId}`).classList.toggle('is-active');
});
}
/** /**
* *
* @param {string} triggerId The ID of the trigger element * @param {string} triggerId The ID of the trigger element