Allow full navigation using tab

This commit is contained in:
Sijmen 2023-04-27 21:17:26 +02:00
parent 25790a784d
commit 6fe5107836
Signed by: vijfhoek
GPG Key ID: DAF7821E067D9C48
4 changed files with 44 additions and 19 deletions

View File

@ -28,11 +28,18 @@ body > div {
padding: 1rem;
}
button {
background-color: transparent;
border: none;
color: inherit;
}
.browser {
flex: 1;
display: flex;
flex-flow: column;
height: 100%;
padding: 0;
}
a {
@ -113,6 +120,7 @@ ul.breadcrumb {
background-color: #334;
border-radius: .25rem;
padding: .75rem 1rem;
margin: 16px 16px 0;
}
@media (prefers-contrast: more) {
ul.breadcrumb {
@ -123,8 +131,10 @@ ul.breadcrumb {
ul.breadcrumb li:not(:first-child)::before {
display: inline-block;
padding-left: .5rem;
padding-right: .1rem;
color: #6c757d;
content: "/";
}
@ -132,12 +142,14 @@ ul.breadcrumb li:not(:first-child)::before {
ul.dir {
overflow: auto;
flex: 1;
padding: 16px;
}
ul.dir li {
cursor: pointer;
padding: .75rem .75rem;
border-radius: 3px;
padding: 0.5rem 0.5rem;
border-radius: 0.25rem;
min-height: 4rem;
display: flex;
align-items: center;
@ -162,6 +174,9 @@ ul.dir li .material-symbols-outlined {
width: 48px;
height: 48px;
}
.albumart a {
display: block;
}
.queue .albumart {
margin: 0.75rem;

View File

@ -26,11 +26,17 @@
{% endfor %}
</ul>
<ul class="dir" hx-boost="true">
<ul class="dir" hx-boost="true" tabindex="-1">
{% for entry in entries %}
{% match entry %}
{% when mpd::Entry::Song with { name, path, artist } %}
<li hx-post="/queue?path={{path}}" hx-swap="none" role="button">
<li
hx-post="/queue?path={{path}}"
hx-trigger="click,keyup[key=='Enter']"
hx-swap="none"
role="button"
tabindex="0"
>
<span class="material-symbols-outlined" title="Song">music_note</span>
<div class="albumart">
<img src="/art?path={{path}}" onerror="this.style.visibility = 'hidden'">
@ -49,7 +55,11 @@
role="link"
>
<span class="material-symbols-outlined" title="Directory">folder</span>
<div class="song__name">{{ name }}</div>
<div class="song__name">
<a href="/?path={{ path }}" hx-get="/browser" hx-sync="closest li:abort">
{{ name }}
</a>
</div>
</li>
{% when mpd::Entry::Playlist with { name, path } %}
<li hx-post="/queue?path={{ path }}" hx-swap="none" role="button" >

View File

@ -36,22 +36,22 @@
{% endif %}
</div>
<div class="controls">
<span
hx-post="/previous" hx-swap="none"
<div class="controls" hx-swap="none" hx-trigger="click,keyUp[key=='Enter']">
<button
hx-post="/previous"
class="control material-symbols-outlined" role="button" title="Previous track"
>skip_previous</span>
<span
hx-post="/play" hx-swap="none"
>skip_previous</button>
<button
hx-post="/play"
class="control material-symbols-outlined" role="button" title="Play"
>play_arrow</span>
<span
hx-post="/pause" hx-swap="none"
>play_arrow</button>
<button
hx-post="/pause"
class="control material-symbols-outlined" role="button" title="Pause"
>pause</span>
<span
hx-post="/next" hx-swap="none"
>pause</button>
<button
hx-post="/next"
class="control material-symbols-outlined" role="button" title="Next track"
>skip_next</span>
>skip_next</button>
</div>
</div>

View File

@ -3,7 +3,7 @@
<div class="queue-header">
<div class="queue-next">Next in queue</div>
<div class="queue-clear" role="button" hx-delete="/queue">
<button class="queue-clear" role="button" hx-delete="/queue">
<span class="material-symbols-outlined">playlist_remove</span>
Clear
</div>