Skip to content

Commit f0bf828

Browse files
ReenigneArcherReenigneArcher
committed
Improve search UI and results display; tweak modal
Replace the old search form with a centered input+button and onsubmit/onkeydown handlers to call run_search, removing the platform select. Rewrite search results rendering in item_loader.js: change grid breakpoints, fetch platform data to show cover images, platform badges (with earliest release year), and a fallback rendering when platform data fails; limit to first 60 matches and show a note. Remove code that previously populated a search_type select. Minor modal styling adjustments in image_modal.html (remove explicit text-white/btn-close-white classes and plain modal counter) to rely on default styles.
1 parent 422bb90 commit f0bf828

3 files changed

Lines changed: 159 additions & 60 deletions

File tree

‎gh-pages-template/_includes/image_modal.html‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,8 @@
33
<div class="modal-dialog modal-fullscreen">
44
<div class="modal-content bg-dark">
55
<div class="modal-header border-0">
6-
<h5 class="modal-title text-white" id="imageModalLabel">Image Gallery</h5>
7-
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
6+
<h5 class="modal-title" id="imageModalLabel">Image Gallery</h5>
7+
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
88
</div>
99
<div class="modal-body d-flex align-items-center justify-content-center position-relative p-0">
1010
<button type="button" class="btn btn-light position-absolute start-0 ms-3 rounded-circle" id="modal-prev-btn" style="z-index: 1050; width: 50px; height: 50px;">
@@ -16,7 +16,7 @@ <h5 class="modal-title text-white" id="imageModalLabel">Image Gallery</h5>
1616
</button>
1717
</div>
1818
<div class="modal-footer border-0 justify-content-center">
19-
<span class="text-white" id="modal-counter">1 / 1</span>
19+
<span id="modal-counter">1 / 1</span>
2020
</div>
2121
</div>
2222
</div>

‎gh-pages-template/assets/js/item_loader.js‎

Lines changed: 146 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,6 @@ let base_path = _cfg.base_path
55
: "/GameDB";
66
let base_url = window.location.origin + base_path;
77

8-
// get search options, we will append each platform to this list
9-
let search_options = document.getElementById("search_type")
108

119
// get platforms container
1210
let platforms_container = document.getElementById("platforms-container")
@@ -143,11 +141,6 @@ $(document).ready(function(){
143141
let sorted = platforms.sort(window.rankingSorter("name", "id")).reverse()
144142

145143
for(let item in sorted) {
146-
// create search option
147-
let search_option = document.createElement("option")
148-
search_option.value = sorted[item]['id']
149-
search_option.textContent = sorted[item]['name']
150-
search_options.appendChild(search_option)
151144

152145
let column = document.createElement("div")
153146
column.className = "col-lg-4 mb-5"
@@ -386,47 +379,154 @@ function run_search() {
386379
search_container.appendChild(resultsHeading)
387380

388381
const row = document.createElement("div")
389-
row.className = "row row-cols-2 row-cols-sm-3 row-cols-md-4 row-cols-lg-6 g-2"
382+
row.className = "row row-cols-1 row-cols-sm-2 row-cols-md-3 row-cols-lg-4 g-3"
390383
search_container.appendChild(row)
391384

392-
matches.slice(0, 60).forEach(([id, game]) => {
393-
const col = document.createElement("div")
394-
col.className = "col"
395-
row.appendChild(col)
396-
397-
const card = document.createElement("a")
398-
card.className = "card h-100 text-decoration-none shadow-sm border-0 rounded-0"
399-
card.href = `${base_path}/browse/games/?id=${id}`
400-
col.appendChild(card)
401-
402-
// Placeholder cover
403-
const placeholder = document.createElement("div")
404-
placeholder.className = "card-img-top bg-dark d-flex align-items-center justify-content-center"
405-
placeholder.style.height = "120px"
406-
const icon = document.createElement("span")
407-
icon.className = "material-symbols-outlined text-white"
408-
icon.style.fontSize = "3rem"
409-
icon.textContent = "sports_esports"
410-
placeholder.appendChild(icon)
411-
card.appendChild(placeholder)
412-
413-
const cardBody = document.createElement("div")
414-
cardBody.className = "card-body p-2"
415-
card.appendChild(cardBody)
416-
417-
const nameEl = document.createElement("p")
418-
nameEl.className = "card-text small mb-0"
419-
nameEl.textContent = game.name
420-
nameEl.title = game.name
421-
cardBody.appendChild(nameEl)
422-
})
423-
424-
if (matches.length > 60) {
425-
const moreNote = document.createElement("p")
426-
moreNote.className = "text-muted mt-2 small"
427-
moreNote.textContent = `Showing first 60 of ${matches.length} results. Try a more specific search term.`
428-
search_container.appendChild(moreNote)
429-
}
385+
// Fetch platform names to display
386+
fetch(`${base_url}/platforms/all.json`)
387+
.then(r => r.json())
388+
.then(allPlatforms => {
389+
matches.slice(0, 60).forEach(([id, game]) => {
390+
const col = document.createElement("div")
391+
col.className = "col"
392+
row.appendChild(col)
393+
394+
const card = document.createElement("a")
395+
card.className = "card h-100 text-decoration-none shadow-sm border-0 rounded-0"
396+
card.href = `${base_path}/browse/games/?id=${id}`
397+
col.appendChild(card)
398+
399+
// Cover image or placeholder
400+
if (game.cover && game.cover.url) {
401+
const coverImg = document.createElement("img")
402+
coverImg.className = "card-img-top rounded-top-0"
403+
coverImg.src = game.cover.url.replace("t_thumb", "t_cover_small")
404+
coverImg.alt = game.name
405+
coverImg.loading = "lazy"
406+
coverImg.style.height = "180px"
407+
coverImg.style.objectFit = "cover"
408+
card.appendChild(coverImg)
409+
} else {
410+
const placeholder = document.createElement("div")
411+
placeholder.className = "card-img-top bg-secondary d-flex align-items-center justify-content-center"
412+
placeholder.style.height = "180px"
413+
const icon = document.createElement("span")
414+
icon.className = "material-symbols-outlined text-white"
415+
icon.style.fontSize = "3rem"
416+
icon.textContent = "sports_esports"
417+
placeholder.appendChild(icon)
418+
card.appendChild(placeholder)
419+
}
420+
421+
const cardBody = document.createElement("div")
422+
cardBody.className = "card-body p-2"
423+
card.appendChild(cardBody)
424+
425+
// Game name
426+
const nameEl = document.createElement("h6")
427+
nameEl.className = "card-title small mb-2 fw-bold text-truncate"
428+
nameEl.textContent = game.name
429+
nameEl.title = game.name
430+
cardBody.appendChild(nameEl)
431+
432+
// Platforms with release years
433+
if (game.platforms && game.platforms.length > 0) {
434+
const platformsDiv = document.createElement("div")
435+
platformsDiv.className = "mb-2"
436+
437+
// Group release dates by platform
438+
const platformYears = {}
439+
if (game.release_dates && game.release_dates.length > 0) {
440+
game.release_dates.forEach(rd => {
441+
if (rd.platform && rd.y) {
442+
if (!platformYears[rd.platform] || rd.y < platformYears[rd.platform]) {
443+
platformYears[rd.platform] = rd.y
444+
}
445+
}
446+
})
447+
}
448+
449+
// Show first 3 platforms
450+
game.platforms.slice(0, 3).forEach(platformId => {
451+
const platform = allPlatforms[String(platformId)]
452+
const platformName = platform ? platform.name : `Platform ${platformId}`
453+
const year = platformYears[platformId] ? ` (${platformYears[platformId]})` : ""
454+
455+
const badge = document.createElement("span")
456+
badge.className = "badge bg-secondary me-1 mb-1 small"
457+
badge.style.fontSize = "0.7rem"
458+
badge.textContent = platformName + year
459+
platformsDiv.appendChild(badge)
460+
})
461+
462+
if (game.platforms.length > 3) {
463+
const moreBadge = document.createElement("span")
464+
moreBadge.className = "badge bg-secondary me-1 mb-1 small"
465+
moreBadge.style.fontSize = "0.7rem"
466+
moreBadge.textContent = `+${game.platforms.length - 3} more`
467+
platformsDiv.appendChild(moreBadge)
468+
}
469+
470+
cardBody.appendChild(platformsDiv)
471+
}
472+
})
473+
474+
if (matches.length > 60) {
475+
const moreNote = document.createElement("p")
476+
moreNote.className = "text-muted mt-3 small"
477+
moreNote.textContent = `Showing first 60 of ${matches.length} results. Try a more specific search term.`
478+
search_container.appendChild(moreNote)
479+
}
480+
})
481+
.catch(() => {
482+
// Fallback if platforms can't be loaded
483+
matches.slice(0, 60).forEach(([id, game]) => {
484+
const col = document.createElement("div")
485+
col.className = "col"
486+
row.appendChild(col)
487+
488+
const card = document.createElement("a")
489+
card.className = "card h-100 text-decoration-none shadow-sm border-0 rounded-0"
490+
card.href = `${base_path}/browse/games/?id=${id}`
491+
col.appendChild(card)
492+
493+
if (game.cover && game.cover.url) {
494+
const coverImg = document.createElement("img")
495+
coverImg.className = "card-img-top rounded-top-0"
496+
coverImg.src = game.cover.url.replace("t_thumb", "t_cover_small")
497+
coverImg.alt = game.name
498+
coverImg.loading = "lazy"
499+
card.appendChild(coverImg)
500+
} else {
501+
const placeholder = document.createElement("div")
502+
placeholder.className = "card-img-top bg-secondary d-flex align-items-center justify-content-center"
503+
placeholder.style.height = "180px"
504+
const icon = document.createElement("span")
505+
icon.className = "material-symbols-outlined text-white"
506+
icon.style.fontSize = "3rem"
507+
icon.textContent = "sports_esports"
508+
placeholder.appendChild(icon)
509+
card.appendChild(placeholder)
510+
}
511+
512+
const cardBody = document.createElement("div")
513+
cardBody.className = "card-body p-2"
514+
card.appendChild(cardBody)
515+
516+
const nameEl = document.createElement("p")
517+
nameEl.className = "card-text small mb-0"
518+
nameEl.textContent = game.name
519+
nameEl.title = game.name
520+
cardBody.appendChild(nameEl)
521+
})
522+
523+
if (matches.length > 60) {
524+
const moreNote = document.createElement("p")
525+
moreNote.className = "text-muted mt-3 small"
526+
moreNote.textContent = `Showing first 60 of ${matches.length} results. Try a more specific search term.`
527+
search_container.appendChild(moreNote)
528+
}
529+
})
430530
})
431531
.catch(err => {
432532
loading.remove()

‎gh-pages-template/index.html‎

Lines changed: 10 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -30,18 +30,17 @@
3030
<!-- Search section-->
3131
<section class="py-5 offset-anchor" id="Search">
3232
<div class="container mb-5">
33-
<form id="searchForm">
34-
<div class="form-group d-flex">
35-
<div class="col-3 me-3">
36-
<select class="form-select rounded-0" aria-label="Search Type" id="search_type">
37-
</select>
33+
<form id="searchForm" onsubmit="event.preventDefault(); run_search();">
34+
<div class="row justify-content-center">
35+
<div class="col-12 col-md-8 col-lg-6">
36+
<div class="input-group">
37+
<input type="text" class="form-control rounded-0" placeholder="Search games by name..." id="search_term"
38+
onkeydown="if(event.key==='Enter'){event.preventDefault(); run_search()}">
39+
<button type="button" class="btn btn-warning rounded-0" onclick="run_search()">
40+
<i class="fa-fw fas fa-search"></i> Search
41+
</button>
42+
</div>
3843
</div>
39-
<div class="col-6 me-3">
40-
<input type="text" class="form-control rounded-0" placeholder="Search" id="search_term"
41-
onkeydown="if(event.key==='Enter'){run_search()}">
42-
</div>
43-
<button type="button" class="btn btn-warning ml-3 rounded-0" onclick="run_search()">
44-
<i class="fa-fw fas fa-search"></i>Search</button>
4544
</div>
4645
</form>
4746
</div>

0 commit comments

Comments
 (0)