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
*/
.page-header {
background-color: #a4ecfc;
border-bottom: 5px solid black;
}
.other-links {
display: block;
margin: auto;
@ -86,16 +91,29 @@ details h2 {
grid-column-end: 3;
}
details {
.checkin {
border-top: 1px solid black;
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;
}
#checkinList li:first-child details {
#checkinList li:first-child .checkin {
border-top: none;
}

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

@ -17,7 +17,7 @@
<body>
<header>
<header class="page-header">
<h1 class="page-title">Where in the World is Ben?</h1>
<nav class="other-links">
<ul>
@ -44,8 +44,11 @@
<ol start="{{ count($trip->checkins) }}" reversed>
@foreach(array_slice(array_reverse($trip->checkins), 0, 15) as $checkin)
<li>
<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>
<details class="checkin" id="{{ $checkin->id }}" ontoggle="toggleCheckin(this.open, this.id)">
<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]" }}
@if($checkin->image_url)
<img class="popup__image" loading="lazy" src="{{ $checkin->image_url }}">