iotmanager/IoTManagerWeb
1
0
Fork 0
mirror of https://github.com/IoTManagerProject/IoTManagerWeb.git synced 2026-03-30 03:49:17 +03:00
Code Issues Packages Projects Releases Wiki Activity

final version, cleaning

Browse Source
This commit is contained in:
Dmitry Borisenko
2021-10-27 05:27:55 +07:00
parent 17e2883cf1
commit 93e36b9a68
5 changed files with 48 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
others/toggles Normal file
View File

@@ -0,0 +1,33 @@
<!-- Toggle A -->
<div class="flex items-center justify-center w-full mb-12">
<label for="toogleA" class="flex items-center cursor-pointer">
<!-- toggle -->
<div class="relative">
<!-- input -->
<input id="toogleA" type="checkbox" class="sr-only" />
<!-- line -->
<div class="w-10 h-4 bg-gray-400 rounded-full shadow-inner" />
<!-- dot -->
<div class="dot absolute w-6 h-6 bg-white rounded-full shadow -left-1 -top-1 transition" />
</div>
<!-- label -->
<div class="ml-3 text-gray-700 font-medium">Toggle Me!</div>
</label>
</div>
<!-- Toggle B -->
<div class="flex items-center justify-center w-full mb-12">
<label for="toggleB" class="flex items-center cursor-pointer">
<!-- toggle -->
<div class="relative">
<!-- input -->
<input type="checkbox" id="toggleB" class="sr-only" />
<!-- line -->
<div class="block bg-gray-600 w-14 h-8 rounded-full" />
<!-- dot -->
<div class="dot absolute left-1 top-1 bg-white w-6 h-6 rounded-full transition" />
</div>
<!-- label -->
<div class="ml-3 text-gray-700 font-medium">Toggle Me!</div>
</label>
</div>

55
src/App.svelte
View File

@@ -244,41 +244,7 @@
<Card title="Подключение к MQTT брокеру" /> <Card title="Подключение к MQTT брокеру" />
</div> </div>
</Route> </Route>
<Route path="/utilities"> <Route path="/utilities" />
<!-- Toggle A -->
<div class="flex items-center justify-center w-full mb-12">
<label for="toogleA" class="flex items-center cursor-pointer">
<!-- toggle -->
<div class="relative">
<!-- input -->
<input id="toogleA" type="checkbox" class="sr-only" />
<!-- line -->
<div class="w-10 h-4 bg-gray-400 rounded-full shadow-inner" />
<!-- dot -->
<div class="dot absolute w-6 h-6 bg-white rounded-full shadow -left-1 -top-1 transition" />
</div>
<!-- label -->
<div class="ml-3 text-gray-700 font-medium">Toggle Me!</div>
</label>
</div>
<!-- Toggle B -->
<div class="flex items-center justify-center w-full mb-12">
<label for="toggleB" class="flex items-center cursor-pointer">
<!-- toggle -->
<div class="relative">
<!-- input -->
<input type="checkbox" id="toggleB" class="sr-only" />
<!-- line -->
<div class="block bg-gray-600 w-14 h-8 rounded-full" />
<!-- dot -->
<div class="dot absolute left-1 top-1 bg-white w-6 h-6 rounded-full transition" />
</div>
<!-- label -->
<div class="ml-3 text-gray-700 font-medium">Toggle Me!</div>
</label>
</div>
</Route>
</div> </div>
</ul> </ul>
</main> </main>
@@ -305,20 +271,14 @@
} }
/* 2. style for card header */ /* 2. style for card header */
.card-header { .card-header {
@apply text-center text-lg text-gray-500 font-bold pb-6; @apply text-center text-lg text-gray-500 font-bold pb-4;
} }
/* 3. card items positioning*/ /* 3. card items positioning*/
.card-items-psn-ajustable { .card-items-psn {
@apply flex flex-col sm:flex-row lg:flex-row xl:flex-row 2xl:flex-row mb-6 h-8 items-center; @apply flex mb-4 h-8 items-center;
}
.card-items-psn-inline {
@apply flex mb-6 h-8 items-center;
} }
/* 4. widget description width*/ /* 4. widget description width*/
.widget-descr-width-ajustable { .widget-descr-width {
@apply w-full sm:w-2/3 lg:w-2/3 xl:w-2/3 2xl:w-2/3;
}
.widget-descr-width-inline {
@apply w-2/3; @apply w-2/3;
} }
/* 5. widget descr style*/ /* 5. widget descr style*/
@@ -326,10 +286,7 @@
@apply pr-4 text-gray-500 font-bold; @apply pr-4 text-gray-500 font-bold;
} }
/* 6. widget width*/ /* 6. widget width*/
.widget-width-ajustable { .widget-width {
@apply w-full sm:w-1/3 lg:w-1/3 xl:w-1/3 2xl:w-1/3;
}
.widget-width-inline {
@apply flex justify-end w-1/3; @apply flex justify-end w-1/3;
} }
/*====================================================others=====================================================*/ /*====================================================others=====================================================*/

6
src/widgets/Anydata.svelte
View File

@@ -6,12 +6,12 @@
export let widget; export let widget;
</script> </script>
<div class="card-items-psn-inline"> <div class="card-items-psn">
<div class="widget-descr-width-inline"> <div class="widget-descr-width">
<!-- svelte-ignore a11y-label-has-associated-control --> <!-- svelte-ignore a11y-label-has-associated-control -->
<label class="widget-descr-style">{!widget.descr ? "" : widget.descr}</label> <label class="widget-descr-style">{!widget.descr ? "" : widget.descr}</label>
</div> </div>
<div class="widget-width-inline"> <div class="widget-width">
<!-- svelte-ignore a11y-label-has-associated-control --> <!-- svelte-ignore a11y-label-has-associated-control -->
<label class="widget-anydata-style">{!widget.status ? "" : widget.status}</label> <label class="widget-anydata-style">{!widget.status ? "" : widget.status}</label>
<!-- svelte-ignore a11y-label-has-associated-control --> <!-- svelte-ignore a11y-label-has-associated-control -->

6
src/widgets/Input.svelte
View File

@@ -6,12 +6,12 @@
export let widget; export let widget;
</script> </script>
<div class="card-items-psn-ajustable"> <div class="card-items-psn">
<div class="widget-descr-width-ajustable"> <div class="widget-descr-width">
<!-- svelte-ignore a11y-label-has-associated-control --> <!-- svelte-ignore a11y-label-has-associated-control -->
<label class="widget-descr-style">{!widget.descr ? "" : widget.descr}</label> <label class="widget-descr-style">{!widget.descr ? "" : widget.descr}</label>
</div> </div>
<div class="widget-width-ajustable"> <div class="widget-width">
{#if widget.type == "number"} {#if widget.type == "number"}
<input class={widget["send"] == true ? "widget-input border-red-500" : "widget-input focus:border-indigo-500"} on:change={() => ((widget["send"] = true), WSpush(widget.ws, widget.topic, widget.status))} bind:value={widget.status} step="0.1" type="number" /> <input class={widget["send"] == true ? "widget-input border-red-500" : "widget-input focus:border-indigo-500"} on:change={() => ((widget["send"] = true), WSpush(widget.ws, widget.topic, widget.status))} bind:value={widget.status} step="0.1" type="number" />
{/if} {/if}

6
src/widgets/Toggle.svelte
View File

@@ -6,12 +6,12 @@
export let widget; export let widget;
</script> </script>
<div class="card-items-psn-inline"> <div class="card-items-psn">
<div class="widget-descr-width-inline"> <div class="widget-descr-width">
<!-- svelte-ignore a11y-label-has-associated-control --> <!-- svelte-ignore a11y-label-has-associated-control -->
<label class="widget-descr-style">{!widget.descr ? "" : widget.descr}</label> <label class="widget-descr-style">{!widget.descr ? "" : widget.descr}</label>
</div> </div>
<div class="widget-width-inline"> <div class="widget-width">
<label for={widget.topic} class="items-center cursor-pointer"> <label for={widget.topic} class="items-center cursor-pointer">
<div class="relative"> <div class="relative">
<input on:change={() => ((widget["send"] = true), WSpush(widget.ws, widget.topic, widget.status))} bind:value={widget.status} id={widget.topic} type="checkbox" class="sr-only" /> <input on:change={() => ((widget["send"] = true), WSpush(widget.ws, widget.topic, widget.status))} bind:value={widget.status} id={widget.topic} type="checkbox" class="sr-only" />