relikd/klangkarte
1
0
Fork 0
Code Issues Pull Requests Activity

feat: switch between map and list

Browse Source
This commit is contained in:
relikd
2024-07-22 20:35:55 +02:00
parent 968e46d3db
commit 63af94ab0d
3 changed files with 61 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
frontend/index.html
View File

@@ -82,15 +82,25 @@
</div>
</div>
<div id="map" class="d-none d-md-block"></div>
<div id="card-container" class="shadow-lg bg-success-subtle">
<h1 class="fs-4 text-center m-2 mb-4">Klangkarte
<a id="info" class="text-decoration-none" title="Info" href="" onclick="return showNotice('info')">
<svg>
<use href="/icons.svg#info"></use>
</svg>
</a>
</h1>
<div id="map-container">
<button id="btn-show-list" class="btn btn-light btn-outline-success btn-sm" title="Liste anzeigen"
onclick="hideTab('map')">
zur Liste
</button>
<div id="map"></div>
</div>
<div id="list-container" class="hidden-tab shadow-lg bg-success-subtle">
<button id="btn-show-map" class="btn btn-light btn-outline-success btn-sm" title="Karte anzeigen"
onclick="hideTab('list')">
zur Karte
</button>
<a id="info" class="text-decoration-none" title="Info" href="" onclick="return showNotice('info')">
<svg>
<use href="/icons.svg#info"></use>
</svg>
</a>
<h1 class="fs-4 text-center m-2 mb-4">Klangkarte</h1>
<div id="cards">
<div id="card-template" class="card shadow-sm">
<img class="card-img-top lozad" alt="Kein Bild">

6
frontend/script.js
View File

@@ -115,6 +115,12 @@ function showNotice(id) {
return false;
}
function hideTab(tab) {
document.getElementById('map-container').classList.remove('hidden-tab');
document.getElementById('list-container').classList.remove('hidden-tab');
document.getElementById(tab + '-container').classList.add('hidden-tab');
}
// ---------------------
// Initializer
// ---------------------

44
frontend/style.css
View File

@@ -2,15 +2,20 @@ html, body {
height: 100%;
margin: 0;
}
#map {
#map-container {
width: calc(100% - 316px);
height: 100%;
position: relative;
}
#map {
width: 100%;
height: 100%;
}
#detail-map {
width: 100%;
height: 200px;
}
#card-container {
#list-container {
position: absolute;
right: 0;
top: 0;
@@ -20,13 +25,24 @@ html, body {
overflow: auto;
/* filter: drop-shadow(0 0 2px #000); */
}
#info svg {
width: .75em;
height: .75em;
#btn-show-map {
margin: 8px;
}
#btn-show-list {
position: absolute;
top: 8px;
right: 8px;
fill: rgba(var(--bs-link-color-rgb), var(--bs-link-opacity,1));
z-index: 810;
}
#info svg {
width: 1.2rem;
height: 1.2rem;
position: absolute;
top: 12px;
right: 12px;
fill: rgba(var(--bs-success-rgb), var(--bs-link-opacity, 1));
}
.card {
@@ -96,10 +112,22 @@ html, body {
width: 100%;
}
@media(max-width: 768px) {
#card-container {
/* responsive toggle */
#btn-show-map, #btn-show-list {
display: none;
}
@media(max-width: 600px) {
#btn-show-map, #btn-show-list {
display: unset;
}
#map-container, #list-container {
width: 100%;
}
.hidden-tab {
display: none;
}
.card img {
height: calc(100vw * 2/3);
line-height: calc((100vw - 20px) * 2/3);