edward/agenda
1
0
Fork 0
Code Issues 26 Pull requests Packages Projects Releases Wiki Activity

Add map size toggle button to trip list page

Browse source
This commit is contained in:
Edward Betts 2024-10-13 10:39:28 +01:00
parent 7587c3d3b7
commit 81b0234794
1 changed files with 21 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

24
templates/trip/list.html
View file

@ -25,8 +25,25 @@
top: 56px; /* Adjust to be below the navbar */ top: 56px; /* Adjust to be below the navbar */
height: calc(100vh - 56px); /* Subtracting the height of the navbar */ height: calc(100vh - 56px); /* Subtracting the height of the navbar */
} }
#map {
height: 100%; .half-map {
height: 100vh;
}
.full-window-map {
position: fixed; /* Make the map fixed position */
top: 60px;
left: 0;
right: 0;
bottom: 0;
z-index: 9999; /* Make sure it sits on top */
}
#toggleMapSize {
position: fixed; /* Fixed position */
top: 70px; /* 10px from the top */
right: 10px; /* 10px from the right */
z-index: 10000; /* Higher than the map's z-index */
} }
@media (max-width: 767.98px) { @media (max-width: 767.98px) {
@ -193,7 +210,8 @@
{% block content %} {% block content %}
<div class="container-fluid d-flex flex-column flex-md-row"> <div class="container-fluid d-flex flex-column flex-md-row">
<div class="map-container col-12 col-md-6 order-1 order-md-2"> <div class="map-container col-12 col-md-6 order-1 order-md-2">
<div id="map" class="map"></div> <button id="toggleMapSize" class="btn btn-primary mb-2">Toggle map size</button>
<div id="map" class="map half-map"></div>
</div> </div>
<div class="text-content col-12 col-md-6 order-2 order-md-1 pe-3"> <div class="text-content col-12 col-md-6 order-2 order-md-1 pe-3">
{{ section(heading, trips) }} {{ section(heading, trips) }}