From e0baf767417805c3c641ed5dcc2c2b7fed7b57f2 Mon Sep 17 00:00:00 2001
From: Noxy <107372460+noxygalaxy@users.noreply.github.com>
Date: Tue, 24 Mar 2026 17:18:19 +0100
Subject: [PATCH 1/8] add: store search grid/list btns
---
skin.json | 14 +++
.../css/storeSearchGrid.css | 9 +-
src/js/storeSearchGrid.js | 114 ++++++++++++++++++
3 files changed, 133 insertions(+), 4 deletions(-)
rename options/store/searchPageGrid.css => src/css/storeSearchGrid.css (50%)
create mode 100644 src/js/storeSearchGrid.js
diff --git a/skin.json b/skin.json
index 009c2c8..6a2ede0 100644
--- a/skin.json
+++ b/skin.json
@@ -402,6 +402,20 @@
},
+ "Store - Search grid view": {
+ "description": "Adds Grid/List View toggle button to the store search page",
+ "default": "no",
+ "tab": "Store",
+ "section": "Other",
+ "values": {
+ "no": {},
+ "yes": {
+ "TargetCss": { "affects": ["https://.*\\.steampowered\\.com(/.*)?"], "src": "src/css/storeSearchGrid.css" },
+ "TargetJs": { "affects": ["https://.*\\.steampowered\\.com(/.*)?"], "src": "src/js/storeSearchGrid.js" }
+ }
+ }
+ },
+
"Library - Steam-Custom-Artworks Support": {
diff --git a/options/store/searchPageGrid.css b/src/css/storeSearchGrid.css
similarity index 50%
rename from options/store/searchPageGrid.css
rename to src/css/storeSearchGrid.css
index 415dc56..c162b78 100644
--- a/options/store/searchPageGrid.css
+++ b/src/css/storeSearchGrid.css
@@ -1,6 +1,7 @@
-.search_page #search_result_container #search_resultsRows {
+.search_page.st-grid-view #search_result_container #search_resultsRows {
display: grid;
grid-template-columns: repeat(3, 1fr);
+ gap: 12px;
}
@@ -8,7 +9,7 @@
/*
& Card
*/
-.search_page #search_result_container .search_result_row {
+.search_page.st-grid-view #search_result_container .search_result_row {
flex-direction: column;
}
@@ -18,7 +19,7 @@
! Card
*/
/*** Content */
-.search_page #search_result_container .search_result_row .responsive_search_name_combined {
+.search_page.st-grid-view #search_result_container .search_result_row .responsive_search_name_combined {
gap: 6px 0;
grid-template-areas:
"title title title platforms"
@@ -28,6 +29,6 @@
/*^ Release Date */
-.search_page #search_result_container .search_result_row .search_released {
+.search_page.st-grid-view #search_result_container .search_result_row .search_released {
margin: 0 !important;
}
\ No newline at end of file
diff --git a/src/js/storeSearchGrid.js b/src/js/storeSearchGrid.js
new file mode 100644
index 0000000..a7f67ce
--- /dev/null
+++ b/src/js/storeSearchGrid.js
@@ -0,0 +1,114 @@
+(async function() {
+ // should work only on search page
+ if (!window.location.pathname.startsWith('/search')) return;
+
+ const waitForElement = (selector, parent = document) => new Promise((resolve) => {
+ const el = parent.querySelector(selector);
+ if (el) resolve(el);
+
+ const observer = new MutationObserver(() => {
+ const el = parent.querySelector(selector);
+ if (!el) return;
+ resolve(el);
+ observer.disconnect();
+ });
+
+ observer.observe(document.body, {
+ subtree: true,
+ childList: true,
+ });
+ });
+
+ const searchResultsRows = await waitForElement('#search_resultsRows');
+ const containerParent = document.getElementById('search_result_container');
+ if (!containerParent) return;
+
+ const btnContainer = document.createElement('div');
+ btnContainer.className = 'st-search-view-toggle';
+ btnContainer.style.display = 'flex';
+ btnContainer.style.gap = '8px';
+ btnContainer.style.marginBottom = '12px';
+ btnContainer.style.justifyContent = 'flex-end';
+
+ const listBtn = document.createElement('div');
+ listBtn.className = 'st-btn-list tooltip';
+ listBtn.setAttribute('data-tooltip-text', 'List View');
+ listBtn.innerHTML = `
+
+ `;
+ listBtn.style.cursor = 'pointer';
+ listBtn.style.padding = '6px';
+ listBtn.style.borderRadius = '4px';
+ listBtn.style.display = 'flex';
+ listBtn.style.alignItems = 'center';
+ listBtn.style.justifyContent = 'center';
+ listBtn.style.transition = 'background 0.2s, color 0.2s';
+
+ const gridBtn = document.createElement('div');
+ gridBtn.className = 'st-btn-grid tooltip';
+ gridBtn.setAttribute('data-tooltip-text', 'Grid View');
+ gridBtn.innerHTML = `
+
+ `;
+ gridBtn.style.cursor = 'pointer';
+ gridBtn.style.padding = '6px';
+ gridBtn.style.borderRadius = '4px';
+ gridBtn.style.display = 'flex';
+ gridBtn.style.alignItems = 'center';
+ gridBtn.style.justifyContent = 'center';
+ gridBtn.style.transition = 'background 0.2s, color 0.2s';
+
+ btnContainer.appendChild(listBtn);
+ btnContainer.appendChild(gridBtn);
+ containerParent.insertBefore(btnContainer, document.getElementById('search_resultsRows'));
+
+ function updateStyles() {
+ const isGrid = document.body.classList.contains('st-grid-view');
+
+ const activeColor = '#ffffff';
+ const activeBg = 'rgba(255, 255, 255, 0.2)';
+ const inactiveColor = '#67707b';
+ const inactiveBg = 'transparent';
+
+ gridBtn.style.color = isGrid ? activeColor : inactiveColor;
+ gridBtn.style.background = isGrid ? activeBg : inactiveBg;
+
+ listBtn.style.color = !isGrid ? activeColor : inactiveColor;
+ listBtn.style.background = !isGrid ? activeBg : inactiveBg;
+ }
+
+ gridBtn.addEventListener('click', () => {
+ document.body.classList.add('st-grid-view');
+ localStorage.setItem('st-search-view', 'grid');
+ updateStyles();
+ });
+
+ listBtn.addEventListener('click', () => {
+ document.body.classList.remove('st-grid-view');
+ localStorage.setItem('st-search-view', 'list');
+ updateStyles();
+ });
+
+ if (localStorage.getItem('st-search-view') === 'grid') {
+ document.body.classList.add('st-grid-view');
+ }
+ updateStyles();
+
+ const parentObserver = new MutationObserver(() => {
+ if (!document.body.contains(btnContainer)) {
+ const rows = document.getElementById('search_resultsRows');
+ if (rows && rows.parentElement) {
+ rows.parentElement.insertBefore(btnContainer, rows);
+ }
+ }
+ });
+
+ parentObserver.observe(containerParent, {
+ childList: true,
+ subtree: true
+ });
+})();
From b86a025c94fed48604ff31e0691a9c76d55928c3 Mon Sep 17 00:00:00 2001
From: SpaceEnergy <93218131+SpaceEnergy@users.noreply.github.com>
Date: Tue, 24 Mar 2026 21:31:05 +0100
Subject: [PATCH 2/8] move: js file to webkit.js
---
src/js/storeSearchGrid.js | 114 --------------------------------------
src/js/webkit.js | 114 ++++++++++++++++++++++++++++++++++++++
2 files changed, 114 insertions(+), 114 deletions(-)
delete mode 100644 src/js/storeSearchGrid.js
diff --git a/src/js/storeSearchGrid.js b/src/js/storeSearchGrid.js
deleted file mode 100644
index a7f67ce..0000000
--- a/src/js/storeSearchGrid.js
+++ /dev/null
@@ -1,114 +0,0 @@
-(async function() {
- // should work only on search page
- if (!window.location.pathname.startsWith('/search')) return;
-
- const waitForElement = (selector, parent = document) => new Promise((resolve) => {
- const el = parent.querySelector(selector);
- if (el) resolve(el);
-
- const observer = new MutationObserver(() => {
- const el = parent.querySelector(selector);
- if (!el) return;
- resolve(el);
- observer.disconnect();
- });
-
- observer.observe(document.body, {
- subtree: true,
- childList: true,
- });
- });
-
- const searchResultsRows = await waitForElement('#search_resultsRows');
- const containerParent = document.getElementById('search_result_container');
- if (!containerParent) return;
-
- const btnContainer = document.createElement('div');
- btnContainer.className = 'st-search-view-toggle';
- btnContainer.style.display = 'flex';
- btnContainer.style.gap = '8px';
- btnContainer.style.marginBottom = '12px';
- btnContainer.style.justifyContent = 'flex-end';
-
- const listBtn = document.createElement('div');
- listBtn.className = 'st-btn-list tooltip';
- listBtn.setAttribute('data-tooltip-text', 'List View');
- listBtn.innerHTML = `
-
- `;
- listBtn.style.cursor = 'pointer';
- listBtn.style.padding = '6px';
- listBtn.style.borderRadius = '4px';
- listBtn.style.display = 'flex';
- listBtn.style.alignItems = 'center';
- listBtn.style.justifyContent = 'center';
- listBtn.style.transition = 'background 0.2s, color 0.2s';
-
- const gridBtn = document.createElement('div');
- gridBtn.className = 'st-btn-grid tooltip';
- gridBtn.setAttribute('data-tooltip-text', 'Grid View');
- gridBtn.innerHTML = `
-
- `;
- gridBtn.style.cursor = 'pointer';
- gridBtn.style.padding = '6px';
- gridBtn.style.borderRadius = '4px';
- gridBtn.style.display = 'flex';
- gridBtn.style.alignItems = 'center';
- gridBtn.style.justifyContent = 'center';
- gridBtn.style.transition = 'background 0.2s, color 0.2s';
-
- btnContainer.appendChild(listBtn);
- btnContainer.appendChild(gridBtn);
- containerParent.insertBefore(btnContainer, document.getElementById('search_resultsRows'));
-
- function updateStyles() {
- const isGrid = document.body.classList.contains('st-grid-view');
-
- const activeColor = '#ffffff';
- const activeBg = 'rgba(255, 255, 255, 0.2)';
- const inactiveColor = '#67707b';
- const inactiveBg = 'transparent';
-
- gridBtn.style.color = isGrid ? activeColor : inactiveColor;
- gridBtn.style.background = isGrid ? activeBg : inactiveBg;
-
- listBtn.style.color = !isGrid ? activeColor : inactiveColor;
- listBtn.style.background = !isGrid ? activeBg : inactiveBg;
- }
-
- gridBtn.addEventListener('click', () => {
- document.body.classList.add('st-grid-view');
- localStorage.setItem('st-search-view', 'grid');
- updateStyles();
- });
-
- listBtn.addEventListener('click', () => {
- document.body.classList.remove('st-grid-view');
- localStorage.setItem('st-search-view', 'list');
- updateStyles();
- });
-
- if (localStorage.getItem('st-search-view') === 'grid') {
- document.body.classList.add('st-grid-view');
- }
- updateStyles();
-
- const parentObserver = new MutationObserver(() => {
- if (!document.body.contains(btnContainer)) {
- const rows = document.getElementById('search_resultsRows');
- if (rows && rows.parentElement) {
- rows.parentElement.insertBefore(btnContainer, rows);
- }
- }
- });
-
- parentObserver.observe(containerParent, {
- childList: true,
- subtree: true
- });
-})();
diff --git a/src/js/webkit.js b/src/js/webkit.js
index e69de29..a7f67ce 100644
--- a/src/js/webkit.js
+++ b/src/js/webkit.js
@@ -0,0 +1,114 @@
+(async function() {
+ // should work only on search page
+ if (!window.location.pathname.startsWith('/search')) return;
+
+ const waitForElement = (selector, parent = document) => new Promise((resolve) => {
+ const el = parent.querySelector(selector);
+ if (el) resolve(el);
+
+ const observer = new MutationObserver(() => {
+ const el = parent.querySelector(selector);
+ if (!el) return;
+ resolve(el);
+ observer.disconnect();
+ });
+
+ observer.observe(document.body, {
+ subtree: true,
+ childList: true,
+ });
+ });
+
+ const searchResultsRows = await waitForElement('#search_resultsRows');
+ const containerParent = document.getElementById('search_result_container');
+ if (!containerParent) return;
+
+ const btnContainer = document.createElement('div');
+ btnContainer.className = 'st-search-view-toggle';
+ btnContainer.style.display = 'flex';
+ btnContainer.style.gap = '8px';
+ btnContainer.style.marginBottom = '12px';
+ btnContainer.style.justifyContent = 'flex-end';
+
+ const listBtn = document.createElement('div');
+ listBtn.className = 'st-btn-list tooltip';
+ listBtn.setAttribute('data-tooltip-text', 'List View');
+ listBtn.innerHTML = `
+
+ `;
+ listBtn.style.cursor = 'pointer';
+ listBtn.style.padding = '6px';
+ listBtn.style.borderRadius = '4px';
+ listBtn.style.display = 'flex';
+ listBtn.style.alignItems = 'center';
+ listBtn.style.justifyContent = 'center';
+ listBtn.style.transition = 'background 0.2s, color 0.2s';
+
+ const gridBtn = document.createElement('div');
+ gridBtn.className = 'st-btn-grid tooltip';
+ gridBtn.setAttribute('data-tooltip-text', 'Grid View');
+ gridBtn.innerHTML = `
+
+ `;
+ gridBtn.style.cursor = 'pointer';
+ gridBtn.style.padding = '6px';
+ gridBtn.style.borderRadius = '4px';
+ gridBtn.style.display = 'flex';
+ gridBtn.style.alignItems = 'center';
+ gridBtn.style.justifyContent = 'center';
+ gridBtn.style.transition = 'background 0.2s, color 0.2s';
+
+ btnContainer.appendChild(listBtn);
+ btnContainer.appendChild(gridBtn);
+ containerParent.insertBefore(btnContainer, document.getElementById('search_resultsRows'));
+
+ function updateStyles() {
+ const isGrid = document.body.classList.contains('st-grid-view');
+
+ const activeColor = '#ffffff';
+ const activeBg = 'rgba(255, 255, 255, 0.2)';
+ const inactiveColor = '#67707b';
+ const inactiveBg = 'transparent';
+
+ gridBtn.style.color = isGrid ? activeColor : inactiveColor;
+ gridBtn.style.background = isGrid ? activeBg : inactiveBg;
+
+ listBtn.style.color = !isGrid ? activeColor : inactiveColor;
+ listBtn.style.background = !isGrid ? activeBg : inactiveBg;
+ }
+
+ gridBtn.addEventListener('click', () => {
+ document.body.classList.add('st-grid-view');
+ localStorage.setItem('st-search-view', 'grid');
+ updateStyles();
+ });
+
+ listBtn.addEventListener('click', () => {
+ document.body.classList.remove('st-grid-view');
+ localStorage.setItem('st-search-view', 'list');
+ updateStyles();
+ });
+
+ if (localStorage.getItem('st-search-view') === 'grid') {
+ document.body.classList.add('st-grid-view');
+ }
+ updateStyles();
+
+ const parentObserver = new MutationObserver(() => {
+ if (!document.body.contains(btnContainer)) {
+ const rows = document.getElementById('search_resultsRows');
+ if (rows && rows.parentElement) {
+ rows.parentElement.insertBefore(btnContainer, rows);
+ }
+ }
+ });
+
+ parentObserver.observe(containerParent, {
+ childList: true,
+ subtree: true
+ });
+})();
From cd2ee7b7968a69df7628a08e3cb594167a084a84 Mon Sep 17 00:00:00 2001
From: SpaceEnergy <93218131+SpaceEnergy@users.noreply.github.com>
Date: Tue, 24 Mar 2026 21:31:28 +0100
Subject: [PATCH 3/8] remove: tooltip
---
src/js/webkit.js | 6 ++----
1 file changed, 2 insertions(+), 4 deletions(-)
diff --git a/src/js/webkit.js b/src/js/webkit.js
index a7f67ce..9c6ba41 100644
--- a/src/js/webkit.js
+++ b/src/js/webkit.js
@@ -31,8 +31,7 @@
btnContainer.style.justifyContent = 'flex-end';
const listBtn = document.createElement('div');
- listBtn.className = 'st-btn-list tooltip';
- listBtn.setAttribute('data-tooltip-text', 'List View');
+ listBtn.className = 'st-btn-list';
listBtn.innerHTML = `
`;
- gridBtn.style.cursor = 'pointer';
- gridBtn.style.padding = '6px';
- gridBtn.style.borderRadius = '4px';
- gridBtn.style.display = 'flex';
- gridBtn.style.alignItems = 'center';
- gridBtn.style.justifyContent = 'center';
- gridBtn.style.transition = 'background 0.2s, color 0.2s';
btnContainer.appendChild(listBtn);
btnContainer.appendChild(gridBtn);
containerParent.insertBefore(btnContainer, document.getElementById('search_resultsRows'));
- function updateStyles() {
- const isGrid = document.body.classList.contains('st-grid-view');
-
- const activeColor = '#ffffff';
- const activeBg = 'rgba(255, 255, 255, 0.2)';
- const inactiveColor = '#67707b';
- const inactiveBg = 'transparent';
-
- gridBtn.style.color = isGrid ? activeColor : inactiveColor;
- gridBtn.style.background = isGrid ? activeBg : inactiveBg;
-
- listBtn.style.color = !isGrid ? activeColor : inactiveColor;
- listBtn.style.background = !isGrid ? activeBg : inactiveBg;
- }
gridBtn.addEventListener('click', () => {
document.body.classList.add('st-grid-view');
localStorage.setItem('st-search-view', 'grid');
- updateStyles();
});
listBtn.addEventListener('click', () => {
document.body.classList.remove('st-grid-view');
localStorage.setItem('st-search-view', 'list');
- updateStyles();
});
if (localStorage.getItem('st-search-view') === 'grid') {
document.body.classList.add('st-grid-view');
}
- updateStyles();
const parentObserver = new MutationObserver(() => {
if (!document.body.contains(btnContainer)) {
From 2b4ec42d44ee7f509d0807f238823e504fec9691 Mon Sep 17 00:00:00 2001
From: SpaceEnergy <93218131+SpaceEnergy@users.noreply.github.com>
Date: Tue, 24 Mar 2026 21:34:30 +0100
Subject: [PATCH 5/8] change: js patching
---
skin.json | 19 ++++---------------
1 file changed, 4 insertions(+), 15 deletions(-)
diff --git a/skin.json b/skin.json
index 6a2ede0..4e10007 100644
--- a/skin.json
+++ b/skin.json
@@ -402,21 +402,6 @@
},
- "Store - Search grid view": {
- "description": "Adds Grid/List View toggle button to the store search page",
- "default": "no",
- "tab": "Store",
- "section": "Other",
- "values": {
- "no": {},
- "yes": {
- "TargetCss": { "affects": ["https://.*\\.steampowered\\.com(/.*)?"], "src": "src/css/storeSearchGrid.css" },
- "TargetJs": { "affects": ["https://.*\\.steampowered\\.com(/.*)?"], "src": "src/js/storeSearchGrid.js" }
- }
- }
- },
-
-
"Library - Steam-Custom-Artworks Support": {
"description": "The best support for https://spacetheme.net/#steam-custom-artworks ",
@@ -626,6 +611,10 @@
"TargetCss": "src/css/libraryroot.custom.css",
"TargetJs": "src/js/libraryroot.custom.js"
},
+ {
+ "MatchRegexString": "https://.*\\.steampowered\\.com(/.*)?",
+ "TargetJs": "src/js/webkit.js"
+ },
{
"MatchRegexString": "https://steamcommunity\\.com(/.*)?",
"TargetCss": "src/css/custom/custom.css",
From 565021f5868116ae1a94d2fb71fe110e1177679c Mon Sep 17 00:00:00 2001
From: SpaceEnergy <93218131+SpaceEnergy@users.noreply.github.com>
Date: Tue, 24 Mar 2026 21:38:13 +0100
Subject: [PATCH 6/8] move: style to search.css
---
src/css/webkit/store/search.css | 18 ++++++++++++++++++
1 file changed, 18 insertions(+)
diff --git a/src/css/webkit/store/search.css b/src/css/webkit/store/search.css
index ba612ce..03c4fcb 100644
--- a/src/css/webkit/store/search.css
+++ b/src/css/webkit/store/search.css
@@ -263,6 +263,11 @@
.search_page #search_result_container #search_resultsRows {
gap: 6px;
}
+.search_page.st-grid-view #search_result_container #search_resultsRows {
+ display: grid;
+ grid-template-columns: repeat(3, 1fr);
+ gap: 12px;
+}
@@ -278,6 +283,9 @@
border-radius: 8px;
background-color: rgb(var(--st-color-2));
}
+.search_page.st-grid-view #search_result_container .search_result_row {
+ flex-direction: column;
+}
/** Image */
@@ -298,6 +306,13 @@
"reviews release price price";
justify-content: unset;
}
+.search_page.st-grid-view #search_result_container .search_result_row .responsive_search_name_combined {
+ gap: 6px;
+ grid-template-areas:
+ "title title title platforms"
+ "reviews reviews price price"
+ "release release price price" !important;
+}
/*^ Title */
.search_page #search_result_container .search_result_row .search_name {
@@ -330,6 +345,9 @@
line-height: 16px;
color: #a9a9a9;
}
+.search_page.st-grid-view #search_result_container .search_result_row .search_released {
+ margin: 0 !important;
+}
/*^ Price */
.search_page #search_result_container .search_result_row .search_price_discount_combined {
From d8b716b5253dccc44845b38ddaa81d9e87b5b7a0 Mon Sep 17 00:00:00 2001
From: SpaceEnergy <93218131+SpaceEnergy@users.noreply.github.com>
Date: Tue, 24 Mar 2026 21:38:26 +0100
Subject: [PATCH 7/8] Delete storeSearchGrid.css
---
src/css/storeSearchGrid.css | 34 ----------------------------------
1 file changed, 34 deletions(-)
delete mode 100644 src/css/storeSearchGrid.css
diff --git a/src/css/storeSearchGrid.css b/src/css/storeSearchGrid.css
deleted file mode 100644
index c162b78..0000000
--- a/src/css/storeSearchGrid.css
+++ /dev/null
@@ -1,34 +0,0 @@
-.search_page.st-grid-view #search_result_container #search_resultsRows {
- display: grid;
- grid-template-columns: repeat(3, 1fr);
- gap: 12px;
-}
-
-
-
-/*
-& Card
-*/
-.search_page.st-grid-view #search_result_container .search_result_row {
- flex-direction: column;
-}
-
-
-
-/*
-! Card
-*/
-/*** Content */
-.search_page.st-grid-view #search_result_container .search_result_row .responsive_search_name_combined {
- gap: 6px 0;
- grid-template-areas:
- "title title title platforms"
- "reviews reviews price price"
- "release release price price" !important;
-}
-
-
-/*^ Release Date */
-.search_page.st-grid-view #search_result_container .search_result_row .search_released {
- margin: 0 !important;
-}
\ No newline at end of file
From 63715d50208626981c47da99fca8661ad2aedc40 Mon Sep 17 00:00:00 2001
From: SpaceEnergy <93218131+SpaceEnergy@users.noreply.github.com>
Date: Tue, 24 Mar 2026 22:38:29 +0100
Subject: [PATCH 8/8] change/skin: buttons
---
src/css/webkit/store/search.css | 49 +++++++++++++++++++++++++++++++++
src/js/webkit.js | 36 ++++++++++++++++--------
2 files changed, 73 insertions(+), 12 deletions(-)
diff --git a/src/css/webkit/store/search.css b/src/css/webkit/store/search.css
index 03c4fcb..c8cb3aa 100644
--- a/src/css/webkit/store/search.css
+++ b/src/css/webkit/store/search.css
@@ -66,6 +66,7 @@
! Top Controls
*/
.search_page .searchbar {
+ display: flex;
margin: 0;
padding: 12px;
border-radius: 8px 8px 0 0;
@@ -73,8 +74,11 @@
}
.search_page .searchbar .searchbar_left {
+ order: 1;
display: flex;
+ justify-content: flex-end;
height: 30px;
+ margin-left: auto;
padding: 0;
}
@@ -232,6 +236,51 @@
}
+/*** View */
+.search_page .st-search-view-toggle {
+ box-sizing: border-box;
+ display: flex;
+ gap: 4px;
+ width: fit-content;
+ height: 30px;
+ margin-left: 12px;
+}
+
+/*^ Button */
+.search_page .st-search-view-toggle .st-btn {
+ cursor: pointer;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ padding: 6px;
+ border-radius: 8px;
+}
+.search_page .st-search-view-toggle .st-btn.active {
+ background-color: rgb(var(--st-color-1));
+}
+
+/* SVG */
+.search_page .st-search-view-toggle .st-btn svg {
+ display: none;
+}
+
+/* Custom icon */
+.search_page .st-search-view-toggle .st-btn.active::before {
+ color: rgb(var(--st-accent-1)) !important;
+}
+
+.search_page .st-search-view-toggle .st-btn.list::before {
+ content: "\f07e2" !important;
+ font-size: 16px;
+ color: #dcdedf;
+}
+.search_page .st-search-view-toggle .st-btn.grid::before {
+ content: "\f467" !important;
+ font-size: 16px;
+ color: #dcdedf;
+}
+
+
/*
! Warning
*/
diff --git a/src/js/webkit.js b/src/js/webkit.js
index ced37ac..9d2fcb1 100644
--- a/src/js/webkit.js
+++ b/src/js/webkit.js
@@ -19,53 +19,65 @@
});
});
+ const containerParent = await waitForElement('.searchbar');
const searchResultsRows = await waitForElement('#search_resultsRows');
- const containerParent = document.getElementById('search_result_container');
if (!containerParent) return;
const btnContainer = document.createElement('div');
btnContainer.className = 'st-search-view-toggle';
const listBtn = document.createElement('div');
- listBtn.className = 'st-btn-list';
+ listBtn.className = 'st-btn list';
listBtn.innerHTML = `
-
+
`;
const gridBtn = document.createElement('div');
- gridBtn.className = 'st-btn-grid';
+ gridBtn.className = 'st-btn grid';
gridBtn.innerHTML = `
-
+
`;
btnContainer.appendChild(listBtn);
btnContainer.appendChild(gridBtn);
- containerParent.insertBefore(btnContainer, document.getElementById('search_resultsRows'));
+ if (searchResultsRows && searchResultsRows.parentElement === containerParent) {
+ containerParent.insertBefore(btnContainer, searchResultsRows);
+ } else {
+ containerParent.appendChild(btnContainer);
+ }
gridBtn.addEventListener('click', () => {
document.body.classList.add('st-grid-view');
localStorage.setItem('st-search-view', 'grid');
+ gridBtn.classList.add('active');
+ listBtn.classList.remove('active');
});
listBtn.addEventListener('click', () => {
document.body.classList.remove('st-grid-view');
localStorage.setItem('st-search-view', 'list');
+ listBtn.classList.add('active');
+ gridBtn.classList.remove('active');
});
- if (localStorage.getItem('st-search-view') === 'grid') {
+ if (localStorage.getItem('st-search-view') === 'list') {
+ document.body.classList.remove('st-grid-view');
+ listBtn.classList.add('active');
+ } else {
document.body.classList.add('st-grid-view');
+ gridBtn.classList.add('active');
}
const parentObserver = new MutationObserver(() => {
if (!document.body.contains(btnContainer)) {
- const rows = document.getElementById('search_resultsRows');
+ const rows = searchResultsRows;
if (rows && rows.parentElement) {
rows.parentElement.insertBefore(btnContainer, rows);
+ return;
+ }
+ if (containerParent) {
+ containerParent.appendChild(btnContainer);
}
}
});