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

style: popup styling, hide current location on checkin open

Browse source
This commit is contained in:
Ben Goldsworthy 2024-03-14 22:22:59 +01:00
parent 95098f5e92
commit 9d66c4b21d
Signed by: Rumperuu
SSH key fingerprint: SHA256:e5XfzNOr9UvWpEzyLfw0GtTMZWIFh3NmxH+/qQIi3xE
2 changed files with 23 additions and 32 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
resources/css/app.css
View file

@ -255,16 +255,6 @@ body {
border-top: none; border-top: none;
} }
.leaflet-popup {
max-width: 85vw;
max-height: 85vh;
min-width: 60vw;
}
.leaflet-popup-content {
width: auto !important;
}
.popup__image, .popup__image,
.popup__video { .popup__video {
width: auto; width: auto;
@ -340,10 +330,6 @@ body {
margin-right: 1em; margin-right: 1em;
} }
.leaflet-popup {
min-width: 350px;
}
.popup__image, .popup__image,
.popup__video { .popup__video {
max-width: 100%; max-width: 100%;

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

@ -76,7 +76,6 @@
@php $colour = 180 * ( 1.0 - ( ( $idx ) / ( count($trip->locations) ) ) ); @endphp @php $colour = 180 * ( 1.0 - ( ( $idx ) / ( count($trip->locations) ) ) ); @endphp
color: 'rgb({{ $colour }}, {{ $colour }}, {{ $colour }})', color: 'rgb({{ $colour }}, {{ $colour }}, {{ $colour }})',
weight: 5, weight: 5,
//color: 'rgba(62, 62, 62, {{ ( $idx - 0.5) / (count($trip->locations) - 0.5 ) }})'
}).addTo(map); }).addTo(map);
@endfor @endfor
@ -147,30 +146,36 @@
@endforeach @endforeach
@endif @endif
]); ]);
@if ($trip->is_active) map.zoomOut(2.5); @endif @if ($trip->is_active) map.zoomOut(1); @endif
/* @if($trip->is_active)
* Add the current location marker. /*
* * Add the current location marker.
* If this goes before the `fitBounds()`, it ends up uncentered. *
*/ * If this goes before the `fitBounds()`, it ends up uncentered.
var currLocationMarker = L.icon({ */
iconUrl: 'images/current-location-icon.png', var currLocationMarker = L.icon({
iconSize: [30, 45], iconUrl: 'images/current-location-icon.png',
}); iconSize: [30, 45],
});
var currLocation = L.marker( var currLocation = L.marker(
[{{ end($trip->locations)->latitude }}, {{ end($trip->locations)->longitude }}], [{{ end($trip->locations)->latitude }}, {{ end($trip->locations)->longitude }}],
{ {
icon: currLocationMarker icon: currLocationMarker
} }
).addTo(map).setZIndexOffset(1000); ).addTo(map)
@if($trip->is_active) currLocation.bindPopup('<p>Current location</p>').openPopup(); @endif
currLocation.bindPopup('<p>Current location</p>', {
width: "400px"
}).openPopup();
@endif
/* /*
* Changes the currently-selected popup. * Changes the currently-selected popup.
*/ */
function toggleCheckin(isOpen, checkinId) { function toggleCheckin(isOpen, checkinId) {
currLocation.removeFrom(map);
if (isOpen) { if (isOpen) {
const checkins = document.querySelectorAll('details'); const checkins = document.querySelectorAll('details');