Add compact mode for search results

Keeping this on a separate branch until I have a way to retrieve platform icons without CORS errors

Author: WumboSpasm

main.css

@@ -250,7 +250,7 @@ body {
     font-weight: bold;
 }
 .results-navigate {
-    margin-left: 24px;
+    margin-left: 1.2rem;
 }
 .results-per-page {
     font-size: 0.7rem;
@@ -259,18 +259,25 @@ body {
     width: 2rem !important;
     margin-left: 0.5rem;
 }
+.results-compact {
+    position: absolute;
+    top: 2rem; right: 0;
+}
 .results-bottom {
     text-align: right;
     margin-top: 0.5rem;
 }
 
 .entry {
-    height: 6rem;
     padding: 0.5rem 0;
     border-bottom: 0.15rem solid #0002;
     display: flex;
 }
-.entry-logo {
+
+.entry:not([compact]) {
+    height: 6rem;
+}
+.entry:not([compact]) .entry-logo {
     height: 100%;
     background-position: center;
     background-repeat: no-repeat;
@@ -279,33 +286,79 @@ body {
     flex: 0 0 8rem;
     cursor: pointer;
 }
-.entry-text {
+.entry:not([compact]) .entry-text {
     min-width: 0;
     display: flex;
     flex-direction: column;
     flex-grow: 1;
     white-space: nowrap;
     overflow: hidden;
 }
-.entry-title {
+.entry:not([compact]) .entry-title {
     font-family: Tahoma, sans-serif;
     font-size: 1.5rem;
 }
-.entry-developer {
+.entry:not([compact]) .entry-developer {
     font-size: 0.7rem;
     margin-left: 0.1rem;
 }
-.entry-type,
-.entry-tags {
+.entry:not([compact]) .entry-type,
+.entry:not([compact]) .entry-tags {
     font-size: 0.9rem;
 }
-.entry-tags {
+.entry:not([compact]) .entry-tags {
     color: #000a;
 }
-.entry-description {
+.entry:not([compact]) .entry-description {
     margin-top: 0.5rem;
     white-space: normal;
 }
+.entry:not([compact]) .entry-description[empty] {
+    color: #000a;
+    font-style: italic;
+}
+
+.entry[compact] {
+    height: 1rem;
+    overflow: hidden;
+    align-items: center;
+}
+.entry[compact] :not(.entry-platform, .entry-library) {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+.entry[compact] :not(.entry-title) {
+    font-size: 0.7rem;
+}
+.entry[compact] :not(.entry-description) {
+    flex-shrink: 0;
+}
+.entry[compact] .entry-platform,
+.entry[compact] .entry-library {
+    width: 1.2rem;
+    height: 1.2rem;
+    background-size: contain;
+    background-repeat: no-repeat;
+    padding-right: 0.2rem;
+}
+.entry[compact] .entry-title {
+    font-size: 0.9rem;
+    padding: 0 0.5rem 0 0.2rem;
+    max-width: calc(40% - 2.8rem);
+}
+.entry[compact] .entry-developer {
+    padding-right: 0.5rem;
+    max-width: calc(25% - 2.8rem);
+}
+.entry[compact] .entry-description {
+    color: #000a;
+    flex-grow: 1;
+}
+.entry[compact] .entry-tags {
+    padding-left: 0.5rem;
+    max-width: calc(35% - 2.8rem);
+}
 
 .viewer {
     flex-direction: column;

search/animation.png

@@ -58,6 +58,9 @@
                         <input type="text" placeholder="#" class="results-input-page">
                         <button class="results-go-to-page">Go</button>
                     </div>
+                    <div class="results-compact">
+                        <input type="checkbox" id="compact"> <label for="compact">Compact View</label>
+                    </div>
                 </div>
                 <div class="results-list" hidden></div>
                 <div class="results-bottom results-navigate" hidden>

search/game.png

@@ -1,6 +1,7 @@
 let fpdb = {
     api: 'https://db-api.unstable.life',
     images: 'https://infinity.unstable.life/images',
+    icons: 'https://unstable.life/updater-data/12-1/Data/Logos/',
     resultsPerPage: 100,
     metaMap: {
         title:               "Title",
@@ -70,9 +71,6 @@ fetch('fields.json').then(r => r.json()).then(async json => {
 fetch('sort.json').then(r => r.json()).then(json => {
     fpdb.sortOptions = json;
 
-    let options = document.querySelector('.results-sort-options'),
-        direction = document.querySelector('.results-sort-direction');
-    
     for (let sort of json) {
         let opt = document.createElement('option');
         opt.value = sort.name;
@@ -225,22 +223,12 @@ function loadPage(page) {
     });
 
     for (let i = (page - 1) * fpdb.displayedResults; i < Math.min(fpdb.list.length, page * fpdb.displayedResults); i++) {
-        let entry = document.createElement('div')
+        let compact = document.querySelector('#compact').checked;
+
+        let entry = document.createElement('div');
         entry.className = 'entry';
-        
-        let logo = document.createElement('div');
-        logo.className = 'entry-logo';
-        logo.setAttribute('view', i);
-        logo.setAttribute('lazy-background', `url("${fpdb.images}/Logos/${fpdb.list[i].id.substring(0, 2)}/${fpdb.list[i].id.substring(2, 4)}/${fpdb.list[i].id}.png?type=jpg")`);
-        logo.addEventListener('click', loadEntry);
-        logoObserver.observe(logo);
-        
-        let text = document.createElement('div');
-        text.className = 'entry-text';
-        
-        let header = document.createElement('div'),
-            subHeader = document.createElement('div');
-        
+        if (compact) entry.setAttribute('compact', 'true');
+
         let title = document.createElement('a');
         title.classList.add('entry-title', 'common-activate');
         title.setAttribute('view', i);
@@ -255,29 +243,61 @@ function loadPage(page) {
             developer.textContent = ' by ' + fpdb.list[i].publisher;
         else
             developer.hidden = true;
-        
-        let type = document.createElement('span');
-        type.className = 'entry-type';
-        type.textContent = fpdb.list[i].platform.replace(/; /g, '/') + (fpdb.list[i].library == 'arcade' ? ' game' : ' animation');
-        
+
         let tags = document.createElement('span');
         tags.className = 'entry-tags';
-        tags.textContent = ' - ' + fpdb.list[i].tags.join(' - ');
+        if (compact)
+            tags.textContent = fpdb.list[i].tags.join(', ');
+        else
+            tags.textContent = '\u00A0- ' + fpdb.list[i].tags.join(' - ');
 
         let description = document.createElement('div');
         description.className = 'entry-description';
         if (fpdb.list[i].originalDescription != '')
             description.textContent = fpdb.list[i].originalDescription;
+        else if (!compact) {
+            description.textContent = 'No description.';
+            description.setAttribute('empty', 'true');
+        }
+        
+        if (compact) {
+            let platform = document.createElement('div');
+            platform.className = 'entry-platform';
+            let platformName = fpdb.list[i].platform.split('; ')[0];
+            platform.style.backgroundImage = 'url("' + fpdb.icons + platformName + '.png")';
+            platform.setAttribute('title', platformName);
+
+            let library = document.createElement('div');
+            library.className = 'entry-library';
+            library.style.backgroundImage = 'url("' + (fpdb.list[i].library == 'arcade' ? 'game.png' : 'animation.png') + '")';
+            library.setAttribute('title', fpdb.list[i].library == 'arcade' ? 'Game' : 'Animation');
+            
+            entry.append(platform, library, title, developer, description, tags);
+        }
         else {
-            description.textContent = 'No description.'
-            description.style.color = '#000a';
-            description.style.fontStyle = 'italic';
+            let logo = document.createElement('div');
+            logo.className = 'entry-logo';
+            logo.setAttribute('view', i);
+            logo.setAttribute('lazy-background', `url("${fpdb.images}/Logos/${fpdb.list[i].id.substring(0, 2)}/${fpdb.list[i].id.substring(2, 4)}/${fpdb.list[i].id}.png?type=jpg")`);
+            logo.addEventListener('click', loadEntry);
+            logoObserver.observe(logo);
+            
+            let text = document.createElement('div');
+            text.className = 'entry-text';
+            
+            let header = document.createElement('div'),
+            subHeader = document.createElement('div');
+
+            let type = document.createElement('span');
+            type.className = 'entry-type';
+            type.textContent = fpdb.list[i].platform.replace(/; /g, '/') + (fpdb.list[i].library == 'arcade' ? ' game' : ' animation');
+
+            header.append(title, developer);
+            subHeader.append(type, tags);
+            text.append(header, subHeader, description);
+            entry.append(logo, text);
         }
 
-        header.append(title, developer);
-        subHeader.append(type, tags);
-        text.append(header, subHeader, description);
-        entry.append(logo, text);
         htmlList.append(entry);
     }
 }
@@ -435,6 +455,8 @@ function backToResults() {
 
 document.querySelector('.search-button').addEventListener('click', performSearch);
 
+document.querySelector('#compact').addEventListener('change', () => loadPage(fpdb.currentPage));
+
 document.querySelectorAll('.results-first-page').forEach(elem => elem.addEventListener('click', () => { if (fpdb.currentPage > 1) loadPage(1); }));
 document.querySelectorAll('.results-back-page').forEach(elem => elem.addEventListener('click', () => { if (fpdb.currentPage > 1) loadPage(fpdb.currentPage - 1); }));
 document.querySelectorAll('.results-forward-page').forEach(elem => elem.addEventListener('click', () => { if (fpdb.currentPage < fpdb.pages) loadPage(fpdb.currentPage + 1); }));