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

Fix view styling

Browse source
This commit is contained in:
Ben Goldsworthy 2022-10-19 21:14:10 +00:00
parent 9a000fb08e
commit 27ace62423
2 changed files with 26 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

15
public/css/app.css
View file

@ -44,10 +44,13 @@ details h2 {
.other-links { .other-links {
display: block; display: block;
margin: auto; margin: auto;
overflow: auto;
} }
.other-links ul { .other-links ul {
list-style: none; list-style: none;
margin: 0 auto;
width: fit-content;
} }
.other-links li { .other-links li {
@ -58,6 +61,7 @@ details h2 {
.trip-meta { .trip-meta {
display: block; display: block;
width: 100%; width: 100%;
text-align: center;
} }
.main--list { .main--list {
@ -74,14 +78,19 @@ details h2 {
} }
} }
#map { #mapContainer {
height: 400px;
grid-column-start: 1; grid-column-start: 1;
grid-column-end: 3; grid-column-end: 3;
@media screen and (min-width: 1024px) {
grid-column-end: 2;
}
}
#map {
height: 400px;
@media screen and (min-width: 1024px) { @media screen and (min-width: 1024px) {
height: auto; height: auto;
min-height: 800px; min-height: 800px;
grid-column-end: 2;
} }
} }

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

@ -37,21 +37,23 @@
</header> </header>
<main id="routeContainer"> <main id="routeContainer">
<div id="map"></div> <section id="mapContainer">
<div id="map"></div>
</section>
<section id="checkinList"> <section id="checkinList">
<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 n> <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>{{ date('j M Y (G:H)', strtotime($checkin->date)) }}</span></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 }}">
@endif @endif
</details> </details>
</li> </li>
@endforeach @endforeach
</ol> </ol>
</section> </section>
</main> </main>