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

Add CSS classes

Browse source
This commit is contained in:
Ben Goldsworthy 2022-10-19 22:34:34 +00:00
parent 3cbde0db03
commit 97eb397a8e
2 changed files with 27 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

24
public/css/app.css
View file

@ -38,6 +38,11 @@ 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;
@ -86,16 +91,29 @@ details h2 {
grid-column-end: 3; grid-column-end: 3;
} }
details { .checkin {
border-top: 1px solid black; border-top: 1px solid black;
padding: 1em 0; padding: 1em 0;
} }
details[open] summary { .checkin__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 details { #checkinList li:first-child .checkin {
border-top: none; border-top: none;
} }

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

@ -17,7 +17,7 @@
<body> <body>
<header> <header class="page-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,8 +44,11 @@
<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 id="{{ $checkin->id }}" ontoggle="toggleCheckin(this.open, this.id)"> <details class="checkin" 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 class="checkin__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 }}">