From 645b265c800470b03225c5ebea071962815f686e Mon Sep 17 00:00:00 2001 From: Disco DeDisco Date: Mon, 9 Mar 2026 22:42:30 -0400 Subject: [PATCH] several user QoL styling improvements, incl. footer icon .active color painting --- src/functional_tests/base.py | 5 ++- src/functional_tests/test_gameboard.py | 1 + src/static_src/scss/_applets.scss | 4 +-- src/static_src/scss/_base.scss | 11 +++++-- src/static_src/scss/_gameboard.scss | 39 +++++++++++++++++++++-- src/static_src/scss/_wallet-tokens.scss | 2 +- src/templates/core/_partials/_footer.html | 8 +++-- 7 files changed, 60 insertions(+), 10 deletions(-) diff --git a/src/functional_tests/base.py b/src/functional_tests/base.py index d75bbd4..c1b4ba9 100644 --- a/src/functional_tests/base.py +++ b/src/functional_tests/base.py @@ -37,9 +37,12 @@ class FunctionalTest(StaticLiveServerTestCase): # Helper methods def setUp(self): options = webdriver.FirefoxOptions() - if os.environ.get("HEADLESS"): + headless = os.environ.get("HEADLESS") + if headless: options.add_argument("--headless") self.browser = webdriver.Firefox(options=options) + if headless: + self.browser.set_window_size(1366, 900) self.test_server = os.environ.get("TEST_SERVER") if self.test_server: self.live_server_url = 'http://' + self.test_server diff --git a/src/functional_tests/test_gameboard.py b/src/functional_tests/test_gameboard.py index 40760fc..5cc8584 100644 --- a/src/functional_tests/test_gameboard.py +++ b/src/functional_tests/test_gameboard.py @@ -56,6 +56,7 @@ class GameboardNavigationTest(FunctionalTest): self.browser.find_element(By.CSS_SELECTOR, ".gear-btn") # 3. Assert Coin-on-a-String present in kit coin = self.browser.find_element(By.ID, "id_kit_coin_on_a_string") + self.browser.execute_script("arguments[0].scrollIntoView({block: 'center'});", coin) # 6. Hover over it; assert tooltip shows name, entry text & reuse description ActionChains(self.browser).move_to_element(coin).perform() self.wait_for( diff --git a/src/static_src/scss/_applets.scss b/src/static_src/scss/_applets.scss index 1634bd7..6552bfa 100644 --- a/src/static_src/scss/_applets.scss +++ b/src/static_src/scss/_applets.scss @@ -24,9 +24,9 @@ right: 0.5rem; z-index: 100; background-color: rgba(var(--priUser), 0.95); - border: 0.15rem solid rgba(var(--secUser), 0.5); + border: 0.15rem solid rgba(var(--secUser), 1); box-shadow: - 0.1rem 0.1rem 0.12rem rgba(var(--priUser), 0.5), + 0 0 0.5rem rgba(var(--secUser), 0.75), 0.12rem 0.12rem 0.5rem rgba(0, 0, 0, 0.25), ; border-radius: 0.75rem; diff --git a/src/static_src/scss/_base.scss b/src/static_src/scss/_base.scss index dbd348d..273d321 100644 --- a/src/static_src/scss/_base.scss +++ b/src/static_src/scss/_base.scss @@ -175,11 +175,18 @@ body { a { font-size: 1.75rem; - color: rgba(var(--quaUser), 0.9); + color: rgba(var(--secUser), 0.6); text-shadow: - 0 0 0.25rem rgba(0, 0, 0, 0.5), + 0 0 0.25rem rgba(0, 0, 0, 0.25), ; + &.active { + color: rgba(var(--quaUser), 1); + text-shadow: + 0 0 0.5rem rgba(0, 0, 0, 0.5), + ; + } + &:hover { color: rgba(var(--quaUser), 1); text-shadow: diff --git a/src/static_src/scss/_gameboard.scss b/src/static_src/scss/_gameboard.scss index 29d9f0a..f84f11e 100644 --- a/src/static_src/scss/_gameboard.scss +++ b/src/static_src/scss/_gameboard.scss @@ -45,16 +45,51 @@ body.page-gameboard { #id_applet_game_kit { display: flex; flex-direction: column; + overflow: visible; #id_game_kit { flex: 1; display: flex; flex-direction: row; align-items: center; - gap: 0.75rem; - overflow-x: auto; + justify-content: space-evenly; + overflow-x: visible; scrollbar-width: none; &::-webkit-scrollbar { display: none; } + + .token-tooltip { + z-index: 1000; + } + + .token, + .kit-item { + font-size: 1.5rem; + } + + .kit-item { + opacity: 0.6; + } + } + } +} + +#id_applet_new_game, +#id_applet_my_games { + display: flex; + flex-direction: column; + + ul { + flex: 1; + list-style: none; + padding: 0; + margin: 0; + display: flex; + align-items: center; + justify-content: center; + + small { + opacity: 0.5; + font-style: italic; } } } diff --git a/src/static_src/scss/_wallet-tokens.scss b/src/static_src/scss/_wallet-tokens.scss index cbeba41..d1a97d5 100644 --- a/src/static_src/scss/_wallet-tokens.scss +++ b/src/static_src/scss/_wallet-tokens.scss @@ -1,7 +1,7 @@ .token { position: relative; display: inline-block; - cursor: pointer; + cursor: help; color: rgba(var(--terUser), 1); .token-tooltip { diff --git a/src/templates/core/_partials/_footer.html b/src/templates/core/_partials/_footer.html index 6e59a98..54ede9a 100644 --- a/src/templates/core/_partials/_footer.html +++ b/src/templates/core/_partials/_footer.html @@ -1,7 +1,11 @@