Tweak CSS Update clones

cssnr · Oct 26, 2024 · 28fa5b5 · 28fa5b5
1 parent bb6088b
commit 28fa5b5
Show file tree

Hide file tree

Showing 9 changed files with 49 additions and 27 deletions.
diff --git a/src/css/main.css b/src/css/main.css
@@ -1,19 +1,37 @@
 /* CSS for global */
 
+:root,
+[data-bs-theme='light'] {
+    --bs-emphasis-bg: var(--bs-white);
+    --bs-emphasis-bg-rgb: var(--bs-white-rgb);
+}
+
+[data-bs-theme='dark'] {
+    --bs-emphasis-bg: var(--bs-black);
+    --bs-emphasis-bg-rgb: var(--bs-black-rgb);
+}
+
 svg {
     height: 1em;
     width: 1em;
     margin-bottom: 0.15em;
 }
 
+#toast-container {
+    z-index: 3;
+}
+
 #back-to-top {
     position: fixed;
     bottom: 64px;
     right: 20px;
     display: none;
-    z-index: 6;
+    z-index: 3;
 }
 
-#toast-container {
-    z-index: 5;
+.text-ellipsis {
+    max-width: 100%;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
 }
diff --git a/src/css/permissions.css b/src/css/permissions.css
@@ -0,0 +1,5 @@
+/* CSS for permissions.html */
+
+body {
+    min-width: 340px;
+}
diff --git a/src/html/links.html b/src/html/links.html
@@ -192,11 +192,11 @@ <h5 class="modal-title">Keyboard Shortcuts <i class="fa-regular fa-keyboard ms-2
     <div id="toast-container" class="toast-container position-fixed bottom-0 end-0 p-3"></div>
 </div> <!-- toast-container -->
 
-<div class="d-none">
+<div id="clones" class="d-none">
     <div class="toast align-items-center border-0" role="alert" aria-live="assertive" aria-atomic="true" data-bs-delay="5000">
         <div class="toast-body"></div>
     </div>
-</div> <!-- d-none -->
+</div> <!-- clones -->
 
 <button type="button" class="btn btn-outline-primary" id="back-to-top">
     <i class="fa-regular fa-square-caret-up"></i>

diff --git a/src/html/options.html b/src/html/options.html
@@ -13,7 +13,7 @@
 </head>
 <body>
 
-<div class="container-fluid py-3 px-0 px-sm-3">
+<div class="container-fluid py-0 py-sm-3 px-0 px-sm-3">
 <div class="col-12 col-md-10 col-lg-8 col-xxl-6 mx-auto">
 <div class="card">
 <div class="card-body">
@@ -96,7 +96,7 @@ <h1>Link Extractor</h1>
                 <i class="fa-solid fa-circle-info" data-bs-toggle="tooltip" data-bs-placement="bottom"
                    data-bs-title="Show Favicon on Lazy Tabs"></i>
             </div>
-            <div id="lazyIcons" class="row ms-4" style="display: none;">
+            <div id="lazyIcons" class="row ms-1" style="display: none;">
                 <div class="form-check col-auto">
                     <input id="default" name="radioFavicon" class="form-check-input" type="radio">
                     <label for="default" class="form-check-label fs-5 d-flex align-items-center h-100">
@@ -273,7 +273,7 @@ <h1>Link Extractor</h1>
         <a class="link-body-emphasis text-decoration-none" target="_blank" rel="noopener"
            href="https://link-extractor.cssnr.com/faq/">FAQ</a>
         <span class="mx-2">&bull;</span>
-        <a class="link-body-emphasis text-decoration-none" target="_blank" rel="noopener"
+        <a class="link-body-emphasis text-decoration-none d-inline-block" target="_blank" rel="noopener"
            href="https://github.com/cssnr/link-extractor/issues">Report Issue</a>
     </div>
 </div> <!-- card-body -->
@@ -285,15 +285,15 @@ <h1>Link Extractor</h1>
     <div id="toast-container" class="toast-container position-fixed bottom-0 end-0 p-3"></div>
 </div> <!-- toast-container -->
 
-<div id="clone" class="d-none">
+<div id="clones" class="d-none">
     <i class="fa-regular fa-trash-can"></i>
     <i class="fa-solid fa-grip"></i>
     <form id="update-filter" name="update-filter"><button type="submit"></button></form>
     <input class="form-control form-control-sm filter-edit" type="text" form="update-filter">
     <div class="toast align-items-center border-0" role="alert" aria-live="assertive" aria-atomic="true" data-bs-delay="5000">
         <div class="toast-body"></div>
     </div>
-</div> <!-- d-none -->
+</div> <!-- clones -->
 
 <button type="button" class="btn btn-outline-primary" id="back-to-top">
     <i class="fa-regular fa-square-caret-up"></i>

diff --git a/src/html/permissions.html b/src/html/permissions.html
@@ -8,14 +8,15 @@
     <link rel="stylesheet" type="text/css" href="../dist/bootstrap/bootstrap.min.css">
     <link rel="stylesheet" type="text/css" href="../dist/fontawesome/css/all.min.css">
     <link rel="stylesheet" type="text/css" href="../css/main.css">
+    <link rel="stylesheet" type="text/css" href="../css/permissions.css">
     <script type="text/javascript" src="../js/theme.js"></script>
 </head>
 <body class="h-100">
 
-<div class="container-fluid p-3 h-100">
+<div class="container-fluid py-0 py-sm-3 px-0 px-sm-3 h-100">
 <div class="d-flex align-items-center h-100">
-<div class="col-xl-6 col-md-8 col-12 m-auto">
-<div class="card p-3 ">
+<div class="col-12 col-md-10 col-lg-8 col-xxl-6 mx-auto">
+<div class="card p-3">
     <div class="d-flex justify-content-center align-items-center mb-2">
         <img src="../images/logo48.png" class="me-2" height="48" width="48"
              alt="Auto Auth" title="Auto Auth">
@@ -53,7 +54,7 @@ <h1>Link Extractor</h1>
         <a class="link-body-emphasis text-decoration-none" target="_blank" rel="noopener"
            href="https://link-extractor.cssnr.com/faq/">FAQ</a>
         <span class="mx-2">&bull;</span>
-        <a class="link-body-emphasis text-decoration-none" target="_blank" rel="noopener"
+        <a class="link-body-emphasis text-decoration-none d-inline-block" target="_blank" rel="noopener"
            href="https://link-extractor.cssnr.com/#support">Get Support</a>
     </div>
 </div> <!-- card -->
@@ -69,11 +70,11 @@ <h1>Link Extractor</h1>
     <div id="toast-container" class="toast-container position-fixed bottom-0 end-0 p-3"></div>
 </div> <!-- toast -->
 
-<div class="d-none">
+<div id="clones" class="d-none">
     <div class="toast align-items-center border-0" role="alert" aria-live="assertive" aria-atomic="true" data-bs-delay="10000">
         <div class="toast-body"></div>
     </div>
-</div> <!-- d-none -->
+</div> <!-- clones -->
 
 <script type="text/javascript" src="../dist/jquery/jquery.min.js"></script>
 <script type="text/javascript" src="../dist/bootstrap/bootstrap.bundle.min.js"></script>

diff --git a/src/html/popup.html b/src/html/popup.html
@@ -155,11 +155,11 @@
     <div id="toast-container" class="toast-container position-fixed bottom-0 end-0 p-3"></div>
 </div> <!-- toast-container -->
 
-<div class="d-none">
+<div id="clones" class="d-none">
     <div class="toast align-items-center border-0" role="alert" aria-live="assertive" aria-atomic="true" data-bs-delay="5000">
         <div class="toast-body small"></div>
     </div>
-</div> <!-- d-none -->
+</div> <!-- clones -->
 
 <script type="text/javascript" src="../dist/jquery/jquery.min.js"></script>
 <script type="text/javascript" src="../dist/bootstrap/bootstrap.bundle.min.js"></script>

diff --git a/src/js/main.js b/src/js/main.js
@@ -63,7 +63,7 @@ function onScroll() {
  */
 function showToast(message, type = 'primary') {
     console.debug(`showToast: ${type}: ${message}`)
-    const clone = document.querySelector('.d-none .toast')
+    const clone = document.querySelector('#clones .toast')
     const container = document.getElementById('toast-container')
     if (!clone || !container) {
         return console.warn('Missing clone or container:', clone, container)

diff --git a/src/js/options.js b/src/js/options.js
@@ -81,7 +81,7 @@ async function initOptions() {
     // noinspection ES6MissingAwait
     checkPerms()
     chrome.storage.sync.get(['options', 'patterns']).then((items) => {
-        console.debug('options:', items.options)
+        // console.debug('options:', items.options)
         updateOptions(items.options)
         updateTable(items.patterns)
     })
@@ -93,8 +93,8 @@ async function initOptions() {
  * @param {Object} data
  */
 function updateTable(data) {
-    const faTrash = document.querySelector('#clone > .fa-trash-can')
-    const faGrip = document.querySelector('#clone > .fa-grip')
+    const faTrash = document.querySelector('#clones > .fa-trash-can')
+    const faGrip = document.querySelector('#clones > .fa-grip')
     filtersTbody.innerHTML = ''
     data.forEach((value, i) => {
         const row = filtersTbody.insertRow()
@@ -133,7 +133,6 @@ function updateTable(data) {
         grip.title = 'Drag'
         cell3.appendChild(grip)
         cell3.setAttribute('draggable', 'true')
-
         cell3.addEventListener('dragstart', dragStart)
     })
     filtersTbody.addEventListener('dragover', dragOver)
@@ -235,7 +234,6 @@ async function insertInput(event) {
     console.debug('value:', value)
     const input = document.getElementById(id)
     console.debug('input:', input)
-    // input.value += value
     const pos = input.selectionStart
     console.debug('pos:', pos)
     const cur = input.value
@@ -456,7 +454,7 @@ function beginEditing(event, idx) {
     const value = link.textContent
     console.log('value:', value)
 
-    const input = document.querySelector('#clone > input').cloneNode()
+    const input = document.querySelector('#clones > input').cloneNode()
     input.value = value
     input.dataset.idx = idx
 
@@ -487,7 +485,7 @@ async function setShortcuts(names, selector = '#keyboard-shortcuts') {
     // console.log('commands:', commands)
     for (const name of names) {
         const command = commands.find((x) => x.name === name)
-        console.debug('command:', command)
+        // console.debug('command:', command)
         if (!command) {
             console.warn('Command Not Found:', command)
         }

diff --git a/src/js/popup.js b/src/js/popup.js
@@ -149,7 +149,7 @@ function createFilterLink(number, value = '') {
     const a = document.createElement('a')
     a.textContent = value
     a.dataset.pattern = value
-    a.classList.add('dropdown-item', 'small', 'text-break')
+    a.classList.add('dropdown-item', 'small', 'text-ellipsis')
     a.setAttribute('role', 'button')
     a.addEventListener('click', filterForm)
     li.appendChild(a)