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
+9 -30
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,36 +22,24 @@
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="absolute flex justify-between w-full">
<div class="w-20 p-4"> <div class="w-20 p-4">
<button on:click={() => sidebarOpen.set(true)}> <button on:click={() => sidebarOpen.set(true)}>
<Icon src={Bars3} size="32" /> <Icon src={Bars3} size="32" />
</button> </button>
</div> </div>
<div class="w-20 p-4 text-right">{Math.floor($data[5])}°🌡️</div>
</div>
<div class="absolute flex justify-center w-full">
<div> <div>
<div <div
style="height:{$width}px; width:450px; background-color:#36393f" style="height:{$width}px; width:300px; background-color:#36393f"
class="rounded-b-xl overflow-hidden flex justify-end flex-col" class="rounded-b-xl overflow-hidden flex justify-end flex-col"
> >
{#if $width !== 0} {#if $width !== 0}
<div class="px-4 grid grid-cols-3 w-full">
<div class="flex gap-2"><span>RSSI:</span>{$data[0]}db</div>
<div class="flex gap-2"><span>MPU:</span>{round($data[1])}°</div>
<div class="flex gap-2"><span>CPU:</span>{round($data[8])}°</div>
<div class="flex gap-2"><span>X:</span>{round($data[5])}</div>
<div class="flex gap-2"><span>Y:</span>{round($data[6])}</div>
<div class="flex gap-2"><span>Z:</span>{round($data[7])}</div>
<div class="flex gap-2"><span>Left:</span>{round($data[9])}cm</div>
<div class="flex gap-2"><span>Right:</span>{round($data[10])}cm</div>
<div class="flex gap-2"><span>Heap:</span>{humanFileSize($data[11])}</div>
<div class="flex gap-2"><span>Psram:</span>{humanFileSize($data[12])}</div>
</div>
<div class="flex justify-evenly p-4 w-full"> <div class="flex justify-evenly p-4 w-full">
<button on:click={toggleFullScreen}> <button on:click={toggleFullScreen}>
<Icon src={isFullscreen ? ArrowsPointingIn : ArrowsPointingOut} size="32" /> <Icon src={isFullscreen ? ArrowsPointingIn : ArrowsPointingOut} size="32" />
@@ -90,7 +69,7 @@
</div> </div>
</div> </div>
</div> </div>
<div class="w-20 p-4 text-right">{Math.floor($data[8])}°🌡️</div> </div>
</div> </div>
<style scoped> <style scoped>