From 61d5f696998822dd7921d729910dd53fcbf508c1 Mon Sep 17 00:00:00 2001 From: Rumperuu Date: Thu, 20 Oct 2022 18:03:10 +0000 Subject: [PATCH] Fix popup centering, styling, a bunch of other stuff --- public/css/app.css | 83 +++++++++++++++++++++++-------- resources/views/tracker.blade.php | 53 ++++++++++++++++++-- 2 files changed, 112 insertions(+), 24 deletions(-) diff --git a/public/css/app.css b/public/css/app.css index 9aeaa68..5424ef7 100644 --- a/public/css/app.css +++ b/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-column-end: 3; + grid-area: map; } #map { - height: 400px; + height: 100%; } #checkinList { - grid-column-start: 1; - grid-column-end: 3; + grid-area: checkins; 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; - } - - #routeContainer { - grid-template-columns: 2fr 1fr; - } - - #mapContainer { - grid-column-end: 2; - height: fit-content; - border-bottom: 5px solid black; + font-size: 1em; } #map { - height: auto; - min-height: 800px; + height: 100%; } #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; } } diff --git a/resources/views/tracker.blade.php b/resources/views/tracker.blade.php index 33f7fcd..f2fbaa1 100644 --- a/resources/views/tracker.blade.php +++ b/resources/views/tracker.blade.php @@ -28,12 +28,12 @@

- Tracking started: {{ date('j M Y (G:H)', strtotime($trip->date_start)) }} | + Tracking started: {!! render_date_difference($trip->date_start) !!} | {{ ($trip->is_active) ? "Active" : "Ended" }} | @if ($trip->is_active) {{ ($trip->is_tracking) ? "Currently tracking" : "Not currently tracking" }} @endif - (Last update: {{ date('j M Y (G:H)', strtotime($trip->updated_at)) }}) + (Last update: {!! render_date_difference($trip->updated_at) !!})

@@ -43,6 +43,7 @@
+

@if ($showAllCheckins) Check-ins @else Recent Check-ins @endif

    @if($showAllCheckins) @php $checkinsList = array_reverse($trip->checkins) @endphp @@ -55,7 +56,7 @@

    {{ $checkin->title ?? "[No title]" }}

    -

    {{ date('j M Y (G:H)', strtotime($checkin->date)) }}

    +

    {!! render_date_difference($trip->updated_at) !!}

     {{ $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 @@ + +@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 = ''; + $end_tag = "ago"; + $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