From 81b0234794129d99a49ed493768d1d48feafab05 Mon Sep 17 00:00:00 2001
From: Edward Betts <edward@4angle.com>
Date: Sun, 13 Oct 2024 10:39:28 +0100
Subject: [PATCH] Add map size toggle button to trip list page

---
 templates/trip/list.html | 24 +++++++++++++++++++++---
 1 file changed, 21 insertions(+), 3 deletions(-)

diff --git a/templates/trip/list.html b/templates/trip/list.html
index 547d1c0..f25e8ae 100644
--- a/templates/trip/list.html
+++ b/templates/trip/list.html
@@ -25,8 +25,25 @@
       top: 56px; /* Adjust to be below 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) {
@@ -193,7 +210,8 @@
 {% block content %}
 <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 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 class="text-content col-12 col-md-6 order-2 order-md-1 pe-3">
     {{ section(heading, trips) }}