From f2f071697cc860352671e2b0dd720183c7c45df7 Mon Sep 17 00:00:00 2001
From: rxdn <29165304+rxdn@users.noreply.github.com>
Date: Sat, 4 Jun 2022 00:16:56 +0100
Subject: [PATCH] Improve mobile usability

---
 .../src/components/manage/FormInputRow.svelte | 60 +++++++++++--------
 .../src/components/manage/SettingsCard.svelte |  8 +--
 frontend/src/includes/Navbar.svelte           |  6 +-
 frontend/src/views/Forms.svelte               |  3 -
 4 files changed, 42 insertions(+), 35 deletions(-)

diff --git a/frontend/src/components/manage/FormInputRow.svelte b/frontend/src/components/manage/FormInputRow.svelte
index c6d7541..dca8345 100644
--- a/frontend/src/components/manage/FormInputRow.svelte
+++ b/frontend/src/components/manage/FormInputRow.svelte
@@ -47,29 +47,41 @@
   </div>
 
   {#if windowWidth <= 950}
-    <div class="row">
+    <div class="col-1">
       {#if withDirectionButtons}
-        <div class="col-2">
-          <form on:submit|preventDefault={() => forwardMove("down")} class="button-form">
-            <Button icon="fas fa-chevron-down" disabled={index >= formLength - 1} />
-          </form>
-        </div>
-        <div class="col-2">
-          <form on:submit|preventDefault={() => forwardMove("up")} class="button-form">
-            <Button icon="fas fa-chevron-up" disabled={index === 0} />
-          </form>
+        <div class="row">
+          <div class="col-2-force">
+            <form on:submit|preventDefault={() => forwardMove("down")} class="button-form">
+              <Button fullWidth={true} disabled={index >= formLength - 1}>
+                <i class="fas fa-chevron-down"></i>
+              </Button>
+            </form>
+          </div>
+          <div class="col-2-force">
+            <form on:submit|preventDefault={() => forwardMove("up")} class="button-form">
+              <Button fullWidth={true} disabled={index === 0}>
+                <i class="fas fa-chevron-up"></i>
+              </Button>
+            </form>
+          </div>
         </div>
       {/if}
-      {#if withSaveButton}
-        <form on:submit|preventDefault={forwardSave} class="button-form">
-          <Button icon="fas fa-save">Save</Button>
-        </form>
-      {/if}
-      {#if withDeleteButton}
-        <form on:submit|preventDefault={forwardDelete} class="button-form">
-          <Button icon="fas fa-trash" danger={true}>Delete</Button>
-        </form>
-      {/if}
+      <div class="row">
+        <div class="col-2-force">
+          {#if withSaveButton}
+            <form on:submit|preventDefault={forwardSave} class="button-form">
+              <Button icon="fas fa-save">Save</Button>
+            </form>
+          {/if}
+        </div>
+        <div class="col-2-force">
+          {#if withDeleteButton}
+            <form on:submit|preventDefault={forwardDelete} class="button-form">
+              <Button icon="fas fa-trash" danger={true}>Delete</Button>
+            </form>
+          {/if}
+        </div>
+      </div>
     </div>
   {/if}
 
@@ -155,12 +167,12 @@
     }
 
     @media only screen and (max-width: 950px) {
-        .row {
-            flex-direction: column;
-        }
-
         .settings-row {
             flex-direction: column-reverse !important;
         }
+
+        .button-form {
+            width: 100%;
+        }
     }
 </style>
\ No newline at end of file
diff --git a/frontend/src/components/manage/SettingsCard.svelte b/frontend/src/components/manage/SettingsCard.svelte
index 1119b34..db278c1 100644
--- a/frontend/src/components/manage/SettingsCard.svelte
+++ b/frontend/src/components/manage/SettingsCard.svelte
@@ -272,7 +272,7 @@
         }
     }
 
-    :global(.col-1) {
+    :global(.col-1, .col-1-force) {
         display: flex;
         flex-direction: column;
         align-items: flex-start;
@@ -280,7 +280,7 @@
         height: 100%;
     }
 
-    :global(.col-2) {
+    :global(.col-2, .col-2-force) {
         display: flex;
         flex-direction: column;
         align-items: flex-start;
@@ -288,7 +288,7 @@
         height: 100%;
     }
 
-    :global(.col-3) {
+    :global(.col-3, .col-3-force) {
         display: flex;
         flex-direction: column;
         align-items: flex-start;
@@ -296,7 +296,7 @@
         height: 100%;
     }
 
-    :global(.col-4) {
+    :global(.col-4, .col-4-force) {
         display: flex;
         flex-direction: column;
         align-items: flex-start;
diff --git a/frontend/src/includes/Navbar.svelte b/frontend/src/includes/Navbar.svelte
index 3509093..8afae13 100644
--- a/frontend/src/includes/Navbar.svelte
+++ b/frontend/src/includes/Navbar.svelte
@@ -33,13 +33,11 @@
     import NavElement from "../components/NavElement.svelte";
 
     function dropdownNav() {
-      console.log(dropdown);
-        dropdown.update(v => !v);
+      dropdown.update(v => !v);
     }
 
     function closeDropdown() {
-      console.log('cum');
-        dropdown.set(false);
+       dropdown.set(false);
     }
 </script>
 
diff --git a/frontend/src/views/Forms.svelte b/frontend/src/views/Forms.svelte
index 544e682..fc174b8 100644
--- a/frontend/src/views/Forms.svelte
+++ b/frontend/src/views/Forms.svelte
@@ -202,10 +202,7 @@
         [inputs[idx+1], inputs[idx]] = [form.inputs[idx], form.inputs[idx+1]]
       }
 
-      console.log(getForm(formId).inputs)
-
       forms = forms;
-      //await loadForms();
     }
   }