From dcf1a1c71fd97d8a26e81552933a9cea59fd61d0 Mon Sep 17 00:00:00 2001
From: AKORA <65976562+A-K-O-R-A@users.noreply.github.com>
Date: Mon, 7 Oct 2024 15:19:20 +0200
Subject: [PATCH] Switch to list instead of table

---
 keepassxc-browser/options/options.html | 133 ++++++++++++-------------
 keepassxc-browser/options/options.js   |  38 ++++---
 2 files changed, 86 insertions(+), 85 deletions(-)

diff --git a/keepassxc-browser/options/options.html b/keepassxc-browser/options/options.html
index 6da319a..454ef89 100644
--- a/keepassxc-browser/options/options.html
+++ b/keepassxc-browser/options/options.html
@@ -731,89 +731,84 @@
                     <span class="invalid-feedback d-block" data-i18n="optionsSitePreferencesManualAddHelp"></span>
                   </div>
 
-                  <div class="table-responsive">
-                    <table class="table table-sm table-striped table-bordered">
+                  <div class="table-responsive mt-3">
+                    <ul id="sitePreferencesTable" class="list-group list-group-flush">
                       <caption data-i18n="optionsSitePreferencesTableCaption"></caption>
-                      <thead>
-                        <tr>
-                          <th scope="col"><span data-i18n="optionsColumnPageURL"></span></th>
-                        </tr>
-                      </thead>
-                      <tbody>
-                        <tr class="empty">
-                          <td colspan="5"><span data-i18n="optionsSitePreferencesNotFound"></span></td>
-                        </tr>
-                        <tr class="clone d-none">
-                          <td class="text-nowrap">
-                            <details>
-                              <summary>
-                                <span></span>
-                              </summary>
 
-                              <div class="form-group col-sm-3 pb-2">
-                                <label for="ignore" data-i18n="optionsColumnIgnore"></label>
-                                <select class="form-select form-select-sm" id="ignore" name="ignore" data-i18n="[title]optionsSitePreferencesSelect">
-                                    <option value="ignoreNothing" data-i18n="optionsSelectionNothing"></option>
-                                    <option value="ignoreNormal" data-i18n="optionsSelectionNormal"></option>
-                                    <option value="ignoreAutoSubmit" data-i18n="optionsSelectionAutoSubmit"></option>
-                                    <option value="ignoreFull" data-i18n="optionsSelectionFull"></option>
-                                </select>
+                      <li class="empty list-group-item">
+                        <span data-i18n="optionsSitePreferencesNotFound"></span>
+                      </li>
+
+                      <li class="clone d-none list-group-item">
+                        <details>
+                          <summary>
+                            <span></span>
+                          </summary>
+
+                          <div class="m-3">
+                            <div class="form-group col-sm-3 mb-3">
+                              <label for="ignore" class="form-label" data-i18n="optionsColumnIgnore"></label>
+                              <select class="form-select form-select-sm" id="ignore" name="ignore" data-i18n="[title]optionsSitePreferencesSelect">
+                                  <option value="ignoreNothing" data-i18n="optionsSelectionNothing"></option>
+                                  <option value="ignoreNormal" data-i18n="optionsSelectionNormal"></option>
+                                  <option value="ignoreAutoSubmit" data-i18n="optionsSelectionAutoSubmit"></option>
+                                  <option value="ignoreFull" data-i18n="optionsSelectionFull"></option>
+                              </select>
+                            </div>
+
+                            <div class="form-group">
+                              <div class="form-check">
+                                <label for="usernameOnly" data-i18n="optionsColumnUsernameOnly"></label>
+                                <input class="form-check-input" type="checkbox" id="usernameOnly" name="usernameOnly" value="false" data-i18n="[title]optionsColumnUsernameOnly">
                               </div>
+                            </div>
 
-                              <div class="form-group">
-                                <div class="form-check">
-                                  <label for="usernameOnly" data-i18n="optionsColumnUsernameOnly"></label>
-                                  <input class="form-check-input" type="checkbox" id="usernameOnly" name="usernameOnly" value="false" data-i18n="[title]optionsColumnUsernameOnly">
-                                </div>
+                            <div class="form-group">
+                              <div class="form-check">
+                                <label for="improvedFieldDetection" data-i18n="optionsColumnImprovedInputFieldDetection"></label>
+                                <input class="form-check-input" type="checkbox" id="improvedFieldDetection" name="improvedFieldDetection" value="false" data-i18n="[title]optionsColumnImprovedInputFieldDetection">
                               </div>
+                            </div>
 
-                              <div class="form-group">
-                                <div class="form-check">
-                                  <label for="improvedFieldDetection" data-i18n="optionsColumnImprovedInputFieldDetection"></label>
-                                  <input class="form-check-input" type="checkbox" id="improvedFieldDetection" name="improvedFieldDetection" value="false" data-i18n="[title]optionsColumnImprovedInputFieldDetection">
-                                </div>
+                            <div class="form-group">
+                              <div class="form-check">
+                                <label for="allowIframes" data-i18n="optionsColumnAllowIframes"></label>
+                                <input class="form-check-input" type="checkbox" id="allowIframes" name="allowIframes" value="false" data-i18n="[title]optionsColumnAllowIframes">
                               </div>
+                            </div>
 
-                              <div class="form-group">
-                                <div class="form-check">
-                                  <label for="allowIframes" data-i18n="optionsColumnAllowIframes"></label>
-                                  <input class="form-check-input" type="checkbox" id="allowIframes" name="allowIframes" value="false" data-i18n="[title]optionsColumnAllowIframes">
-                                </div>
+                            <div class="form-group">
+                              <div class="form-check">
+                                <label for="autoSubmit" data-i18n="optionsCheckboxAutoSubmit"></label>
+                                <input class="form-check-input" type="checkbox" id="autoSubmit" name="autoSubmit" value="false" data-i18n="[title]optionsColumnAutoSubmit">
+                                <div class="form-text" data-i18n="optionsAutoSubmitHelpText"></div>
                               </div>
+                            </div>
 
-                              <div class="form-group">
-                                <div class="form-check">
-                                  <label for="autoSubmit" data-i18n="optionsCheckboxAutoSubmit"></label>
-                                  <input class="form-check-input" type="checkbox" id="autoSubmit" name="autoSubmit" value="false" data-i18n="[title]optionsColumnAutoSubmit">
-                                  <div class="form-text" data-i18n="optionsAutoSubmitHelpText"></div>
-                                </div>
+                            <div class="form-group">
+                              <div class="form-check">
+                                <label for="autoFillCredentials" data-i18n="optionsCheckboxAutoFillSingleEntry"></label>
+                                <input class="form-check-input" type="checkbox" id="autoFillCredentials" name="autoFillCredentials" value="false" data-i18n="[title]optionsColumnAutoFillCredentials">
+                                <div class="form-text" data-i18n="optionsAutoFillSingleEntryHelpText"></div>
                               </div>
+                            </div>
 
-                              <div class="form-group">
-                                <div class="form-check">
-                                  <label for="autoFillCredentials" data-i18n="optionsCheckboxAutoFillSingleEntry"></label>
-                                  <input class="form-check-input" type="checkbox" id="autoFillCredentials" name="autoFillCredentials" value="false" data-i18n="[title]optionsColumnAutoFillCredentials">
-                                  <div class="form-text" data-i18n="optionsAutoFillSingleEntryHelpText"></div>
-                                </div>
+                            <div class="form-group">
+                              <div class="form-check">
+                                <label for="autoFillTOTP" data-i18n="optionsCheckboxAutoFillSingleTotp"></label>
+                                <input class="form-check-input" type="checkbox" id="autoFillTOTP" name="autoFillTOTP" value="false" data-i18n="[title]optionsColumnAutoFillTOTP">
+                                <div class="form-text" data-i18n="optionsAutoFillSingleTotpHelpText"></div>
                               </div>
+                            </div>
 
-                              <div class="form-group">
-                                <div class="form-check">
-                                  <label for="autoFillTOTP" data-i18n="optionsCheckboxAutoFillSingleTotp"></label>
-                                  <input class="form-check-input" type="checkbox" id="autoFillTOTP" name="autoFillTOTP" value="false" data-i18n="[title]optionsColumnAutoFillTOTP">
-                                  <div class="form-text" data-i18n="optionsAutoFillSingleTotpHelpText"></div>
-                                </div>
-                              </div>
-
-                              <button class="btn btn-sm delete btn-danger btn" data-i18n="[title]removeSitePreferencesButtonTitle">
-                                <i class="fa fa-remove" aria-hidden="true"></i>
-                                <span data-i18n="optionsButtonRemove"></span>
-                              </button>
-                            </details>
-                          </td>
-                        </tr>
-                      </tbody>
-                    </table>
+                            <button id="deleteButton" class="btn btn-sm delete btn-danger btn mt-3" data-i18n="[title]removeSitePreferencesButtonTitle">
+                              <i class="fa fa-remove" aria-hidden="true"></i>
+                              <span data-i18n="optionsButtonRemove"></span>
+                            </button>
+                          </div>
+                        </details>
+                      </li>
+                    </ul>
                   </div>
 
                   <div id="dialogDeleteSite" class="modal fade" tabindex="-1" role="dialog">
diff --git a/keepassxc-browser/options/options.js b/keepassxc-browser/options/options.js
index a012deb..45cfa91 100644
--- a/keepassxc-browser/options/options.js
+++ b/keepassxc-browser/options/options.js
@@ -525,17 +525,17 @@ options.initSitePreferences = function() {
     const removeButtonClicked = function(e) {
         e.preventDefault();
 
-        const closestTr = this.closest('tr');
-        $('#dialogDeleteSite').setAttribute('url', closestTr.getAttribute('url'));
-        $('#dialogDeleteSite').setAttribute('tr-id', closestTr.getAttribute('id'));
-        $('#dialogDeleteSite .modal-body strong').textContent = closestTr.children[0].textContent;
+        const closestLi = this.closest('li');
+        $('#dialogDeleteSite').setAttribute('url', closestLi.getAttribute('url'));
+        $('#dialogDeleteSite').setAttribute('tr-id', closestLi.getAttribute('id'));
+        $('#dialogDeleteSite .modal-body strong').textContent = closestLi.children[0].textContent;
 
         dialogDeleteSiteModal.show();
     };
 
     const checkboxClicked = function() {
-        const closestTr = this.closest('tr');
-        const url = closestTr.getAttribute('url');
+        const closestLi = this.closest('li');
+        const url = closestLi.getAttribute('url');
 
         for (const site of options.settings['sitePreferences']) {
             if (site.url === url) {
@@ -559,8 +559,8 @@ options.initSitePreferences = function() {
     };
 
     const selectionChanged = function() {
-        const closestTr = this.closest('tr');
-        const url = closestTr.getAttribute('url');
+        const closestLi = this.closest('li');
+        const url = closestLi.getAttribute('url');
 
         for (const site of options.settings['sitePreferences']) {
             if (site.url === url) {
@@ -576,10 +576,10 @@ options.initSitePreferences = function() {
         row.setAttribute('url', url);
         row.setAttribute('id', 'tr-scf' + newIndex);
 
-        const details = row.children[0].children[0];
+        const details = row.children[0];
         details.children[0].children[0].textContent = url;
-        details.children[2].children[0].value = ignore;
-        details.children[2].children[0].addEventListener('change', selectionChanged);
+        details.querySelector('#ignore').value = ignore;
+        details.querySelector('#ignore').addEventListener('change', selectionChanged);
         details.querySelector('#usernameOnly').checked = usernameOnly;
         details.querySelector('#usernameOnly').addEventListener('change', checkboxClicked);
         details.querySelector('#improvedFieldDetection').checked = improvedFieldDetection;
@@ -592,9 +592,9 @@ options.initSitePreferences = function() {
         details.querySelector('#autoFillCredentials').addEventListener('change', checkboxClicked);
         details.querySelector('#autoFillTOTP').checked = autoFillTOTP;
         details.querySelector('#autoFillTOTP').addEventListener('change', checkboxClicked);
-        details.children[8].addEventListener('click', removeButtonClicked);
+        details.querySelector('#deleteButton').addEventListener('click', removeButtonClicked);
 
-        $('#tab-site-preferences table tbody').append(row);
+        $('#tab-site-preferences #sitePreferencesTable').append(row);
     };
 
     $('#dialogDeleteSite .modal-footer button.yes').addEventListener('click', function(e) {
@@ -649,11 +649,13 @@ options.initSitePreferences = function() {
         }
 
         const newIndex = options.settings['sitePreferences'].length + 1;
-        const rowClone = $('#tab-site-preferences table tr.clone').cloneNode(true);
+        const rowClone = $('#tab-site-preferences #sitePreferencesTable li.clone').cloneNode(true);
         rowClone.classList.remove('clone', 'd-none');
 
+
         addNewRow(rowClone, newIndex, value, IGNORE_NOTHING, false, false, false, false, false, false);
-        $('#tab-site-preferences table tbody tr.empty').hide();
+        $('#tab-site-preferences #sitePreferencesTable li.empty').hide();
+
 
         options.settings['sitePreferences'].push({
             url: value,
@@ -666,7 +668,7 @@ options.initSitePreferences = function() {
         manualUrl.value = '';
     });
 
-    const rowClone = $('#tab-site-preferences table tr.clone').cloneNode(true);
+    const rowClone = $('#tab-site-preferences ul li.clone').cloneNode(true);
     rowClone.classList.remove('clone', 'd-none');
     let counter = 1;
     if (options.settings['sitePreferences']) {
@@ -686,6 +688,10 @@ options.initSitePreferences = function() {
             ++counter;
         }
     }
+
+    if (counter > 1) {
+      $('#tab-site-preferences #sitePreferencesTable li.empty').hide();
+    }
 };
 
 options.initAbout = function() {