brooke.ec / luminary
A focused Docker Compose management web application.
0
fork

Configure Feed

Select the types of activity you want to include in your feed.

feat: desktop back button

Brooke f81293fe 8599fb0b

+68 -53
+2 -1
packages/panel/src/lib/style.scss
··· 50 50 text-decoration: underline; 51 51 } 52 52 53 - &:disabled { 53 + &:disabled, 54 + .disabled { 54 55 color: var(--subtext0); 55 56 text-decoration: none; 56 57 cursor: not-allowed;
+1 -17
packages/panel/src/routes/(authenticated)/+layout.svelte
··· 7 7 $effect(() => api.subscribe(fetch)); 8 8 </script> 9 9 10 - <div class="container"> 11 - <Navbar /> 12 - 13 - <div class="full"> 14 - {@render children()} 15 - </div> 16 - </div> 17 - 18 - <style lang="scss"> 19 - .container { 20 - display: flex; 21 - 22 - @media (max-width: 425px) { 23 - flex-direction: column; 24 - } 25 - } 26 - </style> 10 + <Navbar {children} />
+65 -35
packages/panel/src/routes/(authenticated)/Navbar.svelte
··· 20 20 faMagnifyingGlass, 21 21 faXmark, 22 22 } from "@fortawesome/free-solid-svg-icons"; 23 + import type { Snippet } from "svelte"; 24 + import Crane from "$lib/component/Crane.svelte"; 23 25 24 26 const EXPANDED_KEY = "luminary-navbar-expanded"; 25 27 ··· 29 31 { icon: faCircleUser, label: "User", href: "/user" }, 30 32 ] satisfies { icon: any; label: string; href: string }[]; 31 33 34 + let { children }: { children: Snippet<[]> } = $props(); 35 + 32 36 let expanded = $state(localStorage.getItem(EXPANDED_KEY) !== "false"); 33 37 let open = $state(false); 34 38 35 39 let navbarWidth = $state(0); 40 + 41 + let returnable = $derived(page.url.pathname.split("/").length > 2); 36 42 37 43 function toggleExpanded() { 38 44 expanded = !expanded; ··· 59 65 {/each} 60 66 {/snippet} 61 67 62 - {#if isMobile()} 63 - <div style:min-height="48px"></div> 68 + <div class="container"> 69 + {#if isMobile()} 70 + <div style:min-height="48px"></div> 64 71 65 - <nav class:open> 66 - <div class="titlebar"> 67 - <button class="a" onclick={toggleOpen}> 68 - <Fa icon={open ? faXmark : faBars} /> 69 - </button> 70 - <a href="./"> 71 - <Fa icon={faChevronLeft} /> 72 - </a> 73 - </div> 74 - {#if open} 75 - <div class="list" transition:slide> 76 - <div class="flexc expanded">{@render links()}</div> 72 + <nav class:open> 73 + <div class="titlebar"> 74 + <button class="a" onclick={toggleOpen}> 75 + <Fa icon={open ? faXmark : faBars} /> 76 + </button> 77 + {#if returnable} 78 + <a href="./"> 79 + <Fa icon={faChevronLeft} /> 80 + </a> 81 + {:else} 82 + <h2 class="flex center gap-5" style="margin-left: 10px;"><Crane /> Luminary</h2> 83 + {/if} 77 84 </div> 78 - {/if} 79 - </nav> 80 - {:else} 81 - <div style:min-width="{navbarWidth}px"></div> 85 + {#if open} 86 + <div class="list" transition:slide> 87 + <div class="flexc expanded">{@render links()}</div> 88 + </div> 89 + {/if} 90 + </nav> 91 + {:else} 92 + <div style:min-width="{navbarWidth}px"></div> 82 93 83 - <nav class:expanded bind:clientWidth={navbarWidth}> 84 - {@render links()} 94 + <nav class:expanded bind:clientWidth={navbarWidth}> 95 + {@render links()} 85 96 86 - <button class="a entry" style="margin-top: auto"> 87 - <div class="icon"> 88 - <Fa icon={faMagnifyingGlass} /> 89 - </div> 90 - <div class="label">Search</div> 91 - </button> 97 + <button class="a entry" style="margin-top: auto"> 98 + <div class="icon"> 99 + <Fa icon={faMagnifyingGlass} /> 100 + </div> 101 + <div class="label">Search</div> 102 + </button> 92 103 93 - <button class="a entry" onclick={toggleExpanded} aria-label="{expanded ? 'collapse' : 'expand'} sidebar"> 94 - <div class="icon"> 95 - <Fa icon={expanded ? faChevronLeft : faBars} /> 96 - </div> 97 - <div class="label">Collapse</div> 98 - </button> 99 - </nav> 100 - {/if} 104 + <button class="a entry" onclick={toggleExpanded} aria-label="{expanded ? 'collapse' : 'expand'} sidebar"> 105 + <div class="icon"> 106 + <Fa icon={expanded ? faChevronLeft : faBars} /> 107 + </div> 108 + <div class="label">Collapse</div> 109 + </button> 110 + </nav> 111 + {/if} 112 + 113 + <div class="flexc gap-20 full"> 114 + {#if returnable && !isMobile()} 115 + <a href="./"><Fa icon={faChevronLeft} /> Back</a> 116 + {/if} 117 + <div class="full"> 118 + {@render children()} 119 + </div> 120 + </div> 121 + </div> 101 122 102 123 <style lang="scss"> 103 124 $navbar-width: 125px; 125 + 126 + .container { 127 + display: flex; 128 + 129 + @media (max-width: 425px) { 130 + flex-direction: column; 131 + } 132 + } 104 133 105 134 nav { 106 135 background-color: var(--crust); ··· 146 175 height: 50px; 147 176 width: 100%; 148 177 149 - & > * { 178 + & > a, 179 + & > button { 150 180 width: 48px; 151 181 height: 100%; 152 182