Creepso/miru
1
0
Fork 0
mirror of https://github.com/ThaUnknown/miru.git synced 2026-03-31 01:28:43 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

fix: further improve navigation and visiblity of selected buttons

Browse source
This commit is contained in:
ThaUnknown 2025-07-16 20:32:46 +02:00
parent 71947f0c5e
commit c8af048473
No known key found for this signature in database
6 changed files with 16 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
package.json
View file

@ -1,9 +1,9 @@
{
"name": "ui",
"version": "6.4.44",
"version": "6.4.45",
"license": "BUSL-1.1",
"private": true,
"packageManager": "pnpm@9.14.4",
"packageManager": "pnpm@9.15.5",
"scripts": {
"dev": "vite dev --open",
"build": "vite build && scopy ./build/index.html ./build/offline.html",

5
src/lib/components/ui/banner/full-banner.svelte
View file

@ -59,6 +59,9 @@
current = media
timeout = schedule(currentIndex() + 1)
}
function tabindex (node: HTMLElement) {
node.tabIndex = -1
}
</script>
<div class='pl-5 pb-5 justify-end flex flex-col h-full max-w-full'>
@ -96,7 +99,7 @@
<div class='flex'>
{#each shuffled as media (media.id)}
{@const active = current === media}
<div class='pt-2 pb-1' class:cursor-pointer={!active} use:click={() => setCurrent(media)}>
<div class='pt-2 pb-1' class:cursor-pointer={!active} use:click={() => setCurrent(media)} use:tabindex>
<div class='bg-neutral-800 mr-2 progress-badge overflow-clip rounded' class:active style='height: 4px;' style:width={active ? '3rem' : '1.5rem'}>
<div class='progress-content h-full transform-gpu w-full' class:bg-white={active} />
</div>

6
src/lib/components/ui/button/index.ts
View file

@ -8,11 +8,11 @@ const buttonVariants = tv({
base: 'focus-visible:ring-ring inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 disabled:pointer-events-none disabled:opacity-50',
variants: {
variant: {
default: 'bg-primary text-primary-foreground select:bg-primary/90 shadow',
default: 'bg-primary text-primary-foreground select:bg-primary/70 shadow',
destructive: 'bg-destructive text-destructive-foreground select:bg-destructive/90 shadow-sm',
outline: 'border-input bg-background select:bg-accent select:text-accent-foreground border shadow-sm',
secondary: 'bg-secondary text-secondary-foreground select:bg-secondary/80 shadow-sm',
ghost: 'select:bg-secondary-foreground/10 select:text-accent-foreground',
secondary: 'bg-secondary text-secondary-foreground select:bg-secondary/70 shadow-sm',
ghost: 'select:bg-secondary-foreground/30 select:text-accent-foreground',
link: 'text-primary underline-offset-4 select:underline'
},
size: {

6
src/lib/components/ui/sidebar/SidebarButton.svelte
View file

@ -28,11 +28,11 @@
$: isActive = href && matchPath(href, $page)
</script>
<Button variant='ghost' {href} class={cn(className, 'px-2 w-10 relative md:pl-4 md:w-12 md:rounded-l-none')} {...$$restProps}>
<Button variant='ghost' {href} class={cn(className, 'px-2 w-10 relative md:pl-4 md:w-12 md:rounded-l-none group/sidebar')} {...$$restProps}>
{#if isActive}
<div class='bg-white absolute inset-0 rounded-md md:rounded-l-none' in:send={{ key }} out:receive={{ key }} />
<div class='bg-white absolute inset-0 rounded-md md:rounded-l-none group-select/sidebar:bg-primary/70' in:send={{ key }} out:receive={{ key }} />
{/if}
<div class='relative text-white transition-colors duration-300' class:!text-black={isActive}>
<div class='relative text-white transition-colors duration-300 pointer-events-none' class:!text-black={isActive}>
<slot />
</div>
</Button>

2
src/routes/+layout.svelte
View file

@ -36,7 +36,7 @@
</script>
<svelte:head>
<meta name='viewport' content='width=device-width, initial-scale={SUPPORTS.isAndroidTV ? $settings.uiScale / devicePixelRatio : SUPPORTS.isAndroid ? $settings.uiScale : 1}, maximum-scale=2, user-scalable=0' />
<meta name='viewport' content='width=device-width, initial-scale={SUPPORTS.isAndroidTV ? $settings.uiScale / devicePixelRatio : SUPPORTS.isAndroid ? $settings.uiScale : 1}, maximum-scale=2, user-scalable=0, viewport-fit=cover' />
</svelte:head>
<div class='w-full h-full flex flex-col backface-hidden bg-black relative overflow-clip md:border-l-2 [border-image:linear-gradient(to_bottom,white_var(--progress),#2dcf58_var(--progress))_1] preserve-3d' bind:this={root} id='root' style:--progress='{100 - updateProgress}%'>

6
src/routes/setup/Footer.svelte
View file

@ -67,17 +67,17 @@
</div>
</div>
<div class='flex flex-row items-center justify-between w-full bg-neutral-950 border-t md:border md:rounded-lg border-border py-4 px-8'>
<Button variant='secondary' class='w-24' href='../{PREV[step]}'>Prev</Button>
<Button variant='secondary' class='w-24' href='../{PREV[step]}' id='setup-prev-button' data-right='#setup-next-button'>Prev</Button>
{#await settled}
<Tooltip.Root>
<Tooltip.Trigger let:builder>
<Button builders={[builder]} class='font-semibold w-24 !pointer-events-auto cursor-wait' disabled>Next</Button>
<Button builders={[builder]} class='font-semibold w-24 !pointer-events-auto cursor-wait' disabled id='setup-next-button' data-left='#setup-prev-button'>Next</Button>
</Tooltip.Trigger>
<Tooltip.Content>
<p>Wait for all checks to settle</p>
</Tooltip.Content>
</Tooltip.Root>
{:then _}
<Button class='font-semibold w-24' on:click={checkNext}>Next</Button>
<Button class='font-semibold w-24' on:click={checkNext} id='setup-next-button' data-left='#setup-prev-button'>Next</Button>
{/await}
</div>