Styling and DOM structure adjustments

guide.html

@@ -81,7 +81,7 @@
       <div id="links">
         <a
           href="settings.html"
-          >🡄 Back to Settings</a
+          >⇦ Back to Settings</a
         >
       </div>
       <div id="content">
@@ -184,7 +184,7 @@
           Once you click on one of these "select all" buttons, that settings
           will become the new default for any wikis that are added to the extension in the future.
         </p>
-        <h2>Have questions?</h2>
+        <h2>Have questions or feedback?</h2>
         <p>
           If you're stuck or have questions, please don't hesitate to get in touch via the
           <a href="https://getindie.wiki/#contact">contact details</a>

settings.html

@@ -176,7 +176,7 @@
         font-size: 0.8rem;
         white-space: nowrap;
         position: relative;
-        padding: 0px 2px;
+        padding: 0 1em;
       }
       #toggles > div:hover {
         background-color: #e8f0fe;
@@ -185,30 +185,38 @@
         cursor: pointer;
       }
       #toggles > div {
-        line-height: 1.8em;
+        line-height: 2em;
+        display: flex;
+        flex-direction: row;
+        width: 100%;
+      }
+      #toggles .inputsContainer {
+        float: right;
       }
       #toggles img {
-        width: 16px;
-        height: 16px;
-        max-height: 1.2em;
+        width: 1.2em;
+        height: 1.2em;
+        vertical-align: middle;
       }
       #toggles a {
-        float: right;
-        padding-right: 10px;
-        clear: both;
+        line-height: 1.2em;
+        padding-right: .5em;
       }
       #toggles span {
-        padding-left: .7em;
+        flex-grow: 1;
+        overflow: hidden;
+        text-overflow: ellipsis;
       }
       #togglesKey {
-        padding-left: 7px;
+        padding-right: 15px;
+        text-align: right;
       }
       #togglesKey > div {
         display: inline-block;
         width: 17px;
       }
 
-      #togglesKey>div:last-child, #toggles>div>label:last-of-type {
+      #togglesKey>div:last-child, #toggles>div>div>label:last-of-type {
         margin-left: .5em;
       }
 
@@ -339,7 +347,7 @@
           </button>
           <button id="setAllAlert">
             <img src="images/toggle-alert.png" width="10" alt="" /> Set all to
-            alert of indie wikis
+            notify of indie wikis
           </button>
           <br />
           <button id="setAllSearchFilter">

settings.js

@@ -267,7 +267,8 @@ async function loadOptions(lang) {
         labelFilter.appendChild(inputFilter);
         labelFilter.appendChild(inputFilterText);
 
-        // Output icon
+        // Output wiki info:
+        let wikiInfo = document.createElement('span');
         let iconLink = document.createElement("a");
         iconLink.href = 'https://' + sites[i].destination_base_url + sites[i].destination_content_path;
         iconLink.title = 'Visit ' + sites[i].destination;
@@ -276,19 +277,19 @@ async function loadOptions(lang) {
         icon.src = 'favicons/' + lang.toLowerCase() + '/' + sites[i].destination_icon;
         icon.alt = 'Visit ' + sites[i].destination;
         iconLink.appendChild(icon);
-
-        // Output text:
-        let text = document.createElement('span');
-        text.textContent = sites[i].origins_label + ' » ' + sites[i].destination;
+        wikiInfo.appendChild(iconLink);
+        wikiInfo.innerHTML += sites[i].origins_label + ' » ' + sites[i].destination;
         let siteContainer = document.createElement("div");
 
-        siteContainer.appendChild(labelDisabled);
-        siteContainer.appendChild(labelRedirect);
-        siteContainer.appendChild(labelAlert);
-        siteContainer.appendChild(labelFilter);
-        siteContainer.appendChild(iconLink);
-        siteContainer.appendChild(text);
-
+        // Output inputs container:
+        let inputsContainer = document.createElement('div');
+        inputsContainer.appendChild(labelDisabled);
+        inputsContainer.appendChild(labelRedirect);
+        inputsContainer.appendChild(labelAlert);
+        inputsContainer.appendChild(labelFilter);
+        inputsContainer.classList = 'inputsContainer';
+        siteContainer.appendChild(wikiInfo);
+        siteContainer.appendChild(inputsContainer);
         toggleContainer.appendChild(siteContainer);
       }
     }