sendnrw/gaseous-server
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Hide favourite icon in similar games list + minor UI tweaks and fixes

Browse Source
This commit is contained in:
Michael Green
2024-10-02 13:08:19 +10:00
parent 32f6a86dc9
commit 4a76436223
5 changed files with 76 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
gaseous-server/wwwroot/index.html
View File

@@ -61,8 +61,6 @@
<script type="text/javascript">
// Gaseous Games - Main Application Script
let APIVersion = "v1.1";
// start the application
let AppVersion = "0.0.0";
let DBSchemaVersion = "1000";

2
gaseous-server/wwwroot/pages/game.js
View File

@@ -388,7 +388,7 @@ function SetupPage() {
var gameSummarySimilarContent = document.getElementById('gamesummarysimilarcontent');
for (var i = 0; i < result.games.length; i++) {
var similarObject = renderGameIcon(result.games[i], true, true, true, GetRatingsBoards(), false, true);
var similarObject = renderGameIcon(result.games[i], true, true, true, GetRatingsBoards(), false, true, false);
gameSummarySimilarContent.appendChild(similarObject);
}

2
gaseous-server/wwwroot/pages/home.js
View File

@@ -55,7 +55,7 @@ class HomePageGameRow {
let gameItem = document.createElement("li");
gameItem.classList.add("homegame-item");
let gameIcon = renderGameIcon(game, true, showRatings, showClassification, classificationDisplayOrder, true, false);
let gameIcon = renderGameIcon(game, true, showRatings, showClassification, classificationDisplayOrder, true, false, true);
gameItem.appendChild(gameIcon);
scroller.appendChild(gameItem);
}

70
gaseous-server/wwwroot/scripts/gamesformating.js
View File

@@ -181,7 +181,7 @@ function formatGamesPanel(targetElement, result, pageNumber, pageSize, forceScro
}
for (let i = 0; i < result.games.length; i++) {
let game = renderGameIcon(result.games[i], showTitle, showRatings, showClassification, classificationDisplayOrder, false, listView);
let game = renderGameIcon(result.games[i], showTitle, showRatings, showClassification, classificationDisplayOrder, false, listView, true);
switch (pageMode) {
case "paged":
targetElement.appendChild(game);
@@ -396,11 +396,15 @@ function IsInView() {
}
}
function renderGameIcon(gameObject, showTitle, showRatings, showClassification, classificationDisplayOrder, useSmallCover, listView) {
function renderGameIcon(gameObject, showTitle, showRatings, showClassification, classificationDisplayOrder, useSmallCover, listView, showFavourite) {
if (listView == undefined) {
listView = false;
}
if (showFavourite == undefined) {
showFavourite = true;
}
let classes = getViewModeClasses(listView);
let gameBox = document.createElement('div');
@@ -464,7 +468,39 @@ function renderGameIcon(gameObject, showTitle, showRatings, showClassification,
gameImageBox.appendChild(gameSaveIcon);
}
// add ratings banner
if (gameObject.totalRating || displayClassification == true) {
let gameImageRatingBanner = document.createElement('div');
gameImageRatingBanner.classList.add(...classes['game_tile_box_ratingbanner']);
if (showRatings == true || displayClassification == true) {
if (showRatings == true) {
if (gameObject.totalRating) {
let gameImageRatingBannerLogo = document.createElement('img');
gameImageRatingBannerLogo.src = '/images/IGDB_logo.svg';
gameImageRatingBannerLogo.setAttribute('style', 'filter: invert(100%); height: 10px; margin-right: 5px; padding-top: 4px;');
gameImageRatingBanner.appendChild(gameImageRatingBannerLogo);
let gameImageRatingBannerValue = document.createElement('span');
gameImageRatingBannerValue.innerHTML = Math.floor(gameObject.totalRating) + '% / ' + gameObject.totalRatingCount;
gameImageRatingBanner.appendChild(gameImageRatingBannerValue);
}
}
gameImageBox.appendChild(gameImageRatingBanner);
if (displayClassification == true) {
let gameImageClassificationLogo = document.createElement('img');
gameImageClassificationLogo.src = classificationPath;
gameImageClassificationLogo.classList.add(...classes['rating_image_overlay']);
gameImageBox.appendChild(gameImageClassificationLogo);
}
}
}
gameBox.appendChild(gameImageBox);
// add favourite game icon
if (showFavourite == true) {
let gameFavIconBox = document.createElement('div');
gameFavIconBox.classList.add(...classes['game_tile_box_favouritegame']);
@@ -506,37 +542,7 @@ function renderGameIcon(gameObject, showTitle, showRatings, showClassification,
});
gameImageBox.appendChild(gameFavIconBox);
// add ratings banner
if (gameObject.totalRating || displayClassification == true) {
let gameImageRatingBanner = document.createElement('div');
gameImageRatingBanner.classList.add(...classes['game_tile_box_ratingbanner']);
if (showRatings == true || displayClassification == true) {
if (showRatings == true) {
if (gameObject.totalRating) {
let gameImageRatingBannerLogo = document.createElement('img');
gameImageRatingBannerLogo.src = '/images/IGDB_logo.svg';
gameImageRatingBannerLogo.setAttribute('style', 'filter: invert(100%); height: 10px; margin-right: 5px; padding-top: 4px;');
gameImageRatingBanner.appendChild(gameImageRatingBannerLogo);
let gameImageRatingBannerValue = document.createElement('span');
gameImageRatingBannerValue.innerHTML = Math.floor(gameObject.totalRating) + '% / ' + gameObject.totalRatingCount;
gameImageRatingBanner.appendChild(gameImageRatingBannerValue);
}
}
gameImageBox.appendChild(gameImageRatingBanner);
if (displayClassification == true) {
let gameImageClassificationLogo = document.createElement('img');
gameImageClassificationLogo.src = classificationPath;
gameImageClassificationLogo.classList.add(...classes['rating_image_overlay']);
gameImageBox.appendChild(gameImageClassificationLogo);
}
}
}
gameBox.appendChild(gameImageBox);
if (showTitle == true) {
let gameBoxTitle = document.createElement('div');

23
gaseous-server/wwwroot/styles/style.css
View File

@@ -1109,6 +1109,7 @@ input[name='filter_panel_range_max'] {
position: absolute;
display: inline-block;
top: 30%;
padding-top: 7px;
right: 10px;
}
@@ -1138,6 +1139,28 @@ input[name='filter_panel_range_max'] {
display: inline-block;
top: 30%;
right: 50px;
width: 30px;
height: 30px;
text-align: center;
padding-top: 5px;
padding-left: 4px;
padding-right: 3px;
padding-bottom: 5px;
border-color: transparent;
border-width: 1px;
border-style: solid;
border-radius: var(--standard-radius);
z-index: +1;
}
.game_tile_box_row:hover>.game_tile_box_favouritegame_row {
border-color: var(--input-border);
background-color: var(--fancybutton-background);
}
.game_tile_box_row:hover>.game_tile_box_favouritegame_row:hover {
border-color: var(--input-border-hover);
background-color: var(--fancybutton-background-hover);
}
.game_tile_image {