reworked poi details view
This commit is contained in:
Florian Zumpe
parent
44b1700c48
commit
b910bce8df
4
package-lock.json
generated
4
package-lock.json
generated
@ -1,12 +1,12 @@
|
||||
{
|
||||
"name": "wegwichtel-next",
|
||||
"version": "0.7.0",
|
||||
"version": "0.7.1",
|
||||
"lockfileVersion": 3,
|
||||
"requires": true,
|
||||
"packages": {
|
||||
"": {
|
||||
"name": "wegwichtel-next",
|
||||
"version": "0.7.0",
|
||||
"version": "0.7.1",
|
||||
"hasInstallScript": true,
|
||||
"dependencies": {
|
||||
"express": "5.2.1",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "wegwichtel-next",
|
||||
"version": "0.7.0",
|
||||
"version": "0.7.1",
|
||||
"private": true,
|
||||
"description": "GPS-gestützte Lern- und Wanderwege mit GPX, POIs, Bildern und Audioansagen.",
|
||||
"type": "module",
|
||||
|
||||
@ -9,6 +9,7 @@
|
||||
--notice-border: #d4a72c;
|
||||
--focus: #1e6fba;
|
||||
--footer-height: 5.25rem;
|
||||
--icon-button-size: 3.25rem;
|
||||
}
|
||||
|
||||
html,
|
||||
@ -68,7 +69,7 @@ button,
|
||||
}
|
||||
|
||||
.app-page > header:has(.back-button) {
|
||||
grid-template-columns: 5.5rem minmax(0, 1fr) 5.5rem;
|
||||
grid-template-columns: var(--icon-button-size) minmax(0, 1fr) var(--icon-button-size);
|
||||
gap: .5rem;
|
||||
}
|
||||
|
||||
@ -89,14 +90,25 @@ button,
|
||||
}
|
||||
|
||||
.app-page > header .back-button.ui-button {
|
||||
width: 5.5rem;
|
||||
min-height: 2.75rem;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
width: var(--icon-button-size);
|
||||
min-width: var(--icon-button-size);
|
||||
min-height: var(--icon-button-size);
|
||||
margin: 0;
|
||||
padding: .35rem;
|
||||
border-color: rgba(255, 255, 255, .45);
|
||||
border-radius: .45rem;
|
||||
background: rgba(255, 255, 255, .12);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.app-page > header .back-button.ui-button img {
|
||||
width: 1.25rem;
|
||||
height: 1.25rem;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.content {
|
||||
width: min(48rem, 100%);
|
||||
box-sizing: border-box;
|
||||
@ -374,34 +386,56 @@ button,
|
||||
background: #111;
|
||||
}
|
||||
|
||||
#slideshow figcaption {
|
||||
min-height: 1.4rem;
|
||||
padding: .5rem .75rem;
|
||||
}
|
||||
|
||||
#slide-controls {
|
||||
display: grid;
|
||||
grid-template-columns: auto minmax(4rem, 1fr) auto;
|
||||
align-items: center;
|
||||
grid-template-columns: var(--icon-button-size) minmax(0, 1fr) var(--icon-button-size);
|
||||
align-items: stretch;
|
||||
gap: .5rem;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
padding: .5rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#slide-controls.ui-controlgroup-horizontal .ui-controlgroup-item {
|
||||
float: none;
|
||||
padding: .65rem;
|
||||
}
|
||||
|
||||
#slide-controls .ui-button {
|
||||
min-width: 3rem;
|
||||
min-height: 3rem;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
min-width: 0;
|
||||
min-height: 100%;
|
||||
margin: 0;
|
||||
padding: .45rem;
|
||||
}
|
||||
|
||||
#slide-controls .ui-button img {
|
||||
width: 1.2rem;
|
||||
height: 1.2rem;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.slide-meta {
|
||||
display: flex;
|
||||
min-width: 0;
|
||||
min-height: var(--icon-button-size);
|
||||
padding: .25rem .4rem;
|
||||
border-radius: .45rem;
|
||||
background: rgba(255, 255, 255, .06);
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#slide-caption {
|
||||
margin: 0;
|
||||
overflow-wrap: anywhere;
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
#slide-position {
|
||||
display: grid;
|
||||
align-items: center;
|
||||
min-height: 2.75rem;
|
||||
display: block;
|
||||
margin-top: .15rem;
|
||||
color: rgba(255, 255, 255, .86);
|
||||
font-size: .9rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
#poi-audio {
|
||||
|
||||
3
public/images/icons/back.svg
Normal file
3
public/images/icons/back.svg
Normal file
@ -0,0 +1,3 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" fill="none">
|
||||
<path d="M30 10 16 24l14 14" stroke="#ffffff" stroke-width="5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 194 B |
3
public/images/icons/chevron-left.svg
Normal file
3
public/images/icons/chevron-left.svg
Normal file
@ -0,0 +1,3 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" fill="none">
|
||||
<path d="M29 12 17 24l12 12" stroke="#ffffff" stroke-width="5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 194 B |
3
public/images/icons/chevron-right.svg
Normal file
3
public/images/icons/chevron-right.svg
Normal file
@ -0,0 +1,3 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" fill="none">
|
||||
<path d="m19 12 12 12-12 12" stroke="#ffffff" stroke-width="5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 194 B |
@ -66,7 +66,9 @@
|
||||
|
||||
<section id="route-page" class="app-page" aria-label="Ausgewählte Route" hidden>
|
||||
<header>
|
||||
<button class="back-button" type="button" data-page-target="#routes-page">Zurück</button>
|
||||
<button class="back-button" type="button" data-page-target="#routes-page" aria-label="Zurück zur Routenauswahl" title="Zurück zur Routenauswahl">
|
||||
<img src="images/icons/back.svg" alt="">
|
||||
</button>
|
||||
<h1 id="route-title">Route</h1>
|
||||
</header>
|
||||
|
||||
@ -99,7 +101,9 @@
|
||||
|
||||
<section id="poi-page" class="app-page" aria-label="Station" hidden>
|
||||
<header>
|
||||
<button class="back-button" type="button" data-page-target="#route-page">Zurück</button>
|
||||
<button class="back-button" type="button" data-page-target="#route-page" aria-label="Zurück zur Route" title="Zurück zur Route">
|
||||
<img src="images/icons/back.svg" alt="">
|
||||
</button>
|
||||
<h1 id="poi-title">Station</h1>
|
||||
</header>
|
||||
|
||||
@ -107,13 +111,19 @@
|
||||
<div id="slideshow" aria-live="polite">
|
||||
<figure>
|
||||
<img id="slide-image" alt="">
|
||||
<figcaption id="slide-caption"></figcaption>
|
||||
</figure>
|
||||
|
||||
<div id="slide-controls">
|
||||
<button id="slide-prev" type="button">Vorheriges Bild</button>
|
||||
<div id="slide-controls" role="group" aria-label="Bildnavigation">
|
||||
<button id="slide-prev" type="button" aria-label="Vorheriges Bild" title="Vorheriges Bild">
|
||||
<img src="images/icons/chevron-left.svg" alt="">
|
||||
</button>
|
||||
<div class="slide-meta">
|
||||
<p id="slide-caption"></p>
|
||||
<span id="slide-position" aria-live="polite">0 / 0</span>
|
||||
<button id="slide-next" type="button">Nächstes Bild</button>
|
||||
</div>
|
||||
<button id="slide-next" type="button" aria-label="Nächstes Bild" title="Nächstes Bild">
|
||||
<img src="images/icons/chevron-right.svg" alt="">
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
7
public/js/bootstrap-loader.js
vendored
7
public/js/bootstrap-loader.js
vendored
@ -43,11 +43,10 @@
|
||||
function initializeJqueryUi() {
|
||||
const $ = window.jQuery;
|
||||
$('#bootstrap-retry').button({ icon: 'ui-icon-refresh' });
|
||||
$('.back-button').button({ icon: 'ui-icon-caret-1-w' });
|
||||
$('.back-button').button();
|
||||
$('#clear-route-search').button({ icon: 'ui-icon-close', showLabel: false });
|
||||
$('#slide-prev').button({ icon: 'ui-icon-caret-1-w', showLabel: false });
|
||||
$('#slide-next').button({ icon: 'ui-icon-caret-1-e', showLabel: false });
|
||||
$('#slide-controls').controlgroup();
|
||||
$('#slide-prev').button();
|
||||
$('#slide-next').button();
|
||||
}
|
||||
|
||||
async function boot() {
|
||||
|
||||
@ -29,6 +29,7 @@
|
||||
function render() {
|
||||
const hasImages = images.length > 0;
|
||||
$('#slideshow').toggle(hasImages);
|
||||
$('#slide-controls').attr('data-image-count', images.length);
|
||||
if (!hasImages) return;
|
||||
|
||||
const image = images[index];
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user