Generate tabs CSS instead of using SCSS for covers

app/styles/index.scss

@@ -39,7 +39,6 @@
 @import '../../node_modules/picnic/src/plugins/tooltip/plugin';
 
 // Custom global styling
-@import './picnic-customizations/tabs';
 @import './picnic-customizations/custom';
 
 // View styling

app/styles/picnic-customizations/_tabs.scss

@@ -1,42 +0,0 @@
-$tabs: five, six, seven, eight, nine, ten, eleven, twelve, thirteen, fourteen, fifteen, sixteen, seventeen, eighteen, nineteen, twenty;
-
-.tabs {
-  &.one {
-    > .row {
-      width: 100%;
-      left: 0;
-    }
-
-    > input:nth-of-type(1):checked ~ .row {
-      margin-left: 0;
-    }
-    
-    > label img {
-      display: none;
-    }
-  }
-  
-  // This is probably really stupid, but whatever. I need more than the 4 built-in tabs that Picnic provides
-  @for $tab-index from 1 through length($tabs) {
-    $number: $tab-index + 4;
-    $tab: nth($tabs, $tab-index);
-
-    &.#{$tab} {
-      > .row {
-        width: 100% * $number;
-        left: -100% * ($number - 1);
-      }
-
-      @for $item from 1 through ($number - 1) {
-        > input:nth-of-type(#{$item}):checked ~ .row {
-          margin-left: (100% * ($number - 1)) - (100% * ($item - 1));// 400%;
-        }
-      }
-        
-      > label img {
-        width: floor(100% / $number) - 2%;
-        margin: 4% 0 4% 4%;
-      }
-    }
-  }
-}

app/views/search/controller.js

@@ -101,6 +101,36 @@ export class SearchController extends ViewController {
     return Promise.resolve();
   }
 
+  generateTabsCSS() {
+    // The built-in tabs from Picnic only includes 4 tabs.
+    // This makes only as many tabs as necessary for covers by looking at the covers in the search results.
+    const tabClassesNeeded = new Set();
+    for (let i = 0; i < this.state.results.length; i++) {
+      tabClassesNeeded.add(this.state.results[i].covers.length);
+    }
+    let css = '';
+    for (let numberOfTabs of tabClassesNeeded) {
+      const numberSplit = (numberOfTabs).toString().split('');
+      // Using `\3` before the first digit allows you to use numbers as CSS classes. Any subsequent digits are grouped after a space
+      const cssClassNumber = `\\3${numberSplit[0]}${numberSplit.length > 1 ? ' ' + numberSplit.slice(1).join('') : ''}`
+      const tabClassName = `.tabs.${cssClassNumber}`;
+      css += `${tabClassName} > .row {
+        width: ${100 * (numberOfTabs)}%; left: ${-100 * (numberOfTabs - 1)}%;
+      }`;
+
+      for (let x = 0; x < (numberOfTabs - 1); x++) {
+        css += `${tabClassName} > input:nth-of-type(${x + 1}):checked ~ .row {
+          margin-left: ${(100 * (numberOfTabs)) - (100 * (x + 1))}%;
+        }`;
+      }
+
+      css += `${tabClassName} > label img {
+        width: ${Math.floor(100 / (numberOfTabs)) - 2}%; margin: 4% 0 4% 4%;
+      }`
+    }
+    return css;
+  }
+
   showShelves () {
     const shelfController = new ShelvesController(this.appState, this.i18n);
     let shelvesPromise;

app/views/search/index.js

@@ -17,6 +17,8 @@ export const searchView = (state, emit, i18n) => {
 
   // Returning an array in a view allows non-shared parent HTML elements.
   return [
+    html`<style>${controller.generateTabsCSS()}</style>`,
+    
     html`<h1 class="title">${__('search.header')}</h1>`,
 
     html`<section class="flex">

app/views/search/resultDetails.js

@@ -26,20 +26,18 @@ export const resultDetails = (searchController, result, emit = () => {}) => {
     <small>${__('search.click_for_details')}</small>
   </label>`;
   
-  const tabNames = ['one', 'two', 'three', 'four', 'five', 'six', 'seven', 'eight', 'nine', 'ten', 'eleven', 'twelve', 'thirteen', 'fourteen', 'fifteen', 'sixteen', 'seventeen', 'eighteen', 'nineteen', 'twenty'];
-  
   const coversHTMLArray = result.covers.map((cover, index, allCovers) => {
     return html`<div>
         <img src=${cover.url} alt="${cover.sourceId.replace(':', ' ').toUpperCase()}, Published: ${cover.publishDate}">
         ${typeof allCovers[index - 1] === 'undefined'
         ? null
-        : html`<label class="button" for="cover_${allCovers[index - 1].sourceId}" style="margin-right:8px;">
+        : html`<label class="button" for="cover_${allCovers[index - 1].sourceId}" style="margin-right:8px;" aria-label="View Previous Cover">
             ${'<'}
           </label>`
       }
         ${typeof allCovers[index + 1] === 'undefined'
         ? null
-        : html`<label class="button" for="cover_${allCovers[index + 1].sourceId}">
+        : html`<label class="button" for="cover_${allCovers[index + 1].sourceId}" aria-label="View Next Cover">
             ${'>'}
           </label>`
       }
@@ -51,10 +49,10 @@ export const resultDetails = (searchController, result, emit = () => {}) => {
       <h4>${__('search.covers')}</h4>
       ${typeof result.covers === 'undefined'
         ? html`<span style="font-size:3em;"><i class="icon-loading animate-spin"></i></span>`
-        : html`<div class="tabs ${typeof tabNames[result.covers.length - 1] !== 'undefined' ? tabNames[result.covers.length - 1] : tabNames[19]}">
+        : html`<div class="tabs ${result.covers.length}">
           ${result.covers.map((cover, index) => {
             return [
-              html`<input id="cover_${cover.sourceId}" type="radio" name="${modalId}_covers" ${index === 0 ? 'checked' : null} />`,
+              html`<input id="cover_${cover.sourceId}" type="radio" name="${modalId}_covers" ${index === 0 ? 'checked' : null} aria-hidden="true" />`,
               // html`<label class="small pseudo button toggle" for="cover_${cover.sourceId}">•</label>`,
             ];
           })}