Updating and Cleaning UI #9

author: ManeraKai <manerakai@protonmail.com> 2022-01-27 14:58:10 +0300
committer: GitHub <noreply@github.com> 2022-01-27 14:58:10 +0300
commit: 155eddbf07d73f12639ed6470497f925a33e32f2 (patch)
tree: 89e7a3ede5fd043d6511666a88aa77a042296491 /src/pages/popup
parent: Update FUNDING.yml (diff)
download: libredirect-155eddbf07d73f12639ed6470497f925a33e32f2.zip
2 files changed, 84 insertions, 278 deletions
diff --git a/src/pages/popup/popup.html b/src/pages/popup/popup.html
index 5ab3378b..900f6256 100644
--- a/src/pages/popup/popup.html
+++ b/src/pages/popup/popup.html
@@ -1,287 +1,97 @@
 <!DOCTYPE html>
 <html>
-  <head>
-    <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <title></title>
-    <link href="../../assets/stylesheets/styles.css" rel="stylesheet" />
-  </head>
 
-  <body class="popup">
-    <header class="popup">
-      <div class="logo-container">
-        <img
-          src="../../assets/images/libredirect.svg"
-          alt="Privacy Redirect logo"
-        />
-        <h1>
-          <span data-localise="__MSG_extensionName__" class="extensionName">LibRedirect</span>
-        </h1>
-      </div>
-      <div class="version">
-        <span data-localise="__MSG_version__">Version</span>:&nbsp;<span
-          id="version"
-        ></span>
-      </div>
-    </header>
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title></title>
+  <link href="../stylesheets/styles.css" rel="stylesheet" />
+</head>
 
-    <section class="settings-block">
-      <table class="option" aria-label="Toggle Nitter redirects">
-        <tbody>
-          <tr>
-            <td>
-              <h1 data-localise="__MSG_disableNitter__">Twitter Redirects</h1>
-            </td>
-            <td>
-              <input
-                aria-hidden="true"
-                id="disable-nitter"
-                type="checkbox"
-                checked
-              />&nbsp;
-              <label for="disable-nitter" class="checkbox-label"></label>
-            </td>
-          </tr>
-        </tbody>
-      </table>
-    </section>
+<body class="popup">
 
-    <section class="settings-block">
-      <table class="option" aria-label="Toggle Invidious redirects">
-        <tbody>
-          <tr>
-            <td>
-              <h1 data-localise="__MSG_disableInvidious__">
-                YouTube Redirects
-              </h1>
-            </td>
-            <td>
-              <input
-                aria-hidden="true"
-                id="disable-invidious"
-                type="checkbox"
-                checked
-              />&nbsp;
-              <label for="disable-invidious" class="checkbox-label"> </label>
-            </td>
-          </tr>
-        </tbody>
-      </table>
-    </section>
 
-    <section class="settings-block">
-      <table class="option" aria-label="Toggle Bibliogram redirects">
-        <tbody>
-          <tr>
-            <td>
-              <h1 data-localise="__MSG_disableBibliogram__">
-                Instagram Redirects
-              </h1>
-            </td>
-            <td>
-              <input
-                aria-hidden="true"
-                id="disable-bibliogram"
-                type="checkbox"
-                checked
-              />&nbsp;
-              <label for="disable-bibliogram" class="checkbox-label"> </label>
-            </td>
-          </tr>
-        </tbody>
-      </table>
-    </section>
 
-    <section class="settings-block">
-      <table class="option" aria-label="Toggle OpenStreetMap redirects">
-        <tbody>
-          <tr>
-            <td>
-              <h1 data-localise="__MSG_disableOsm__">
-                GoogleMap Redirects
-              </h1>
-            </td>
-            <td>
-              <input
-                aria-hidden="true"
-                id="disable-osm"
-                type="checkbox"
-                checked
-              />&nbsp;
-              <label for="disable-osm" class="checkbox-label"> </label>
-            </td>
-          </tr>
-        </tbody>
-      </table>
-    </section>
+  <div class="some-block">
+    <h4>Youtube</h4>
+    <input id="disable-invidious" type="checkbox" checked />
+  </div>
 
-    <section class="settings-block">
-      <table class="option" aria-label="Toggle old Reddit redirects">
-        <tbody>
-          <tr>
-            <td>
-              <h1 data-localise="__MSG_disableReddit__">Reddit Redirects</h1>
-            </td>
-            <td>
-              <input
-                aria-hidden="true"
-                id="disable-reddit"
-                type="checkbox"
-                checked
-              />&nbsp;
-              <label for="disable-reddit" class="checkbox-label"> </label>
-            </td>
-          </tr>
-        </tbody>
-      </table>
-    </section>
+  <div class="some-block">
+    <h4>Twitter</h4>
+    <input id="disable-nitter" type="checkbox" checked />
+  </div>
 
-    <section class="settings-block">
-      <table class="option" aria-label="Toggle Search Engine redirects">
-        <tbody>
-          <tr>
-            <td>
-              <h1 data-localise="__MSG_disableSearchEngine__">
-                Search Engine Redirects
-              </h1>
-            </td>
-            <td>
-              <input
-                aria-hidden="true"
-                id="disable-searchEngine"
-                type="checkbox"
-                checked
-              />&nbsp;
-              <label for="disable-searchEngine" class="checkbox-label"></label>
-            </td>
-          </tr>
-        </tbody>
-      </table>
-    </section>
+  <div class="some-block">
+    <h4>Instagram</h4>
+    <input id="disable-bibliogram" type="checkbox" checked />
+  </div>
 
-    <section class="settings-block">
-      <table class="option" aria-label="Toggle SimplyTranslate redirects">
-        <tbody>
-          <tr>
-            <td>
-              <h1 data-localise="__MSG_disableSimplyTranslate__">
-                SimplyTranslate Redirects
-              </h1>
-            </td>
-            <td>
-              <input
-                aria-hidden="true"
-                id="disable-simplyTranslate"
-                type="checkbox"
-              />&nbsp;
-              <label
-                for="disable-simplyTranslate"
-                class="checkbox-label"
-              ></label>
-            </td>
-          </tr>
-        </tbody>
-      </table>
-    </section>
+  <div class="some-block">
+    <h4>Reddit</h4>
+    <input id="disable-reddit" type="checkbox" checked />
+  </div>
 
-    <section class="settings-block">
-      <table class="option" aria-label="Toggle Wikipedia redirects">
-        <tbody>
-          <tr>
-            <td>
-              <h1 data-localise="__MSG_disableWikipedia__">
-                Wikipedia Redirects
-              </h1>
-            </td>
-            <td>
-              <input
-                aria-hidden="true"
-                id="disable-wikipedia"
-                type="checkbox"
-              />&nbsp;
-              <label for="disable-wikipedia" class="checkbox-label"></label>
-            </td>
-          </tr>
-        </tbody>
-      </table>
-    </section>
+  <div class="some-block">
+    <h4>Search</h4>
+    <input id="disable-searchEngine" type="checkbox" checked />
+  </div>
 
-    <section class="settings-block">
-      <table class="option" aria-label="Toggle Scribe redirects">
-        <tbody>
-          <tr>
-            <td>
-              <h1
-                data-localise="__MSG_disableScribe__"
-                class="new-badge"
-                data-new-badge
-              >
-                Scribe Redirects
-              </h1>
-            </td>
-            <td>
-              <input
-                aria-hidden="true"
-                id="disable-scribe"
-                type="checkbox"
-              />&nbsp;
-              <label for="disable-scribe" class="checkbox-label"></label>
-            </td>
-          </tr>
-        </tbody>
-      </table>
-    </section>
+  <div class="some-block">
+    <h4>Translate</h4>
+    <input id="disable-simplyTranslate" type="checkbox" checked />
+  </div>
 
-    <footer>
-      <a class="button" id="update-instances">
-        <span data-localise="__MSG_updateInstances__">Update Instances&nbsp;</span>
-      </a>
-      <a class="button" id="more-options">
-        <span data-localise="__MSG_moreOptions__">More Options&nbsp;</span>
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          width="512"
-          height="512"
-          viewBox="0 0 512 512"
-        >
-          <path
-            d="M384,224V408a40,40,0,0,1-40,40H104a40,40,0,0,1-40-40V168a40,40,0,0,1,40-40H271.48"
-            style="
-              fill: none;
-              stroke: inherit;
-              stroke-linecap: round;
-              stroke-linejoin: round;
-              stroke-width: 32px;
-            "
-          />
-          <polyline
-            points="336 64 448 64 448 176"
-            style="
-              fill: none;
-              stroke: inherit;
-              stroke-linecap: round;
-              stroke-linejoin: round;
-              stroke-width: 32px;
-            "
-          />
-          <line
-            x1="224"
-            y1="288"
-            x2="440"
-            y2="72"
-            style="
-              fill: none;
-              stroke: inherit;
-              stroke-linecap: round;
-              stroke-linejoin: round;
-              stroke-width: 32px;
-            "
-          />
-        </svg>
-      </a>
-    </footer>
+  <div class="some-block">
+    <h4>Maps</h4>
+    <input id="disable-osm" type="checkbox" checked />
+  </div>
 
-    <script type="module" src="./popup.js"></script>
-    <script src="../../assets/javascripts/localise.js"></script>
-  </body>
-</html>
+  <div class="some-block">
+    <h4>Wikipedia</h4>
+    <input id="disable-wikipedia" type="checkbox" checked />
+  </div>
+
+  <div class="some-block">
+    <h4>Medium</h4>
+    <input id="disable-scribe" type="checkbox" checked />
+  </div>
+
+  <div class="buttons">
+    <a class="button" id="update-instances">
+      <span data-localise="__MSG_updateInstances__">Update Instances&nbsp;</span>
+    </a>
+    <a class="button" id="more-options">
+      <span data-localise="__MSG_moreOptions__">More Options&nbsp;</span>
+      <svg xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 512 512">
+        <path d="M384,224V408a40,40,0,0,1-40,40H104a40,40,0,0,1-40-40V168a40,40,0,0,1,40-40H271.48" style="
+            fill: none;
+            stroke: inherit;
+            stroke-linecap: round;
+            stroke-linejoin: round;
+            stroke-width: 32px;
+          " />
+        <polyline points="336 64 448 64 448 176" style="
+            fill: none;
+            stroke: inherit;
+            stroke-linecap: round;
+            stroke-linejoin: round;
+            stroke-width: 32px;
+          " />
+        <line x1="224" y1="288" x2="440" y2="72" style="
+            fill: none;
+            stroke: inherit;
+            stroke-linecap: round;
+            stroke-linejoin: round;
+            stroke-width: 32px;
+          " />
+      </svg>
+    </a>
+  </div>
+
+
+  <script type="module" src="./popup.js"></script>
+  <script src="../../assets/javascripts/localise.js"></script>
+</body>
+
+</html>
+\ No newline at end of file
diff --git a/src/pages/popup/popup.js b/src/pages/popup/popup.js
index d2b33b6a..01497cad 100644
--- a/src/pages/popup/popup.js
+++ b/src/pages/popup/popup.js
@@ -9,7 +9,6 @@ let disableSearchEngine = document.querySelector("#disable-searchEngine");
 let disableSimplyTranslate = document.querySelector("#disable-simplyTranslate");
 let disableWikipedia = document.querySelector("#disable-wikipedia");
 let disableScribe = document.querySelector("#disable-scribe");
-let version = document.querySelector("#version");
 
 window.browser = window.browser || window.chrome;
 
@@ -40,8 +39,6 @@ browser.storage.sync.get(
   }
 );
 
-version.textContent = browser.runtime.getManifest().version;
-
 disableNitter.addEventListener("change", (event) => {
   browser.storage.sync.set({ disableNitter: !event.target.checked });
 });
@@ -79,14 +76,13 @@ disableScribe.addEventListener("change", (event) => {
 });
 
 const apiEndpoint = 'https://raw.githubusercontent.com/libredirect/instances/main/data.json';
-
 document.querySelector("#update-instances").addEventListener("click", () => {
   let request = new XMLHttpRequest();
   request.open('GET', apiEndpoint, false);
   request.send(null);
 
   if (request.status === 200) {
-    document.querySelector("#update-instances").innerHTML = 'gav';  
+    document.querySelector("#update-instances").innerHTML = 'gav';
     const instances = JSON.parse(request.responseText);
     const nitterRandomPool = instances.twitter.join(',');
     const invidiousRandomPool = instances.youtube.join(',');
author	ManeraKai <manerakai@protonmail.com>	2022-01-27 14:58:10 +0300
committer	GitHub <noreply@github.com>	2022-01-27 14:58:10 +0300
commit	155eddbf07d73f12639ed6470497f925a33e32f2 (patch)
tree	89e7a3ede5fd043d6511666a88aa77a042296491 /src/pages/popup
parent	Update FUNDING.yml (diff)
download	libredirect-155eddbf07d73f12639ed6470497f925a33e32f2.zip