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

Update styling

Browse source
This commit is contained in:
Ben Goldsworthy 2022-09-24 19:36:06 +00:00
parent 7793a01828
commit b56c82fd82
5 changed files with 99 additions and 50 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

84
public/css/app.css
View file

@ -1,8 +1,26 @@
#pageHeader {
text-align: center;
/*
* Typography
*/
body {
font-family: Verdana, Arial, sans-serif;
font-size: 16px;
}
.positive, .negative {
.page-title {
font-size: 3em;
text-align: center;
@media screen and (min-width: 1024px) {
text-align: left;
}
}
details h2 {
display: inline;
}
.positive,
.negative {
font-weight: bold;
}
@ -19,23 +37,52 @@
font-size: 0.8em;
}
/*
* Layout
*/
.other-links {
display: block;
text-align: center;
margin: auto;
}
.trip-meta {
display: block;
width: 100%;
}
.main--list {
margin: auto;
width: 100%;
max-width: 980px;
}
#routeContainer {
display: grid;
grid-gap: 20px;
@media screen and (min-width: 1024px) {
grid-template-columns: 3fr 1fr;
}
}
#map {
height: 400px;
grid-column-start: 1;
grid-column-end: 3;
@media screen and (min-width: 1024px) {
height: auto;
min-height: 800px;
grid-column-end: 2;
}
}
#checkinList {
grid-column-start: 1;
grid-column-end: 3;
@media screen and (min-width: 1024px) {
grid-column-start: 2;
}
details h2 {
display: inline;
}
details {
@ -55,6 +102,9 @@ details[open] summary {
max-width: 85vw;
max-height: 85vh;
min-width: 60vw;
@media screen and (min-width: 1024px) {
min-width: 350px;
}
}
.leaflet-popup-content {
@ -65,29 +115,7 @@ details[open] summary {
width: auto;
height: auto;
max-width: 70vw;
}
@media screen and (min-width: 1024px) {
#routeContainer {
grid-template-columns: 3fr 1fr;
}
#map {
height: auto;
min-height: 800px;
grid-column-end: 2;
}
#checkinList {
grid-column-start: 2;
}
.leaflet-popup {
min-width: 350px;
}
.popup__image {
max-width: 50vw;
}
}

8
resources/views/no-trip.blade.php
View file

@ -18,8 +18,12 @@
<body>
<header>
<h1>No Trip in Progress at the Moment</h1>
<p><a href="/past-trips">Past trips</a></p>
<h1 class="page-title">No Trip in Progress at the Moment</h1>
<nav class="other-pages">
<ul>
<li><p><a href="/past-trips">Past trips</a></p></li>
</ul>
</nav>
</header>
</body>

15
resources/views/past-trip.blade.php
View file

@ -18,13 +18,20 @@
<body>
<header>
<h1>Where in the World was Ben?</h1>
<p><a href="/">Current trip</a></p>
<p><a href="/past-trips">Past trips</a></p>
<h1 class="page-title">{{ $trip->name }}</h1>
<nav class="other-links">
<ul>
<li><p><a href="/">Current trip</a></p></li>
<li><p><a href="/past-trips">Past trips</a></p></li>
</ul>
</nav>
<section class="trip-meta">
<p>
<span>Tracking started: {{ date('j M Y (G:H)', strtotime($trip->date_start)) }}</span> |
<span class="small">(Last update: {{ date('j M Y (G:H)', strtotime($trip->updated_at)) }})</span>
<span>Tracking Ended: {{ date('j M Y (G:H)', strtotime($trip->updated_at)) }}</span>
</p>
</section>
</header>
<main id="routeContainer">

10
resources/views/past-trips.blade.php
View file

@ -18,11 +18,15 @@
<body>
<header>
<h1>Past Trips</h1>
<p><a href="/">Current trip</a></p>
<h1 class="page-title">Past Trips</h1>
<nav class="other-links">
<ul>
<li><p><a href="/">Current trip</a></p></li>
</ul>
</nav>
</header>
<main id="routeContainer">
<main class="main--list">
<ul>
<li><a href="/past-trip/47xj8go928ql9mq3r20p">Europespedition III: Leds Free or Die Hard</a></li>
</ul>

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

@ -18,14 +18,20 @@
<body>
<header>
<h1>Where in the World is Ben?</h1>
<p><a href="/past-trips">Past trips</a></p>
<h1 class="page-title">Where in the World is Ben?</h1>
<nav class="other-links">
<ul>
<li><p><a href="/past-trips">Past trips</a></p></li>
</ul>
</nav>
<section class="trip-meta">
<p>
<span> Tracking started: {{ date('j M Y (G:H)', strtotime($trip->date_start)) }}</span> |
<span class="{{ ($trip->is_active) ? "positive" : "negative" }}">{{ ($trip->is_active) ? "Active" : "Ended" }}</span> |
<span class="{{ ($trip->is_tracking) ? "positive" : "negative" }}">{{ ($trip->is_tracking) ? "Currently tracking" : "Not currently tracking" }}</span>
<span class="small">(Last update: {{ date('j M Y (G:H)', strtotime($trip->updated_at)) }})</span>
</p>
</section>
</header>
<main id="routeContainer">