Tweaks (#50)

* Tweaks * Tweaks * Fix Order * Set Charset * Cleanup * Update Text Breaks
cssnr · Dec 19, 2023 · e2e5e99 · e2e5e99
1 parent f56f395
commit e2e5e99
Show file tree

Hide file tree

Showing 7 changed files with 39 additions and 32 deletions.
diff --git a/src/css/popup.css b/src/css/popup.css
@@ -8,3 +8,9 @@ input::placeholder,
 textarea::placeholder {
     text-align: center;
 }
+
+.dropdown-menu {
+    max-width: 100vw;
+    white-space: normal;
+    overflow: hidden;
+}
diff --git a/src/html/links.html b/src/html/links.html
@@ -1,6 +1,7 @@
 <!doctype html>
 <html lang="en">
 <head>
+    <meta charset="utf-8">
     <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">

diff --git a/src/html/options.html b/src/html/options.html
@@ -1,6 +1,7 @@
 <!doctype html>
 <html lang="en">
 <head>
+    <meta charset="utf-8">
     <title>Link Extractor Options</title>
     <link rel="icon" href="../images/logo16.png" sizes="any">
     <link rel="stylesheet" type="text/css" href="../dist/bootstrap/bootstrap.min.css">
@@ -16,14 +17,15 @@
 <div class="col-xl-6 col-md-8 col-12 m-auto">
 <div class="card" >
 <div class="card-body">
-    <div class="justify-content-center align-items-center d-flex">
-        <img src="../images/logo48.png" class="img-fluid float-start me-2" title="Link Extractor" alt="Link Extractor" height="48" width="48">
-        <h1 class="align-middle">Link Extractor</h1>
+    <div class="d-flex justify-content-center align-items-center">
+        <img src="../images/logo48.png" class="me-2" height="48" width="48"
+             alt="Link Extractor" title="Link Extractor">
+        <h1>Link Extractor</h1>
     </div>
     <div class="clearfix"></div>
     <p class="text-center lead">v<span id="version"></span></p>
 
-    <table class="table table-sm table-borderless ">
+    <table class="table table-sm table-borderless">
         <caption class="visually-hidden">Keyboard Shortcuts</caption>
         <thead class="visually-hidden"><tr><th>Description</th><th>Shortcut</th></tr></thead>
         <tbody>
@@ -38,10 +40,10 @@ <h1 class="align-middle">Link Extractor</h1>
         </tbody>
     </table>
 
-    <form id="options-form">
+    <form id="options-form" class="mb-3">
         <label for="flags" class="form-label">Regex Flags</label>
         <a id="reset-default" class="float-end align-bottom small" role="button">Reset to Default</a>
-        <input type="text" id="flags" class="form-control" aria-describedby="flagsHelp">
+        <input type="text" id="flags" class="form-control form-control-sm" aria-describedby="flagsHelp">
         <div id="flagsInvalid" class="invalid-feedback">Invalid Regex Flags.</div>
         <div id="flagsHelp" class="form-text mb-3">
             Flags used when using a filter.
@@ -77,8 +79,6 @@ <h1 class="align-middle">Link Extractor</h1>
         </div>
     </form>
 
-    <hr>
-
     <form id="filters-form">
         <div class="input-group mb-3">
             <input type="text" class="form-control" placeholder="Add Filter" aria-label="Filter" id="add-filter" aria-describedby="add-filter-btn">
@@ -87,18 +87,16 @@ <h1 class="align-middle">Link Extractor</h1>
             </button>
         </div>
     </form>
-    <div class="table-responsive">
-        <table id="filters-table" class="table table-sm table-hover bg-transparent">
-            <caption>Saved Filters</caption>
-            <thead><tr>
-                <th scope="col" class="text-center" style="width: 36px;">
-                    <i class="fa-solid fa-trash-can"></i>
-                </th>
-                <th scope="col">Filter</th>
-            </tr></thead>
-            <tbody></tbody>
-        </table>
-    </div>
+    <table id="filters-table" class="table table-sm table-hover bg-transparent">
+        <caption>Saved Filters</caption>
+        <thead><tr>
+            <th scope="col" class="text-center" style="width: 36px;">
+                <i class="fa-solid fa-trash-can"></i>
+            </th>
+            <th scope="col">Filter</th>
+        </tr></thead>
+        <tbody></tbody>
+    </table>
 
     <div class="text-center mb-3">
         <a class="link-body-emphasis text-decoration-none" target="_blank" rel="noopener"

diff --git a/src/html/popup.html b/src/html/popup.html
@@ -1,6 +1,7 @@
 <!doctype html>
 <html lang="en">
 <head>
+    <meta charset="utf-8">
     <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,11 +15,11 @@
 <div class="container-fluid p-3">
     <div class="d-grid g-2 gap-2">
         <div class="btn-group btn-group-sm" role="group" aria-label="Button group with nested dropdown">
-            <a role="button" class="btn btn-success btn-sm" data-filter="">
+            <a role="button" class="btn btn-sm btn-success" data-filter="">
                 <i class="fa-solid fa-link me-1"></i> All Links</a>
             <div class="btn-group" role="group">
-                <a role="button" class="btn btn-outline-success btn-sm dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">Filters</a>
-                <ul id="filters-ul" class="dropdown-menu small">
+                <a role="button" class="btn btn-sm btn-outline-success dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">Filters</a>
+                <ul id="filters-ul" class="dropdown-menu">
                     <li id="no-filters"><a class="dropdown-item" href="../html/options.html">Add Saved Filters</a></li>
                 </ul>
             </div>
@@ -56,10 +57,10 @@
             </form>
         </div>
 
-        <a class="btn btn-outline-info btn-sm" role="button" href="../html/options.html">
+        <a class="btn btn-sm btn-outline-info" role="button" href="../html/options.html">
             <i class="fa-solid fa-sliders me-1"></i> Options</a>
-        <div class=" d-flex justify-content-center align-items-center text-center small">
-            <img class="" src="../images/logo16.png" alt="Link Extractor" width="16" height="16">
+        <div class="d-flex justify-content-center align-items-center text-center small">
+            <img class="" src="../images/logo16.png" width="16" height="16" alt="Link Extractor" title="Link Extractor">
             <a class="link-offset-2 link-underline link-underline-opacity-0 link-underline-opacity-75-hover mx-2" type="button" rel="noopener"
                id="homepage_url" href="">Link Extractor</a> v<span id="version"></span>
         </div>

diff --git a/src/js/links.js b/src/js/links.js
@@ -25,7 +25,7 @@ const dtOptions = {
     processing: true,
     saveState: true,
     bSort: true,
-    order: [0, 'desc'],
+    order: [[0, 'asc']],
     pageLength: -1,
     lengthMenu: [
         [10, 25, 50, 100, 250, -1],

diff --git a/src/js/options.js b/src/js/options.js
@@ -110,7 +110,7 @@ function updateTable(data) {
         button.setAttribute('role', 'button')
         button.addEventListener('click', deleteHost)
         const cell1 = row.insertCell()
-        cell1.classList.add('text-center')
+        cell1.classList.add('text-center', 'align-middle')
         cell1.appendChild(button)
 
         const link = document.createElement('a')
@@ -125,6 +125,7 @@ function updateTable(data) {
         )
         link.setAttribute('role', 'button')
         const cell2 = row.insertCell()
+        cell2.classList.add('text-break')
         cell2.appendChild(link)
     })
 }

diff --git a/src/js/popup.js b/src/js/popup.js
@@ -7,12 +7,12 @@ document.getElementById('filter-form').addEventListener('submit', filterForm)
 document.getElementById('links-form').addEventListener('submit', linksForm)
 document.getElementById('links-text').addEventListener('input', updateLinks)
 
-document
-    .querySelectorAll('[data-filter]')
-    .forEach((el) => el.addEventListener('click', filterForm))
 document
     .querySelectorAll('a[href]')
     .forEach((el) => el.addEventListener('click', popupLinks))
+document
+    .querySelectorAll('[data-filter]')
+    .forEach((el) => el.addEventListener('click', filterForm))
 document
     .querySelectorAll('#options-form input')
     .forEach((el) => el.addEventListener('change', saveOptions))
@@ -59,7 +59,7 @@ function createFilterLink(number, value = '') {
     const a = document.createElement('a')
     a.textContent = value
     a.dataset.pattern = value
-    a.classList.add('dropdown-item', 'small')
+    a.classList.add('dropdown-item', 'small', 'text-break')
     a.setAttribute('role', 'button')
     a.addEventListener('click', filterForm)
     li.appendChild(a)