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

6
frontend/script.js
View File

@@ -115,6 +115,12 @@ function showNotice(id) {
return false; 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 // Initializer
// --------------------- // ---------------------

44
frontend/style.css
View File

@@ -2,15 +2,20 @@ html, body {
height: 100%; height: 100%;
margin: 0; margin: 0;
} }
#map { #map-container {
width: calc(100% - 316px); width: calc(100% - 316px);
height: 100%; height: 100%;
position: relative;
}
#map {
width: 100%;
height: 100%;
} }
#detail-map { #detail-map {
width: 100%; width: 100%;
height: 200px; height: 200px;
} }
#card-container { #list-container {
position: absolute; position: absolute;
right: 0; right: 0;
top: 0; top: 0;
@@ -20,13 +25,24 @@ html, body {
overflow: auto; overflow: auto;
/* filter: drop-shadow(0 0 2px #000); */ /* filter: drop-shadow(0 0 2px #000); */
} }
#info svg {
width: .75em; #btn-show-map {
height: .75em; margin: 8px;
}
#btn-show-list {
position: absolute; position: absolute;
top: 8px; top: 8px;
right: 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 { .card {
@@ -96,10 +112,22 @@ html, body {
width: 100%; width: 100%;
} }
@media(max-width: 768px) { /* responsive toggle */
#card-container {
#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%; width: 100%;
} }
.hidden-tab {
display: none;
}
.card img { .card img {
height: calc(100vw * 2/3); height: calc(100vw * 2/3);
line-height: calc((100vw - 20px) * 2/3); line-height: calc((100vw - 20px) * 2/3);