Fix popup centering, styling, a bunch of other stuff

public/css/app.css

@@ -9,7 +9,7 @@ body {
 }
 
 .page-title {
-    font-size: 3em;
+    font-size: 1.5em;
     text-align: center;
     margin-top: 0;
 }
@@ -40,12 +40,27 @@ details h2 {
  *  Layout
  */
 
+body {
+    border: 5px solid black;
+    box-sizing: border-box;
+    height: 100vh;
+/*    overflow: hidden;*/
+    display: grid;
+    grid-template-rows: auto 1fr;
+    grid-template-columns: 100%;
+    grid-template-areas:
+        "header"
+        "route";
+}
+
 .page-header {
+    grid-area: header;
     background-color: #a4ecfc;
     border-bottom: 5px solid black;
 }
 
 .other-links {
+    font-size: 1em;
     display: block;
     margin: auto;
     overflow: auto;
@@ -74,7 +89,7 @@ details h2 {
 }
 
 .other-links li p {
-    padding: 0.5em 1em;
+    padding: 0.25em 0.5em;
     margin: 0;
 }
 
@@ -87,6 +102,7 @@ details h2 {
 .trip-meta {
     display: block;
     width: 100%;
+    font-size: 0.8em;
     text-align: center;
 }
 
@@ -98,22 +114,28 @@ details h2 {
 
 #routeContainer {
     display: grid;
+    grid-area: route;
+    grid-template-rows: 55% 45%;
+    grid-template-columns: 100%;
+    overflow: hidden;
+    grid-template-areas:
+        "map"
+        "checkins";
 }
 
 #mapContainer {
-    grid-column-start: 1;
+    grid-area: map;
-    grid-column-end: 3;
 }
 
 #map { 
-    height: 400px;
+    height: 100%;
 }
 
 #checkinList {
-    grid-column-start: 1;
+    grid-area: checkins;
-    grid-column-end: 3;
     border-top: 5px solid black;
     padding: 0 1em;
+    overflow: scroll;
 }
 
 .checkin {
@@ -130,6 +152,10 @@ details h2 {
     border-bottom: 1px solid gray;
 }
 
+.checkin__title {
+    font-size: 1em;
+}
+
 .checkin__meta {
     margin: 0;
 }
@@ -161,50 +187,65 @@ details h2 {
     display: block;
 }
 
+/*
+ *  Medium Display
+ */
+@media screen and (min-width: 728px) {
+    .page__title {
+        font-size: 2em;
+    }
+}
+
 /*
  *  Large Display
  */
 @media screen and (min-width: 1024px) {
+    #routeContainer {
+        grid-template-columns: 60% 40%;
+        grid-template-rows: 100%;
+        grid-template-areas:
+            "map checkins";
+    }
+
     .page-header {
         padding: 1em;
     }
     
     .page-title {
+        font-size: 2.5em;
         text-align: left;
         display: inline-block;
         margin-bottom: 0;
     }
 
     .other-links {
+        font-size: 1.2em;
         display: inline-block;
         vertical-align: bottom;
     }
+
+    .other-links li a {
+        padding: 0.5em 1em;
+    }
     
     .trip-meta {
         text-align: left;
-    }
+        font-size: 1em;
-
-    #routeContainer {
-        grid-template-columns: 2fr 1fr;
-    }
-    
-    #mapContainer {
-        grid-column-end: 2;
-        height: fit-content;
-        border-bottom: 5px solid black;
     }
     
     #map {
-        height: auto;
+        height: 100%;
-        min-height: 800px;
     }
     
     #checkinList {
-        grid-column-start: 2;
         border-top: 0;
         border-left: 5px solid black;
     }
 
+    .section__title {
+        text-align: center;
+    }
+
     #checkinList ol {
         margin-top: 0;
         margin-right: 1em;
@@ -216,7 +257,7 @@ details h2 {
     
     .popup__image {
         max-width: 100%;
-        max-height: none;
+        max-height: 60vh;
         margin-top: 1em;
     }
 }

resources/views/tracker.blade.php

@@ -28,12 +28,12 @@
             </nav>
             <section class="trip-meta">
                 <p>
-                    <span> Tracking started: {{ date('j M Y (G:H)', strtotime($trip->date_start)) }}</span> |
+                    <span> Tracking started: {!! render_date_difference($trip->date_start) !!}</span> |
                     <span class="{{ ($trip->is_active) ? "positive" : "negative" }}">{{ ($trip->is_active) ? "Active" : "Ended" }}</span> | 
                     @if ($trip->is_active)
                     <span class="{{ ($trip->is_tracking) ? "positive" : "negative" }}">{{ ($trip->is_tracking) ? "Currently tracking" : "Not currently tracking" }}</span> 
                     @endif
-                    <span class="small">(Last update: {{ date('j M Y (G:H)', strtotime($trip->updated_at)) }})</span>
+                    <span class="small">(Last update: {!! render_date_difference($trip->updated_at) !!})</span>
                 </p>
             </section>
         </header>
@@ -43,6 +43,7 @@
                 <div id="map"></div>
             </section>
             <section id="checkinList">
+                <h2 class="section__title">@if ($showAllCheckins) Check-ins @else Recent Check-ins @endif</h2>
                 <ol start="{{ count($trip->checkins) }}" reversed>
                 @if($showAllCheckins)
                     @php $checkinsList = array_reverse($trip->checkins) @endphp
@@ -55,7 +56,7 @@
                         <details class="checkin" id="{{ $checkin->id }}" ontoggle="toggleCheckin(this.open, this.id)">
                             <summary class="checkin__summary">
                                 <h2 class="checkin__title">{{ $checkin->title ?? "[No title]" }}</h2>
-                                <p class="checkin__meta">{{ date('j M Y (G:H)', strtotime($checkin->date)) }}</p>
+                                <p class="checkin__meta">{!! render_date_difference($trip->updated_at) !!}</p>
                             </summary>
                             {{ $checkin->note ?? "[No note]" }}
     @if($checkin->image_url)
@@ -153,6 +154,8 @@
                         checkins.forEach(checkin => {
                             if (checkin.id != checkinId && checkin.open) checkin.open = false;
                         });
+                        console.log(checkinMarkers[checkinId].getLatLng());
+                        map.setView(new L.LatLng(checkinMarkers[checkinId].getLatLng().lat + 0.03, checkinMarkers[checkinId].getLatLng().lng));
                     } else {
                         checkinMarkers[checkinId].closePopup();
                     }
@@ -161,3 +164,47 @@
         </footer>
     </body>
 </html>
+
+@php
+function render_date_difference ($start_time) {
+    $minute = 60;
+    $hour = 60 * 60;
+    $day = 3600 * 24;
+    $week = 86400 * 7;
+    $month = 604800 * 4;
+    $year = 2629800 * 12;
+     
+    $start_time_dt = new DateTime($start_time);
+    $now = new DateTime();
+    $trip_start_difference = intval(($now->getTimestamp() - $start_time_dt->getTimestamp()));
+
+    $start_tag = '<span title="' . date('j M Y (G:H)', strtotime($start_time)) . '">';
+    $end_tag = "ago</span>";
+    $unit = null;
+    $div = 1;
+
+    if ($trip_start_difference < $minute) {
+        $unit = ' seconds ';
+    } else if ($trip_start_difference < $hour) {
+        $div = 60;
+        $unit = ' minutes ';
+    } else if ($trip_start_difference < $day) {
+        $div = 3600;
+        $unit = ' hours ';
+    } else if ($trip_start_difference < $week) {
+        $div = 86400;
+        $unit = ' days ';
+    } else if ($trip_start_difference < $month) {
+        $div = 604800;
+        $unit = ' weeks ';
+    } else if ($trip_start_difference < $year) {
+        $div = 2629800;
+        $unit = ' months ';
+    } else {
+        $div = 31557600;
+        $unit = ' years ';
+    }
+
+    return $start_tag . (floor( $trip_start_difference / $div )) . $unit . $end_tag;
+}
+@endphp