From Brotato Wiki
(make cost/item buttons inactive by default) |
(reducing padding) |
||
| (8 intermediate revisions by the same user not shown) | |||
| Line 1: | Line 1: | ||
<onlyinclude><includeonly><!-- | <onlyinclude><includeonly><!-- | ||
--><table style="width: 100%; max-width: | --><table style="width: 100%; max-width: calc(100% - 28px);"> | ||
<tr> | <tr> | ||
<td style="width: 88px;"> | <td style="width: 88px;"> | ||
| Line 7: | Line 7: | ||
<span class="btn" data-hide-type="item" data-hide-target="show-none" title="Apply All Filters">✔️</span> | <span class="btn" data-hide-type="item" data-hide-target="show-none" title="Apply All Filters">✔️</span> | ||
</td> | </td> | ||
<td style="padding-left: | <td style="padding-left: 10px;"> | ||
<!-- Item Tags (Stats) --> | <!-- Item Tags (Stats) --> | ||
<span class="btn btn--active" data-hide-type="item" data-hide-target="stat_max_hp" title="Max HP">{{StatIcon|Max HP|nolink=1}}</span> | <span class="btn btn--active" data-hide-type="item" data-hide-target="stat_max_hp" title="Max HP">{{StatIcon|Max HP|nolink=1}}</span> | ||
| Line 26: | Line 26: | ||
<span class="btn btn--active" data-hide-type="item" data-hide-target="stat_harvesting" title="Harvesting">{{StatIcon|Harvesting|nolink=1}}</span> | <span class="btn btn--active" data-hide-type="item" data-hide-target="stat_harvesting" title="Harvesting">{{StatIcon|Harvesting|nolink=1}}</span> | ||
</td> | </td> | ||
{{#ifeq:{{{tier_btns|}}}|1|<td style="padding-left: | {{#ifeq:{{{tier_btns|}}}|1|<td style="padding-left: 10px; text-align: right;"> | ||
<!-- Rarities/Tiers --> | <!-- Rarities/Tiers --> | ||
<span class="btn btn--active" data-hide-type="item" data-hide-target="rarity1" title="Tier 1 (Common)">{{Color|tier1| | <span class="btn btn--active" data-hide-type="item" data-hide-target="rarity1" title="Tier 1 (Common)">{{Color|tier1|I}}</span> | ||
<span class="btn btn--active" data-hide-type="item" data-hide-target="rarity2" title="Tier 2 (Uncommon)">{{Color|tier2| | <span class="btn btn--active" data-hide-type="item" data-hide-target="rarity2" title="Tier 2 (Uncommon)">{{Color|tier2|II}}</span> | ||
<span class="btn btn--active" data-hide-type="item" data-hide-target="rarity3" title="Tier 3 (Rare)">{{Color|tier3| | <span class="btn btn--active" data-hide-type="item" data-hide-target="rarity3" title="Tier 3 (Rare)">{{Color|tier3|III}}</span> | ||
<span class="btn btn--active" data-hide-type="item" data-hide-target="rarity4" title="Tier 4 (Legendary)">{{Color|tier4| | <span class="btn btn--active" data-hide-type="item" data-hide-target="rarity4" title="Tier 4 (Legendary)">{{Color|tier4|IV}}</span> | ||
</td>|}} | </td>|}} | ||
{{#ifeq:{{{extra_btns|}}}|1|<td style="padding-left: 10px; text-align: right;"> | {{#ifeq:{{{extra_btns|}}}|1|<td style="padding-left: 10px; text-align: right;"> | ||
<!-- Extras: Cost/Tags --> | <!-- Extras: Cost/Tags --> | ||
<span class="btn btn--inactive" data-hide-type="misc" data-hide-target=".ibox__stats-costs" title="Costs" style="height: 20px;">{{StatIcon|Materials|nolink=1}}</span> | <span class="btn btn--inactive" data-hide-type="container_toggle" data-container-class="statscard-grid__main--only-show-icons" title="Hide everything except icons" style="height: 20px;">📦</span> | ||
<span class="btn btn--inactive" data-hide-type="misc" data-hide-target=".ibox__stats-tags" title="Tags" style="height: 20px;">🏷️</span> | <span class="btn btn--inactive" data-hide-type="container_toggle" data-container-class="statscard-grid__main--transparent-hidden-items" title="Make filtered items transparent, instead of being fully hidden" style="height: 20px;">👁️</span> | ||
<span class="btn btn--inactive" data-hide-type="misc" data-hide-target=".ibox__stats-costs" title="Show Costs" style="height: 20px;">{{StatIcon|Materials|nolink=1}}</span> | |||
<span class="btn btn--inactive" data-hide-type="misc" data-hide-target=".ibox__stats-tags" title="Show Tags" style="height: 20px;">🏷️</span> | |||
</td>|}} | </td>|}} | ||
</tr> | </tr> | ||
| Line 44: | Line 46: | ||
See [[Mod:Extatonion/Items]] for a working example. | See [[Mod:Extatonion/Items]] for a working example. | ||
Should be wrapped in a DIV or table, which sets its max-width. | |||
== Default == | == Default == | ||
| Line 51: | Line 55: | ||
</pre> | </pre> | ||
{{StatsCard_GridToggles}} | <div class="statscard-grid" style="max-width: 1220px;"> | ||
{{StatsCard_GridToggles}} | |||
</div> | |||
== Tier Buttons == | == Tier Buttons == | ||
| Line 59: | Line 65: | ||
</pre> | </pre> | ||
{{StatsCard_GridToggles|tier_btns=1}} | <div style="max-width: 1220px;"> | ||
{{StatsCard_GridToggles|tier_btns=1}} | |||
</div> | |||
== Extra Buttons == | == Extra Buttons == | ||
| Line 67: | Line 75: | ||
</pre> | </pre> | ||
{{StatsCard_GridToggles|extra_btns=1}} | <div style="max-width: 1220px;"> | ||
{{StatsCard_GridToggles|extra_btns=1}} | |||
</div> | |||
== Tier Buttons + Extras Buttons == | |||
<pre style="display: inline-block;"> | |||
{{StatsCard_GridToggles|extra_btns=1|tier_btns=1}} | |||
</pre> | |||
<div style="max-width: 1220px;"> | |||
{{StatsCard_GridToggles|extra_btns=1|tier_btns=1}} | |||
</div> | |||
</noinclude> | </noinclude> | ||
Latest revision as of 01:18, 19 February 2023
Creates buttons that can be used above a table grid of items, shown with StatsCard, to toggle the visibility of those items.
See Mod:Extatonion/Items for a working example.
Should be wrapped in a DIV or table, which sets its max-width.
Default
{{StatsCard_GridToggles}}
|
❌ ✔️ |
|
Tier Buttons
{{StatsCard_GridToggles|tier_btns=1}}
|
❌ ✔️ |
|
I II III IV |
Extra Buttons
{{StatsCard_GridToggles|extra_btns=1}}
|
❌ ✔️ |
|
📦
👁️
|
Tier Buttons + Extras Buttons
{{StatsCard_GridToggles|extra_btns=1|tier_btns=1}}
|
❌ ✔️ |
|
I II III IV |
📦
👁️
|