Compare commits
No commits in common. "fac44484b40b3c34d83aaa9bcc06859a8a755099" and "3cbde0db030805fa2657eacf231d814d0c6e1922" have entirely different histories.
fac44484b4
...
3cbde0db03
|
@ -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;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -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');
|
||||||
|
|
Loading…
Reference in a new issue