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

Compare commits

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

No commits in common. "7fb2e755b6c7ca85e26ec82554f2a9bb45b42783" and "b10b85b9580ac3c797fb7983f57e03ea22ad38b8" have entirely different histories.
7fb2e755b6 ... b10b85b958

2 changed files with 15 additions and 47 deletions
Show stats Expand all files Collapse all files

39
public/css/app.css
View file

@ -38,35 +38,6 @@ details h2 {
display: inline; 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) { @media screen and (min-width: 1024px) {
#routeContainer { #routeContainer {
grid-template-columns: 3fr 1fr; grid-template-columns: 3fr 1fr;
@ -81,13 +52,15 @@ details[open] summary {
#checkinList { #checkinList {
grid-column-start: 2; grid-column-start: 2;
} }
}
.leaflet-popup {
min-width: 350px; .leaflet-popup-content {
width: auto !important;
} }
.popup__image { .popup__image {
max-width: 50vw; max-width: 500px;
} max-height: 400px;
} }

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

@ -20,10 +20,10 @@
<header> <header>
<h1>Where in the World is Ben?</h1> <h1>Where in the World is Ben?</h1>
<p> <p>
<span> Tracking started: {{ date('j M Y (G:H)', strtotime($trip->date_start)) }}</span> | <span> Tracking started: {{ $trip->date_start }}</span> |
<span class="{{ ($trip->is_active) ? "positive" : "negative" }}">{{ ($trip->is_active) ? "Active" : "Ended" }}</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="{{ ($trip->is_tracking) ? "positive" : "negative" }}">{{ ($trip->is_tracking) ? "Currently tracking" : "Not currently tracking" }}</span>
<span class="small">(Last update: {{ date('j M Y (G:H)', strtotime($trip->updated_at)) }})</span> <span class="small">(Last update: {{ $trip->updated_at }})</span>
</p> </p>
</header> </header>
@ -34,7 +34,7 @@
@foreach($trip->checkins as $checkin) @foreach($trip->checkins as $checkin)
<li> <li>
<details id="{{ $checkin->id }}" ontoggle="toggleCheckin(this.open, this.id)"> <details id="{{ $checkin->id }}" ontoggle="toggleCheckin(this.open, this.id)">
<summary><h2>{{ $checkin->title ?? "[No title]" }}</h2> <span>{{ date('j M Y (G:H)', strtotime($checkin->date)) }}</span></summary> <summary><h2>{{ $checkin->title ?? "[No title]" }}</h2> <span>{{ $checkin->date }}</span></summary>
{{ $checkin->note ?? "[No note]" }} {{ $checkin->note ?? "[No note]" }}
</details> </details>
</li> </li>
@ -45,7 +45,7 @@
<footer> <footer>
<script> <script>
var map = L.map('map').setView([{{ end($trip->locations)->latitude }}, {{ end($trip->locations)->longitude }}], 7); var map = L.map('map').setView([{{ end($trip->locations)->latitude }}, {{ end($trip->locations)->longitude }}], 10);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 19, maxZoom: 19,
attribution: 'OpenStreetMap' attribution: 'OpenStreetMap'
@ -64,18 +64,13 @@
marker = L.marker([{{ $checkin->location->latitude }}, {{ $checkin->location->longitude }}]).addTo(map); marker = L.marker([{{ $checkin->location->latitude }}, {{ $checkin->location->longitude }}]).addTo(map);
popupMarkup = '<h2 class="popup__title">{{ $checkin->title ?? "No Title" }}</h2>'; 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 }}">'; popupMarkup += '<img class="popup__image" src="{{ $checkin->image_url }}">';
marker.bindPopup(popupMarkup).openPopup(); marker.bindPopup(popupMarkup).openPopup();
checkinMarkers[{{ $checkin->id }}] = marker; checkinMarkers[{{ $checkin->id }}] = marker;
@endforeach @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) { function toggleCheckin(isOpen, checkinId) {
if (isOpen) { if (isOpen) {
var checkins = document.querySelectorAll('details'); var checkins = document.querySelectorAll('details');