From 93e36b9a6805446b8f468aa65b35027f3a80aa79 Mon Sep 17 00:00:00 2001
From: Dmitry Borisenko <49808844+DmitryBorisenko33@users.noreply.github.com>
Date: Wed, 27 Oct 2021 05:27:55 +0700
Subject: [PATCH] final version, cleaning

---
 others/toggles             | 33 +++++++++++++++++++++++
 src/App.svelte             | 55 +++++---------------------------------
 src/widgets/Anydata.svelte |  6 ++---
 src/widgets/Input.svelte   |  6 ++---
 src/widgets/Toggle.svelte  |  6 ++---
 5 files changed, 48 insertions(+), 58 deletions(-)
 create mode 100644 others/toggles

diff --git a/others/toggles b/others/toggles
new file mode 100644
index 0000000..8f36c52
--- /dev/null
+++ b/others/toggles
@@ -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>
\ No newline at end of file
diff --git a/src/App.svelte b/src/App.svelte
index 1fdb35b..bfbb5f7 100644
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -244,41 +244,7 @@
           <Card title="Подключение к MQTT брокеру" />
         </div>
       </Route>
-      <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>
+      <Route path="/utilities" />
     </div>
   </ul>
 </main>
@@ -305,20 +271,14 @@
     }
     /* 2. style for 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*/
-    .card-items-psn-ajustable {
-      @apply flex flex-col sm:flex-row lg:flex-row xl:flex-row 2xl:flex-row mb-6 h-8 items-center;
-    }
-    .card-items-psn-inline {
-      @apply flex mb-6 h-8 items-center;
+    .card-items-psn {
+      @apply flex mb-4 h-8 items-center;
     }
     /* 4. widget description width*/
-    .widget-descr-width-ajustable {
-      @apply w-full sm:w-2/3 lg:w-2/3 xl:w-2/3 2xl:w-2/3;
-    }
-    .widget-descr-width-inline {
+    .widget-descr-width {
       @apply w-2/3;
     }
     /* 5. widget descr style*/
@@ -326,10 +286,7 @@
       @apply pr-4 text-gray-500 font-bold;
     }
     /* 6. widget width*/
-    .widget-width-ajustable {
-      @apply w-full sm:w-1/3 lg:w-1/3 xl:w-1/3 2xl:w-1/3;
-    }
-    .widget-width-inline {
+    .widget-width {
       @apply flex justify-end w-1/3;
     }
     /*====================================================others=====================================================*/
diff --git a/src/widgets/Anydata.svelte b/src/widgets/Anydata.svelte
index fcfd706..4848130 100644
--- a/src/widgets/Anydata.svelte
+++ b/src/widgets/Anydata.svelte
@@ -6,12 +6,12 @@
   export let widget;
 </script>
 
-<div class="card-items-psn-inline">
-  <div class="widget-descr-width-inline">
+<div class="card-items-psn">
+  <div class="widget-descr-width">
     <!-- svelte-ignore a11y-label-has-associated-control -->
     <label class="widget-descr-style">{!widget.descr ? "" : widget.descr}</label>
   </div>
-  <div class="widget-width-inline">
+  <div class="widget-width">
     <!-- svelte-ignore a11y-label-has-associated-control -->
     <label class="widget-anydata-style">{!widget.status ? "" : widget.status}</label>
     <!-- svelte-ignore a11y-label-has-associated-control -->
diff --git a/src/widgets/Input.svelte b/src/widgets/Input.svelte
index 666faab..19579f5 100644
--- a/src/widgets/Input.svelte
+++ b/src/widgets/Input.svelte
@@ -6,12 +6,12 @@
   export let widget;
 </script>
 
-<div class="card-items-psn-ajustable">
-  <div class="widget-descr-width-ajustable">
+<div class="card-items-psn">
+  <div class="widget-descr-width">
     <!-- svelte-ignore a11y-label-has-associated-control -->
     <label class="widget-descr-style">{!widget.descr ? "" : widget.descr}</label>
   </div>
-  <div class="widget-width-ajustable">
+  <div class="widget-width">
     {#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}
diff --git a/src/widgets/Toggle.svelte b/src/widgets/Toggle.svelte
index 72fb1e0..2fc9923 100644
--- a/src/widgets/Toggle.svelte
+++ b/src/widgets/Toggle.svelte
@@ -6,12 +6,12 @@
   export let widget;
 </script>
 
-<div class="card-items-psn-inline">
-  <div class="widget-descr-width-inline">
+<div class="card-items-psn">
+  <div class="widget-descr-width">
     <!-- svelte-ignore a11y-label-has-associated-control -->
     <label class="widget-descr-style">{!widget.descr ? "" : widget.descr}</label>
   </div>
-  <div class="widget-width-inline">
+  <div class="widget-width">
     <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" />