diff --git a/static/dark-theme.js b/static/dark-theme.js
index b5fce21f9..1e60c5817 100644
--- a/static/dark-theme.js
+++ b/static/dark-theme.js
@@ -5,13 +5,11 @@ const DARK_THEME_KEY = 'startInDarkTheme';
function setDarkTheme() {
document.body.classList.remove(LIGHT_THEME_CLASS);
document.body.classList.add(DARK_THEME_CLASS);
- setThemeButtonText("Light Theme");
}
function setLightTheme() {
document.body.classList.remove(DARK_THEME_CLASS);
document.body.classList.add(LIGHT_THEME_CLASS);
- setThemeButtonText("Dark Theme");
}
function toggleDarkTheme() {
@@ -24,17 +22,6 @@ function toggleDarkTheme() {
}
}
-/**
- * Safely modify theme button text only if it exists
- * @param {string} text label for button
- */
-function setThemeButtonText(text) {
- const button = document.getElementById('dark-theme-button')
- if (button) {
- button.innerHTML = text
- }
-}
-
// enable dark theme as soon as possible so first paint is already dark mode
(function () {
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', event => {
@@ -54,6 +41,5 @@ function setThemeButtonText(text) {
// handle theme button label and listener once DOM fully loaded
window.addEventListener('DOMContentLoaded', function () {
const isDarkTheme = document.body.classList.contains(DARK_THEME_CLASS)
- setThemeButtonText(isDarkTheme ? "Light Theme" : "Dark Theme")
document.getElementById('dark-theme-button').addEventListener('click', toggleDarkTheme)
})
diff --git a/static/main.css b/static/main.css
index 1c0bf27c7..87a0b4574 100644
--- a/static/main.css
+++ b/static/main.css
@@ -199,6 +199,11 @@ dd + dt { margin-top: 1em; }
background-color: #fff;
}
+.dark-theme #dark-theme-label { display: none; }
+.dark-theme #light-theme-label { display: block; }
+.light-theme #dark-theme-label { display: block; }
+.light-theme #light-theme-label { display: none; }
+
.light-theme .tag.playable { color: #28a745; }
.light-theme .tag.semi-playable { color: #CB9423; }
.light-theme .tag.unplayable { color: #dc3545; }
@@ -360,3 +365,18 @@ dd + dt { margin-top: 1em; }
.game-spacer {
margin: 10px;
}
+
+.lg-view{
+ display:inline-block;
+}
+.sm-view{
+ display:none;
+}
+@media screen and (max-width: 500px) {
+ .lg-view{
+ display:none;
+ }
+ .sm-view{
+ display:inline-block;
+ }
+}
diff --git a/templates/common.html b/templates/common.html
index fe672781a..05198c991 100644
--- a/templates/common.html
+++ b/templates/common.html
@@ -102,7 +102,10 @@
xxxx/yyyy games
- Dark Theme
+
+
+
+
Sort by ........