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

Compare commits

base: Rumperuu:fac44484b40b3c34d83aaa9bcc06859a8a755099
Branches Tags
Rumperuu:main
..
compare: Rumperuu:3cbde0db030805fa2657eacf231d814d0c6e1922
Branches Tags
Rumperuu:main

No commits in common. "fac44484b40b3c34d83aaa9bcc06859a8a755099" and "3cbde0db030805fa2657eacf231d814d0c6e1922" have entirely different histories.
fac44484b4 ... 3cbde0db03

2 changed files with 12 additions and 120 deletions
Show stats Expand all files Collapse all files

83
public/css/app.css
View file

@ -5,13 +5,11 @@
body { body {
font-family: Verdana, Arial, sans-serif; font-family: Verdana, Arial, sans-serif;
font-size: 16px; font-size: 16px;
margin: 0;
} }
.page-title { .page-title {
font-size: 3em; font-size: 3em;
text-align: center; text-align: center;
margin-top: 0;
} }
details h2 { details h2 {
@ -40,11 +38,6 @@ details h2 {
* Layout * Layout
*/ */
.page-header {
background-color: #a4ecfc;
border-bottom: 5px solid black;
}
.other-links { .other-links {
display: block; display: block;
margin: auto; margin: auto;
@ -58,30 +51,8 @@ details h2 {
} }
.other-links li { .other-links li {
background-color: #5adefc;
float: left; float: left;
margin-right: 1.5em; margin-right: 1.5em;
border: 2px solid white;
border-radius: 1em;
}
.other-links li:first-of-type {
margin-right: 0;
}
.other-links li:hover {
background-color: #2389a0;
}
.other-links li p {
padding: 0.5em 1em;
margin: 0;
}
.other-links li p a {
color: #fff;
font-weight: bold;
text-decoration: none;
} }
.trip-meta { .trip-meta {
@ -98,6 +69,7 @@ details h2 {
#routeContainer { #routeContainer {
display: grid; display: grid;
grid-gap: 20px;
} }
#mapContainer { #mapContainer {
@ -112,32 +84,18 @@ details h2 {
#checkinList { #checkinList {
grid-column-start: 1; grid-column-start: 1;
grid-column-end: 3; grid-column-end: 3;
border-top: 5px solid black;
} }
.checkin { details {
border-top: 1px solid black; border-top: 1px solid black;
padding: 1em 0; padding: 1em 0;
} }
.checkin__summary { details[open] summary {
cursor: pointer;
}
.checkin[open] .checkin__summary {
margin-bottom: 1em;
border-bottom: 1px solid gray;
}
.checkin__meta {
margin: 0;
}
.checkin[open] .checkin__meta {
margin-bottom: 1em; margin-bottom: 1em;
} }
#checkinList li:first-child .checkin { #checkinList li:first-child details {
border-top: none; border-top: none;
} }
@ -155,42 +113,22 @@ details h2 {
width: auto; width: auto;
height: auto; height: auto;
max-width: 70vw; max-width: 70vw;
max-height: 45vh;
margin-top: 1em;
display: block;
} }
/* /*
* Large Display * Large Display
*/ */
@media screen and (min-width: 1024px) { @media screen and (min-width: 1024px) {
.page-header {
padding: 1em;
}
.page-title { .page-title {
text-align: left; text-align: left;
display: inline-block;
margin-bottom: 0;
}
.other-links {
display: inline-block;
vertical-align: bottom;
} }
.trip-meta {
text-align: left;
}
#routeContainer { #routeContainer {
grid-template-columns: 2fr 1fr; grid-template-columns: 3fr 1fr;
} }
#mapContainer { #mapContainer {
grid-column-end: 2; grid-column-end: 2;
height: fit-content;
border-bottom: 5px solid black;
} }
#map { #map {
@ -200,13 +138,6 @@ details h2 {
#checkinList { #checkinList {
grid-column-start: 2; grid-column-start: 2;
border-top: 0;
border-left: 5px solid black;
}
#checkinList ol {
margin-top: 0;
margin-right: 1em;
} }
.leaflet-popup { .leaflet-popup {
@ -214,8 +145,6 @@ details h2 {
} }
.popup__image { .popup__image {
max-width: 100%; max-width: 50vw;
max-height: none;
margin-top: 1em;
} }
} }

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

@ -17,7 +17,7 @@
<body> <body>
<header class="page-header"> <header>
<h1 class="page-title">Where in the World is Ben?</h1> <h1 class="page-title">Where in the World is Ben?</h1>
<nav class="other-links"> <nav class="other-links">
<ul> <ul>
@ -44,11 +44,8 @@
<ol start="{{ count($trip->checkins) }}" reversed> <ol start="{{ count($trip->checkins) }}" reversed>
@foreach(array_slice(array_reverse($trip->checkins), 0, 15) as $checkin) @foreach(array_slice(array_reverse($trip->checkins), 0, 15) as $checkin)
<li> <li>
<details class="checkin" id="{{ $checkin->id }}" ontoggle="toggleCheckin(this.open, this.id)"> <details id="{{ $checkin->id }}" ontoggle="toggleCheckin(this.open, this.id)">
<summary class="checkin__summary"> <summary><h2>{{ $checkin->title ?? "[No title]" }}</h2> <span>{{ date('j M Y (G:H)', strtotime($checkin->date)) }}</span></summary>
<h2 class="checkin__title">{{ $checkin->title ?? "[No title]" }}</h2>
<p class="checkin__meta">{{ date('j M Y (G:H)', strtotime($checkin->date)) }}</p>
</summary>
{{ $checkin->note ?? "[No note]" }} {{ $checkin->note ?? "[No note]" }}
@if($checkin->image_url) @if($checkin->image_url)
<img class="popup__image" loading="lazy" src="{{ $checkin->image_url }}"> <img class="popup__image" loading="lazy" src="{{ $checkin->image_url }}">
@ -62,28 +59,20 @@
<footer> <footer>
<script> <script>
/* var map = L.map('map').setView([{{ end($trip->locations)->latitude }}, {{ end($trip->locations)->longitude }}], 7);
* Initialise the map
*/
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', { L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 19, maxZoom: 19,
attribution: 'OpenStreetMap' attribution: 'OpenStreetMap'
}).addTo(map); }).addTo(map);
/*
* Populate the route line.
*/
var routePoints = L.polyline([ var routePoints = L.polyline([
@foreach($trip->locations as $location) @foreach($trip->locations as $location)
[{{ $location->latitude }}, {{ $location->longitude }}], [{{ $location->latitude }}, {{ $location->longitude }}],
@endforeach @endforeach
]).addTo(map); ]).addTo(map);
/*
* Populate all the checkins and popup texts.
*/
var checkinMarkers = []; var checkinMarkers = [];
var marker = null, popupMarkup = null; var marker = null, popupMarkup = null;
@foreach($trip->checkins as $checkin) @foreach($trip->checkins as $checkin)
marker = L.marker([{{ $checkin->location->latitude }}, {{ $checkin->location->longitude }}]).addTo(map); marker = L.marker([{{ $checkin->location->latitude }}, {{ $checkin->location->longitude }}]).addTo(map);
@ -96,37 +85,11 @@
checkinMarkers[{{ $checkin->id }}] = marker; checkinMarkers[{{ $checkin->id }}] = marker;
@endforeach @endforeach
/*
* Fit the map to the last 25 locations, and then zoom out
* (to help provide context).
*/
map.fitBounds([
@foreach(array_slice(array_reverse($trip->locations), 0, 25) as $location)
[{{ $location->latitude }}, {{$location->longitude }}],
@endforeach
]);
map.zoomOut(2);
/*
* Add the current location marker.
*
* If this goes before the `fitBounds()`, it ends up uncentered.
* TODO: Revisit once fixed with other popups.
*/
var currLocationMarker = L.icon({
iconUrl: '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}
).addTo(map).setZIndexOffset(1000); ).addTo(map).setZIndexOffset(1000);
currLocation.bindPopup('<p>Current location</p>').openPopup(); currLocation.bindPopup('<p>Current location</p>').openPopup();
/*
* Changes the currently-selected popup.
*/
function toggleCheckin(isOpen, checkinId) { function toggleCheckin(isOpen, checkinId) {
if (isOpen) { if (isOpen) {
var checkins = document.querySelectorAll('details'); var checkins = document.querySelectorAll('details');