Added mobile support in Svelte

package.json

@@ -9,7 +9,7 @@
   "scripts": {
     "start": "web-ext run",
     "nightly": "web-ext run --firefox=/home/esmail/software/firefox_nightly/firefox",
-    "android": "web-ext run -t firefox-android --adb-device emulator-5554 --firefox-apk org.mozilla.fenix",
+    "android": "web-ext run -t firefox-android --adb-device emulator-5554 --firefox-apk org.mozilla.fenix ",
     "build": "web-ext build",
     "test": "web-ext lint",
     "html": "rollup -c --config-popup && rollup -c --config-options"

src/assets/javascripts/utils.js

@@ -20,13 +20,6 @@ function getNextInstance(currentInstanceUrl, instances) {
   return instances[nextInstanceIndex]
 }
 
-/**
- * @param {string} str
- */
-function camelCase(str) {
-  return str.charAt(0).toUpperCase() + str.slice(1)
-}
-
 /**
  * @param {URL} url
  */
@@ -178,7 +171,6 @@ export default {
   protocolHost,
   getList,
   getBlacklist,
-  camelCase,
   getConfig,
   getOptions,
   getPingCache,

src/pages/components/Input.svelte

@@ -38,4 +38,9 @@
   input:focus {
     outline-color: var(--active);
   }
+  @media (max-width: 715px) {
+    input {
+      width: 200px;
+    }
+  }
 </style>

src/pages/components/RowCheckbox.svelte

@@ -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>

src/pages/components/RowSelect.svelte

@@ -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>

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;
+}

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>
 

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>

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,8 +25,9 @@
 </script>
 
 <div>
-  <RowSelect
+  <Row>
-    label="Theme"
+    <Label>Theme</Label>
+    <Select
       values={[
         { value: "detect", name: "Auto" },
         { value: "light", name: "Light" },
@@ -32,37 +35,45 @@
       ]}
       value={_options.theme}
       onChange={e => {
-      _options["theme"] = e.target.options[e.target.options.selectedIndex].value
+        _options.theme = e.target.options[e.target.options.selectedIndex].value
         options.set(_options)
       }}
       ariaLabel="select theme"
     />
+  </Row>
 
-  <RowSelect
+  <Row>
-    label="Fetch public instances"
+    <Label>Fetch public instances</Label>
+    <Select
       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" },
       ]}
+      onChange={e => {
+        _options.fetchInstances = e.target.options[e.target.options.selectedIndex].value
+        options.set(_options)
+      }}
+      ariaLabel={"Select fetch public instances"}
     />
+  </Row>
 
+  <Row>
+    <Label>Redirect Only in Incognito</Label>
     <Checkbox
-    label="Redirect Only in Incognito"
       checked={_options.redirectOnlyInIncognito}
       onChange={e => {
-      _options["redirectOnlyInIncognito"] = e.target.checked
+        _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} />
 

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 {

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
+<Row>
-  label="Redirect Type"
+  <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>

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,18 +57,21 @@
 
   <hr />
 
+  <Row>
+    <Label>Enable</Label>
     <Checkbox
-    label="Enable"
       checked={serviceOptions.enabled}
       onChange={e => {
         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
-      label="Show in popup"
         checked={_options.popupServices.includes(selectedService)}
         onChange={e => {
           if (e.target.checked && !_options.popupServices.includes(selectedService)) {
@@ -81,6 +83,7 @@
           options.set(_options)
         }}
       />
+    </Row>
 
     <Row>
       <Label>
@@ -118,8 +121,9 @@
 
     <RedirectType {selectedService} />
 
-    <RowSelect
+    <Row>
-      label="Unsupported embeds handling"
+      <Label>Unsupported embeds handling</Label>
+      <Select
         value={serviceOptions.unsupportedUrls}
         onChange={e => {
           serviceOptions.unsupportedUrls = e.target.options[e.target.options.selectedIndex].value
@@ -130,6 +134,7 @@
           { 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;

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>

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>
 

src/pages/stylesheets/styles.css

@@ -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%;
-} */