Template:StatsCard GridToggles - Revision history

Darkly77: reducing padding

2023-02-19T01:18:00Z

reducing padding

← Older revision		Revision as of 01:18, 19 February 2023
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: ~~20px~~;">		<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: ~~20px~~; text-align: right;">		{{#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\|I}}</span>		<span class="btn btn--active" data-hide-type="item" data-hide-target="rarity1" title="Tier 1 (Common)">{{Color\|tier1\|I}}</span>

Darkly77: Add button to only show icons

2023-02-19T01:16:11Z

Add button to only show icons

← Older revision		Revision as of 01:16, 19 February 2023
Line 35:		Line 35:
	{{#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="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="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-costs" title="Show Costs" style="height: 20px;">{{StatIcon\|Materials\|nolink=1}}</span>

Darkly77: change tier button text to roman numerals, like in-game + Add example for using both tier & extra buttons

2023-02-14T19:51:43Z

change tier button text to roman numerals, like in-game + Add example for using both tier & extra buttons

← Older revision		Revision as of 19:51, 14 February 2023
Line 28:		Line 28:
	{{#ifeq:{{{tier_btns\|}}}\|1\|<td style="padding-left: 20px; text-align: right;">		{{#ifeq:{{{tier_btns\|}}}\|1\|<td style="padding-left: 20px; 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\|T1}}</span>		<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\|T2}}</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\|T3}}</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\|T4}}</span>		<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;">
Line 78:		Line 78:
	</div>		</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>

Darkly77: eyeball icon: change title, make inactive

2023-02-13T08:36:13Z

eyeball icon: change title, make inactive

← Older revision		Revision as of 08:36, 13 February 2023
Line 35:		Line 35:
	{{#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--~~active~~" data-hide-type="container_toggle" data-container-class="statscard-grid__main--transparent-hidden-items" title="~~Filtered~~ items ~~are fully hidden~~, instead of ~~becoming transparent~~" 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="Costs" style="height: 20px;">{{StatIcon\|Materials\|nolink=1}}</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="Tags" style="height: 20px;">🏷️</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>

Darkly77: change eyeball icon to be active by default, and change its target class to "statscard-grid__main--transparent-hidden-items" so that it works in reverse to how it does currently: Ie. pressing the button makes items transparent

2023-02-13T08:30:56Z

change eyeball icon to be active by default, and change its target class to "statscard-grid__main--transparent-hidden-items" so that it works in reverse to how it does currently: Ie. pressing the button makes items transparent

← Older revision		Revision as of 08:30, 13 February 2023
Line 35:		Line 35:
	{{#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="container_toggle" data-container-class="statscard-grid__main--~~hide~~-items" title="Filtered items are fully hidden, instead of becoming transparent" style="height: 20px;">👁️</span>		<span class="btn btn--active" data-hide-type="container_toggle" data-container-class="statscard-grid__main--transparent-hidden-items" title="Filtered items are fully hidden, instead of becoming transparent" style="height: 20px;">👁️</span>
	<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="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="misc" data-hide-target=".ibox__stats-tags" title="Tags" 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>

Darkly77: Option to fully hide items, instead of making them transparent

2023-02-13T06:45:06Z

Option to fully hide items, instead of making them transparent

← Older revision		Revision as of 06:45, 13 February 2023
Line 35:		Line 35:
	{{#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="container_toggle" data-container-class="statscard-grid__main--hide-items" title="Filtered items are fully hidden, instead of becoming transparent" style="height: 20px;">👁️</span>
	<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="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="misc" data-hide-target=".ibox__stats-tags" title="Tags" 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>

Darkly77: tier buttons: reduce text from "Tier #" to just "T#"

2023-02-13T06:21:41Z

tier buttons: reduce text from "Tier #" to just "T#"

← Older revision		Revision as of 06:21, 13 February 2023
Line 28:		Line 28:
	{{#ifeq:{{{tier_btns\|}}}\|1\|<td style="padding-left: 20px; text-align: right;">		{{#ifeq:{{{tier_btns\|}}}\|1\|<td style="padding-left: 20px; 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\|~~Tier 1~~}}</span>		<span class="btn btn--active" data-hide-type="item" data-hide-target="rarity1" title="Tier 1 (Common)">{{Color\|tier1\|T1}}</span>
	<span class="btn btn--active" data-hide-type="item" data-hide-target="rarity2" title="Tier 2 (Uncommon)">{{Color\|tier2\|~~Tier 2~~}}</span>		<span class="btn btn--active" data-hide-type="item" data-hide-target="rarity2" title="Tier 2 (Uncommon)">{{Color\|tier2\|T2}}</span>
	<span class="btn btn--active" data-hide-type="item" data-hide-target="rarity3" title="Tier 3 (Rare)">{{Color\|tier3\|~~Tier 3~~}}</span>		<span class="btn btn--active" data-hide-type="item" data-hide-target="rarity3" title="Tier 3 (Rare)">{{Color\|tier3\|T3}}</span>
	<span class="btn btn--active" data-hide-type="item" data-hide-target="rarity4" title="Tier 4 (Legendary)">{{Color\|tier4\|~~Tier 4~~}}</span>		<span class="btn btn--active" data-hide-type="item" data-hide-target="rarity4" title="Tier 4 (Legendary)">{{Color\|tier4\|T4}}</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;">

Darkly77: adjust container width deduction

2022-12-18T19:12:06Z

adjust container width deduction

← Older revision		Revision as of 19:12, 18 December 2022
Line 1:		Line 1:
	<onlyinclude><includeonly><!--		<onlyinclude><includeonly><!--
	--><table style="width: 100%; max-width: calc(100% - ~~40px~~);">		--><table style="width: 100%; max-width: calc(100% - 28px);">
	<tr>		<tr>
	<td style="width: 88px;">		<td style="width: 88px;">

Darkly77: update max-width to use parent

2022-12-18T19:10:22Z

update max-width to use parent

← Older revision		Revision as of 19:10, 18 December 2022
Line 1:		Line 1:
	<onlyinclude><includeonly><!--		<onlyinclude><includeonly><!--
	--><table style="width: 100%; max-width: ~~1207px~~;">		--><table style="width: 100%; max-width: calc(100% - 40px);">
	<tr>		<tr>
	<td style="width: 88px;">		<td style="width: 88px;">
Line 44:		Line 44:

	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 53:
	</pre>		</pre>

	{{StatsCard_GridToggles}}		<div class="statscard-grid" style="max-width: 1220px;">
			{{StatsCard_GridToggles}}
			</div>

	== Tier Buttons ==		== Tier Buttons ==
Line 59:		Line 63:
	</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 73:
	</pre>		</pre>

	{{StatsCard_GridToggles\|extra_btns=1}}		<div style="max-width: 1220px;">
			{{StatsCard_GridToggles\|extra_btns=1}}
			</div>

Darkly77: make cost/item buttons inactive by default

2022-12-16T19:48:52Z

make cost/item buttons inactive by default

← Older revision		Revision as of 19:48, 16 December 2022
Line 35:		Line 35:
	{{#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--~~active~~" 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="misc" data-hide-target=".ibox__stats-costs" title="Costs" style="height: 20px;">{{StatIcon\|Materials\|nolink=1}}</span>
	<span class="btn btn--~~active~~" data-hide-type="misc" data-hide-target=".ibox__stats-tags" title="Tags" 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>
	</td>\|}}		</td>\|}}
	</tr>		</tr>

← Older revision		Revision as of 06:21, 13 February 2023
Line 28:		Line 28:
	{{#ifeq:{{{tier_btns\|}}}\|1\|<td style="padding-left: 20px; text-align: right;">		{{#ifeq:{{{tier_btns\|}}}\|1\|<td style="padding-left: 20px; 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\|~~Tier 1~~}}</span>		<span class="btn btn--active" data-hide-type="item" data-hide-target="rarity1" title="Tier 1 (Common)">{{Color\|tier1\|T1}}</span>
	<span class="btn btn--active" data-hide-type="item" data-hide-target="rarity2" title="Tier 2 (Uncommon)">{{Color\|tier2\|~~Tier 2~~}}</span>		<span class="btn btn--active" data-hide-type="item" data-hide-target="rarity2" title="Tier 2 (Uncommon)">{{Color\|tier2\|T2}}</span>
	<span class="btn btn--active" data-hide-type="item" data-hide-target="rarity3" title="Tier 3 (Rare)">{{Color\|tier3\|~~Tier 3~~}}</span>		<span class="btn btn--active" data-hide-type="item" data-hide-target="rarity3" title="Tier 3 (Rare)">{{Color\|tier3\|T3}}</span>
	<span class="btn btn--active" data-hide-type="item" data-hide-target="rarity4" title="Tier 4 (Legendary)">{{Color\|tier4\|~~Tier 4~~}}</span>		<span class="btn btn--active" data-hide-type="item" data-hide-target="rarity4" title="Tier 4 (Legendary)">{{Color\|tier4\|T4}}</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;">