Added mobile support in Svelte

6 files changed, 136 insertions, 86 deletions

diff --git a/src/pages/options_src/App.svelte b/src/pages/options_src/App.svelte
index 6bbacb9b..8b0d3c54 100644
--- a/src/pages/options_src/App.svelte
+++ b/src/pages/options_src/App.svelte
@@ -93,7 +93,6 @@
 {/if}
 
 <style>
- 
   :global(body) {
     width: 100vw;
     height: 100vh;
@@ -115,4 +114,23 @@
     color: var(--text);
     overflow: scroll;
   }
+
+  @media (max-width: 1250px) {
+    div {
+      grid-template-columns: auto;
+      grid-template-rows: min-content auto;
+      padding-left: 5vw;
+      padding-right: 5vw;
+    }
+  }
+
+  @media (max-width: 715px) {
+    div {
+      font-size: 14px;
+      grid-template-columns: auto;
+      grid-template-rows: min-content auto;
+      padding-left: 5vw;
+      padding-right: 5vw;
+    }
+  }
 </style>
diff --git a/src/pages/options_src/General/General.svelte b/src/pages/options_src/General/General.svelte
index d5b2dd59..2cf65285 100644
--- a/src/pages/options_src/General/General.svelte
+++ b/src/pages/options_src/General/General.svelte
@@ -3,10 +3,12 @@
 
   import Exceptions from "./Exceptions.svelte"
   import SettingsButtons from "./SettingsButtons.svelte"
-  import RowSelect from "../../components/RowSelect.svelte"
-  import Checkbox from "../../components/RowCheckbox.svelte"
   import { options } from "../stores"
   import { onDestroy } from "svelte"
+  import Row from "../../components/Row.svelte"
+  import Label from "../../components/Label.svelte"
+  import Select from "../../components/Select.svelte"
+  import Checkbox from "../../components/Checkbox.svelte"
 
   let _options
   const unsubscribe = options.subscribe(val => (_options = val))
@@ -23,46 +25,55 @@
 </script>
 
 <div>
-  <RowSelect
-    label="Theme"
-    values={[
-      { value: "detect", name: "Auto" },
-      { value: "light", name: "Light" },
-      { value: "dark", name: "Dark" },
-    ]}
-    value={_options.theme}
-    onChange={e => {
-      _options["theme"] = e.target.options[e.target.options.selectedIndex].value
-      options.set(_options)
-    }}
-    ariaLabel="select theme"
-  />
+  <Row>
+    <Label>Theme</Label>
+    <Select
+      values={[
+        { value: "detect", name: "Auto" },
+        { value: "light", name: "Light" },
+        { value: "dark", name: "Dark" },
+      ]}
+      value={_options.theme}
+      onChange={e => {
+        _options.theme = e.target.options[e.target.options.selectedIndex].value
+        options.set(_options)
+      }}
+      ariaLabel="select theme"
+    />
+  </Row>
 
-  <RowSelect
-    label="Fetch public instances"
-    value={_options.fetchInstances}
-    onChange={e => {
-      _options["fetchInstances"] = e.target.options[e.target.options.selectedIndex].value
-      options.set(_options)
-    }}
-    ariaLabel="Select fetch public instances"
-    values={[
-      { value: "github", name: "GitHub" },
-      { value: "codeberg", name: "Codeberg" },
-      { value: "disable", name: "Disable" },
-    ]}
-  />
+  <Row>
+    <Label>Fetch public instances</Label>
+    <Select
+      value={_options.fetchInstances}
+      values={[
+        { value: "github", name: "GitHub" },
+        { value: "codeberg", name: "Codeberg" },
+        { value: "disable", name: "Disable" },
+      ]}
+      onChange={e => {
+        _options.fetchInstances = e.target.options[e.target.options.selectedIndex].value
+        options.set(_options)
+      }}
+      ariaLabel={"Select fetch public instances"}
+    />
+  </Row>
 
-  <Checkbox
-    label="Redirect Only in Incognito"
-    checked={_options.redirectOnlyInIncognito}
-    onChange={e => {
-      _options["redirectOnlyInIncognito"] = e.target.checked
-      options.set(_options)
-    }}
-  />
+  <Row>
+    <Label>Redirect Only in Incognito</Label>
+    <Checkbox
+      checked={_options.redirectOnlyInIncognito}
+      onChange={e => {
+        _options.redirectOnlyInIncognito = e.target.checked
+        options.set(_options)
+      }}
+    />
+  </Row>
 
-  <Checkbox label="Bookmarks menu" bind:checked={bookmarksPermission} />
+  <Row>
+    <Label>Bookmarks menu</Label>
+    <Checkbox bind:checked={bookmarksPermission} />
+  </Row>
 
   <Exceptions opts={_options} />
 
diff --git a/src/pages/options_src/Services/Instances.svelte b/src/pages/options_src/Services/Instances.svelte
index 892e395b..e62d410d 100644
--- a/src/pages/options_src/Services/Instances.svelte
+++ b/src/pages/options_src/Services/Instances.svelte
@@ -63,10 +63,10 @@
       console.log("pinging...", instance)
       pingCache[instance] = { color: "lightblue", value: "pinging..." }
       const time = await utils.ping(instance)
-      pingCache[instance] = processTime(time)
+      pingCache[instance] = colorTime(time)
     }
   }
-  function processTime(time) {
+  function colorTime(time) {
     let value
     let color
     if (time < 5000) {
@@ -225,6 +225,7 @@
   a {
     color: var(--text);
     text-decoration: none;
+    word-wrap: anywhere;
   }
 
   a:hover {
diff --git a/src/pages/options_src/Services/RedirectType.svelte b/src/pages/options_src/Services/RedirectType.svelte
index 7f7a2843..11044080 100644
--- a/src/pages/options_src/Services/RedirectType.svelte
+++ b/src/pages/options_src/Services/RedirectType.svelte
@@ -1,12 +1,11 @@
 <script>
   import { onDestroy } from "svelte"
-
-  import RowSelect from "../../components/RowSelect.svelte"
   import SvelteSelect from "svelte-select"
   import { options, config } from "../stores"
   import Row from "../../components/Row.svelte"
   import Label from "../../components/Label.svelte"
   import FrontendIcon from "./FrontendIcon.svelte"
+  import Select from "../../components/Select.svelte"
 
   let _options
   let _config
@@ -63,15 +62,17 @@
   }
 </script>
 
-<RowSelect
-  label="Redirect Type"
-  value={serviceOptions.redirectType}
-  onChange={e => {
-    serviceOptions.redirectType = e.target.options[e.target.options.selectedIndex].value
-    options.set(_options)
-  }}
-  {values}
-/>
+<Row>
+  <Label>Redirect Type</Label>
+  <Select
+    value={serviceOptions.redirectType}
+    onChange={e => {
+      serviceOptions.redirectType = e.target.options[e.target.options.selectedIndex].value
+      options.set(_options)
+    }}
+    {values}
+  />
+</Row>
 
 {#if serviceConf.frontends[frontendName].desktopApp && serviceOptions.redirectType != "main_frame"}
   <Row>
diff --git a/src/pages/options_src/Services/Services.svelte b/src/pages/options_src/Services/Services.svelte
index cb1efacb..9c4e6c97 100644
--- a/src/pages/options_src/Services/Services.svelte
+++ b/src/pages/options_src/Services/Services.svelte
@@ -1,6 +1,4 @@
 <script>
-  import Checkbox from "../../components/RowCheckbox.svelte"
-  import RowSelect from "../../components/RowSelect.svelte"
   import Row from "../../components/Row.svelte"
   import Label from "../../components/Label.svelte"
   import Select from "../../components/Select.svelte"
@@ -11,6 +9,7 @@
   import SvelteSelect from "svelte-select"
   import ServiceIcon from "./ServiceIcon.svelte"
   import FrontendIcon from "./FrontendIcon.svelte"
+  import Checkbox from "../../components/Checkbox.svelte"
 
   let _options
   let _config
@@ -58,29 +57,33 @@
 
   <hr />
 
-  <Checkbox
-    label="Enable"
-    checked={serviceOptions.enabled}
-    onChange={e => {
-      serviceOptions.enabled = e.target.checked
-      options.set(_options)
-    }}
-  />
-
-  <div style={!serviceOptions.enabled && "pointer-events: none;opacity: 0.4;user-select: none;"}>
+  <Row>
+    <Label>Enable</Label>
     <Checkbox
-      label="Show in popup"
-      checked={_options.popupServices.includes(selectedService)}
+      checked={serviceOptions.enabled}
       onChange={e => {
-        if (e.target.checked && !_options.popupServices.includes(selectedService)) {
-          _options.popupServices.push(selectedService)
-        } else if (_options.popupServices.includes(selectedService)) {
-          const index = _options.popupServices.indexOf(selectedService)
-          if (index !== -1) _options.popupServices.splice(index, 1)
-        }
+        serviceOptions.enabled = e.target.checked
         options.set(_options)
       }}
     />
+  </Row>
+
+  <div style={!serviceOptions.enabled && "pointer-events: none;opacity: 0.4;user-select: none;"}>
+    <Row>
+      <Label>Show in popup</Label>
+      <Checkbox
+        checked={_options.popupServices.includes(selectedService)}
+        onChange={e => {
+          if (e.target.checked && !_options.popupServices.includes(selectedService)) {
+            _options.popupServices.push(selectedService)
+          } else if (_options.popupServices.includes(selectedService)) {
+            const index = _options.popupServices.indexOf(selectedService)
+            if (index !== -1) _options.popupServices.splice(index, 1)
+          }
+          options.set(_options)
+        }}
+      />
+    </Row>
 
     <Row>
       <Label>
@@ -118,18 +121,20 @@
 
     <RedirectType {selectedService} />
 
-    <RowSelect
-      label="Unsupported embeds handling"
-      value={serviceOptions.unsupportedUrls}
-      onChange={e => {
-        serviceOptions.unsupportedUrls = e.target.options[e.target.options.selectedIndex].value
-        options.set(_options)
-      }}
-      values={[
-        { value: "bypass", name: "Bypass" },
-        { value: "block", name: "Block" },
-      ]}
-    />
+    <Row>
+      <Label>Unsupported embeds handling</Label>
+      <Select
+        value={serviceOptions.unsupportedUrls}
+        onChange={e => {
+          serviceOptions.unsupportedUrls = e.target.options[e.target.options.selectedIndex].value
+          options.set(_options)
+        }}
+        values={[
+          { value: "bypass", name: "Bypass" },
+          { value: "block", name: "Block" },
+        ]}
+      />
+    </Row>
 
     {#if selectedService == "search"}
       <Row>
@@ -163,6 +168,7 @@
     --item-padding: 0 10px;
     --border: none;
     --border-hover: none;
+    --border-focused: none;
     --width: 210px;
     --background: var(--bg-secondary);
     --list-background: var(--bg-secondary);
@@ -178,7 +184,6 @@
     justify-content: start;
     align-items: center;
   }
-
   :global(.svelte_select img, .svelte_select svg) {
     margin-right: 10px;
     height: 26px;
diff --git a/src/pages/options_src/Sidebar.svelte b/src/pages/options_src/Sidebar.svelte
index ff44995f..4a808268 100644
--- a/src/pages/options_src/Sidebar.svelte
+++ b/src/pages/options_src/Sidebar.svelte
@@ -40,4 +40,18 @@
   a:hover {
     color: var(--active);
   }
+
+  @media (max-width: 1250px) {
+    div {
+      flex-direction: row;
+      justify-content: center;
+      margin: 0;
+    }
+  }
+
+  @media (max-width: 715px) {
+    a {
+      margin: 5px;
+    }
+  }
 </style>