hermes-agent/pinchflat
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Responsive UI improvements (#41)

Browse Source 
* Improved responsive UX for media profiles

* Improved responsiveness for other pages

* Added docs; fixed up stragglers
This commit is contained in:
Kieran
2024-02-29 12:24:54 -08:00
committed by GitHub
parent 9fc2edfd4a
commit 5b29f5036a
14 changed files with 67 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files
lib/pinchflat_web/components/layouts/partials/header.html.heex
+1 -1
View File
@@ -3,7 +3,7 @@
<div class="flex items-center gap-2 sm:gap-4 lg:hidden">
<button
class="z-99999 block rounded-sm border border-stroke bg-white p-1.5 shadow-sm dark:border-strokedark dark:bg-boxdark lg:hidden"
@click.stop="sidebarToggle = !sidebarToggle"
@click.stop="sidebarVisible = !sidebarVisible"
>
<.icon name="hero-bars-3" />
</button>
lib/pinchflat_web/components/layouts/partials/sidebar.html.heex
+8 -7
View File
@@ -1,15 +1,18 @@
<aside
x-bind:class="sidebarToggle ? 'translate-x-0' : '-translate-x-full'"
class="absolute left-0 top-0 z-9999 flex h-screen w-72.5 flex-col overflow-y-hidden bg-black duration-300 ease-linear dark:bg-boxdark lg:static lg:translate-x-0"
@click.outside="sidebarToggle = false"
x-bind:class="sidebarVisible ? 'translate-x-0' : '-translate-x-full'"
class={[
"-translate-x-full absolute left-0 top-0 z-9999 flex h-screen w-60 flex-col overflow-y-hidden",
"bg-black duration-300 ease-linear shadow-lg sm:shadow-none dark:bg-boxdark lg:static lg:translate-x-0"
]}
@click.outside="sidebarVisible = false"
>
<div class="flex items-center justify-between gap-2 px-6 py-5.5 lg:py-6.5">
<a href="/" class="flex items-center">
<img src={~p"/images/logo.png"} alt="Pinchflat" class="w-9 h-9" />
<img src={~p"/images/logo.png?cachebust=2024-02-29"} alt="Pinchflat" class="w-9 h-9" />
<h2 class="text-xl font-bold text-white pl-2">Pinchflat</h2>
</a>
<button class="block lg:hidden" @click.stop="sidebarToggle = !sidebarToggle">
<button class="block lg:hidden" @click.stop="sidebarVisible = !sidebarVisible">
<.icon name="hero-arrow-left" class="fill-current" />
</button>
</div>
@@ -19,9 +22,7 @@
<h3 class="mb-4 ml-4 text-sm font-medium text-bodydark2">MENU</h3>
<ul class="mb-6 flex flex-col gap-1.5">
<.sidebar_item icon="hero-home" text="Home" navigate={~p"/"} />
<.sidebar_item icon="hero-tv" text="Sources" navigate={~p"/sources"} />
<.sidebar_item icon="hero-adjustments-vertical" text="Media Profiles" navigate={~p"/media_profiles"} />
</ul>
</div>