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

🪛 Makes topbar fully responsive

Browse Source
This commit is contained in:
Rune Harlyk
2023-07-12 15:24:08 +02:00
parent 5670cb4e2d
commit ee119599c3
1 changed files with 48 additions and 69 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/src/components/Topbar.svelte
+48 -69
View File
@@ -1,29 +1,20 @@
<script lang="ts"> <script lang="ts">
import { isConnected, data } from '../lib/socket'; import { isConnected, data } from '../lib/socket';
import { import { Icon, ArrowsPointingIn, ArrowsPointingOut, Bars3, Power } from 'svelte-hero-icons';
Icon,
ArrowsPointingIn,
ArrowsPointingOut,
Sparkles,
Bars3,
Power
} from 'svelte-hero-icons';
import { tweened } from 'svelte/motion'; import { tweened } from 'svelte/motion';
import { quadInOut } from 'svelte/easing'; import { quadInOut } from 'svelte/easing';
import { sidebarOpen } from '../lib/store'; import { sidebarOpen } from '../lib/store';
import { humanFileSize } from '../lib/utils';
let isFullscreen = false; let isFullscreen = false;
const width = tweened(0, { const width = tweened(0, {
duration: 200, duration: 250,
easing: quadInOut easing: quadInOut
}); });
function handleClick() { function handleClick() {
if ($width === 0) width.set(200); if ($width === 0) width.set(75);
else width.set(0); else width.set(0);
console.log('clicked');
} }
const toggleFullScreen = () => { const toggleFullScreen = () => {
@@ -31,66 +22,54 @@
else if (document.exitFullscreen) document.exitFullscreen(); else if (document.exitFullscreen) document.exitFullscreen();
isFullscreen = !document.fullscreenElement; isFullscreen = !document.fullscreenElement;
}; };
const round = (val: number) => {
return (Math.round(val * 100) / 100).toFixed(2);
};
</script> </script>
<div class="absolute flex justify-between w-full z-20 h-10" on:dblclick={handleClick}> <div class="absolute flex justify-between w-full z-20 h-10" on:dblclick={handleClick}>
<div class="w-20 p-4"> <div class="absolute flex justify-between w-full">
<button on:click={() => sidebarOpen.set(true)}> <div class="w-20 p-4">
<Icon src={Bars3} size="32" /> <button on:click={() => sidebarOpen.set(true)}>
</button> <Icon src={Bars3} size="32" />
</div> </button>
<div> </div>
<div <div class="w-20 p-4 text-right">{Math.floor($data[5])}°🌡️</div>
style="height:{$width}px; width:450px; background-color:#36393f" </div>
class="rounded-b-xl overflow-hidden flex justify-end flex-col" <div class="absolute flex justify-center w-full">
> <div>
{#if $width !== 0} <div
<div class="px-4 grid grid-cols-3 w-full"> style="height:{$width}px; width:300px; background-color:#36393f"
<div class="flex gap-2"><span>RSSI:</span>{$data[0]}db</div> class="rounded-b-xl overflow-hidden flex justify-end flex-col"
<div class="flex gap-2"><span>MPU:</span>{round($data[1])}°</div> >
<div class="flex gap-2"><span>CPU:</span>{round($data[8])}°</div> {#if $width !== 0}
<div class="flex gap-2"><span>X:</span>{round($data[5])}</div> <div class="flex justify-evenly p-4 w-full">
<div class="flex gap-2"><span>Y:</span>{round($data[6])}</div> <button on:click={toggleFullScreen}>
<div class="flex gap-2"><span>Z:</span>{round($data[7])}</div> <Icon src={isFullscreen ? ArrowsPointingIn : ArrowsPointingOut} size="32" />
<div class="flex gap-2"><span>Left:</span>{round($data[9])}cm</div> </button>
<div class="flex gap-2"><span>Right:</span>{round($data[10])}cm</div> <button>
<div class="flex gap-2"><span>Heap:</span>{humanFileSize($data[11])}</div> <Icon src={Power} size="32" />
<div class="flex gap-2"><span>Psram:</span>{humanFileSize($data[12])}</div> </button>
</div> </div>
<div class="flex justify-evenly p-4 w-full"> {/if}
<button on:click={toggleFullScreen}> </div>
<Icon src={isFullscreen ? ArrowsPointingIn : ArrowsPointingOut} size="32" /> <div class="flex justify-center" on:mouseup={handleClick}>
</button> <svg height="40" width="300" class="Settings_topSVG__2VXbU">
<button> <path
<Icon src={Power} size="32" /> stroke="none"
</button> fill="#36393f"
</div> d="M 0 0 C 40 0 40 40 80 40 H 220 C 260 40 260 0 300 0 Z"
{/if} />
</div> </svg>
<div class="flex justify-center" on:mouseup={handleClick}> <div
<svg height="40" width="300" class="Settings_topSVG__2VXbU"> class="absolute flex gap-1 h-10 w-36 justify-center items-center dots
<path {$isConnected ? 'connected' : 'disconnected'}"
stroke="none" >
fill="#36393f" <span class="dot h-4 w-4" />
d="M 0 0 C 40 0 40 40 80 40 H 220 C 260 40 260 0 300 0 Z" <span class="dot h-4 w-4" />
/> <span class="dot h-4 w-4" />
</svg> <span class="dot h-4 w-4" />
<div </div>
class="absolute flex gap-1 h-10 w-36 justify-center items-center dots </div>
{$isConnected ? 'connected' : 'disconnected'}" </div>
> </div>
<span class="dot h-4 w-4" />
<span class="dot h-4 w-4" />
<span class="dot h-4 w-4" />
<span class="dot h-4 w-4" />
</div>
</div>
</div>
<div class="w-20 p-4 text-right">{Math.floor($data[8])}°🌡️</div>
</div> </div>
<style scoped> <style scoped>