Fix line-breaks-in-note bug

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 {
-.leaflet-popup-content {
+        min-width: 350px;
-    width: auto !important;
     } 
 
     .popup__image {
-    max-width: 500px;
+        max-width: 50vw;
-    max-height: 400px;
+    }
 }
 

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'
@@ -64,13 +64,18 @@
                 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();
                 
                 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) {
                         var checkins = document.querySelectorAll('details');