spy4x/gb-lux
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

ui: fix menu in mobile

Browse Source
This commit is contained in:
Eirene 2024-01-31 15:40:25 +08:00
parent 7386c9342f
commit c28dffdfa6
6 changed files with 35 additions and 128 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
apps/front/src/app.html
View File

@ -4,6 +4,7 @@
<meta charset="utf-8" /> <meta charset="utf-8" />
<link rel="icon" href="%sveltekit.assets%/favicon.png" /> <link rel="icon" href="%sveltekit.assets%/favicon.png" />
<meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="viewport" content="width=device-width, initial-scale=1" />
<title>GB Light Control System</title>
%sveltekit.head% %sveltekit.head%
</head> </head>
<body data-sveltekit-preload-data="hover" class="h-full"> <body data-sveltekit-preload-data="hover" class="h-full">

4
apps/front/src/lib/client/components/icons/bars3.svelte Normal file
View File

@ -0,0 +1,4 @@
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
class="shrink-0 {$$props.size ? `size-${$$props.size}` : 'size-6'} {$$props.class || ''}">
<path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 325 B

2
apps/front/src/lib/client/components/icons/index.ts
View File

@ -1,5 +1,6 @@
export { default as IconArrowUturnLeft } from './arrowUturnLeft.svelte'; export { default as IconArrowUturnLeft } from './arrowUturnLeft.svelte';
export { default as IconArrowUturnRight } from './arrowUturnRight.svelte'; export { default as IconArrowUturnRight } from './arrowUturnRight.svelte';
export { default as IconBars3 } from './bars3.svelte';
export { default as IconBell } from './bell.svelte'; export { default as IconBell } from './bell.svelte';
export { default as IconBuildingOffice2 } from './buildingOffice2.svelte'; export { default as IconBuildingOffice2 } from './buildingOffice2.svelte';
export { default as IconBulb } from './bulb.svelte'; export { default as IconBulb } from './bulb.svelte';
@ -10,6 +11,7 @@ export { default as IconCpuChip } from './cpuChip.svelte';
export { default as IconCursorArrowRays } from './cursorArrowRays.svelte'; export { default as IconCursorArrowRays } from './cursorArrowRays.svelte';
export { default as IconExclamationTriangle } from './exclamationTriangle.svelte'; export { default as IconExclamationTriangle } from './exclamationTriangle.svelte';
export { default as IconHome } from './home.svelte'; export { default as IconHome } from './home.svelte';
export { default as IconMagnifyingGlass } from './magnifyingGlass.svelte';
export { default as IconMap } from './map.svelte'; export { default as IconMap } from './map.svelte';
export { default as IconUser } from './user.svelte'; export { default as IconUser } from './user.svelte';
export { default as IconUsers } from './users.svelte'; export { default as IconUsers } from './users.svelte';

4
apps/front/src/lib/client/components/icons/magnifyingGlass.svelte Normal file
View File

@ -0,0 +1,4 @@
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
class="shrink-0 {$$props.size ? `size-${$$props.size}` : 'size-6'} {$$props.class || ''}">
<path stroke-linecap="round" stroke-linejoin="round" d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z" />
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 358 B

149
apps/front/src/routes/+layout.svelte
View File

@ -1,109 +1,42 @@
<script lang="ts"> <script lang="ts">
import '../app.css'; import '../app.css';
import Login from '$lib/client/components/Login.svelte'; import Login from '$lib/client/components/login.svelte';
import { auth } from '$lib/client/stores/auth'; import { auth } from '$lib/client/stores/auth';
import Nav from '$lib/client/components/nav.svelte'; import Nav from '$lib/client/components/nav.svelte';
import {
IconBars3, IconBell, IconMagnifyingGlass, IconXMark
} from '$lib/client/components/icons';
import { fly, fade } from 'svelte/transition'
let showSidePanel = false, width
function toggleSidePanel() {
showSidePanel = !showSidePanel
}
// import { onMount } from 'svelte';
let isDropdownOpen = false; let isDropdownOpen = false;
const toggleDropdown = (): void => { const toggleDropdown = (): void => {
isDropdownOpen = !isDropdownOpen; isDropdownOpen = !isDropdownOpen;
}; };
// const handleClickOutside = (event: MouseEvent): void => {
// if (!(event.target as Element).closest('.dropdown-container')) {
// isDropdownOpen = false;
// }
// };
// // Close the dropdown if the user clicks outside of it
// onMount(() => {
// window.addEventListener('click', handleClickOutside);
// return () => {
// window.removeEventListener('click', handleClickOutside);
// };
// });
</script> </script>
{#if $auth.isSignedIn} {#if $auth.isSignedIn}
<!--
This example requires some changes to your config:
```
// tailwind.config.js
module.exports = {
// ...
plugins: [
// ...
require('@tailwindcss/forms'),
],
}
```
-->
<!--
This example requires updating your template:
```
<html class="h-full bg-white">
<body class="h-full">
```
-->
<div> <div>
<!-- Off-canvas menu for mobile, show/hide based on off-canvas menu state. --> <!-- Off-canvas menu for mobile, show/hide based on off-canvas menu state. -->
{#if showSidePanel}
<div class="relative z-50 lg:hidden" role="dialog" aria-modal="true"> <div class="relative z-50 lg:hidden" role="dialog" aria-modal="true">
<!-- <div class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" transition:fade/>
Off-canvas menu backdrop, show/hide based on off-canvas menu state.
Entering: "transition-opacity ease-linear duration-300" <div bind:clientWidth={width} transition:fly={{ x: -width }} class="fixed inset-0 flex">
From: "opacity-0"
To: "opacity-100"
Leaving: "transition-opacity ease-linear duration-300"
From: "opacity-100"
To: "opacity-0"
-->
<div class="fixed inset-0 bg-gray-900/80"></div>
<div class="fixed inset-0 flex">
<!--
Off-canvas menu, show/hide based on off-canvas menu state.
Entering: "transition ease-in-out duration-300 transform"
From: "-translate-x-full"
To: "translate-x-0"
Leaving: "transition ease-in-out duration-300 transform"
From: "translate-x-0"
To: "-translate-x-full"
-->
<div class="relative mr-16 flex w-full max-w-xs flex-1"> <div class="relative mr-16 flex w-full max-w-xs flex-1">
<!--
Close button, show/hide based on off-canvas menu state.
Entering: "ease-in-out duration-300"
From: "opacity-0"
To: "opacity-100"
Leaving: "ease-in-out duration-300"
From: "opacity-100"
To: "opacity-0"
-->
<div class="absolute left-full top-0 flex w-16 justify-center pt-5"> <div class="absolute left-full top-0 flex w-16 justify-center pt-5">
<button type="button" class="-m-2.5 p-2.5"> <button type="button" class="-m-2.5 p-2.5" on:click={toggleSidePanel}>
<span class="sr-only">Close sidebar</span> <span class="sr-only">Close sidebar</span>
<svg <IconXMark class="text-white" />
class="h-6 w-6 text-white"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
aria-hidden="true"
>
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
</svg>
</button> </button>
</div> </div>
<!-- Sidebar component, swap this element with another sidebar if you like --> <!-- Sidebar component -->
<div <div
class="flex grow flex-col gap-y-5 overflow-y-auto bg-gray-900 px-6 pb-4 ring-1 ring-white/10" class="flex grow flex-col gap-y-5 overflow-y-auto bg-gray-900 px-6 pb-4 ring-1 ring-white/10"
> >
@ -112,10 +45,11 @@
</div> </div>
</div> </div>
</div> </div>
{/if}
<!-- Static sidebar for desktop --> <!-- Static sidebar for desktop -->
<div class="hidden lg:fixed lg:inset-y-0 lg:z-50 lg:flex lg:w-72 lg:flex-col"> <div class="hidden lg:fixed lg:inset-y-0 lg:z-50 lg:flex lg:w-72 lg:flex-col">
<!-- Sidebar component, swap this element with another sidebar if you like --> <!-- Sidebar component -->
<div class="flex grow flex-col gap-y-5 overflow-y-auto bg-gray-900 px-6 pb-4"> <div class="flex grow flex-col gap-y-5 overflow-y-auto bg-gray-900 px-6 pb-4">
<Nav /> <Nav />
</div> </div>
@ -125,22 +59,9 @@
<div <div
class="sticky top-0 z-40 flex h-16 shrink-0 items-center gap-x-4 border-b border-gray-200 bg-white px-4 shadow-sm sm:gap-x-6 sm:px-6 lg:px-8" class="sticky top-0 z-40 flex h-16 shrink-0 items-center gap-x-4 border-b border-gray-200 bg-white px-4 shadow-sm sm:gap-x-6 sm:px-6 lg:px-8"
> >
<button type="button" class="-m-2.5 p-2.5 text-gray-700 lg:hidden"> <button type="button" class="-m-2.5 p-2.5 text-gray-700 lg:hidden" on:click={toggleSidePanel}>
<span class="sr-only">Open sidebar</span> <span class="sr-only">Open sidebar</span>
<svg <IconBars3 />
class="h-6 w-6"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
aria-hidden="true"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5"
/>
</svg>
</button> </button>
<!-- Separator --> <!-- Separator -->
@ -149,18 +70,7 @@
<div class="flex flex-1 gap-x-4 self-stretch lg:gap-x-6"> <div class="flex flex-1 gap-x-4 self-stretch lg:gap-x-6">
<form class="relative flex flex-1" action="#" method="GET"> <form class="relative flex flex-1" action="#" method="GET">
<label for="search-field" class="sr-only">Search</label> <label for="search-field" class="sr-only">Search</label>
<svg <IconMagnifyingGlass class="pointer-events-none absolute inset-y-0 left-0 h-full w-5 text-gray-400" />
class="pointer-events-none absolute inset-y-0 left-0 h-full w-5 text-gray-400"
viewBox="0 0 20 20"
fill="currentColor"
aria-hidden="true"
>
<path
fill-rule="evenodd"
d="M9 3.5a5.5 5.5 0 100 11 5.5 5.5 0 000-11zM2 9a7 7 0 1112.452 4.391l3.328 3.329a.75.75 0 11-1.06 1.06l-3.329-3.328A7 7 0 012 9z"
clip-rule="evenodd"
/>
</svg>
<input <input
id="search-field" id="search-field"
class="block h-full w-full border-0 py-0 pl-8 pr-0 text-gray-900 placeholder:text-gray-400 focus:ring-0 sm:text-sm" class="block h-full w-full border-0 py-0 pl-8 pr-0 text-gray-900 placeholder:text-gray-400 focus:ring-0 sm:text-sm"
@ -172,20 +82,7 @@
<div class="flex items-center gap-x-4 lg:gap-x-6"> <div class="flex items-center gap-x-4 lg:gap-x-6">
<button type="button" class="-m-2.5 p-2.5 text-gray-400 hover:text-gray-500"> <button type="button" class="-m-2.5 p-2.5 text-gray-400 hover:text-gray-500">
<span class="sr-only">View notifications</span> <span class="sr-only">View notifications</span>
<svg <IconBell />
class="h-6 w-6"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
aria-hidden="true"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M14.857 17.082a23.848 23.848 0 005.454-1.31A8.967 8.967 0 0118 9.75v-.7V9A6 6 0 006 9v.75a8.967 8.967 0 01-2.312 6.022c1.733.64 3.56 1.085 5.455 1.31m5.714 0a24.255 24.255 0 01-5.714 0m5.714 0a3 3 0 11-5.714 0"
/>
</svg>
</button> </button>
<!-- Separator --> <!-- Separator -->
@ -247,7 +144,7 @@
> >
<!-- Active: "bg-gray-50", Not Active: "" --> <!-- Active: "bg-gray-50", Not Active: "" -->
<a <a
href="#" href="/"
class="block px-3 py-1 text-sm leading-6 text-gray-900" class="block px-3 py-1 text-sm leading-6 text-gray-900"
role="menuitem" role="menuitem"
tabindex="-1" tabindex="-1"

3
apps/front/src/routes/map/+page.svelte
View File

@ -1,6 +1,5 @@
<script lang="ts"> <script lang="ts">
import Map from '$lib/client/components/map.svelte'; import Map from '$lib/client/components/map.svelte';
import Table from '$lib/client/components/table.svelte';
import ToggleSwitch from '$lib/client/components/toggle.svelte'; import ToggleSwitch from '$lib/client/components/toggle.svelte';
import { import {
IconArrowUturnLeft, IconArrowUturnLeft,
@ -8,7 +7,7 @@
IconCheck, IconCheck,
IconCursorArrowRays, IconCursorArrowRays,
IconXMark IconXMark
} from '../../lib/client/components/icons'; } from '$lib/client/components/icons';
let initialValueForSwitch: boolean = true; let initialValueForSwitch: boolean = true;
</script> </script>