diff --git a/AGENTS.md b/AGENTS.md index 09903b7..29f65ea 100644 --- a/AGENTS.md +++ b/AGENTS.md @@ -109,8 +109,35 @@ Complete the following: - [x] Define the exact ACP custom classes to enter for each category/subcategory, based on `GAME_ICONS.md`, so setup can happen without theme code knowing category IDs. - [x] Document setup steps for admins: where to enter the custom class, which class names map to which icons, and when to rebuild/restart NodeBB after theme changes. - [x] Validate implementation scaffolding: `./nodebb build` succeeds, compiled templates emit `{./class}`, compiled CSS contains the `wg-icon-*` mask rules, and `/assets/plugins/nodebb-theme-westgate/game-icons/drama-masks.svg` returns HTTP 200. - - [ ] Enter the `wg-icon-*` values from `GAME_ICONS.md` into the live ACP category custom class fields. The current live data still contains legacy layout classes like `col-md-3 col-6`; keep them only if they are still intentionally used for layout, and append the `wg-icon-*` class alongside them. - - [ ] Validate actual game-icon visuals on the live website after ACP class entry: desktop and mobile `/categories`, one category page with subcategories, "load more subcategories" if present, and at least one category with no game-icon class to confirm Font Awesome fallback still works. + - [x] Enter the `wg-icon-*` values from `GAME_ICONS.md` into the live ACP category custom class fields. The current live data still contains legacy layout classes like `col-md-3 col-6`; keep them only if they are still intentionally used for layout, and append the `wg-icon-*` class alongside them. + - [x] Removed `col-md-3 col-6` legacy layout classes. + - [-] Validate actual game-icon visuals on the live website after ACP class entry: desktop and mobile `/categories`, one category page with subcategories, "load more subcategories" if present, and at least one category with no game-icon class to confirm Font Awesome fallback still works. + - [ ] Icons don't fit into their containers: either too small or cropped wrong. Especially noticeable when viewing `category` page + - [ ] Missing "signet ring" style ornamentation namely on `category` page (above topic or subcategory list) + - [ ] Subcategory containers no longer tidy; maybe subcategory icon and container should be bigger (1.5x current size) on the `categories` page with text remaining the same size. + - [ ] Some icons need to be changed. When adding new icons, add new classes for them, and deprecate unused ones: + - [ ] INFORMATION: `scroll-unfurled` + - [ ] Announcements: `trumpet-flag` + - [ ] Player Guide: `compass` + - [ ] COMMUNITY + - [ ] General Discussion:`beer-stein` + - [ ] Screenshots: `wood-frame` + - [ ] Creations: `harp` + - [ ] ROLEPLAY: `duality-mask` + - [ ] Notices: `stabbed-note` + - [ ] Rumors & Gossip: `mute` + - [ ] Journals & Biographies: `sword-altar` + - [ ] Factions & Guilds: `cowled` + - [ ] Keep `wax-seal` for "Organization Registry" (subcategory of Factions & Guilds) + - [ ] SUPPORT: `candle-flame` + - [ ] Common Issues & Questions: `key-lock` + - [ ] Feedback: `envelope` + - [ ] Technical Help:`round-potion` + - [ ] DEVELOPMENT: `anvil` + - [ ] Tools & References: `spanner` + - [ ] Programming: `gears` + - [ ] General: `wax-tablet` + - [ ] Lore: `classical-knowledge` - [ ] Decide whether uploaded category background images should be cleared for icon-driven categories after seeing the final ACP-configured visuals. - [ ] Explain any operational follow-up after ACP setup, especially asset rebuild, restart/cache behavior, and whether legacy Bootstrap layout classes should remain in category custom class fields. diff --git a/GAME_ICONS.md b/GAME_ICONS.md index 0a85ebe..8ed9baa 100644 --- a/GAME_ICONS.md +++ b/GAME_ICONS.md @@ -12,36 +12,39 @@ The SVGs in `public/game-icons/` were sanitized for theme use by removing the de | Category | Recommended icon | ACP custom class | Asset | | --- | --- | --- | --- | -| INFORMATION | Scroll and quill | `wg-icon-scroll-quill` | `public/game-icons/scroll-quill.svg` | -| Player Guide | Rule book | `wg-icon-rule-book` | `public/game-icons/rule-book.svg` | -| Announcements | Ringing bell | `wg-icon-ringing-bell` | `public/game-icons/ringing-bell.svg` | +| INFORMATION | Scroll unfurled | `wg-icon-scroll-unfurled` | `public/game-icons/scroll-unfurled.svg` | +| Player Guide | Compass | `wg-icon-compass` | `public/game-icons/compass.svg` | +| Announcements | Trumpet flag | `wg-icon-trumpet-flag` | `public/game-icons/trumpet-flag.svg` | | Patch Notes | Spinning wheel | `wg-icon-spinning-wheel` | `public/game-icons/spinning-wheel.svg` | | COMMUNITY | Tavern sign | `wg-icon-tavern-sign` | `public/game-icons/tavern-sign.svg` | -| General Discussion | Saloon | `wg-icon-saloon` | `public/game-icons/saloon.svg` | +| General Discussion | Beer stein | `wg-icon-beer-stein` | `public/game-icons/beer-stein.svg` | | Introductions | Shaking hands | `wg-icon-shaking-hands` | `public/game-icons/shaking-hands.svg` | -| Screenshots | Large paint brush | `wg-icon-large-paint-brush` | `public/game-icons/large-paint-brush.svg` | -| Creations | Flute | `wg-icon-flute` | `public/game-icons/flute.svg` | -| ROLEPLAY | Drama masks | `wg-icon-drama-masks` | `public/game-icons/drama-masks.svg` | -| Notices | Target poster | `wg-icon-target-poster` | `public/game-icons/target-poster.svg` | -| Rumors & Gossip | Chat bubble | `wg-icon-chat-bubble` | `public/game-icons/chat-bubble.svg` | -| Journals & Biographies | Notebook | `wg-icon-notebook` | `public/game-icons/notebook.svg` | -| Factions & Guilds | Wax seal | `wg-icon-wax-seal` | `public/game-icons/wax-seal.svg` | -| SUPPORT | Glowing hands | `wg-icon-glowing-hands` | `public/game-icons/glowing-hands.svg` | -| Common Issues & Questions | Question badge | `wg-icon-question` | `public/game-icons/question.svg` | -| Technical Help | Monkey wrench | `wg-icon-monkey-wrench` | `public/game-icons/monkey-wrench.svg` | +| Screenshots | Wood frame | `wg-icon-wood-frame` | `public/game-icons/wood-frame.svg` | +| Creations | Harp | `wg-icon-harp` | `public/game-icons/harp.svg` | +| ROLEPLAY | Duality mask | `wg-icon-duality-mask` | `public/game-icons/duality-mask.svg` | +| Notices | Stabbed note | `wg-icon-stabbed-note` | `public/game-icons/stabbed-note.svg` | +| Rumors & Gossip | Mute | `wg-icon-mute` | `public/game-icons/mute.svg` | +| Journals & Biographies | Sword altar | `wg-icon-sword-altar` | `public/game-icons/sword-altar.svg` | +| Factions & Guilds | Cowled | `wg-icon-cowled` | `public/game-icons/cowled.svg` | +| Organization Registry | Wax seal | `wg-icon-wax-seal` | `public/game-icons/wax-seal.svg` | +| SUPPORT | Candle flame | `wg-icon-candle-flame` | `public/game-icons/candle-flame.svg` | +| Common Issues & Questions | Key lock | `wg-icon-key-lock` | `public/game-icons/key-lock.svg` | +| Technical Help | Round potion | `wg-icon-round-potion` | `public/game-icons/round-potion.svg` | | Bug Reports | Long antennae bug | `wg-icon-long-antennae-bug` | `public/game-icons/long-antennae-bug.svg` | -| Feedback | Idea | `wg-icon-idea` | `public/game-icons/idea.svg` | -| DEVELOPMENT | Gears | `wg-icon-gears` | `public/game-icons/gears.svg` | -| Tools & References | Toolbox | `wg-icon-toolbox` | `public/game-icons/toolbox.svg` | -| General | Compass | `wg-icon-compass` | `public/game-icons/compass.svg` | -| Lore | Open book | `wg-icon-open-book` | `public/game-icons/open-book.svg` | +| Feedback | Envelope | `wg-icon-envelope` | `public/game-icons/envelope.svg` | +| DEVELOPMENT | Anvil | `wg-icon-anvil` | `public/game-icons/anvil.svg` | +| Tools & References | Spanner | `wg-icon-spanner` | `public/game-icons/spanner.svg` | +| General | Wax tablet | `wg-icon-wax-tablet` | `public/game-icons/wax-tablet.svg` | +| Lore | Classical knowledge | `wg-icon-classical-knowledge` | `public/game-icons/classical-knowledge.svg` | | Designs | Pencil ruler | `wg-icon-pencil-ruler` | `public/game-icons/pencil-ruler.svg` | -| Programming | Processor | `wg-icon-processor` | `public/game-icons/processor.svg` | +| Programming | Gears | `wg-icon-gears` | `public/game-icons/gears.svg` | | Area Building | Castle ruins | `wg-icon-castle-ruins` | `public/game-icons/castle-ruins.svg` | +The stylesheet still defines earlier classes such as `wg-icon-scroll-quill`, `wg-icon-rule-book`, `wg-icon-ringing-bell`, `wg-icon-saloon`, `wg-icon-large-paint-brush`, `wg-icon-flute`, `wg-icon-drama-masks`, `wg-icon-target-poster`, `wg-icon-chat-bubble`, `wg-icon-notebook`, `wg-icon-glowing-hands`, `wg-icon-question`, `wg-icon-monkey-wrench`, `wg-icon-idea`, `wg-icon-toolbox`, `wg-icon-open-book`, and `wg-icon-processor` as legacy fallbacks. Prefer the table above for new ACP configuration. + ## Setup -1. In the NodeBB ACP, open `Manage > Categories`, choose a category, and put the matching `wg-icon-*` value in the category's custom class field. If that field already has layout classes such as `col-md-3 col-6`, append the icon class instead of replacing them until the layout classes are confirmed unnecessary. +1. In the NodeBB ACP, open `Manage > Categories`, choose a category, and put the matching `wg-icon-*` value in the category's custom class field. Do not re-add old layout classes such as `col-md-3 col-6`; the theme layout no longer uses them. 2. Keep the regular ACP icon configured as a Font Awesome fallback. The theme hides it only when a matching `wg-icon-*` class is present. 3. Use the ACP text/icon color for category-specific glyph tinting. Prefer muted gold, green, blue, red, or violet accents over bright saturated colors. 4. After theme file changes, rebuild NodeBB assets and restart if the running process does not pick up `plugin.json` static directory changes. @@ -51,6 +54,6 @@ The SVGs in `public/game-icons/` were sanitized for theme use by removing the de The following Game Icons authors are represented in this curated set: - Badges: `question.svg` -- Caro Asercion: `spinning-wheel.svg` -- Delapouite: `castle-ruins.svg`, `chat-bubble.svg`, `flute.svg`, `idea.svg`, `large-paint-brush.svg`, `monkey-wrench.svg`, `notebook.svg`, `pencil-ruler.svg`, `rule-book.svg`, `saloon.svg`, `scroll-quill.svg`, `shaking-hands.svg`, `target-poster.svg`, `tavern-sign.svg`, `toolbox.svg` -- Lorc: `compass.svg`, `drama-masks.svg`, `gears.svg`, `glowing-hands.svg`, `long-antennae-bug.svg`, `open-book.svg`, `processor.svg`, `ringing-bell.svg`, `wax-seal.svg` +- Caro Asercion: `round-potion.svg`, `spinning-wheel.svg` +- Delapouite: `castle-ruins.svg`, `chat-bubble.svg`, `classical-knowledge.svg`, `flute.svg`, `harp.svg`, `idea.svg`, `key-lock.svg`, `large-paint-brush.svg`, `monkey-wrench.svg`, `mute.svg`, `notebook.svg`, `pencil-ruler.svg`, `rule-book.svg`, `saloon.svg`, `scroll-quill.svg`, `shaking-hands.svg`, `stabbed-note.svg`, `sword-altar.svg`, `target-poster.svg`, `tavern-sign.svg`, `toolbox.svg`, `trumpet-flag.svg`, `wax-tablet.svg`, `wood-frame.svg` +- Lorc: `anvil.svg`, `beer-stein.svg`, `candle-flame.svg`, `compass.svg`, `cowled.svg`, `drama-masks.svg`, `duality-mask.svg`, `envelope.svg`, `gears.svg`, `glowing-hands.svg`, `long-antennae-bug.svg`, `open-book.svg`, `processor.svg`, `ringing-bell.svg`, `scroll-unfurled.svg`, `spanner.svg`, `wax-seal.svg` diff --git a/public/game-icons/anvil.svg b/public/game-icons/anvil.svg new file mode 100644 index 0000000..466ecc9 --- /dev/null +++ b/public/game-icons/anvil.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/game-icons/beer-stein.svg b/public/game-icons/beer-stein.svg new file mode 100644 index 0000000..617c528 --- /dev/null +++ b/public/game-icons/beer-stein.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/game-icons/candle-flame.svg b/public/game-icons/candle-flame.svg new file mode 100644 index 0000000..c97c308 --- /dev/null +++ b/public/game-icons/candle-flame.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/game-icons/classical-knowledge.svg b/public/game-icons/classical-knowledge.svg new file mode 100644 index 0000000..1bda0a4 --- /dev/null +++ b/public/game-icons/classical-knowledge.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/game-icons/cowled.svg b/public/game-icons/cowled.svg new file mode 100644 index 0000000..3ef9948 --- /dev/null +++ b/public/game-icons/cowled.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/game-icons/duality-mask.svg b/public/game-icons/duality-mask.svg new file mode 100644 index 0000000..114124b --- /dev/null +++ b/public/game-icons/duality-mask.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/game-icons/envelope.svg b/public/game-icons/envelope.svg new file mode 100644 index 0000000..64e29b5 --- /dev/null +++ b/public/game-icons/envelope.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/game-icons/harp.svg b/public/game-icons/harp.svg new file mode 100644 index 0000000..2a483da --- /dev/null +++ b/public/game-icons/harp.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/game-icons/key-lock.svg b/public/game-icons/key-lock.svg new file mode 100644 index 0000000..cabb836 --- /dev/null +++ b/public/game-icons/key-lock.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/game-icons/mute.svg b/public/game-icons/mute.svg new file mode 100644 index 0000000..25edef8 --- /dev/null +++ b/public/game-icons/mute.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/game-icons/round-potion.svg b/public/game-icons/round-potion.svg new file mode 100644 index 0000000..118bccf --- /dev/null +++ b/public/game-icons/round-potion.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/game-icons/scroll-unfurled.svg b/public/game-icons/scroll-unfurled.svg new file mode 100644 index 0000000..7067b5e --- /dev/null +++ b/public/game-icons/scroll-unfurled.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/game-icons/spanner.svg b/public/game-icons/spanner.svg new file mode 100644 index 0000000..acd77f4 --- /dev/null +++ b/public/game-icons/spanner.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/game-icons/stabbed-note.svg b/public/game-icons/stabbed-note.svg new file mode 100644 index 0000000..9ddf0db --- /dev/null +++ b/public/game-icons/stabbed-note.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/game-icons/sword-altar.svg b/public/game-icons/sword-altar.svg new file mode 100644 index 0000000..cbe233c --- /dev/null +++ b/public/game-icons/sword-altar.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/game-icons/trumpet-flag.svg b/public/game-icons/trumpet-flag.svg new file mode 100644 index 0000000..6d4372a --- /dev/null +++ b/public/game-icons/trumpet-flag.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/game-icons/wax-tablet.svg b/public/game-icons/wax-tablet.svg new file mode 100644 index 0000000..eeb75d5 --- /dev/null +++ b/public/game-icons/wax-tablet.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/game-icons/wood-frame.svg b/public/game-icons/wood-frame.svg new file mode 100644 index 0000000..dcd3a69 --- /dev/null +++ b/public/game-icons/wood-frame.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/scss/westgate/_categories.scss b/scss/westgate/_categories.scss index 4800079..92dea60 100644 --- a/scss/westgate/_categories.scss +++ b/scss/westgate/_categories.scss @@ -41,30 +41,59 @@ li[component="categories/category"] .icon { 0 0 8px rgba(0, 0, 0, 0.22); } +body.template-category .category-header .icon { + border: 1px solid rgba(246, 223, 163, 0.34); + box-shadow: + inset 0 1px 0 rgba(255, 242, 204, 0.28), + inset 0 0 0 1px rgba(18, 15, 22, 0.62), + inset 0 -3px 7px rgba(0, 0, 0, 0.52), + 0 0 0 1px rgba(56, 48, 42, 0.9), + 0 0 0 2px rgba(124, 105, 62, 0.24), + 0 9px 18px rgba(0, 0, 0, 0.32); +} + $wg-game-icon-path: "./plugins/nodebb-theme-westgate/game-icons/"; $wg-game-icons: ( + scroll-unfurled: "scroll-unfurled.svg", scroll-quill: "scroll-quill.svg", rule-book: "rule-book.svg", + trumpet-flag: "trumpet-flag.svg", ringing-bell: "ringing-bell.svg", spinning-wheel: "spinning-wheel.svg", tavern-sign: "tavern-sign.svg", + beer-stein: "beer-stein.svg", saloon: "saloon.svg", shaking-hands: "shaking-hands.svg", + wood-frame: "wood-frame.svg", large-paint-brush: "large-paint-brush.svg", + harp: "harp.svg", flute: "flute.svg", + duality-mask: "duality-mask.svg", drama-masks: "drama-masks.svg", + stabbed-note: "stabbed-note.svg", target-poster: "target-poster.svg", + mute: "mute.svg", chat-bubble: "chat-bubble.svg", + sword-altar: "sword-altar.svg", notebook: "notebook.svg", + cowled: "cowled.svg", wax-seal: "wax-seal.svg", + candle-flame: "candle-flame.svg", glowing-hands: "glowing-hands.svg", + key-lock: "key-lock.svg", question: "question.svg", + round-potion: "round-potion.svg", monkey-wrench: "monkey-wrench.svg", long-antennae-bug: "long-antennae-bug.svg", + envelope: "envelope.svg", idea: "idea.svg", + anvil: "anvil.svg", gears: "gears.svg", + spanner: "spanner.svg", toolbox: "toolbox.svg", compass: "compass.svg", + wax-tablet: "wax-tablet.svg", + classical-knowledge: "classical-knowledge.svg", open-book: "open-book.svg", pencil-ruler: "pencil-ruler.svg", processor: "processor.svg", @@ -95,7 +124,7 @@ li[component="categories/category"][class*="wg-icon-"] > .d-flex > .flex-shrink- .category-children-item[class*="wg-icon-"] > .westgate-category-child > .icon::before { content: ""; position: absolute; - inset: 22%; + inset: 13%; background: currentColor; filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.72)) @@ -106,6 +135,14 @@ li[component="categories/category"][class*="wg-icon-"] > .d-flex > .flex-shrink- pointer-events: none; } +.westgate-category-header-icon[class*="wg-icon-"] > .icon::before { + inset: 11%; +} + +.category-children-item[class*="wg-icon-"] > .westgate-category-child > .icon::before { + inset: 16%; +} + @each $name, $file in $wg-game-icons { .westgate-category-header-icon.wg-icon-#{$name} > .icon::before, li[component="categories/category"].wg-icon-#{$name} > .d-flex > .flex-shrink-0 > .icon::before, @@ -153,9 +190,10 @@ ul.category-children { .westgate-category-child { display: inline-flex; align-items: center; - gap: 0.35rem; + gap: 0.5rem; max-width: 100%; - padding: 0.2rem 0.55rem; + min-height: 2.1rem; + padding: 0.25rem 0.65rem 0.25rem 0.3rem; background: rgba(44, 22, 34, 0.3); border: 1px solid rgba(194, 163, 90, 0.11); border-radius: 8px; @@ -165,9 +203,9 @@ ul.category-children { .westgate-category-child .icon, .westgate-child-icon, .category-children-item i.fa-caret-right { - width: 18px !important; - height: 18px !important; - min-width: 18px; + width: 27px !important; + height: 27px !important; + min-width: 27px; display: inline-flex; align-items: center; justify-content: center; @@ -181,8 +219,8 @@ ul.category-children { 0 0 0 1px rgba(31, 25, 24, 0.72), 0 0 0 2px rgba(124, 105, 62, 0.18); filter: saturate(0.8) contrast(1.12); - font-size: 0.7rem !important; - line-height: 18px !important; + font-size: 0.82rem !important; + line-height: 27px !important; } .category-children-item i.fa-caret-right { diff --git a/scss/westgate/_topics.scss b/scss/westgate/_topics.scss index 051023b..6838a2d 100644 --- a/scss/westgate/_topics.scss +++ b/scss/westgate/_topics.scss @@ -4,7 +4,6 @@ body.template-category .category-header { body.template-category .category-header .icon { border-radius: 6px !important; - box-shadow: 0 0 0 1px rgba(194, 163, 90, 0.2), 0 8px 18px rgba(0, 0, 0, 0.28); } body.template-category .category-header h1 {