From 7e5e99e0b16662a3365918ae8f24f5d5e331fa85 Mon Sep 17 00:00:00 2001
From: Rumperuu <me+git@bengoldsworthy.net>
Date: Mon, 29 Aug 2022 21:34:11 +0000
Subject: [PATCH 1/3] Tweak styling

---
 public/css/app.css | 47 ++++++++++++++++++++++++++++++++++++----------
 1 file changed, 37 insertions(+), 10 deletions(-)

diff --git a/public/css/app.css b/public/css/app.css
index c5ea947..a9f66c6 100644
--- a/public/css/app.css
+++ b/public/css/app.css
@@ -38,6 +38,35 @@ details h2 {
     display: inline;
 }
 
+details {
+    border-top: 1px solid black;
+    padding: 1em 0;
+}
+
+details[open] summary {
+    margin-bottom: 1em;
+}
+
+#checkinList li:first-child details {
+    border-top: none;
+}
+
+.leaflet-popup {
+    max-width: 85vw;
+    max-height: 85vh;
+    min-width: 60vw;
+}
+
+.leaflet-popup-content {
+    width: auto !important;
+}
+
+.popup__image {
+    width: auto;
+    height: auto;
+    max-width: 70vw;
+}
+
 @media screen and (min-width: 1024px) {
     #routeContainer {
         grid-template-columns: 3fr 1fr;
@@ -52,15 +81,13 @@ details h2 {
     #checkinList {
         grid-column-start: 2;
     }
-}
-
-
-.leaflet-popup-content {
-    width: auto !important;
-}
-
-.popup__image {
-    max-width: 500px;
-    max-height: 400px;
+
+    .leaflet-popup {
+        min-width: 350px;
+    } 
+
+    .popup__image {
+        max-width: 50vw;
+    }
 }
 

From e58b650eb18f6e2533a474a94fc238ba4e0513e5 Mon Sep 17 00:00:00 2001
From: Rumperuu <me+git@bengoldsworthy.net>
Date: Mon, 29 Aug 2022 21:34:48 +0000
Subject: [PATCH 2/3] Amend date formats, map zoom

---
 resources/views/tracker.blade.php | 13 +++++++++----
 1 file changed, 9 insertions(+), 4 deletions(-)

diff --git a/resources/views/tracker.blade.php b/resources/views/tracker.blade.php
index ed9757d..3c5dbf4 100644
--- a/resources/views/tracker.blade.php
+++ b/resources/views/tracker.blade.php
@@ -20,10 +20,10 @@
         <header>
             <h1>Where in the World is Ben?</h1>
             <p>
-                <span> Tracking started: {{ $trip->date_start }}</span> |
+                <span> Tracking started: {{ date('j M Y (G:H)', strtotime($trip->date_start)) }}</span> |
                 <span class="{{ ($trip->is_active) ? "positive" : "negative" }}">{{ ($trip->is_active) ? "Active" : "Ended" }}</span> | 
                 <span class="{{ ($trip->is_tracking) ? "positive" : "negative" }}">{{ ($trip->is_tracking) ? "Currently tracking" : "Not currently tracking" }}</span> 
-                <span class="small">(Last update: {{ $trip->updated_at }})</span>
+                <span class="small">(Last update: {{ date('j M Y (G:H)', strtotime($trip->updated_at)) }})</span>
             </p>
         </header>
 
@@ -34,7 +34,7 @@
                 @foreach($trip->checkins as $checkin)
                 <li>
                     <details id="{{ $checkin->id }}" ontoggle="toggleCheckin(this.open, this.id)">
-                        <summary><h2>{{ $checkin->title ?? "[No title]" }}</h2> <span>{{ $checkin->date }}</span></summary>
+                        <summary><h2>{{ $checkin->title ?? "[No title]" }}</h2> <span>{{ date('j M Y (G:H)', strtotime($checkin->date)) }}</span></summary>
                         {{ $checkin->note ?? "[No note]" }}
                     </details>
                 </li>
@@ -45,7 +45,7 @@
 
         <footer>
             <script>
-                var map = L.map('map').setView([{{ end($trip->locations)->latitude }}, {{ end($trip->locations)->longitude }}], 10);
+                var map = L.map('map').setView([{{ end($trip->locations)->latitude }}, {{ end($trip->locations)->longitude }}], 7);
                 L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
                     maxZoom: 19,
                     attribution: 'OpenStreetMap'
@@ -70,6 +70,11 @@
                 
                 checkinMarkers[{{ $checkin->id }}] = marker;
                 @endforeach
+
+                var currLocation = L.marker(
+                    [{{ end($trip->locations)->latitude }}, {{ end($trip->locations)->longitude }}], 
+                ).addTo(map).setZIndexOffset(1000);
+                currLocation.bindPopup('<p>Current location</p>').openPopup();
                 
                 function toggleCheckin(isOpen, checkinId) {
                     if (isOpen) {

From 7fb2e755b6c7ca85e26ec82554f2a9bb45b42783 Mon Sep 17 00:00:00 2001
From: Rumperuu <me+git@bengoldsworthy.net>
Date: Mon, 29 Aug 2022 21:35:04 +0000
Subject: [PATCH 3/3] Fix line-breaks-in-note bug

---
 resources/views/tracker.blade.php | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/resources/views/tracker.blade.php b/resources/views/tracker.blade.php
index 3c5dbf4..9ea7522 100644
--- a/resources/views/tracker.blade.php
+++ b/resources/views/tracker.blade.php
@@ -64,7 +64,7 @@
                 marker = L.marker([{{ $checkin->location->latitude }}, {{ $checkin->location->longitude }}]).addTo(map);
                 
                 popupMarkup = '<h2 class="popup__title">{{ $checkin->title ?? "No Title" }}</h2>';
-                popupMarkup += '<p class="popup__note">{{ $checkin->note }}</p>';
+                popupMarkup += `<p class="popup__note">{{ $checkin->note }}</p>`;
                 popupMarkup += '<img class="popup__image" src="{{ $checkin->image_url }}">';
                 marker.bindPopup(popupMarkup).openPopup();