Skip to content

Commit

Permalink
Merge branch 'compact'
Browse files Browse the repository at this point in the history
  • Loading branch information
@WumboSpasm
WumboSpasm committed Apr 15, 2024
2 parents b2f4964 + a7ccce9 commit 0cf7bdb
Show file tree
Hide file tree
Showing 5 changed files with 120 additions and 41 deletions.
74 changes: 64 additions & 10 deletions main.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -247,7 +247,7 @@ body {
font-weight: bold;
}
.results-navigate {
margin-left: 24px;
margin-left: 1.2rem;
}
.results-per-page {
font-size: 0.7rem;
Expand All @@ -256,18 +256,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;
Expand All @@ -276,33 +283,80 @@ 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-position: center;
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;
Expand Down
Binary file added search/animation.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added search/game.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
3 changes: 3 additions & 0 deletions search/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
84 changes: 53 additions & 31 deletions search/search.js
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
let fpdb = {
api: 'https://db-api.unstable.life',
images: 'https://infinity.unstable.life/images',
icons: 'https://flashpointproject.github.io/flashpoint-database-logos/',
resultsPerPage: 100,
metaMap: {
title: "Title",
Expand Down Expand Up @@ -71,9 +72,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;
Expand Down Expand Up @@ -226,22 +224,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);
Expand All @@ -256,29 +244,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);
}
}
Expand Down Expand Up @@ -436,6 +456,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); }));
Expand Down

0 comments on commit 0cf7bdb

Please sign in to comment.