Update styling
This commit is contained in:
parent
7793a01828
commit
b56c82fd82
5 changed files with 99 additions and 50 deletions
|
|
@ -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;
|
||||
}
|
||||
|
||||
details h2 {
|
||||
display: inline;
|
||||
@media screen and (min-width: 1024px) {
|
||||
grid-column-start: 2;
|
||||
}
|
||||
}
|
||||
|
||||
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 {
|
||||
@media screen and (min-width: 1024px) {
|
||||
max-width: 50vw;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
<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>
|
||||
</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>Tracking Ended: {{ date('j M Y (G:H)', strtotime($trip->updated_at)) }}</span>
|
||||
</p>
|
||||
</section>
|
||||
</header>
|
||||
|
||||
<main id="routeContainer">
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -18,14 +18,20 @@
|
|||
<body>
|
||||
|
||||
<header>
|
||||
<h1>Where in the World is Ben?</h1>
|
||||
<p><a href="/past-trips">Past trips</a></p>
|
||||
<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>
|
||||
<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">
|
||||
|
|
|
|||
Loading…
Reference in a new issue