Update for Mobile Devices (#77)

* Update for Mobile Devices

* Minor Fixes

* Fix linksForm Parsing Domains

* Add Truncate and No Wrap Options

* Add More Android Updates

* Add SVG

* Update Popup

* Drag and Drop Updates

* Update README.md

* Catch Injection Errors

Author: smashedr

README.md

@@ -26,17 +26,22 @@ Website: https://link-extractor.cssnr.com/
 *   [Google Chrome Web Store](https://chromewebstore.google.com/detail/link-extractor/ifefifghpkllfibejafbakmflidjcjfp)
 *   [Mozilla Firefox Add-ons](https://addons.mozilla.org/addon/link-extractor)
 
-[![Chrome](https://raw.githubusercontent.com/alrra/browser-logos/main/src/chrome/chrome_48x48.png)](https://chromewebstore.google.com/detail/link-extractor/ifefifghpkllfibejafbakmflidjcjfp)
-[![Firefox](https://raw.githubusercontent.com/alrra/browser-logos/main/src/firefox/firefox_48x48.png)](https://addons.mozilla.org/addon/link-extractor)
-[![Edge](https://raw.githubusercontent.com/alrra/browser-logos/main/src/edge/edge_48x48.png)](https://chromewebstore.google.com/detail/link-extractor/ifefifghpkllfibejafbakmflidjcjfp)
-[![Chromium](https://raw.githubusercontent.com/alrra/browser-logos/main/src/chromium/chromium_48x48.png)](https://chromewebstore.google.com/detail/link-extractor/ifefifghpkllfibejafbakmflidjcjfp)
-[![Brave](https://raw.githubusercontent.com/alrra/browser-logos/main/src/brave/brave_48x48.png)](https://chromewebstore.google.com/detail/link-extractor/ifefifghpkllfibejafbakmflidjcjfp)
-[![Vivaldi](https://raw.githubusercontent.com/alrra/browser-logos/main/src/vivaldi/vivaldi_48x48.png)](https://chromewebstore.google.com/detail/link-extractor/ifefifghpkllfibejafbakmflidjcjfp)
-[![Opera](https://raw.githubusercontent.com/alrra/browser-logos/main/src/opera/opera_48x48.png)](https://chromewebstore.google.com/detail/link-extractor/ifefifghpkllfibejafbakmflidjcjfp)
+[![Chrome](https://raw.githubusercontent.com/smashedr/logo-icons/master/browsers/brave_48.png)](https://chromewebstore.google.com/detail/link-extractor/ifefifghpkllfibejafbakmflidjcjfp)
+[![Firefox](https://raw.githubusercontent.com/smashedr/logo-icons/master/browsers/firefox_48.png)](https://addons.mozilla.org/addon/link-extractor)
+[![Edge](https://raw.githubusercontent.com/smashedr/logo-icons/master/browsers/edge_48.png)](https://chromewebstore.google.com/detail/link-extractor/ifefifghpkllfibejafbakmflidjcjfp)
+[![Chromium](https://raw.githubusercontent.com/smashedr/logo-icons/master/browsers/chromium_48.png)](https://chromewebstore.google.com/detail/link-extractor/ifefifghpkllfibejafbakmflidjcjfp)
+[![Brave](https://raw.githubusercontent.com/smashedr/logo-icons/master/browsers/brave_48.png)](https://chromewebstore.google.com/detail/link-extractor/ifefifghpkllfibejafbakmflidjcjfp)
+[![Vivaldi](https://raw.githubusercontent.com/smashedr/logo-icons/master/browsers/vivaldi_48.png)](https://chromewebstore.google.com/detail/link-extractor/ifefifghpkllfibejafbakmflidjcjfp)
+[![Opera](https://raw.githubusercontent.com/smashedr/logo-icons/master/browsers/opera_48.png)](https://chromewebstore.google.com/detail/link-extractor/ifefifghpkllfibejafbakmflidjcjfp)
+[![Kiwi](https://raw.githubusercontent.com/smashedr/logo-icons/master/browsers/kiwi_48.png)](https://chromewebstore.google.com/detail/link-extractor/ifefifghpkllfibejafbakmflidjcjfp)
 
 All **Chromium** Based Browsers can install the extension from the
 [Chrome Web Store](https://chromewebstore.google.com/detail/link-extractor/ifefifghpkllfibejafbakmflidjcjfp).
 
+Mobile browsers on are supported on
+[Firefox](https://addons.mozilla.org/addon/link-extractor) and 
+[Kiwi](https://chromewebstore.google.com/detail/link-extractor/ifefifghpkllfibejafbakmflidjcjfp).
+
 # Features
 
 Please submit a [Feature Request](https://github.com/cssnr/link-extractor/discussions/new?category=feature-requests) for new features.  
@@ -69,13 +74,14 @@ For any issues, bugs or concerns; please [Open an Issue](https://github.com/cssn
 
 # Configuration
 
-**Documentation: https://link-extractor.cssnr.com/docs/**
+**Full Documentation:** https://link-extractor.cssnr.com/docs/
 
 You can pin the Addon by clicking the `Puzzle Piece`, find the Link Extractor icon, then;  
 **Chrome,** click the `Pin` icon.  
 **Firefox,** click the `Settings Wheel` and `Pin to Toolbar`.  
 
 To open the options, click on the icon (from above) then click `Open Options`.  
+You can also access `Options` through the right-click context menu (enabled by default).  
 Here you can set flags and add as many saved regular expressions as you would like for easy use later.  
 Make sure to click`Save Options` when finished.
 

assets/logo.svg

@@ -11,7 +11,12 @@ a:visited {
     z-index: 10;
 }
 
-.toast-container {
+#toast-container {
     max-width: 260px;
     width: 100%;
 }
+
+td.truncate {
+    overflow: hidden;
+    text-overflow: ellipsis;
+}

src/css/links.css

@@ -11,9 +11,9 @@ svg {
     bottom: 64px;
     right: 20px;
     display: none;
-    z-index: 3;
+    z-index: 6;
 }
 
 #toast-container {
-    z-index: 3;
+    z-index: 5;
 }

src/css/main.css

@@ -1,10 +1,10 @@
 /* CSS for options.html */
 
 .card {
-    min-width: 360px;
+    min-width: 340px;
 }
 
-.toast-container {
+#toast-container {
     max-width: 320px;
     width: 100%;
 }

src/css/options.css

@@ -1,7 +1,7 @@
 /* CSS for popup.html */
 
 body {
-    width: 340px;
+    min-width: 340px;
 }
 
 input::placeholder,

src/css/popup.css

@@ -2,6 +2,7 @@
 <html lang="en">
 <head>
     <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
     <title></title>
     <link rel="stylesheet" type="text/css" href="../css/lazy.css">
 </head>

src/html/lazy.html

@@ -2,6 +2,7 @@
 <html lang="en">
 <head>
     <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
     <title>Link Extractor</title>
     <link rel="icon" href="../images/logo16.png" sizes="any">
     <link rel="stylesheet" type="text/css" href="../dist/bootstrap/bootstrap.min.css">
@@ -14,7 +15,7 @@
 </head>
 <body>
 
-<div id="floating-links" class="position-fixed top-0 end-0 user-select-none">
+<div id="floating-links" class="position-fixed top-0 end-0 mt-1 me-2 user-select-none">
     <div class="row g-1 links d-none">
         <div class="col">
             <a href="#links"><span class="badge text-bg-success w-100">Links</span></a>
@@ -40,49 +41,60 @@ <h2 id="loading-message" class="user-select-none d-none">Loading...</h2>
     <div class="links d-none">
         <div class="user-select-none">
             <h2 id="links">Links <span class="badge bg-success-subtle"><span id="links-count">0</span>/<span id="links-total"></span></span></h2>
-            <button id="copy-links" class="btn btn-sm btn-success me-1 mb-2 copy-links" type="button">
+            <div class="mb-1">
+            <button id="copy-links" class="btn btn-sm btn-success mb-1 me-1 copy-links" type="button">
                 Copy Links <i class="fa-solid fa-copy ms-1"></i></button>
-            <button id="down-links" class="btn btn-sm btn-outline-info download-file me-1 mb-2" type="button" data-target="#links-body" data-filename="links.txt">
-                Download <i class="fa-solid fa-download m-1"></i></button>
-            <button id="open-links" class="btn btn-sm btn-outline-warning open-in-tabs position-relative me-2 mb-2" type="button" data-target="#links-body">
+            <button id="down-links" class="btn btn-sm btn-outline-info download-file mb-1 me-1" type="button" data-target="#links-body" data-filename="links.txt">
+                Download <i class="fa-solid fa-download ms-1"></i></button>
+            <button id="open-links" class="btn btn-sm btn-outline-warning open-in-tabs position-relative mb-1 me-2" type="button" data-target="#links-body">
                 Open <i class="fa-solid fa-up-right-from-square ms-1"></i></button>
-            <span class="d-inline-block me-1 mb-2">
-                <kbd>C</kbd> <i class="fa-regular fa-keyboard"></i> <kbd>L</kbd> to Copy Links.</span>
-            <span class="d-inline-block me-1 mt-md-1 float-end">
-                <kbd>K</kbd> <i class="fa-regular fa-keyboard"></i> <kbd>Z</kbd> Keyboard Shortcuts.
-            </span>
+            </div>
+            <div class="row keyboard">
+                <div class="col-12 col-sm-6">
+                    <kbd>C</kbd> <i class="fa-regular fa-keyboard"></i> <kbd>L</kbd> to Copy Links.
+                </div>
+                <div class="col-12 col-sm-6 text-sm-end">
+                    <kbd>K</kbd> <i class="fa-regular fa-keyboard"></i> <kbd>Z</kbd> Keyboard Shortcuts.
+                </div>
+            </div>
         </div> <!-- links-buttons -->
-        <table id="links-table" class="table table-sm table-striped table-hover table-responsive small" data-counter="links-count" style="width:100%">
-            <thead class="">
-                <tr>
-                    <th>Link</th>
-                    <th>Text</th>
-                    <th>Title</th>
-                    <th>Label</th>
-                    <th>Rel</th>
-                    <th>Target</th>
-                </tr>
-            </thead>
-            <tbody id="links-body"></tbody>
-        </table> <!-- links-table -->
+        <div class="table-wrapper">
+            <table id="links-table" class="table table-sm table-striped table-hover small w-100" data-counter="links-count">
+                <thead class="">
+                    <tr>
+                        <th>Link</th>
+                        <th>Text</th>
+                        <th>Title</th>
+                        <th>Label</th>
+                        <th>Rel</th>
+                        <th>Target</th>
+                    </tr>
+                </thead>
+                <tbody id="links-body"></tbody>
+            </table> <!-- links-table -->
+        </div> <!-- table-wrapper -->
     </div> <!-- links -->
 
-    <div class="domains d-none">
+    <div class="domains pt-2 d-none">
         <div class="user-select-none">
             <h2 id="domains">Domains <span class="badge bg-primary-subtle"><span id="domains-count">0</span>/<span id="domains-total"></span></span></h2>
-            <button id="copy-domains" class="btn btn-sm btn-primary clip me-1 mb-2" type="button" data-clipboard-target="#domains-body" data-toast="Copied Domains">
+
+            <button id="copy-domains" class="btn btn-sm btn-primary clip mb-1 me-1" type="button" data-clipboard-target="#domains-body" data-toast="Copied Domains">
                 Copy Domains <i class="fa-solid fa-copy ms-1"></i></button>
-            <button id="down-domains" class="btn btn-sm btn-outline-info download-file me-1 mb-2" type="button" data-target="#domains-body" data-filename="domains.txt">
+            <button id="down-domains" class="btn btn-sm btn-outline-info download-file mb-1 me-1" type="button" data-target="#domains-body" data-filename="domains.txt">
                 Download <i class="fa-solid fa-download ms-1"></i></button>
-            <button id="open-domains" class="btn btn-sm btn-outline-warning open-in-tabs position-relative me-2 mb-2" type="button" data-target="#domains-body">
+            <button id="open-domains" class="btn btn-sm btn-outline-warning open-in-tabs position-relative mb-1 me-2" type="button" data-target="#domains-body">
                 Open <i class="fa-solid fa-up-right-from-square ms-1"></i></button>
-            <span class="d-inline-block me-1 mb-2">
+
+            <span class="d-inline-block me-1 keyboard">
                 <kbd>D</kbd> <i class="fa-regular fa-keyboard"></i> <kbd>M</kbd> to Copy Domains.</span>
         </div> <!-- domains-buttons -->
-        <table id="domains-table" class="table table-sm table-striped table-hover table-responsive small" data-counter="domains-count" style="width:100%">
-            <thead class=""><tr><th>Domain</th></tr></thead>
-            <tbody id="domains-body"></tbody>
-        </table> <!-- domains-table -->
+        <div class="table-wrapper">
+            <table id="domains-table" class="table table-sm table-striped table-hover small w-100" data-counter="domains-count">
+                <thead class=""><tr><th>Domain</th></tr></thead>
+                <tbody id="domains-body"></tbody>
+            </table> <!-- domains-table -->
+        </div> <!-- table-wrapper -->
     </div> <!-- domains -->
 </div> <!-- container-fluid -->