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

feat: info icon

Browse Source
This commit is contained in:
relikd
2024-07-03 00:46:36 +02:00
parent 981d636d90
commit 8cd5bbcbc0
3 changed files with 16 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
frontend/icons.svg
View File

@@ -8,4 +8,7 @@
<circle stroke="#000" stroke-width="2" cx="30" cy="30" r="27.5"/> <circle stroke="#000" stroke-width="2" cx="30" cy="30" r="27.5"/>
<path fill="#fff" d="m30 14.5c.5 0 1.8-.5 1.8-1.8s-1.3-1.8-1.8-1.8c-5.4 0-10.1 1.9-13.9 5.7s-5.7 8.5-5.7 13.9c0 .5.6 1.8 1.8 1.8s1.8-1.3 1.8-1.8c0-4.4 1.6-8.2 4.7-11.4s6.9-4.6 11.3-4.6z"/> <path fill="#fff" d="m30 14.5c.5 0 1.8-.5 1.8-1.8s-1.3-1.8-1.8-1.8c-5.4 0-10.1 1.9-13.9 5.7s-5.7 8.5-5.7 13.9c0 .5.6 1.8 1.8 1.8s1.8-1.3 1.8-1.8c0-4.4 1.6-8.2 4.7-11.4s6.9-4.6 11.3-4.6z"/>
</symbol> </symbol>
<symbol id="info" viewBox="0 0 100 100">
<path d="m50 0c-27.6 0-50 22.4-50 50s22.4 50 50 50 50-22.4 50-50-22.4-50-50-50zm-8 10h16v15h-16zm25 73h-34v-14h9v-21h-9v-14h25v35h9z"/>
</symbol>
</svg> </svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 780 B

After

Width:  |  Height:  |  Size: 967 B

6
frontend/index.html
View File

@@ -86,7 +86,11 @@
<div id="map" class="d-none d-md-block"></div> <div id="map" class="d-none d-md-block"></div>
<div id="card-container" class="shadow-lg bg-success-subtle"> <div id="card-container" class="shadow-lg bg-success-subtle">
<h1 class="fs-4 text-center m-2 mb-4">Klangkarte <h1 class="fs-4 text-center m-2 mb-4">Klangkarte
<a class="small text-decoration-none" title="Info" href="" onclick="return showNotice('info')">?⃝</a> <a id="info" class="text-decoration-none" title="Info" href="" onclick="return showNotice('info')">
<svg>
<use href="/icons.svg#info"></use>
</svg>
</a>
</h1> </h1>
<div id="cards"> <div id="cards">
<div id="card-template" class="card shadow-sm"> <div id="card-template" class="card shadow-sm">

8
frontend/style.css
View File

@@ -20,6 +20,14 @@ html, body {
overflow: auto; overflow: auto;
/* filter: drop-shadow(0 0 2px #000); */ /* filter: drop-shadow(0 0 2px #000); */
} }
#info svg {
width: .75em;
height: .75em;
position: absolute;
top: 8px;
right: 8px;
fill: rgba(var(--bs-link-color-rgb), var(--bs-link-opacity,1));
}
.card { .card {
margin: 8px; margin: 8px;