Two new view modes for ban list on options page

src/options.html

@@ -45,10 +45,63 @@ <h1 title="Keep your feed clean">HabroSanitizer</h1>
                     </form>
                 </section>
 
-                <section class="ban-list-info">Ban list</section>
+                <section class="ban-list-info">
+                    <span>Ban list</span>
+                    <span class="ban-list-info-buttons">
+                        List view mode:
+                        <div class="custom-control-radio" title="Single column list">
+                            <input type="radio" name="ban-grid-mode" value="single" id="list-mode-grid-single"/>
+                            <label for="list-mode-grid-single">
+                                <svg
+                                    width="20px"
+                                    height="20px"
+                                    fill="none"
+                                    stroke="currentColor"
+                                    stroke-width="2px"
+                                    stroke-linecap="round"
+                                    stroke-linejoin="round"
+                                >
+                                    <use xlink:href="./asset/sprites.svg#list" />
+                                </svg>
+                            </label>
+                        </div>
+                        <div class="custom-control-radio" title="Grid by rows">
+                            <input type="radio" name="ban-grid-mode" value="rows" id="list-mode-grid-rows">
+                            <label for="list-mode-grid-rows">
+                                <svg
+                                    width="20px"
+                                    height="20px"
+                                    fill="none"
+                                    stroke="currentColor"
+                                    stroke-width="2px"
+                                    stroke-linecap="round"
+                                    stroke-linejoin="round"
+                                >
+                                    <use xlink:href="./asset/sprites.svg#grid-rows" />
+                                </svg>
+                            </label>
+                        </div>
+                        <div class="custom-control-radio" title="Grid by columns" id="div-list-mode-grid-columns">
+                            <input type="radio" name="ban-grid-mode" value="columns" id="list-mode-grid-columns">
+                            <label for="list-mode-grid-columns">
+                                <svg
+                                    width="20px"
+                                    height="20px"
+                                    fill="none"
+                                    stroke="currentColor"
+                                    stroke-width="2px"
+                                    stroke-linecap="round"
+                                    stroke-linejoin="round"
+                                >
+                                    <use xlink:href="./asset/sprites.svg#grid-columns" />
+                                </svg>
+                            </label>
+                        </div>
+                    </span>
+                </section>
 
                 <section class="ban-list-section">
-                    <ul class="ban-list"></ul>
+                    <div class="ban-list"></div>
                 </section>
 
                 <section class="json-section">

src/options.js

@@ -18,10 +18,13 @@ import { DnD } from './dragAndDrop.js';
             return ``;
         }
 
+        document.documentElement.style.setProperty('--grid-num-items', banned.length);
+
         return banned
-            .map(
-                ({ name }) =>
-                    `<li>
+            .map(({ name }) => name) // creating a new array for sorting
+            .sort((a, b) => a.localeCompare(b)) // 'sort' method modifies input array
+            .map((name) =>
+                    `<div>
                     <span class="lbl">${name}</span>
                     <button class="btn round" data-author-name="${name}">
                     <svg width="20px"
@@ -36,9 +39,8 @@ import { DnD } from './dragAndDrop.js';
                         <use xlink:href="./asset/sprites.svg#minus"/>
                     </svg>
                     </button>
-                    </li>`
+                    </div>`
             )
-            .reverse()
             .join('');
     }
 
@@ -96,6 +98,45 @@ import { DnD } from './dragAndDrop.js';
         $banList.addEventListener('click', (e) => store.removeFromBan(e.target.getAttribute('data-author-name')));
     }
 
+    /**
+     * Initialize list view mode controls
+     * @param {Storage} store
+     */
+    function initBanListViewMode(store) {
+        const $banList = document.querySelector('.ban-list');
+
+        document.getElementById('list-mode-grid-single').addEventListener('click', (e) => {
+            $banList.classList.remove('ban-list-grid', 'ban-list-grid-columns');
+            store.setListViewMode(e.target.value);
+        });
+
+        document.getElementById('list-mode-grid-rows').addEventListener('click', (e) => {
+            $banList.classList.remove('ban-list-grid-columns');
+            $banList.classList.add('ban-list-grid');
+            store.setListViewMode(e.target.value);
+        });
+
+        document.getElementById('list-mode-grid-columns').addEventListener('click', (e) => {
+            $banList.classList.add('ban-list-grid', 'ban-list-grid-columns');
+            store.setListViewMode(e.target.value);
+        });
+
+        let cbIndex;
+        switch (settings.listViewMode) {
+            case 'rows':
+                $banList.classList.add('ban-list-grid');
+                cbIndex = 1;
+                break;
+            case 'columns':
+                $banList.classList.add('ban-list-grid', 'ban-list-grid-columns');
+                cbIndex = 2;
+                break;
+            default:
+                cbIndex = 0;
+        }
+        document.getElementsByName('ban-grid-mode')[cbIndex].checked = true;
+    }
+
     /**
      * @param {Storage} store
      */
@@ -141,6 +182,7 @@ import { DnD } from './dragAndDrop.js';
 
     initBanForm(storage);
     initBanList(storage);
+    initBanListViewMode(storage);
     initDnD(storage);
     initQuickActions(storage);
     initSaveConfigBtn(storage);

src/storage.js

@@ -78,6 +78,17 @@ export class Storage {
         return this._saveSettings(settings);
     }
 
+    /**
+     * Update and save list view mode
+     * @param {integer} mode
+     * @return {Promise} promise
+     */
+    async setListViewMode(mode) {
+        const settings = await this.loadSettings();
+        settings.listViewMode = mode;
+        return this._saveSettings(settings);
+    }
+
     /**
      * Subscribe to settings change event, watched by settings key
      * @param {string} key

src/styles/main.css

@@ -18,6 +18,10 @@
     --max-width: 1024px;
     --button-text: var(--primary-color);
     --input-height: 2em;
+    --grid-num-items: 50;
+    --grid-num-columns: 3;
+    --grid-cell-width: 15em;
+    --grid-cell-height: 2.5em;
 }
 
 @media only screen and (max-width: 1600px) {
@@ -26,6 +30,18 @@
     }
 }
 
+@media only screen and (max-width: 800px) {
+    :root {
+        --grid-num-columns: 2;
+    }
+}
+
+@media only screen and (max-width: 600px) {
+    :root {
+        --grid-num-columns: 1;
+    }
+}
+
 html,
 body {
     margin: 0;
@@ -92,32 +108,56 @@ body {
     padding: 2em 1.6em 1em 1.6em;
     background-color: var(--dark-light);
     color: var(--lighter);
+    display: flex;
+    align-items: center;
+}
+
+.ban-list-info-buttons {
+    align-items: center;
+    display: flex;
+    margin-left: auto;
 }
 
 .ban-list-section {
     background-color: var(--dark-light);
 }
 
-.ban-list-section li {
-    list-style: none;
+.ban-list > div {
     display: flex;
     align-items: center;
     background-color: var(--dark-light);
     padding: 0.6em 1.6em 0.6em 1.6em;
 }
 
-.ban-list-section li:nth-child(odd) {
+.ban-list-grid > div {
+    border: thin solid;
+    justify-content: space-between;
+    padding: 2px;
+}
+
+.ban-list > div:nth-child(odd) {
     background-color: var(--dark-light-07);
 }
 
-.ban-list-section li .lbl {
+.ban-list-section .lbl {
     font-family: 'Courier New', Courier, monospace;
-    font-size: 1.5em;
     color: var(--lighter);
     line-height: 1em;
     padding-right: 0.3em;
 }
 
+.ban-list-grid {
+    display: grid;
+    grid-gap: 1em 0.4em;
+    grid-template-columns: repeat(auto-fit, minmax(var(--grid-cell-width), 1fr));
+}
+
+.ban-list-grid-columns {
+    grid-auto-flow: column;
+    grid-template-rows: repeat(calc(var(--grid-num-items) / var(--grid-num-columns)), var(--grid-cell-height));
+    grid-gap: 0.4em 1em;
+}
+
 .json-section {
     display: flex;
     align-items: center;
@@ -172,3 +212,31 @@ body {
     margin: 1em 0;
     padding: 1em;
 }
+
+.custom-control-radio {
+    margin-left: 0.4em;
+}
+
+.custom-control-radio input {
+    display: none;
+}
+
+.custom-control-radio input + label {
+    padding: 0.7em 0.5em 0;
+}
+
+.custom-control-radio input:checked + label {
+    background-color: var(--dark-light-07);
+    border: solid thin;
+}
+
+.custom-control-radio label:hover {
+    background-color: var(--dark-light-07);
+}
+
+@supports not ( -moz-appearance:none ){
+    /* Chromium can't calc integer division: see https://bugs.chromium.org/p/chromium/issues/detail?id=931216 */
+    #div-list-mode-grid-columns {
+        display: none;
+    }
+}