mirror of
https://github.com/Gabi-Zar/Silk-Fly-Launcher.git
synced 2026-04-17 05:26:04 +02:00
Add sorting for Nexus Mods search results and installed mods.
Update list menu to highlight the selected item.
This commit is contained in:
11
renderer/assets/icons/sort-order-1.svg
Normal file
11
renderer/assets/icons/sort-order-1.svg
Normal file
@@ -0,0 +1,11 @@
|
||||
<svg
|
||||
role="img"
|
||||
focusable="false"
|
||||
aria-hidden="true"
|
||||
viewBox="0 0 14 14"
|
||||
xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
d="M 5.75,4.5454543 C 5.75,4.6562497 5.71289,4.7521362 5.6386718,4.8331133 5.5644534,4.9140684 5.4765624,4.9545458 5.375,4.9545458 H 4.625 V 11.5 h -1.5 V 4.9545458 h -0.75 c -0.1015625,0 -0.1894532,-0.040477 -0.2636719,-0.1214325 C 2.0371098,4.7521364 2,4.6562497 2,4.5454543 2,4.434659 2.03711,4.3387842 2.1113281,4.2578297 l 1.5,-1.6363638 C 3.6855468,2.5404886 3.7734374,2.5 3.8749999,2.5 c 0.1015625,0 0.1894532,0.04049 0.2636719,0.1214659 l 1.5,1.6363638 C 5.7128911,4.3387838 5.75,4.434659 5.75,4.5454543 Z" />
|
||||
<path
|
||||
d="M 13,10.272727 C 13,10.125 12.95052,9.9971516 12.851562,9.8891821 12.752602,9.7812421 12.635417,9.7272721 12.5,9.7272721 h -1 V 1 h -2 v 8.7272721 h -1 c -0.1354167,0 -0.2526042,0.053969 -0.3515625,0.16191 C 8.0494797,9.9971513 8,10.125 8,10.272727 c 0,0.147728 0.04948,0.275561 0.1484375,0.3835 l 2.0000005,2.181819 C 10.247396,12.946015 10.364583,13 10.5,13 c 0.135417,0 0.252604,-0.05399 0.351562,-0.161954 l 2,-2.181819 C 12.950521,10.548288 13,10.420455 13,10.272727 Z" />
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.1 KiB |
11
renderer/assets/icons/sort-order-2.svg
Normal file
11
renderer/assets/icons/sort-order-2.svg
Normal file
@@ -0,0 +1,11 @@
|
||||
<svg
|
||||
role="img"
|
||||
focusable="false"
|
||||
aria-hidden="true"
|
||||
viewBox="0 0 14 14"
|
||||
xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
d="M 6,3.7272726 C 6,3.8749998 5.9505205,4.0028484 5.8515624,4.1108179 5.7526046,4.2187579 5.6354166,4.2727279 5.5,4.2727279 H 4.4999999 V 13 H 2.5 V 4.2727279 h -1 c -0.1354167,0 -0.2526042,-0.053969 -0.3515625,-0.16191 C 1.0494797,4.0028487 1,3.8749998 1,3.7272726 1,3.5795455 1.0494795,3.4517124 1.1484375,3.3437731 l 2,-2.1818186 C 3.2473957,1.0539848 3.3645832,1 3.4999998,1 3.6354166,1 3.7526041,1.053986 3.8515624,1.1619545 l 2,2.1818186 C 5.9505213,3.4517119 6,3.5795455 6,3.7272726 Z" />
|
||||
<path
|
||||
d="M 12.5,9.4545452 C 12.5,9.34375 12.46289,9.2478637 12.388671,9.1668866 12.314452,9.0859316 12.226563,9.0454541 12.125,9.0454541 h -0.75 V 2.5 h -1.5 v 6.5454541 h -0.75 c -0.1015625,0 -0.1894531,0.040477 -0.2636719,0.1214325 C 8.7871098,9.2478635 8.75,9.34375 8.75,9.4545452 c 0,0.1107961 0.03711,0.2066708 0.1113281,0.287625 L 10.361329,11.378535 C 10.435547,11.459511 10.523437,11.5 10.625,11.5 c 0.101563,0 0.189453,-0.04049 0.263671,-0.121465 l 1.5,-1.6363647 C 12.462891,9.661216 12.5,9.5653413 12.5,9.4545452 Z" />
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.2 KiB |
@@ -91,19 +91,47 @@
|
||||
|
||||
<template id="installed-mods-template">
|
||||
<h2>List Of Installed Mods</h2>
|
||||
<form class="horizontal-div" id="search-form">
|
||||
<input class="input" id="search-input" type="text" placeholder="Search For Mods..." />
|
||||
<button class="default-button" onclick="searchInstalledMods()">Search</button>
|
||||
</form>
|
||||
<div class="horizontal-div">
|
||||
<form class="horizontal-div search-form" id="search-form">
|
||||
<input class="input" id="search-input" type="text" placeholder="Search For Mods..." />
|
||||
<button class="default-button" onclick="searchInstalledMods()">Search</button>
|
||||
</form>
|
||||
<div class="list-div">
|
||||
<div class="default-button smaller-button" id="sort-button" onclick="toggleSortMenu()">Sort</div>
|
||||
<div class="list-menu longer-button list-menu-inverted" id="sort-menu">
|
||||
<li id="name" onclick="changeSort('name')">by name</li>
|
||||
<li id="downloads" onclick="changeSort('downloads')">by downloads count</li>
|
||||
<li id="endorsements" onclick="changeSort('endorsements')">by endorsements count</li>
|
||||
<li id="createdAt" onclick="changeSort('createdAt')">by date of creation</li>
|
||||
<li id="updatedAt" onclick="changeSort('updatedAt')">by date of updating</li>
|
||||
<li id="size" onclick="changeSort('size')">by size</li>
|
||||
</div>
|
||||
</div>
|
||||
<button class="default-button square-button" onclick="inverseSort()"><img class="icons invert-color" id="sort-order-image" src="assets/icons/sort-order-1.svg" /></button>
|
||||
</div>
|
||||
<div class="mods-container" id="mods-container"></div>
|
||||
</template>
|
||||
|
||||
<template id="online-mods-template">
|
||||
<h2>List Of Nexus Mods</h2>
|
||||
<form class="horizontal-div" id="search-form">
|
||||
<input class="input" id="search-input" type="text" placeholder="Search For Mods..." />
|
||||
<button class="default-button" onclick="searchNexusMods()">Search</button>
|
||||
</form>
|
||||
<div class="horizontal-div">
|
||||
<form class="horizontal-div search-form" id="search-form">
|
||||
<input class="input" id="search-input" type="text" placeholder="Search For Mods..." />
|
||||
<button class="default-button" onclick="searchNexusMods()">Search</button>
|
||||
</form>
|
||||
<div class="list-div">
|
||||
<div class="default-button smaller-button" id="sort-button" onclick="toggleSortMenu()">Sort</div>
|
||||
<div class="list-menu longer-button list-menu-inverted" id="sort-menu">
|
||||
<li id="name" onclick="changeSort('name')">by name</li>
|
||||
<li id="downloads" onclick="changeSort('downloads')">by downloads count</li>
|
||||
<li id="endorsements" onclick="changeSort('endorsements')">by endorsements count</li>
|
||||
<li id="createdAt" onclick="changeSort('createdAt')">by date of creation</li>
|
||||
<li id="updatedAt" onclick="changeSort('updatedAt')">by date of updating</li>
|
||||
<li id="size" onclick="changeSort('size')">by size</li>
|
||||
</div>
|
||||
</div>
|
||||
<button class="default-button square-button" onclick="inverseSort()"><img class="icons invert-color" id="sort-order-image" src="assets/icons/sort-order-1.svg" /></button>
|
||||
</div>
|
||||
<div class="mods-container" id="mods-container"></div>
|
||||
</template>
|
||||
|
||||
@@ -113,10 +141,12 @@
|
||||
<div class="horizontal-div">
|
||||
<h3 id="mod-title">Unknown Title</h3>
|
||||
<p id="mod-author">Unknown author</p>
|
||||
<p id="mod-endorsements-number">? likes</p>
|
||||
<p id="mod-downloads-number">? download</p>
|
||||
</div>
|
||||
<p id="mod-description">No description provided</p>
|
||||
<p id="mod-description" class="long-text">No description provided</p>
|
||||
<p class="transparent-text" id="mod-version">V1.0.0 last update on 01/01/2026</p>
|
||||
|
||||
<br />
|
||||
<div class="horizontal-div">
|
||||
<a href="www.nexusmods.com/hollowknightsilksong/mods" class="default-button" id="uninstall-mod-button">Uninstall</a>
|
||||
<a href="www.nexusmods.com/hollowknightsilksong/mods" class="default-button" id="external-link">Website</a>
|
||||
@@ -134,10 +164,11 @@
|
||||
<h3 id="mod-title">Unknown Title</h3>
|
||||
<p id="mod-author">Unknown author</p>
|
||||
<p id="mod-endorsements-number">? likes</p>
|
||||
<p id="mod-downloads-number">? download</p>
|
||||
</div>
|
||||
<p id="mod-description">No description provided</p>
|
||||
<p id="mod-description" class="long-text">No description provided</p>
|
||||
<p class="transparent-text" id="mod-version">V1.0.0 last update on 01/01/2026</p>
|
||||
|
||||
<br />
|
||||
<div class="horizontal-div">
|
||||
<a href="www.nexusmods.com/hollowknightsilksong/mods" class="default-button" id="download-mod-button">Download</a>
|
||||
<a href="www.nexusmods.com/hollowknightsilksong/mods" class="default-button" id="external-link">Website</a>
|
||||
@@ -155,18 +186,19 @@
|
||||
<input type="text" class="input" id="silksong-path-input" name="silksong-path-input" />
|
||||
<button class="default-button" onclick="autoDetectGamePath()">Auto Detect</button>
|
||||
</div>
|
||||
<br />
|
||||
<div class="horizontal-div">
|
||||
<label>Themes: </label>
|
||||
<div class="themes-div">
|
||||
<div class="list-div">
|
||||
<div class="default-button longer-button" id="themes-button" onclick="toggleThemesMenu()">Silksong</div>
|
||||
<div class="themes-menu longer-button" id="themes-menu">
|
||||
<li onclick="changeTheme('Silksong')">Silksong</li>
|
||||
<li onclick="changeTheme('Citadel of song')">Citadel of song</li>
|
||||
<li onclick="changeTheme('Cradle')">Cradle</li>
|
||||
<li onclick="changeTheme('Abyss')">Abyss</li>
|
||||
<li onclick="changeTheme('Greyroot')">Greyroot</li>
|
||||
<li onclick="changeTheme('Surface')">Surface</li>
|
||||
<li onclick="changeTheme('Steel')">Steel</li>
|
||||
<div class="list-menu longer-button" id="themes-menu">
|
||||
<li id="Silksong" onclick="changeTheme('Silksong')">Silksong</li>
|
||||
<li id="Citadel of song" onclick="changeTheme('Citadel of song')">Citadel of song</li>
|
||||
<li id="Cradle" onclick="changeTheme('Cradle')">Cradle</li>
|
||||
<li id="Abyss" onclick="changeTheme('Abyss')">Abyss</li>
|
||||
<li id="Greyroot" onclick="changeTheme('Greyroot')">Greyroot</li>
|
||||
<li id="Surface" onclick="changeTheme('Surface')">Surface</li>
|
||||
<li id="Steel" onclick="changeTheme('Steel')">Steel</li>
|
||||
</div>
|
||||
</div>
|
||||
<label class="lace-pin-checkbox-container">
|
||||
@@ -178,6 +210,7 @@
|
||||
<br />
|
||||
<h2>BepInEx</h2>
|
||||
<p class="transparent-text" id="bepinex-version-text"></p>
|
||||
<br />
|
||||
<div class="horizontal-div">
|
||||
<button class="default-button" onclick="installBepinex()">Install</button>
|
||||
<button class="important-button" onclick="uninstallBepinex()">Uninstall</button>
|
||||
|
||||
@@ -11,6 +11,12 @@ const modTemplate = document.getElementById("mod-template");
|
||||
|
||||
let oldPage;
|
||||
let actualTheme = [];
|
||||
let searchValueNexus = "";
|
||||
let searchValueInstalled = "";
|
||||
let onlineSortFilter = "downloads";
|
||||
let installedSortFilter = "name";
|
||||
let onlineSortOrder = "DESC";
|
||||
let installedSortOrder = "ASC";
|
||||
|
||||
//////////////////////////////////////////////////////
|
||||
///////////////// CONST FOR WELCOME //////////////////
|
||||
@@ -40,6 +46,7 @@ async function on_startup() {
|
||||
changeTheme(theme[0], theme[1]);
|
||||
navigate("home");
|
||||
} else if ((await electronAPI.getPage()) == "welcome.html") {
|
||||
changeTheme("Silksong");
|
||||
welcomeNavigate();
|
||||
}
|
||||
}
|
||||
@@ -69,14 +76,18 @@ async function navigate(page) {
|
||||
const installedModsTemplateCopy = installedModsTemplate.content.cloneNode(true);
|
||||
const installedModsContainer = installedModsTemplateCopy.getElementById("mods-container");
|
||||
const searchFormInstalled = installedModsTemplateCopy.getElementById("search-form");
|
||||
const searchInputInstalled = installedModsTemplateCopy.getElementById("search-input");
|
||||
|
||||
searchFormInstalled.addEventListener("submit", async function (event) {
|
||||
event.preventDefault();
|
||||
});
|
||||
searchInputInstalled.value = searchValueInstalled;
|
||||
|
||||
view.appendChild(installedModsTemplateCopy);
|
||||
toggleSelectedListButton("sort-menu", installedSortFilter);
|
||||
setSortOrderButton();
|
||||
|
||||
const modsInfo = await files.loadInstalledModsInfo();
|
||||
const modsInfo = await nexus.getMods(page);
|
||||
if (modsInfo == []) {
|
||||
break;
|
||||
}
|
||||
@@ -91,20 +102,36 @@ async function navigate(page) {
|
||||
const modAuthorText = installedModTemplateCopy.getElementById("mod-author");
|
||||
modAuthorText.innerText = `by ${modInfo.author}`;
|
||||
}
|
||||
if (modInfo.endorsements) {
|
||||
const modEndorsementsNumber = installedModTemplateCopy.getElementById("mod-endorsements-number");
|
||||
if (modInfo.endorsements > 1) {
|
||||
modEndorsementsNumber.innerText = `${modInfo.endorsements} likes`;
|
||||
} else {
|
||||
modEndorsementsNumber.innerText = `${modInfo.endorsements} like`;
|
||||
}
|
||||
}
|
||||
if (modInfo.downloads) {
|
||||
const modDownloadsNumber = installedModTemplateCopy.getElementById("mod-downloads-number");
|
||||
if (modInfo.downloads > 1) {
|
||||
modDownloadsNumber.innerText = `${modInfo.downloads} downloads`;
|
||||
} else {
|
||||
modDownloadsNumber.innerText = `${modInfo.downloads} download`;
|
||||
}
|
||||
}
|
||||
if (modInfo.summary) {
|
||||
const modDescriptionText = installedModTemplateCopy.getElementById("mod-description");
|
||||
modDescriptionText.innerText = modInfo.summary;
|
||||
}
|
||||
if (modInfo.picture_url) {
|
||||
if (modInfo.pictureUrl) {
|
||||
const modPicture = installedModTemplateCopy.getElementById("mod-icon");
|
||||
modPicture.src = modInfo.picture_url;
|
||||
modPicture.src = modInfo.pictureUrl;
|
||||
}
|
||||
if (modInfo.version && modInfo.updated_time) {
|
||||
if (modInfo.version && modInfo.updatedAt) {
|
||||
const modVersionText = installedModTemplateCopy.getElementById("mod-version");
|
||||
modVersionText.innerText = `V${modInfo.version} last updated on ${modInfo.updated_time.slice(0, 10)}`;
|
||||
modVersionText.innerText = `V${modInfo.version} last updated on ${modInfo.updatedAt.slice(0, 10)}`;
|
||||
}
|
||||
|
||||
const modUrl = `https://www.nexusmods.com/hollowknightsilksong/mods/${modInfo.mod_id}`;
|
||||
const modUrl = `https://www.nexusmods.com/hollowknightsilksong/mods/${modInfo.modId}`;
|
||||
|
||||
const modLinkButton = installedModTemplateCopy.getElementById("external-link");
|
||||
modLinkButton.href = modUrl;
|
||||
@@ -117,7 +144,7 @@ async function navigate(page) {
|
||||
modDownloadButton = installedModTemplateCopy.getElementById("uninstall-mod-button");
|
||||
modDownloadButton.addEventListener("click", async function (event) {
|
||||
event.preventDefault();
|
||||
await nexus.uninstall(modInfo.mod_id);
|
||||
await nexus.uninstall(modInfo.modId);
|
||||
|
||||
navigate("refresh");
|
||||
});
|
||||
@@ -132,14 +159,18 @@ async function navigate(page) {
|
||||
const onlineModsTemplateCopy = onlineModsTemplate.content.cloneNode(true);
|
||||
const ModsContainer = onlineModsTemplateCopy.getElementById("mods-container");
|
||||
const searchFormNexus = onlineModsTemplateCopy.getElementById("search-form");
|
||||
const searchInputNexus = onlineModsTemplateCopy.getElementById("search-input");
|
||||
|
||||
searchFormNexus.addEventListener("submit", async function (event) {
|
||||
event.preventDefault();
|
||||
});
|
||||
searchInputNexus.value = searchValueNexus;
|
||||
|
||||
view.appendChild(onlineModsTemplateCopy);
|
||||
toggleSelectedListButton("sort-menu", onlineSortFilter);
|
||||
setSortOrderButton();
|
||||
|
||||
mods = await nexus.getMods();
|
||||
mods = await nexus.getMods(page);
|
||||
if (mods == undefined) {
|
||||
break;
|
||||
}
|
||||
@@ -156,28 +187,36 @@ async function navigate(page) {
|
||||
const modAuthorText = modTemplateCopy.getElementById("mod-author");
|
||||
modAuthorText.innerText = `by ${mod.author}`;
|
||||
}
|
||||
if (mod.endorsement_count) {
|
||||
if (mod.endorsements) {
|
||||
const modEndorsementsNumber = modTemplateCopy.getElementById("mod-endorsements-number");
|
||||
if (mod.endorsement_count > 1) {
|
||||
modEndorsementsNumber.innerText = `${mod.endorsement_count} likes`;
|
||||
if (mod.endorsements > 1) {
|
||||
modEndorsementsNumber.innerText = `${mod.endorsements} likes`;
|
||||
} else {
|
||||
modEndorsementsNumber.innerText = `${mod.endorsement_count} like`;
|
||||
modEndorsementsNumber.innerText = `${mod.endorsements} like`;
|
||||
}
|
||||
}
|
||||
if (mod.downloads) {
|
||||
const modDownloadsNumber = modTemplateCopy.getElementById("mod-downloads-number");
|
||||
if (mod.downloads > 1) {
|
||||
modDownloadsNumber.innerText = `${mod.downloads} downloads`;
|
||||
} else {
|
||||
modDownloadsNumber.innerText = `${mod.downloads} download`;
|
||||
}
|
||||
}
|
||||
if (mod.summary) {
|
||||
const modDescriptionText = modTemplateCopy.getElementById("mod-description");
|
||||
modDescriptionText.innerText = mod.summary;
|
||||
}
|
||||
if (mod.picture_url) {
|
||||
if (mod.pictureUrl) {
|
||||
const modPicture = modTemplateCopy.getElementById("mod-icon");
|
||||
modPicture.src = mod.picture_url;
|
||||
modPicture.src = mod.pictureUrl;
|
||||
}
|
||||
if (mod.version && mod.updated_time) {
|
||||
if (mod.version && mod.updatedAt) {
|
||||
const modVersionText = modTemplateCopy.getElementById("mod-version");
|
||||
modVersionText.innerText = `V${mod.version} last updated on ${mod.updated_time.slice(0, 10)}`;
|
||||
modVersionText.innerText = `V${mod.version} last updated on ${mod.updatedAt.slice(0, 10)}`;
|
||||
}
|
||||
|
||||
const modUrl = `https://www.nexusmods.com/hollowknightsilksong/mods/${mod.mod_id}`;
|
||||
const modUrl = `https://www.nexusmods.com/hollowknightsilksong/mods/${mod.modId}`;
|
||||
|
||||
const modLinkButton = modTemplateCopy.getElementById("external-link");
|
||||
modLinkButton.href = modUrl;
|
||||
@@ -205,7 +244,7 @@ async function navigate(page) {
|
||||
const nexusAPIInput = settingsTemplateCopy.getElementById("nexus-api-input");
|
||||
const versionsList = settingsTemplateCopy.getElementById("versions-list");
|
||||
const versionsDictionnary = {
|
||||
"Silk-Fly-Launcher": `Silk Fly Launcher: v${versions.silkFlyLauncher()}`,
|
||||
"Silk-Fly-Launcher": `Silk Fly Launcher: v${await versions.silkFlyLauncher()}`,
|
||||
Electron: `Electron: v${versions.electron()}`,
|
||||
Node: `Node.js: v${versions.node()}`,
|
||||
Chromium: `Chromium: v${versions.chromium()}`,
|
||||
@@ -246,6 +285,7 @@ async function navigate(page) {
|
||||
view.appendChild(settingsTemplateCopy);
|
||||
setBepinexVersion();
|
||||
setThemeButton();
|
||||
toggleSelectedListButton("themes-menu", actualTheme[0]);
|
||||
verifyNexusAPI();
|
||||
break;
|
||||
}
|
||||
@@ -297,6 +337,7 @@ async function welcomeNavigate() {
|
||||
|
||||
case 3:
|
||||
pageDiv.appendChild(styleTemplate.content.cloneNode(true));
|
||||
toggleSelectedListButton("themes-menu", actualTheme[0]);
|
||||
break;
|
||||
|
||||
case 4:
|
||||
@@ -397,8 +438,9 @@ async function setBepinexVersion() {
|
||||
|
||||
async function searchInstalledMods() {
|
||||
const searchInput = document.getElementById("search-input");
|
||||
await nexus.searchInstalled(searchInput.value);
|
||||
navigate("refresh");
|
||||
searchValueInstalled = searchInput.value;
|
||||
await nexus.searchInstalled(searchValueInstalled, undefined, undefined, installedSortFilter, installedSortOrder);
|
||||
await navigate("refresh");
|
||||
}
|
||||
|
||||
//////////////////////////////////////////////////////
|
||||
@@ -420,9 +462,12 @@ async function verifyNexusAPI() {
|
||||
}
|
||||
|
||||
async function searchNexusMods() {
|
||||
const searchInput = document.getElementById("search-input");
|
||||
await nexus.search(searchInput.value);
|
||||
navigate("refresh");
|
||||
let searchInput = document.getElementById("search-input");
|
||||
searchValueNexus = searchInput.value;
|
||||
await nexus.search(searchValueNexus, undefined, undefined, onlineSortFilter, onlineSortOrder);
|
||||
await navigate("refresh");
|
||||
searchInput = document.getElementById("search-input");
|
||||
searchInput.value = searchValueNexus;
|
||||
}
|
||||
|
||||
//////////////////////////////////////////////////////
|
||||
@@ -445,6 +490,7 @@ async function setThemeButton() {
|
||||
|
||||
function changeTheme(theme, state) {
|
||||
toggleThemesMenu();
|
||||
toggleSelectedListButton("themes-menu", theme);
|
||||
|
||||
const lacePinCheckbox = document.getElementById("lace-pin");
|
||||
if (lacePinCheckbox) {
|
||||
@@ -520,3 +566,73 @@ function showToast(message, type = "info", duration = 3000) {
|
||||
}
|
||||
|
||||
electronAPI.onShowToast(showToast);
|
||||
|
||||
function toggleSortMenu() {
|
||||
const sortMenu = document.getElementById("sort-menu");
|
||||
if (sortMenu) {
|
||||
sortMenu.classList.toggle("show");
|
||||
}
|
||||
}
|
||||
|
||||
function changeSort(sortFilterParameter) {
|
||||
toggleSortMenu();
|
||||
toggleSelectedListButton("sort-menu", sortFilterParameter);
|
||||
|
||||
if (oldPage == "mods-installed") {
|
||||
installedSortFilter = sortFilterParameter;
|
||||
searchInstalledMods();
|
||||
} else if (oldPage == "mods-online") {
|
||||
onlineSortFilter = sortFilterParameter;
|
||||
searchNexusMods();
|
||||
}
|
||||
}
|
||||
|
||||
function inverseSort() {
|
||||
if (oldPage == "mods-installed") {
|
||||
if (installedSortOrder == "ASC") {
|
||||
installedSortOrder = "DESC";
|
||||
} else {
|
||||
installedSortOrder = "ASC";
|
||||
}
|
||||
searchInstalledMods();
|
||||
} else if (oldPage == "mods-online") {
|
||||
if (onlineSortOrder == "ASC") {
|
||||
onlineSortOrder = "DESC";
|
||||
} else {
|
||||
onlineSortOrder = "ASC";
|
||||
}
|
||||
searchNexusMods();
|
||||
}
|
||||
}
|
||||
|
||||
function toggleSelectedListButton(ListMenuId, buttonId) {
|
||||
const themesMenu = document.getElementById(ListMenuId);
|
||||
if (themesMenu) {
|
||||
Array.from(themesMenu.children).forEach((child) => {
|
||||
child.classList.remove("selected");
|
||||
});
|
||||
}
|
||||
|
||||
const themesButton = document.getElementById(buttonId);
|
||||
if (themesButton) {
|
||||
themesButton.classList.toggle("selected");
|
||||
}
|
||||
}
|
||||
|
||||
function setSortOrderButton() {
|
||||
let sortOrder;
|
||||
if (oldPage == "mods-installed") {
|
||||
sortOrder = installedSortOrder;
|
||||
} else if (oldPage == "mods-online") {
|
||||
sortOrder = onlineSortOrder;
|
||||
}
|
||||
|
||||
const sortOrderButton = document.getElementById("sort-order-image");
|
||||
if (sortOrderButton) {
|
||||
if (sortOrder == "ASC") {
|
||||
sortOrderButton.src = "assets/icons/sort-order-2.svg";
|
||||
} else {
|
||||
sortOrderButton.src = "assets/icons/sort-order-1.svg";
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -152,7 +152,6 @@ body {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 20px;
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.separated-div {
|
||||
@@ -234,6 +233,14 @@ body {
|
||||
width: 240px;
|
||||
}
|
||||
|
||||
.smaller-button {
|
||||
width: 60px;
|
||||
}
|
||||
|
||||
.square-button {
|
||||
width: 40px;
|
||||
}
|
||||
|
||||
.mods-container {
|
||||
height: 70%;
|
||||
transform: translateY(50px);
|
||||
@@ -302,32 +309,41 @@ body {
|
||||
color: var(--secondary-color);
|
||||
}
|
||||
|
||||
.themes-div {
|
||||
.list-div {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.themes-menu {
|
||||
.list-menu {
|
||||
display: none;
|
||||
position: absolute;
|
||||
background: var(--darker-transparent-black);
|
||||
border: 1px solid var(--secondary-color);
|
||||
border-radius: 4px;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.themes-menu.show {
|
||||
.list-menu-inverted {
|
||||
transform: translateX(-75%);
|
||||
}
|
||||
|
||||
.list-menu.show {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.themes-menu li {
|
||||
.list-menu li {
|
||||
padding: 6px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.themes-menu li:hover {
|
||||
.list-menu li:hover {
|
||||
background: var(--background-color);
|
||||
}
|
||||
|
||||
.list-menu li.selected {
|
||||
background: var(--primary-color);
|
||||
}
|
||||
|
||||
.lace-pin-checkbox-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -419,3 +435,12 @@ body {
|
||||
.toast.warning {
|
||||
color: #ff9800;
|
||||
}
|
||||
|
||||
.search-form {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.long-text {
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
@@ -55,7 +55,7 @@
|
||||
<div class="horizontal-div">
|
||||
<label for="nexus-api-label">Enter your nexus api: </label>
|
||||
<input type="text" class="input" id="nexus-api-input" name="nexus-api-input" />
|
||||
<img class="nexus-check-image" id="nexus-check-image" src="assets/cross.svg" />
|
||||
<img class="nexus-check-image" id="nexus-check-image" src="assets/icons/cross.svg" />
|
||||
<button class="default-button" onclick="verifyNexusAPI()">Verify</button>
|
||||
</div>
|
||||
</template>
|
||||
@@ -64,16 +64,16 @@
|
||||
<h1 class="title">Chose the theme of the app</h1>
|
||||
<div class="horizontal-div welcome-div">
|
||||
<label>Themes: </label>
|
||||
<div class="themes-div">
|
||||
<div class="list-div">
|
||||
<div class="default-button longer-button" id="themes-button" onclick="toggleThemesMenu()">Silksong</div>
|
||||
<div class="themes-menu longer-button" id="themes-menu">
|
||||
<li onclick="changeTheme('Silksong')">Silksong</li>
|
||||
<li onclick="changeTheme('Citadel of song')">Citadel of song</li>
|
||||
<li onclick="changeTheme('Cradle')">Cradle</li>
|
||||
<li onclick="changeTheme('Abyss')">Abyss</li>
|
||||
<li onclick="changeTheme('Greyroot')">Greyroot</li>
|
||||
<li onclick="changeTheme('Surface')">Surface</li>
|
||||
<li onclick="changeTheme('Steel')">Steel</li>
|
||||
<div class="list-menu longer-button" id="themes-menu">
|
||||
<li id="Silksong" onclick="changeTheme('Silksong')">Silksong</li>
|
||||
<li id="Citadel of song" onclick="changeTheme('Citadel of song')">Citadel of song</li>
|
||||
<li id="Cradle" onclick="changeTheme('Cradle')">Cradle</li>
|
||||
<li id="Abyss" onclick="changeTheme('Abyss')">Abyss</li>
|
||||
<li id="Greyroot" onclick="changeTheme('Greyroot')">Greyroot</li>
|
||||
<li id="Surface" onclick="changeTheme('Surface')">Surface</li>
|
||||
<li id="Steel" onclick="changeTheme('Steel')">Steel</li>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user