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

88
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; font-weight: bold;
} }
@ -19,23 +37,52 @@
font-size: 0.8em; 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 { #routeContainer {
display: grid; display: grid;
grid-gap: 20px;
@media screen and (min-width: 1024px) {
grid-template-columns: 3fr 1fr;
}
} }
#map { #map {
height: 400px; height: 400px;
grid-column-start: 1; grid-column-start: 1;
grid-column-end: 3; grid-column-end: 3;
@media screen and (min-width: 1024px) {
height: auto;
min-height: 800px;
grid-column-end: 2;
}
} }
#checkinList { #checkinList {
grid-column-start: 1; grid-column-start: 1;
grid-column-end: 3; grid-column-end: 3;
} @media screen and (min-width: 1024px) {
grid-column-start: 2;
details h2 { }
display: inline;
} }
details { details {
@ -55,6 +102,9 @@ details[open] summary {
max-width: 85vw; max-width: 85vw;
max-height: 85vh; max-height: 85vh;
min-width: 60vw; min-width: 60vw;
@media screen and (min-width: 1024px) {
min-width: 350px;
}
} }
.leaflet-popup-content { .leaflet-popup-content {
@ -65,29 +115,7 @@ details[open] summary {
width: auto; width: auto;
height: auto; height: auto;
max-width: 70vw; max-width: 70vw;
} @media screen and (min-width: 1024px) {
@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; max-width: 50vw;
} }
} }

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

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

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

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

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

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

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

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