From 382dd5958ffcb2ca0d5adc6d1756f9c5fa0776e3 Mon Sep 17 00:00:00 2001 From: Disco DeDisco Date: Mon, 9 Mar 2026 21:52:54 -0400 Subject: [PATCH] full test suite passes; .gear-btn once again moved, this time to new file _applets.scss, along with generic applet styling attrs (removed from _base & .dash, respectively); _gameboard.scss in many ways mirrors particularities of _dash, but also feat. style attrs for the Game Kit applet consumables array; sacrificed btn in the latter now that applet dimensions defined on gameboard.html --- .../gameboard/tests/integrated/test_views.py | 4 +- src/apps/gameboard/views.py | 1 + src/functional_tests/test_gameboard.py | 14 +-- src/static_src/scss/_applets.scss | 115 ++++++++++++++++++ src/static_src/scss/_base.scss | 20 --- src/static_src/scss/_dashboard.scss | 89 -------------- src/static_src/scss/_gameboard.scss | 73 +++++++++++ src/static_src/scss/core.scss | 2 + .../gameboard/_partials/_applet-game-kit.html | 9 +- 9 files changed, 198 insertions(+), 129 deletions(-) create mode 100644 src/static_src/scss/_applets.scss create mode 100644 src/static_src/scss/_gameboard.scss diff --git a/src/apps/gameboard/tests/integrated/test_views.py b/src/apps/gameboard/tests/integrated/test_views.py index 3fed2f4..ffdcc5f 100644 --- a/src/apps/gameboard/tests/integrated/test_views.py +++ b/src/apps/gameboard/tests/integrated/test_views.py @@ -34,8 +34,8 @@ class GameboardViewTest(TestCase): def test_gameboard_shows_new_game_applet(self): [_] = self.parsed.cssselect("#id_applet_new_game") - def test_gameboard_shows_game_kit_btn(self): - [_] = self.parsed.cssselect("#id_game_kit_btn") + def test_gameboard_shows_game_kit(self): + [_] = self.parsed.cssselect("#id_game_kit") def test_gameboard_shows_game_gear(self): [_] = self.parsed.cssselect(".gear-btn") diff --git a/src/apps/gameboard/views.py b/src/apps/gameboard/views.py index e9a9337..2a9cdd2 100644 --- a/src/apps/gameboard/views.py +++ b/src/apps/gameboard/views.py @@ -22,6 +22,7 @@ def gameboard(request): "coin": coin, "free_tokens": free_tokens, "applets": applet_context(request.user, "gameboard"), + "page_class": "page-gameboard", } ) diff --git a/src/functional_tests/test_gameboard.py b/src/functional_tests/test_gameboard.py index 499f0f5..40760fc 100644 --- a/src/functional_tests/test_gameboard.py +++ b/src/functional_tests/test_gameboard.py @@ -49,20 +49,12 @@ class GameboardNavigationTest(FunctionalTest): # 1. Log in, nav to gameboard self.create_pre_authenticated_session("capman@test.io") self.browser.get(self.live_server_url + "/gameboard/") - # 2. Assert game kit & gear btns both present (stacked vertically) + # 2. Assert game kit applet & gear btn present self.wait_for( - lambda: self.browser.find_element(By.ID, "id_game_kit_btn") + lambda: self.browser.find_element(By.ID, "id_game_kit") ) self.browser.find_element(By.CSS_SELECTOR, ".gear-btn") - # 3. Click game kit btn to open panel - self.browser.find_element(By.ID, "id_game_kit_btn").click() - # 4. Wait for game kit panel to become visible - self.wait_for( - lambda: self.assertTrue( - self.browser.find_element(By.ID, "id_game_kit").is_displayed() - ) - ) - # 5. Assert Coin-on-a-String present in kit + # 3. Assert Coin-on-a-String present in kit coin = self.browser.find_element(By.ID, "id_kit_coin_on_a_string") # 6. Hover over it; assert tooltip shows name, entry text & reuse description ActionChains(self.browser).move_to_element(coin).perform() diff --git a/src/static_src/scss/_applets.scss b/src/static_src/scss/_applets.scss new file mode 100644 index 0000000..1634bd7 --- /dev/null +++ b/src/static_src/scss/_applets.scss @@ -0,0 +1,115 @@ +// ── Gear button ──────────────────────────────────────────── +.gear-btn { + position: absolute; + bottom: 0.5rem; + right: 0.5rem; + z-index: 1; + font-size: 2rem; + cursor: pointer; + color: rgba(var(--secUser), 1); + display: inline-flex; + align-items: center; + justify-content: center; + width: 3rem; + height: 3rem; + border-radius: 50%; + background-color: rgba(var(--priUser), 1); + border: 0.15rem solid rgba(var(--secUser), 1); +} + +// ── Applet menu (shared structure) ───────────────────────── +%applet-menu { + position: absolute; + bottom: 3rem; + right: 0.5rem; + z-index: 100; + background-color: rgba(var(--priUser), 0.95); + border: 0.15rem solid rgba(var(--secUser), 0.5); + box-shadow: + 0.1rem 0.1rem 0.12rem rgba(var(--priUser), 0.5), + 0.12rem 0.12rem 0.5rem rgba(0, 0, 0, 0.25), + ; + border-radius: 0.75rem; + padding: 1rem; + + .menu-btns { + display: flex; + gap: 0.25rem; + margin-top: 0.75rem; + } + + form { + display: flex; + flex-direction: column; + gap: 0.5rem; + } + + input[type="checkbox"] { + appearance: none; + -webkit-appearance: none; + width: 0.9em; + height: 0.9em; + border: 0.1rem solid rgba(var(--secUser), 0.4); + border-radius: 0.25rem; + background: transparent; + cursor: pointer; + position: relative; + flex-shrink: 0; + top: 0.1em; + + &:checked::after { + content: ''; + position: absolute; + left: 0.2em; + bottom: 0.2em; + width: 0.55em; + height: 1em; + border: 0.12em solid rgba(var(--ninUser), 1); + border-top: none; + border-left: none; + transform: rotate(45deg); + } + } +} + +#id_dash_applet_menu { @extend %applet-menu; } +#id_game_applet_menu { @extend %applet-menu; } + +// ── Applets grid (shared across all boards) ──────────────── +%applets-grid { + container-type: inline-size; + --grid-gap: 0.5rem; + flex: 1; + overflow-y: auto; + overflow-x: hidden; + display: grid; + grid-template-columns: repeat(12, 1fr); + grid-auto-rows: 3rem; + gap: var(--grid-gap); + padding: 0.75rem; + -webkit-overflow-scrolling: touch; + mask-image: linear-gradient( + to bottom, + transparent 0%, + black 2%, + black 98%, + transparent 100% + ); + + section { + border: 0.2rem solid rgba(var(--secUser), 0.5); + border-radius: 0.75rem; + padding: 1rem; + overflow: hidden; + min-width: 0; + grid-column: span var(--applet-cols, 12); + grid-row: span var(--applet-rows, 3); + + @container (max-width: 550px) { + grid-column: span 12; + } + } +} + +#id_applets_container { @extend %applets-grid; } +#id_game_applets_container { @extend %applets-grid; } diff --git a/src/static_src/scss/_base.scss b/src/static_src/scss/_base.scss index 877fdda..dbd348d 100644 --- a/src/static_src/scss/_base.scss +++ b/src/static_src/scss/_base.scss @@ -197,24 +197,4 @@ body { opacity: 0.6; } } -} - -.gear-btn { - position: absolute; - bottom: 0.5rem; - right: 0.5rem; - z-index: 1; - background: none; - border: none; - font-size: 2rem; - cursor: pointer; - color: rgba(var(--secUser), 1); - display: inline-flex; - align-items: center; - justify-content: center; - width: 3rem; - height: 3rem; - border-radius: 50%; - background-color: rgba(var(--priUser), 1); - border: 0.15rem solid rgba(var(--secUser), 1); } \ No newline at end of file diff --git a/src/static_src/scss/_dashboard.scss b/src/static_src/scss/_dashboard.scss index f293935..c5a7a65 100644 --- a/src/static_src/scss/_dashboard.scss +++ b/src/static_src/scss/_dashboard.scss @@ -28,90 +28,7 @@ body.page-dashboard { position: relative; } -#id_dash_applet_menu { - position: absolute; - bottom: 3rem; - right: 0.5rem; - z-index: 100; - background-color: rgba(var(--priUser), 0.95); - border: 0.15rem solid rgba(var(--secUser), 0.5); - box-shadow: - 0.1rem 0.1rem 0.12rem rgba(var(--priUser), 0.5), - 0.12rem 0.12rem 0.5rem rgba(0, 0, 0, 0.25), - ; - border-radius: 0.75rem; - padding: 1rem; - - .menu-btns { - display: flex; - gap: 0.25rem; - margin-top: 0.75rem; - } - - form { - display: flex; - flex-direction: column; - gap: 0.5rem; - } - - input[type="checkbox"] { - appearance: none; - -webkit-appearance: none; - width: 0.9em; - height: 0.9em; - border: 0.1rem solid rgba(var(--secUser), 0.4); - border-radius: 0.25rem; - background: transparent; - cursor: pointer; - position: relative; - flex-shrink: 0; - top: 0.1em; - - &:checked::after { - content: ''; - position: absolute; - left: 0.2em; - bottom: 0.2em; - width: 0.55em; - height: 1em; - border: 0.12em solid rgba(var(--ninUser), 1); - border-top: none; - border-left: none; - transform: rotate(45deg); - } - } -} - #id_applets_container { - container-type: inline-size; - --grid-gap: 0.5rem; - flex: 1; - overflow-y: auto; - overflow-x: hidden; - display: grid; - grid-template-columns: repeat(12, 1fr); - grid-auto-rows: 3rem; - gap: var(--grid-gap); - padding: 0.75rem; - -webkit-overflow-scrolling: touch; - mask-image: linear-gradient( - to bottom, - transparent 0%, - black 2%, - black 98%, - transparent 100% - ); - - section { - border: 0.2rem solid rgba(var(--secUser), 0.5); - border-radius: 0.75rem; - padding: 1rem; - overflow: hidden; - min-width: 0; - grid-column: span var(--applet-cols, 12); - grid-row: span var(--applet-rows, 3); - } - #id_applet_my_lists { padding: 1.25rem 1.5rem; display: flex; @@ -220,12 +137,6 @@ body.page-dashboard { min-width: 0; overflow: hidden; } - - #id_applets_container { - section { - grid-column: span 12; - } - } } @media (min-width: 738px) { diff --git a/src/static_src/scss/_gameboard.scss b/src/static_src/scss/_gameboard.scss new file mode 100644 index 0000000..29d9f0a --- /dev/null +++ b/src/static_src/scss/_gameboard.scss @@ -0,0 +1,73 @@ +html:has(body.page-gameboard) { + overflow: hidden; +} + +body.page-gameboard { + overflow: hidden; + + .container { + overflow: hidden; + display: flex; + flex-direction: column; + flex: 1; + min-height: 0; + } + + .row { + flex-shrink: 0; + margin-bottom: -1rem; + } +} + +.gameboard-page { + flex: 1; + min-width: 425px; + overflow: hidden; + display: flex; + flex-direction: column; + position: relative; +} + +@media (max-width: 550px) { + .gameboard-page { + min-width: 0; + overflow: hidden; + } +} + +@media (min-width: 738px) { + .gameboard-page { + min-width: 666px; + } +} + +#id_game_applets_container { + #id_applet_game_kit { + display: flex; + flex-direction: column; + + #id_game_kit { + flex: 1; + display: flex; + flex-direction: row; + align-items: center; + gap: 0.75rem; + overflow-x: auto; + scrollbar-width: none; + &::-webkit-scrollbar { display: none; } + } + } +} + +@media (max-height: 500px) { + body.page-gameboard { + .container { + .row { + padding: 0.25rem 0; + .col-lg-6 h2 { + margin-bottom: 0.5rem; + } + } + } + } +} diff --git a/src/static_src/scss/core.scss b/src/static_src/scss/core.scss index d2bbb7e..86bbd73 100644 --- a/src/static_src/scss/core.scss +++ b/src/static_src/scss/core.scss @@ -1,7 +1,9 @@ @import 'rootvars'; +@import 'applets'; @import 'base'; @import 'button-pad'; @import 'dashboard'; +@import 'gameboard'; @import 'palette-picker'; @import 'wallet-tokens'; diff --git a/src/templates/apps/gameboard/_partials/_applet-game-kit.html b/src/templates/apps/gameboard/_partials/_applet-game-kit.html index b5c08a6..0f75f09 100644 --- a/src/templates/apps/gameboard/_partials/_applet-game-kit.html +++ b/src/templates/apps/gameboard/_partials/_applet-game-kit.html @@ -2,13 +2,8 @@ id="id_applet_game_kit" style="--applet-cols: {{ entry.applet.grid_cols }}; --applet-rows: {{ entry.applet.grid_rows }};" > - -