Added mobile support in Svelte

16 files changed, 156 insertions, 216 deletions

diff --git a/src/assets/javascripts/utils.js b/src/assets/javascripts/utils.js
index 439826dd..18168e90 100644
--- a/src/assets/javascripts/utils.js
+++ b/src/assets/javascripts/utils.js
@@ -21,13 +21,6 @@ function getNextInstance(currentInstanceUrl, instances) {
 }
 
 /**
- * @param {string} str
- */
-function camelCase(str) {
-  return str.charAt(0).toUpperCase() + str.slice(1)
-}
-
-/**
  * @param {URL} url
  */
 function protocolHost(url) {
@@ -178,7 +171,6 @@ export default {
   protocolHost,
   getList,
   getBlacklist,
-  camelCase,
   getConfig,
   getOptions,
   getPingCache,
diff --git a/src/pages/components/Input.svelte b/src/pages/components/Input.svelte
index d963233c..97a47e6d 100644
--- a/src/pages/components/Input.svelte
+++ b/src/pages/components/Input.svelte
@@ -38,4 +38,9 @@
   input:focus {
     outline-color: var(--active);
   }
+  @media (max-width: 715px) {
+    input {
+      width: 200px;
+    }
+  }
 </style>
diff --git a/src/pages/components/RowCheckbox.svelte b/src/pages/components/RowCheckbox.svelte
deleted file mode 100644
index b7ccab93..00000000
--- a/src/pages/components/RowCheckbox.svelte
+++ /dev/null
@@ -1,14 +0,0 @@
-<script>
-  import Row from "./Row.svelte"
-  import Checkbox from "./Checkbox.svelte"
-  import Label from "./Label.svelte"
-
-  export let label
-  export let checked
-  export let onChange
-</script>
-
-<Row>
-  <Label>{label}</Label>
-  <Checkbox bind:checked {onChange} />
-</Row>
diff --git a/src/pages/components/RowSelect.svelte b/src/pages/components/RowSelect.svelte
deleted file mode 100644
index d685803e..00000000
--- a/src/pages/components/RowSelect.svelte
+++ /dev/null
@@ -1,19 +0,0 @@
-<script>
-  import Row from "./Row.svelte"
-  import Select from "./Select.svelte"
-  import Label from "./Label.svelte"
-
-  export let label
-  export let values
-  export let value
-  export let onChange
-  export let ariaLabel
-</script>
-
-<Row>
-  <Label>{label}</Label>
-  <Select {value} {values} {onChange} {ariaLabel} />
-</Row>
-
-<style>
-</style>
diff --git a/src/pages/stylesheets/Inter-VariableFont_slnt,wght.ttf b/src/pages/fonts/Inter-VariableFont_slnt,wght.ttf
index 969a990f..969a990f 100644
--- a/src/pages/stylesheets/Inter-VariableFont_slnt,wght.ttf
+++ b/src/pages/fonts/Inter-VariableFont_slnt,wght.ttf
Binary files differdiff --git a/src/pages/stylesheets/Vazirmatn-VariableFont_wght.ttf b/src/pages/fonts/Vazirmatn-VariableFont_wght.ttf
index f4b97c01..f4b97c01 100644
--- a/src/pages/stylesheets/Vazirmatn-VariableFont_wght.ttf
+++ b/src/pages/fonts/Vazirmatn-VariableFont_wght.ttf
Binary files differdiff --git a/src/pages/fonts/styles.css b/src/pages/fonts/styles.css
new file mode 100644
index 00000000..754543b1
--- /dev/null
+++ b/src/pages/fonts/styles.css
@@ -0,0 +1,13 @@
+@font-face {
+  font-family: "Inter";
+  src: url("Inter-VariableFont_slnt,wght.ttf");
+  font-weight: normal;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: "Vazirmatn";
+  src: url("Vazirmatn-VariableFont_wght.ttf");
+  font-weight: normal;
+  font-style: normal;
+}
\ No newline at end of file
diff --git a/src/pages/options/index.html b/src/pages/options/index.html
index c3dcff71..b197d4a7 100644
--- a/src/pages/options/index.html
+++ b/src/pages/options/index.html
@@ -7,6 +7,7 @@
 	<link rel="icon" type="image/x-icon" href="../../../assets/images/libredirect.svg">
 	<title>Settings</title>
 	<link rel='stylesheet' href='build/bundle.css'>
+	<link rel='stylesheet' href='../fonts/styles.css'>
 	<script defer src='build/bundle.js'></script>
 </head>
 
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>
diff --git a/src/pages/popup/index.html b/src/pages/popup/index.html
index 5c589bf7..b197d4a7 100644
--- a/src/pages/popup/index.html
+++ b/src/pages/popup/index.html
@@ -7,7 +7,7 @@
 	<link rel="icon" type="image/x-icon" href="../../../assets/images/libredirect.svg">
 	<title>Settings</title>
 	<link rel='stylesheet' href='build/bundle.css'>
-	<link rel='stylesheet' href='../stylesheets/styles.css'>
+	<link rel='stylesheet' href='../fonts/styles.css'>
 	<script defer src='build/bundle.js'></script>
 </head>
 
diff --git a/src/pages/stylesheets/styles.css b/src/pages/stylesheets/styles.css
deleted file mode 100644
index 9e8fedb3..00000000
--- a/src/pages/stylesheets/styles.css
+++ /dev/null
@@ -1,88 +0,0 @@
-@font-face {
-  font-family: "Inter";
-  src: url("Inter-VariableFont_slnt,wght.ttf");
-  font-weight: normal;
-  font-style: normal;
-}
-
-@font-face {
-  font-family: "Vazirmatn";
-  src: url("Vazirmatn-VariableFont_wght.ttf");
-  font-weight: normal;
-  font-style: normal;
-}
-
-/* 
-
-@media (max-width: 1250px) {
-  body.option {
-    flex-direction: column;
-    width: 95vw;
-    align-items: center;
-    padding: 40px 0px;
-  }
-
-  section.links {
-    flex-direction: row;
-    width: 95vw;
-    padding: 0 55px;
-  }
-
-  section.block-option {
-    width: 95vw;
-  }
-
-  div.checklist div x {
-    overflow: hidden;
-  }
-}
-
-html.mobile img,
-html.mobile svg {
-  margin-right: 10px;
-  height: 30px;
-  width: 30px;
-  color: var(--text);
-}
-
-html.mobile div.block {
-  padding: 0 15px;
-  justify-content: space-between;
-  display: flex;
-  align-items: center;
-  margin-top: 20px;
-  margin-bottom: 20px;
-}
-
-html.mobile div.block input[type="checkbox"] {
-  width: 58px;
-  height: 30px;
-}
-
-html.mobile div.block input[type="checkbox"]::before {
-  width: 24px;
-  height: 24px;
-  top: 3px;
-  left: 3.5px;
-}
-
-html.mobile div.block input[type="checkbox"]:checked::before {
-  left: 30px;
-}
-
-html.mobile body.option {
-  flex-direction: column;
-  width: 100%;
-  padding: 0;
-  align-items: center;
-}
-
-html.mobile section.links {
-  flex-direction: row;
-  width: 100%;
-  padding: 0 55px;
-}
-
-html.mobile section.block-option {
-  width: 100%;
-} */
\ No newline at end of file