From 90e826ca5f24aa999acd47990c88ae3dec12bba4 Mon Sep 17 00:00:00 2001 From: Dmitry Borisenko <49808844+DmitryBorisenko33@users.noreply.github.com> Date: Wed, 20 Oct 2021 20:53:07 +0800 Subject: [PATCH] great changes --- src/.prettierrc | 2 +- src/App.svelte | 35 ++++++++++++++++++++----- src/widgets/Card.svelte | 2 +- src/widgets/Input.svelte | 54 ++++++--------------------------------- src/widgets/Toggle.svelte | 10 ++++---- 5 files changed, 44 insertions(+), 59 deletions(-) diff --git a/src/.prettierrc b/src/.prettierrc index 52255ce..c391ff1 100644 --- a/src/.prettierrc +++ b/src/.prettierrc @@ -10,7 +10,7 @@ { "files": "Input.svelte", "options": { - "printWidth": 60 + "printWidth": 600 } }, { diff --git a/src/App.svelte b/src/App.svelte index 33a9f58..649ce7d 100644 --- a/src/App.svelte +++ b/src/App.svelte @@ -270,18 +270,41 @@ .cards-grid-inline { @apply grid grid-cols-1 justify-items-center; } + /*==================================================cards grid=====================================================*/ + + /*=============================================card and items inside===============================================*/ + /* 1. paddig and style for card */ .card { @apply w-full p-2 sm:p-2 md:p-2 lg:p-2 xl:px-8 xl:py-4 2xl:px-8 2xl:py-4 bg-white rounded-lg shadow-md lg:shadow-lg; } - .card-title-gray { + /* 2. style for card header */ + .card-header-gray { @apply text-center text-lg text-gray-500 font-bold pb-6; } - /* md, lg, xl, 2xl, - по центру, sm и меньше - слева */ - .card-items { - @apply items-start sm:items-start md:flex md:items-center lg:items-center xl:items-center 2xl:items-center mb-6; + /* 3. card items positioning*/ + .card-items-psn { + @apply flex flex-col sm:flex-row lg:flex-row xl:flex-row 2xl:flex-row mb-6; } - .widget-descr-gray { - @apply pr-4 text-gray-500 font-bold; + .card-items-psn-inline { + @apply flex mb-6; + } + /* 4. widget description width*/ + .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-2-3 { + @apply w-2/3; + } + /* 5. widget descr style*/ + .widget-descr-style { + @apply pr-4 text-gray-500 font-bold; + } + /* 6. widget width*/ + .widget-width { + @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; } } diff --git a/src/widgets/Card.svelte b/src/widgets/Card.svelte index b5b4ab2..eb8a9ea 100644 --- a/src/widgets/Card.svelte +++ b/src/widgets/Card.svelte @@ -3,6 +3,6 @@
-

{title}

+

{title}

diff --git a/src/widgets/Input.svelte b/src/widgets/Input.svelte index f8f3c78..19579f5 100644 --- a/src/widgets/Input.svelte +++ b/src/widgets/Input.svelte @@ -6,61 +6,23 @@ export let widget; -
-
+
+
- +
-
+
{#if widget.type == "number"} - ( - (widget["send"] = true), - WSpush(widget.ws, widget.topic, widget.status) - )} - bind:value={widget.status} - step="0.1" - type="number" /> + ((widget["send"] = true), WSpush(widget.ws, widget.topic, widget.status))} bind:value={widget.status} step="0.1" type="number" /> {/if} {#if widget.type == "text"} - ( - (widget["send"] = true), - WSpush(widget.ws, widget.topic, widget.status) - )} - bind:value={widget.status} - type="text" /> + ((widget["send"] = true), WSpush(widget.ws, widget.topic, widget.status))} bind:value={widget.status} type="text" /> {/if} {#if widget.type == "date"} - ( - (widget["send"] = true), - WSpush(widget.ws, widget.topic, widget.status) - )} - bind:value={widget.status} - type="date" /> + ((widget["send"] = true), WSpush(widget.ws, widget.topic, widget.status))} bind:value={widget.status} type="date" /> {/if} {#if widget.type == "time"} - ( - (widget["send"] = true), - WSpush(widget.ws, widget.topic, widget.status) - )} - bind:value={widget.status} - type="time" /> + ((widget["send"] = true), WSpush(widget.ws, widget.topic, widget.status))} bind:value={widget.status} type="time" /> {/if}
diff --git a/src/widgets/Toggle.svelte b/src/widgets/Toggle.svelte index bdadf34..a4f81ac 100644 --- a/src/widgets/Toggle.svelte +++ b/src/widgets/Toggle.svelte @@ -6,16 +6,16 @@ export let widget; -
-
+
+
- +
-
+