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

Compare commits

base: Rumperuu:b10b85b9580ac3c797fb7983f57e03ea22ad38b8
Branches Tags
Rumperuu:main
..
compare: Rumperuu:7fb2e755b6c7ca85e26ec82554f2a9bb45b42783
Branches Tags
Rumperuu:main

3 commits
b10b85b958 ... 7fb2e755b6

Author SHA1 Message Date
Rumperuu
7fb2e755b6 Fix line-breaks-in-note bug 2022-08-29 21:35:04 +00:00
Rumperuu
e58b650eb1 Amend date formats, map zoom 2022-08-29 21:34:48 +00:00
Rumperuu
7e5e99e0b1 Tweak styling 2022-08-29 21:34:11 +00:00
2 changed files with 47 additions and 15 deletions
Show stats Expand all files Collapse all files

39
public/css/app.css
View file

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

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

@ -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');