Minor cleanup to make navigating by region easier.

* Make `<main>` the part of the page that actually changes when the route updates, thus making navigation to page content easier.
* Add labelled region for persistent audio player.
This commit is contained in:
Nolan Darilek 2021-11-22 13:18:06 -06:00
parent d35554ee0e
commit 5cf58b2b77
2 changed files with 7 additions and 7 deletions

View file

@ -9,7 +9,7 @@ defmodule LiveBeatsWeb.PlayerLive do
def render(assigns) do def render(assigns) do
~H""" ~H"""
<!-- player --> <!-- player -->
<div id="audio-player" phx-hook="AudioPlayer" class="w-full" > <div id="audio-player" phx-hook="AudioPlayer" class="w-full" role="region" aria-label="Player" >
<div phx-update="ignore"> <div phx-update="ignore">
<audio></audio> <audio></audio>
</div> </div>

View file

@ -143,13 +143,13 @@
</div> </div>
</div> </div>
<main class="flex-1 relative z-0 overflow-y-auto focus:outline-none">
<.live_component module={LiveBeatsWeb.LayoutComponent} id="layout" /> <.live_component module={LiveBeatsWeb.LayoutComponent} id="layout" />
<%= if @current_user do %> <%= if @current_user do %>
<%= live_render(@socket, LiveBeatsWeb.PlayerLive, id: "player", session: %{}, sticky: true) %> <%= live_render(@socket, LiveBeatsWeb.PlayerLive, id: "player", session: %{}, sticky: true) %>
<% end %> <% end %>
<main class="flex-1 relative z-0 overflow-y-auto focus:outline-none">
<.flash flash={@flash} kind={:info}/> <.flash flash={@flash} kind={:info}/>
<.flash flash={@flash} kind={:error}/> <.flash flash={@flash} kind={:error}/>
<.connection_status> <.connection_status>