Generate tabs CSS instead of using SCSS for covers

This commit is contained in:
Robbie Antenesse 2020-08-24 22:59:10 -06:00
parent a6a819503f
commit bf78174691
5 changed files with 36 additions and 49 deletions

View File

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

View File

@ -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%;
}
}
}
}

View File

@ -101,6 +101,36 @@ export class SearchController extends ViewController {
return Promise.resolve(); 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 () { showShelves () {
const shelfController = new ShelvesController(this.appState, this.i18n); const shelfController = new ShelvesController(this.appState, this.i18n);
let shelvesPromise; let shelvesPromise;

View File

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

View File

@ -26,20 +26,18 @@ export const resultDetails = (searchController, result, emit = () => {}) => {
<small>${__('search.click_for_details')}</small> <small>${__('search.click_for_details')}</small>
</label>`; </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) => { const coversHTMLArray = result.covers.map((cover, index, allCovers) => {
return html`<div> return html`<div>
<img src=${cover.url} alt="${cover.sourceId.replace(':', ' ').toUpperCase()}, Published: ${cover.publishDate}"> <img src=${cover.url} alt="${cover.sourceId.replace(':', ' ').toUpperCase()}, Published: ${cover.publishDate}">
${typeof allCovers[index - 1] === 'undefined' ${typeof allCovers[index - 1] === 'undefined'
? null ? 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>` </label>`
} }
${typeof allCovers[index + 1] === 'undefined' ${typeof allCovers[index + 1] === 'undefined'
? null ? 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>` </label>`
} }
@ -51,10 +49,10 @@ export const resultDetails = (searchController, result, emit = () => {}) => {
<h4>${__('search.covers')}</h4> <h4>${__('search.covers')}</h4>
${typeof result.covers === 'undefined' ${typeof result.covers === 'undefined'
? html`<span style="font-size:3em;"><i class="icon-loading animate-spin"></i></span>` ? 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) => { ${result.covers.map((cover, index) => {
return [ 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>`, // html`<label class="small pseudo button toggle" for="cover_${cover.sourceId}">•</label>`,
]; ];
})} })}