Rumperuu/Where-in-the-World-is-Ben
1
0
Fork 0
Code Issues 2 Pull requests Projects Releases Wiki Activity

Fix popup centering, styling, a bunch of other stuff

Browse source
This commit is contained in:
Ben Goldsworthy 2022-10-20 18:03:10 +00:00
parent 3e62eb8d37
commit 61d5f69699
2 changed files with 112 additions and 24 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

83
public/css/app.css
View file

@ -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;
}
}

53
resources/views/tracker.blade.php
View file

@ -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