ACP Icons
This commit is contained in:
@@ -99,17 +99,20 @@ Complete the following:
|
||||
- [x] Recommend icons from the game-icons pack for forum categories and their subcategories. See `GAME_ICONS.md`.
|
||||
- [x] Include the `.svg`/`.png` files in the theme if possible. SVG assets are in `public/game-icons/`.
|
||||
- [x] Author any necessary credits in a `.md` file at the root of the `nodebb-theme-westgate` repository. See `GAME_ICONS.md`.
|
||||
- [ ] Phase 2: Implementation.
|
||||
- [ ] Confirm category `class` data is present on all required render paths: `/categories`, category-page subcategory rows, category-page header, and AJAX-loaded "more subcategories" rows. Initial assessment: NodeBB stores and escapes `category.class`, and `getCategoryData`/`getCategoriesData` include it, but local templates currently do not emit it.
|
||||
- [ ] Add ACP custom class output to local category templates. At minimum, add `{./class}` to root category rows and child/subcategory row wrappers so classes like `wg-icon-scroll-quill` can control icons without hardcoding category IDs.
|
||||
- [ ] Add a minimal local `templates/category.tpl` override, copied from Harmony only as needed, so the category page header can expose `{./class}` around its `buildCategoryIcon(...)` output.
|
||||
- [ ] Decide whether `templates/partials/categories/children.tpl` should remain a separate source of truth or whether the duplicated child markup inside `templates/partials/categories/item.tpl` should be collapsed back to the imported partial before adding icon classes.
|
||||
- [ ] Implement the `wg-icon-*` CSS mask classes in a focused SCSS file or the existing category SCSS layer. Use `public/game-icons/*.svg` through the theme static path, hide/neutralize the Font Awesome `<i>` only for `wg-icon-*` classes, and render the game-icon mask via `::before` using `currentColor`.
|
||||
- [ ] Preserve the existing ornate icon frame treatment: category ACP `bgColor`/`color` should still tint the icon frame/glyph where possible, with fallback faded-gold/dark-steel styling if ACP colors are too bright.
|
||||
- [ ] 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.
|
||||
- [ ] 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.
|
||||
- [ ] Validate on the live website because it has all sections: 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.
|
||||
- [ ] Explain any additional steps needed after implementation, especially ACP class entry, asset rebuild, restart/cache behavior, and whether uploaded category background images should be cleared for icon-driven categories.
|
||||
- [-] Phase 2: Implementation.
|
||||
- [x] Confirm category `class` data is present on all required render paths: `/categories`, category-page subcategory rows, category-page header, and AJAX-loaded "more subcategories" rows. NodeBB stores and escapes `category.class`; `getCategoryData`/`getCategoriesData` include it; the category template's `children` block is used for AJAX-loaded subcategories.
|
||||
- [x] Add ACP custom class output to local category templates. Root category rows and child/subcategory row wrappers now emit `{./class}` so classes like `wg-icon-scroll-quill` can control icons without hardcoding category IDs.
|
||||
- [x] Add a minimal local `templates/category.tpl` override, copied from Harmony only as needed, so the category page header can expose `{./class}` around its `buildCategoryIcon(...)` output.
|
||||
- [x] Keep `templates/partials/categories/children.tpl` as the single source of truth for nested child markup and collapse the duplicate child markup in `templates/partials/categories/item.tpl` back to the imported partial before adding icon classes.
|
||||
- [x] Implement the `wg-icon-*` CSS mask classes in the existing category SCSS layer. Use `public/game-icons/*.svg` through the theme static path, hide/neutralize the Font Awesome `<i>` only for `wg-icon-*` classes, and render the game-icon mask via `::before` using `currentColor`.
|
||||
- [x] Preserve the existing ornate icon frame treatment: category ACP `bgColor`/`color` still drives the frame and glyph color because the mask uses the icon element's current color; fallback styling remains faded-gold/dark-steel.
|
||||
- [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.
|
||||
- [ ] 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.
|
||||
|
||||
### Context for categories
|
||||
|
||||
@@ -159,3 +162,6 @@ Tasks to be considered in the future, not implemented immediately. Keep them in
|
||||
- [ ] Un-bold "topics" and "posts" and make the color lines replace the black line drived from category background color to either use the foreground color of the icon, or an ornate gilding like the icons (image 2)
|
||||
- [ ] Consider making the category names a bit smoother; it looks like it's not anti-aliased. (image 3)
|
||||
- [ ] Mobile website doesn't use the correct fonts.
|
||||
- [ ] In the process of testing widgets, I noticed that some are being given the "card" treatment (the glossy purple background element) even if there is no card container. Example here: http://localhost:4567/user/admin
|
||||
- [ ] Widgets without the card containers should display plainly.
|
||||
- [ ] Widgets can be put inside of a card container to make a card.
|
||||
|
||||
+36
-30
@@ -6,38 +6,45 @@ Source: https://game-icons.net and https://github.com/game-icons/icons
|
||||
|
||||
License: Creative Commons Attribution 3.0 Unported, https://creativecommons.org/licenses/by/3.0/
|
||||
|
||||
The SVGs in `public/game-icons/` were sanitized for theme use by removing the default black square background and changing the foreground fill to `currentColor`. They should be used as monochrome/tintable assets, preferably in an engraved faded-gold or dark-steel treatment. Category-specific colors can still come from the NodeBB ACP category color fields or future `wg-icon-*` classes.
|
||||
The SVGs in `public/game-icons/` were sanitized for theme use by removing the default black square background and changing the foreground fill to `currentColor`. They are used as monochrome/tintable assets, preferably in an engraved faded-gold or dark-steel treatment. Category-specific colors still come from the NodeBB ACP category color fields.
|
||||
|
||||
## Recommended Mapping
|
||||
|
||||
| Category | Recommended icon | Asset |
|
||||
| --- | --- | --- |
|
||||
| INFORMATION | Scroll and quill | `public/game-icons/scroll-quill.svg` |
|
||||
| Player Guide | Rule book | `public/game-icons/rule-book.svg` |
|
||||
| Announcements | Ringing bell | `public/game-icons/ringing-bell.svg` |
|
||||
| Patch Notes | Spinning wheel | `public/game-icons/spinning-wheel.svg` |
|
||||
| COMMUNITY | Tavern sign | `public/game-icons/tavern-sign.svg` |
|
||||
| General Discussion | Saloon | `public/game-icons/saloon.svg` |
|
||||
| Introductions | Shaking hands | `public/game-icons/shaking-hands.svg` |
|
||||
| Screenshots | Large paint brush | `public/game-icons/large-paint-brush.svg` |
|
||||
| Creations | Flute | `public/game-icons/flute.svg` |
|
||||
| ROLEPLAY | Drama masks | `public/game-icons/drama-masks.svg` |
|
||||
| Notices | Target poster | `public/game-icons/target-poster.svg` |
|
||||
| Rumors & Gossip | Chat bubble | `public/game-icons/chat-bubble.svg` |
|
||||
| Journals & Biographies | Notebook | `public/game-icons/notebook.svg` |
|
||||
| Factions & Guilds | Wax seal | `public/game-icons/wax-seal.svg` |
|
||||
| SUPPORT | Glowing hands | `public/game-icons/glowing-hands.svg` |
|
||||
| Common Issues & Questions | Question badge | `public/game-icons/question.svg` |
|
||||
| Technical Help | Monkey wrench | `public/game-icons/monkey-wrench.svg` |
|
||||
| Bug Reports | Long antennae bug | `public/game-icons/long-antennae-bug.svg` |
|
||||
| Feedback | Idea | `public/game-icons/idea.svg` |
|
||||
| DEVELOPMENT | Gears | `public/game-icons/gears.svg` |
|
||||
| Tools & References | Toolbox | `public/game-icons/toolbox.svg` |
|
||||
| General | Compass | `public/game-icons/compass.svg` |
|
||||
| Lore | Open book | `public/game-icons/open-book.svg` |
|
||||
| Designs | Pencil ruler | `public/game-icons/pencil-ruler.svg` |
|
||||
| Programming | Processor | `public/game-icons/processor.svg` |
|
||||
| Area Building | Castle ruins | `public/game-icons/castle-ruins.svg` |
|
||||
| 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` |
|
||||
| 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` |
|
||||
| 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` |
|
||||
| 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` |
|
||||
| Designs | Pencil ruler | `wg-icon-pencil-ruler` | `public/game-icons/pencil-ruler.svg` |
|
||||
| Programming | Processor | `wg-icon-processor` | `public/game-icons/processor.svg` |
|
||||
| Area Building | Castle ruins | `wg-icon-castle-ruins` | `public/game-icons/castle-ruins.svg` |
|
||||
|
||||
## 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.
|
||||
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.
|
||||
|
||||
## Attribution
|
||||
|
||||
@@ -47,4 +54,3 @@ The following Game Icons authors are represented in this curated set:
|
||||
- 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`
|
||||
|
||||
|
||||
@@ -41,6 +41,80 @@ li[component="categories/category"] .icon {
|
||||
0 0 8px rgba(0, 0, 0, 0.22);
|
||||
}
|
||||
|
||||
$wg-game-icon-path: "./plugins/nodebb-theme-westgate/game-icons/";
|
||||
$wg-game-icons: (
|
||||
scroll-quill: "scroll-quill.svg",
|
||||
rule-book: "rule-book.svg",
|
||||
ringing-bell: "ringing-bell.svg",
|
||||
spinning-wheel: "spinning-wheel.svg",
|
||||
tavern-sign: "tavern-sign.svg",
|
||||
saloon: "saloon.svg",
|
||||
shaking-hands: "shaking-hands.svg",
|
||||
large-paint-brush: "large-paint-brush.svg",
|
||||
flute: "flute.svg",
|
||||
drama-masks: "drama-masks.svg",
|
||||
target-poster: "target-poster.svg",
|
||||
chat-bubble: "chat-bubble.svg",
|
||||
notebook: "notebook.svg",
|
||||
wax-seal: "wax-seal.svg",
|
||||
glowing-hands: "glowing-hands.svg",
|
||||
question: "question.svg",
|
||||
monkey-wrench: "monkey-wrench.svg",
|
||||
long-antennae-bug: "long-antennae-bug.svg",
|
||||
idea: "idea.svg",
|
||||
gears: "gears.svg",
|
||||
toolbox: "toolbox.svg",
|
||||
compass: "compass.svg",
|
||||
open-book: "open-book.svg",
|
||||
pencil-ruler: "pencil-ruler.svg",
|
||||
processor: "processor.svg",
|
||||
castle-ruins: "castle-ruins.svg"
|
||||
);
|
||||
|
||||
.westgate-category-header-icon {
|
||||
flex-basis: auto;
|
||||
width: auto;
|
||||
max-width: none;
|
||||
}
|
||||
|
||||
.westgate-category-header-icon[class*="wg-icon-"] > .icon,
|
||||
li[component="categories/category"][class*="wg-icon-"] > .d-flex > .flex-shrink-0 > .icon,
|
||||
.category-children-item[class*="wg-icon-"] > .westgate-category-child > .icon {
|
||||
position: relative;
|
||||
color: var(--wg-ledger-ink);
|
||||
}
|
||||
|
||||
.westgate-category-header-icon[class*="wg-icon-"] > .icon > i,
|
||||
li[component="categories/category"][class*="wg-icon-"] > .d-flex > .flex-shrink-0 > .icon > i,
|
||||
.category-children-item[class*="wg-icon-"] > .westgate-category-child > .icon > i {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.westgate-category-header-icon[class*="wg-icon-"] > .icon::before,
|
||||
li[component="categories/category"][class*="wg-icon-"] > .d-flex > .flex-shrink-0 > .icon::before,
|
||||
.category-children-item[class*="wg-icon-"] > .westgate-category-child > .icon::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 22%;
|
||||
background: currentColor;
|
||||
filter:
|
||||
drop-shadow(0 1px 0 rgba(0, 0, 0, 0.72))
|
||||
drop-shadow(0 -1px 0 rgba(255, 238, 190, 0.16));
|
||||
mask-position: center;
|
||||
mask-repeat: no-repeat;
|
||||
mask-size: contain;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
@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,
|
||||
.category-children-item.wg-icon-#{$name} > .westgate-category-child > .icon::before {
|
||||
-webkit-mask-image: url("#{$wg-game-icon-path}#{$file}");
|
||||
mask-image: url("#{$wg-game-icon-path}#{$file}");
|
||||
}
|
||||
}
|
||||
|
||||
li[component="categories/category"] h2.title {
|
||||
position: relative;
|
||||
padding-bottom: 0.18rem;
|
||||
|
||||
@@ -0,0 +1,100 @@
|
||||
<!-- IMPORT partials/breadcrumbs-json-ld.tpl -->
|
||||
{{{ if config.theme.enableBreadcrumbs }}}
|
||||
<!-- IMPORT partials/breadcrumbs.tpl -->
|
||||
{{{ end }}}
|
||||
|
||||
<div class="category-header d-flex flex-column gap-2">
|
||||
<div class="d-flex gap-3 align-items-center mb-1 {{{ if config.theme.centerHeaderElements }}}justify-content-center flex-column{{{ end }}}">
|
||||
<div class="westgate-category-header-icon flex-shrink-0 {./class}">
|
||||
{buildCategoryIcon(@value, "60px", "rounded-1")}
|
||||
</div>
|
||||
<div class="d-flex flex-column gap-1">
|
||||
<h1 class="tracking-tight fs-3 fw-semibold mb-0">{./name}</h1>
|
||||
<div class="d-flex flex-wrap gap-2 align-items-center {{{ if config.theme.centerHeaderElements }}}justify-content-center{{{ end }}}">
|
||||
<span class="badge text-body border border-gray-300 stats text-xs">
|
||||
<span title="{formattedNumber(totalTopicCount)}" class="fw-bold">{humanReadableNumber(totalTopicCount)}</span>
|
||||
<span class="text-lowercase fw-normal">[[global:topics]]</span>
|
||||
</span>
|
||||
<span class="badge text-body border border-gray-300 stats text-xs">
|
||||
<span title="{formattedNumber(totalPostCount)}" class="fw-bold">{humanReadableNumber(totalPostCount)}</span>
|
||||
<span class="text-lowercase fw-normal">[[global:posts]]</span>
|
||||
</span>
|
||||
{{{ if !isNumber(cid) }}}
|
||||
<a href="{./url}" class="badge text-body border border-gray-300 text-xs" data-ajaxify="false">
|
||||
<span class="fw-normal">View Original</span>
|
||||
<i class="fa fa-external-link"></i>
|
||||
</a>
|
||||
{{{ end }}}
|
||||
{{{ if (!feeds:disableRSS && rssFeedUrl) }}}
|
||||
<a class="badge text-body text-decoration-none border border-gray-300 d-flex align-items-center align-self-stretch" target="_blank" href="{rssFeedUrl}" itemprop="item" title="[[global:rss-feed]]"><i class="fa fa-rss fa-sm text-muted lh-1"></i></a>
|
||||
{{{ end }}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{{{ if ./descriptionParsed }}}
|
||||
<div class="description text-secondary text-sm lh-sm w-100 {{{ if config.theme.centerHeaderElements }}}text-center{{{ end }}} line-clamp-4 clamp-fade-sm-4">
|
||||
{./descriptionParsed}
|
||||
</div>
|
||||
{{{ end }}}
|
||||
{{{ if ./handleFull }}}
|
||||
<p class="text-secondary text-sm fst-italic mb-0 {{{ if config.theme.centerHeaderElements }}}text-center{{{ end }}}">
|
||||
[[category:handle.description, {handleFull}]]
|
||||
<a href="#" class="link-secondary" data-action="copy" data-clipboard-text="{handleFull}"><i class="fa fa-fw fa-copy" aria-hidden="true"></i></a>
|
||||
</p>
|
||||
{{{ end }}}
|
||||
|
||||
</div>
|
||||
|
||||
{{{ if widgets.header.length }}}
|
||||
<div data-widget-area="header">
|
||||
{{{ each widgets.header }}}
|
||||
{{widgets.header.html}}
|
||||
{{{ end }}}
|
||||
</div>
|
||||
{{{ end }}}
|
||||
|
||||
|
||||
<div class="row flex-fill mt-3">
|
||||
<div class="category d-flex flex-column {{{if widgets.sidebar.length }}}col-lg-9 col-sm-12{{{ else }}}col-lg-12{{{ end }}}">
|
||||
<!-- IMPORT partials/category/subcategory.tpl -->
|
||||
{{{ if (topics.length || privileges.topics:create) }}}
|
||||
<!-- IMPORT partials/topic-list-bar.tpl -->
|
||||
{{{ end }}}
|
||||
|
||||
{{{ if (./inbox && (./hasFollowers == false)) }}}
|
||||
<div class="alert alert-warning mb-4" id="category-no-followers" data-bs-toggle="dropdown" data-bs-target='[component="topic/watch"] button' aria-hidden="true">
|
||||
<i class="fa fa-triangle-exclamation pe-2"></i>
|
||||
[[category:no-followers]]
|
||||
<a href="#" class="stretched-link"></a>
|
||||
</div>
|
||||
{{{ end }}}
|
||||
|
||||
{{{ if (!topics.length && privileges.topics:create) }}}
|
||||
<div class="alert alert-info" id="category-no-topics">
|
||||
[[category:no-topics]]
|
||||
</div>
|
||||
{{{ end }}}
|
||||
|
||||
<!-- IMPORT partials/topics_list.tpl -->
|
||||
|
||||
{{{ if config.usePagination }}}
|
||||
<!-- IMPORT partials/paginator.tpl -->
|
||||
{{{ end }}}
|
||||
</div>
|
||||
<div data-widget-area="sidebar" class="col-lg-3 col-sm-12 {{{ if !widgets.sidebar.length }}}hidden{{{ end }}}">
|
||||
{{{ each widgets.sidebar }}}
|
||||
{{widgets.sidebar.html}}
|
||||
{{{ end }}}
|
||||
</div>
|
||||
</div>
|
||||
<div data-widget-area="footer">
|
||||
{{{each widgets.footer}}}
|
||||
{{widgets.footer.html}}
|
||||
{{{end}}}
|
||||
</div>
|
||||
|
||||
{{{ if !config.usePagination }}}
|
||||
<noscript>
|
||||
<!-- IMPORT partials/paginator.tpl -->
|
||||
</noscript>
|
||||
{{{ end }}}
|
||||
@@ -1,7 +1,7 @@
|
||||
<ul class="list-unstyled category-children row row-cols-1 row-cols-md-2 g-2 my-1 w-100">
|
||||
{{{ each ./children }}}
|
||||
{{{ if !./isSection }}}
|
||||
<li data-cid="{./cid}" class="category-children-item small">
|
||||
<li data-cid="{./cid}" class="category-children-item small {./class}">
|
||||
<div class="westgate-category-child d-flex gap-1">
|
||||
{buildCategoryIcon(@value, "18px", "westgate-child-icon rounded-1")}
|
||||
<a href="{{{ if ./link }}}{./link}{{{ else }}}{config.relative_path}/category/{./slug}{{{ end }}}" class="text-reset fw-semibold flex-1">{./name}</a>
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
<li component="categories/category" data-cid="{./cid}" class="westgate-category-card w-100 py-3 py-lg-4 gap-lg-0 gap-2 d-flex flex-column flex-lg-row align-items-start category-{./cid} {./unread-class}">
|
||||
<li component="categories/category" data-cid="{./cid}" class="westgate-category-card w-100 py-3 py-lg-4 gap-lg-0 gap-2 d-flex flex-column flex-lg-row align-items-start {./class} category-{./cid} {./unread-class}">
|
||||
<meta itemprop="name" content="{./name}">
|
||||
|
||||
<div class="d-flex col-lg-7 gap-2 gap-lg-3">
|
||||
@@ -31,18 +31,7 @@
|
||||
{{{ end }}}
|
||||
{{{ if !config.hideSubCategories }}}
|
||||
{{{ if ./children.length }}}
|
||||
<ul class="list-unstyled category-children row row-cols-1 row-cols-md-2 g-2 my-1 w-100">
|
||||
{{{ each ./children }}}
|
||||
{{{ if !./isSection }}}
|
||||
<li data-cid="{./cid}" class="category-children-item small">
|
||||
<div class="westgate-category-child d-flex gap-1">
|
||||
{buildCategoryIcon(@value, "18px", "westgate-child-icon rounded-1")}
|
||||
<a href="{{{ if ./link }}}{./link}{{{ else }}}{config.relative_path}/category/{./slug}{{{ end }}}" class="text-reset fw-semibold flex-1">{./name}</a>
|
||||
</div>
|
||||
</li>
|
||||
{{{ end }}}
|
||||
{{{ end }}}
|
||||
</ul>
|
||||
<!-- IMPORT partials/categories/children.tpl -->
|
||||
{{{ end }}}
|
||||
{{{ end }}}
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user