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

some changes

Browse Source
This commit is contained in:
Dmitry Borisenko
2021-10-25 16:50:31 +07:00
parent 90e826ca5f
commit aa67ba1b80
6 changed files with 26 additions and 3408 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
src/App.svelte
View File

@@ -246,32 +246,15 @@
@tailwind utilities;
@layer components {
.btn-indigo {
@apply py-2 px-4 bg-indigo-500 text-white font-semibold rounded-lg shadow-md hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-400 focus:ring-opacity-75;
}
.block-psn-center {
@apply grid place-items-center mx-2 sm:my-auto;
}
.card2 {
@apply w-11/12 sm:w-8/12 md:w-6/12 lg:w-5/12 2xl:w-4/12 p-2 sm:p-2 md:p-2 lg:p-2 xl:px-8 xl:py-4 2xl:px-8 2xl:py-4 my-2 bg-white rounded-lg shadow-md lg:shadow-lg;
}
.widget-input {
@apply content-center pr-4 py-1 bg-gray-200 appearance-none border-2 border-gray-200 rounded w-full text-gray-700 leading-tight focus:outline-none focus:bg-white text-right;
}
.json-input {
@apply content-center pr-4 py-1 bg-gray-200 appearance-none border-2 border-gray-200 rounded w-full text-gray-700 leading-tight focus:outline-none focus:bg-white focus:border-indigo-500;
}
.widget-after {
@apply pr-4 block text-gray-500 font-bold md:text-right;
}
/*==================================================cards grid=====================================================*/
/* grid for cards */
.cards-grid {
@apply grid gap-4 grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-3 2xl:grid-cols-3 justify-items-center;
}
/* grid for cards for full screen */
.cards-grid-inline {
@apply grid grid-cols-1 justify-items-center;
}
/*==================================================cards grid=====================================================*/
/*=============================================card and items inside===============================================*/
/* 1. paddig and style for card */
.card {
@@ -300,11 +283,21 @@
@apply pr-4 text-gray-500 font-bold;
}
/* 6. widget width*/
.widget-width {
.widget-width-input {
@apply w-full sm:w-1/3 lg:w-1/3 xl:w-1/3 2xl:w-1/3;
}
.widget-width-1-3 {
@apply w-1/3;
.widget-width-toggle {
@apply flex justify-end w-1/3;
}
/*====================================================others=====================================================*/
.btn-indigo {
@apply py-2 px-4 bg-indigo-500 text-white font-semibold rounded-lg shadow-md hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-400 focus:ring-opacity-75;
}
.widget-input {
@apply content-center pr-4 py-1 bg-gray-200 appearance-none border-2 border-gray-200 rounded w-full text-gray-700 leading-tight focus:outline-none focus:bg-white text-right;
}
.json-input {
@apply content-center pr-4 py-1 bg-gray-200 appearance-none border-2 border-gray-200 rounded w-full text-gray-700 leading-tight focus:outline-none focus:bg-white focus:border-indigo-500;
}
}
@@ -427,6 +420,6 @@
/* Toggle */
input:checked ~ .dot {
transform: translateX(100%);
background-color: #48bb78;
/* background-color: #48bb78;*/
}
</style>

2
src/widgets/Input.svelte
View File

@@ -11,7 +11,7 @@
<!-- svelte-ignore a11y-label-has-associated-control -->
<label class="widget-descr-style">{!widget.descr ? "" : widget.descr}</label>
</div>
<div class="widget-width">
<div class="widget-width-input">
{#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" />
{/if}

18
src/widgets/Toggle.svelte
View File

@@ -11,15 +11,13 @@
<!-- svelte-ignore a11y-label-has-associated-control -->
<label class="widget-descr-style">{!widget.descr ? "" : widget.descr}</label>
</div>
<div class="widget-width-1-3">
<div class="flex items-center justify-center w-full">
<label for={widget.topic} class="items-center cursor-pointer">
<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" />
<div class="block bg-gray-600 w-14 h-8 rounded-full" />
<div class="dot absolute left-1 top-1 bg-white w-6 h-6 rounded-full transition" />
</div>
</label>
</div>
<div class="widget-width-toggle">
<label for={widget.topic} class="items-center cursor-pointer">
<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" />
<div class="block bg-gray-600 w-14 h-8 rounded-full" />
<div class="dot {widget['send'] == true ? 'bg-red-400' : 'bg-white'} absolute left-1 top-1 w-6 h-6 rounded-full transition" />
</div>
</label>
</div>
</div>