Darkages/SpotMicroESP32-Leika
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

🎨 Improve controller bar ui

Browse Source
This commit is contained in:
Rune Harlyk
2025-12-25 20:15:45 +01:00
parent 0d1e27b167
commit 9f3b59f0a7
1 changed files with 23 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/src/routes/controller/Controls.svelte
+23 -22
View File
@@ -133,25 +133,26 @@
</script> </script>
<div class="absolute top-0 left-0 w-screen h-screen"> <div class="absolute top-0 left-0 w-screen h-screen">
<div class="absolute top-0 left-0 h-full w-full flex portrait:hidden"> <div class="absolute top-0 left-0 h-full w-full flex max-[599px]:hidden">
<div id="left" class="flex w-60 items-center justify-end"></div> <div id="left" class="flex w-60 items-center justify-end"></div>
<div class="flex-1"></div> <div class="flex-1"></div>
<div id="right" class="flex w-60 items-center"></div> <div id="right" class="flex w-60 items-center"></div>
</div> </div>
<div class="absolute bottom-0 right-0 p-4 z-10 gap-2 flex-col hidden lg:flex"> <div
class="absolute bottom-0 right-0 p-4 z-10 gap-1.5 flex-col hidden lg:flex opacity-40 hover:opacity-80 transition-opacity duration-300"
>
<div class="flex justify-center w-full"> <div class="flex justify-center w-full">
<kbd class="kbd">W</kbd> <kbd class="kbd kbd-sm bg-base-100/80 border-base-content/20 shadow-md">W</kbd>
</div> </div>
<div class="flex justify-center gap-2 w-full"> <div class="flex justify-center gap-1.5 w-full">
<kbd class="kbd">A</kbd> <kbd class="kbd kbd-sm bg-base-100/80 border-base-content/20 shadow-md">A</kbd>
<kbd class="kbd">S</kbd> <kbd class="kbd kbd-sm bg-base-100/80 border-base-content/20 shadow-md">S</kbd>
<kbd class="kbd">D</kbd> <kbd class="kbd kbd-sm bg-base-100/80 border-base-content/20 shadow-md">D</kbd>
</div> </div>
<div class="flex justify-center w-full"></div>
</div> </div>
<div class="absolute bottom-0 z-10 flex items-end"> <div class="absolute bottom-0 z-10 flex items-end pointer-events-none">
<div <div
class="flex items-center flex-col bg-base-300 bg-opacity-50 p-3 pb-2 gap-2 rounded-tr-xl" class="flex items-center flex-col backdrop-blur-sm bg-base-300/60 p-3 pb-2 gap-2 rounded-tr-2xl border-t border-base-content/5 pointer-events-auto"
> >
<VerticalSlider <VerticalSlider
min={0} min={0}
@@ -159,15 +160,15 @@
step={0.01} step={0.01}
oninput={(e: Event) => handleRange(e, 'height')} oninput={(e: Event) => handleRange(e, 'height')}
/> />
<label for="height">Ht</label> <label for="height" class="text-xs font-medium opacity-70">Ht</label>
</div> </div>
<div <div
class="flex items-end gap-4 bg-base-300 bg-opacity-50 h-min rounded-tr-xl pl-0 p-3 portrait:hidden" class="flex items-end gap-4 backdrop-blur-sm bg-base-300/60 h-min rounded-tr-2xl pl-0 p-3 border-t border-r border-base-content/5 pointer-events-auto"
> >
<div class="join"> <div class="join shadow-lg">
{#each modes as modeValue} {#each modes as modeValue}
<button <button
class="btn join-item" class="btn join-item btn-sm transition-all duration-200"
class:btn-primary={$mode === modes.indexOf(modeValue)} class:btn-primary={$mode === modes.indexOf(modeValue)}
onclick={() => changeMode(modeValue)} onclick={() => changeMode(modeValue)}
> >
@@ -177,11 +178,11 @@
</div> </div>
{#if $mode === ModesEnum.Walk} {#if $mode === ModesEnum.Walk}
<div class="join"> <div class="join shadow-md">
{#each Object.values(WalkGaits) as gaitValue} {#each Object.values(WalkGaits) as gaitValue}
{#if typeof gaitValue === 'number'} {#if typeof gaitValue === 'number'}
<button <button
class="btn join-item btn-sm" class="btn join-item btn-xs transition-all duration-200"
class:btn-secondary={$walkGait === gaitValue} class:btn-secondary={$walkGait === gaitValue}
onclick={() => changeWalkGait(gaitValue)} onclick={() => changeWalkGait(gaitValue)}
> >
@@ -192,8 +193,8 @@
</div> </div>
<div class="flex gap-4"> <div class="flex gap-4">
<div> <div class="flex flex-col gap-1">
<label for="s1">S1</label> <label for="s1" class="text-xs font-medium opacity-70">Step height</label>
<input <input
type="range" type="range"
name="s1" name="s1"
@@ -201,11 +202,11 @@
step="0.01" step="0.01"
max="1" max="1"
oninput={e => handleRange(e, 's1')} oninput={e => handleRange(e, 's1')}
class="range range-sm range-primary" class="range range-xs range-primary"
/> />
</div> </div>
<div> <div class="flex flex-col gap-1">
<label for="speed">Speed</label> <label for="speed" class="text-xs font-medium opacity-70">Speed</label>
<input <input
type="range" type="range"
name="speed" name="speed"
@@ -213,7 +214,7 @@
step="0.01" step="0.01"
max="1" max="1"
oninput={e => handleRange(e, 'speed')} oninput={e => handleRange(e, 'speed')}
class="range range-sm range-primary" class="range range-xs range-primary"
/> />
</div> </div>
</div> </div>