Allow full navigation using tab
This commit is contained in:
parent
25790a784d
commit
6fe5107836
|
@ -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;
|
||||
|
|
|
@ -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" >
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
Loading…
Reference in New Issue