From Brotato Wiki

(swap icons for all/none)
(reducing padding)
 
(19 intermediate revisions by the same user not shown)
Line 1: Line 1:
<onlyinclude><includeonly><!--
<onlyinclude><includeonly><!--
--><table style="width: 100%; max-width: 1207px;">
--><table style="width: 100%; max-width: calc(100% - 28px);">
<tr>
<tr>
<td>
<td style="width: 88px;">
<!-- Bulk Toggles -->
<!-- Bulk Toggles -->
<span class="btn" data-hide-type="item" data-hide-target="show-all" title="Remove Filters">❌</span>
<span class="btn" data-hide-type="item" data-hide-target="show-all" title="Remove All Filters">❌</span>
<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: 20px;">
<td style="padding-left: 10px;">
<!-- Rarities/Tiers -->
<span class="btn btn--active" data-hide-type="item" data-hide-target="rarity1">{{Color|tier1|Common}}</span>
<span class="btn btn--active" data-hide-type="item" data-hide-target="rarity2">{{Color|tier2|Uncommon}}</span>
<span class="btn btn--active" data-hide-type="item" data-hide-target="rarity3">{{Color|tier3|Rare}}</span>
<span class="btn btn--active" data-hide-type="item" data-hide-target="rarity4">{{Color|tier4|Legendary}}</span>
</td>
<td style="text-align: right;">
<!-- Item Tags (Stats) -->
<!-- Item Tags (Stats) -->
<span class="btn btn--active" data-hide-type="item" data-hide-target="stat_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>
<span class="btn btn--active" data-hide-type="item" data-hide-target="stat_hp_regeneration">{{StatIcon|HP Regeneration|nolink=1}}</span>
<span class="btn btn--active" data-hide-type="item" data-hide-target="stat_hp_regeneration" title="HP Regeneration">{{StatIcon|HP Regeneration|nolink=1}}</span>
<span class="btn btn--active" data-hide-type="item" data-hide-target="stat_lifesteal">{{StatIcon|Lifesteal|nolink=1}}</span>
<span class="btn btn--active" data-hide-type="item" data-hide-target="stat_lifesteal" title="Lifesteal">{{StatIcon|Lifesteal|nolink=1}}</span>
<span class="btn btn--active" data-hide-type="item" data-hide-target="stat_percent_damage">{{StatIcon|Damage|nolink=1}}</span>
<span class="btn btn--active" data-hide-type="item" data-hide-target="stat_percent_damage" title="Damage">{{StatIcon|Damage|nolink=1}}</span>
<span class="btn btn--active" data-hide-type="item" data-hide-target="stat_melee_damage">{{StatIcon|Melee Damage|nolink=1}}</span>
<span class="btn btn--active" data-hide-type="item" data-hide-target="stat_melee_damage" title="Melee Damage">{{StatIcon|Melee Damage|nolink=1}}</span>
<span class="btn btn--active" data-hide-type="item" data-hide-target="stat_ranged_damage">{{StatIcon|Ranged Damage|nolink=1}}</span>
<span class="btn btn--active" data-hide-type="item" data-hide-target="stat_ranged_damage" title="Ranged Damage">{{StatIcon|Ranged Damage|nolink=1}}</span>
<span class="btn btn--active" data-hide-type="item" data-hide-target="stat_elemental_damage">{{StatIcon|Elemental Damage|nolink=1}}</span>
<span class="btn btn--active" data-hide-type="item" data-hide-target="stat_elemental_damage" title="Elemental Damage">{{StatIcon|Elemental Damage|nolink=1}}</span>
<span class="btn btn--active" data-hide-type="item" data-hide-target="stat_attack_speed">{{StatIcon|Attack Speed|nolink=1}}</span>
<span class="btn btn--active" data-hide-type="item" data-hide-target="stat_attack_speed" title="Attack Speed">{{StatIcon|Attack Speed|nolink=1}}</span>
<span class="btn btn--active" data-hide-type="item" data-hide-target="stat_crit_chance">{{StatIcon|Crit Chance|nolink=1}}</span>
<span class="btn btn--active" data-hide-type="item" data-hide-target="stat_crit_chance" title="Crit Chance">{{StatIcon|Crit Chance|nolink=1}}</span>
<span class="btn btn--active" data-hide-type="item" data-hide-target="stat_engineering">{{StatIcon|Engineering|nolink=1}}</span>
<span class="btn btn--active" data-hide-type="item" data-hide-target="stat_engineering" title="Engineering">{{StatIcon|Engineering|nolink=1}}</span>
<span class="btn btn--active" data-hide-type="item" data-hide-target="stat_range">{{StatIcon|Range|nolink=1}}</span>
<span class="btn btn--active" data-hide-type="item" data-hide-target="stat_range" title="Range">{{StatIcon|Range|nolink=1}}</span>
<span class="btn btn--active" data-hide-type="item" data-hide-target="stat_armor">{{StatIcon|Armor|nolink=1}}</span>
<span class="btn btn--active" data-hide-type="item" data-hide-target="stat_armor" title="Armor">{{StatIcon|Armor|nolink=1}}</span>
<span class="btn btn--active" data-hide-type="item" data-hide-target="stat_dodge">{{StatIcon|Dodge|nolink=1}}</span>
<span class="btn btn--active" data-hide-type="item" data-hide-target="stat_dodge" title="Dodge">{{StatIcon|Dodge|nolink=1}}</span>
<span class="btn btn--active" data-hide-type="item" data-hide-target="stat_speed">{{StatIcon|Speed|nolink=1}}</span>
<span class="btn btn--active" data-hide-type="item" data-hide-target="stat_speed" title="Speed">{{StatIcon|Speed|nolink=1}}</span>
<span class="btn btn--active" data-hide-type="item" data-hide-target="stat_luck">{{StatIcon|Luck|nolink=1}}</span>
<span class="btn btn--active" data-hide-type="item" data-hide-target="stat_luck" title="Luck">{{StatIcon|Luck|nolink=1}}</span>
<span class="btn btn--active" data-hide-type="item" data-hide-target="stat_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: 10px; text-align: right;">
<!-- Rarities/Tiers -->
<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|II}}</span>
<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|IV}}</span>
</td>|}}
{{#ifeq:{{{extra_btns|}}}|1|<td style="padding-left: 10px; text-align: right;">
<!-- Extras: Cost/Tags -->
<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="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>|}}
</tr>
</tr>
</table><!--
</table><!--
Line 39: 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 ==


<pre style="display: inline-block;">
<pre style="display: inline-block;">
Line 44: Line 55:
</pre>
</pre>


{{StatsCard_GridToggles}}
<div class="statscard-grid" style="max-width: 1220px;">
{{StatsCard_GridToggles}}
</div>
 
== Tier Buttons ==
 
<pre style="display: inline-block;">
{{StatsCard_GridToggles|tier_btns=1}}
</pre>
 
<div style="max-width: 1220px;">
{{StatsCard_GridToggles|tier_btns=1}}
</div>
 
== Extra Buttons ==
 
<pre style="display: inline-block;">
{{StatsCard_GridToggles|extra_btns=1}}
</pre>
 
<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}}

❌ ✔️

Max HP.png HP Regeneration.png Life Steal.png Damage.png Melee Damage.png Ranged Damage.png Elemental Damage.png Attack Speed.png Crit Chance.png Engineering Stat.png Range Stat.png Armor.png Dodge Stat.png Speed Stat.png Luck.png Harvesting.png

Tier Buttons

{{StatsCard_GridToggles|tier_btns=1}}

❌ ✔️

Max HP.png HP Regeneration.png Life Steal.png Damage.png Melee Damage.png Ranged Damage.png Elemental Damage.png Attack Speed.png Crit Chance.png Engineering Stat.png Range Stat.png Armor.png Dodge Stat.png Speed Stat.png Luck.png Harvesting.png

I II III IV

Extra Buttons

{{StatsCard_GridToggles|extra_btns=1}}

❌ ✔️

Max HP.png HP Regeneration.png Life Steal.png Damage.png Melee Damage.png Ranged Damage.png Elemental Damage.png Attack Speed.png Crit Chance.png Engineering Stat.png Range Stat.png Armor.png Dodge Stat.png Speed Stat.png Luck.png Harvesting.png

📦 👁️ Materials.png 🏷️

Tier Buttons + Extras Buttons

{{StatsCard_GridToggles|extra_btns=1|tier_btns=1}}

❌ ✔️

Max HP.png HP Regeneration.png Life Steal.png Damage.png Melee Damage.png Ranged Damage.png Elemental Damage.png Attack Speed.png Crit Chance.png Engineering Stat.png Range Stat.png Armor.png Dodge Stat.png Speed Stat.png Luck.png Harvesting.png

I II III IV

📦 👁️ Materials.png 🏷️


Retrieved from "https://brotato.wiki.spellsandguns.com/index.php?title=Template:StatsCard_GridToggles&oldid=4939"