Toggle search
Toggle menu
115
248
25
2.7K
SpiritVale Wiki
Toggle preferences menu
Toggle personal menu
Not logged in
Your IP address will be publicly visible if you make any edits.

Join the Playtest on Steam Now: SpiritVale

User:Eviand/TemplateTesting: Difference between revisions

From SpiritVale Wiki
More actions
← Older edit
VisualWikitext
No edit summary
Tags: Mobile edit Mobile web edit
 
(13 intermediate revisions by the same user not shown)
Line 1: Line 1:
== Generic Infobox ==
== Universal Popups v3 — Full Testbed (Sectioned) ==


Used as a base template for other boxes. Rows must be manually added or removed.
=== 1) Notes (Small Hover) — Bullet List ===
<div class="sv-tip">
<span class="sv-tip-btn sv-focus-ring" role="button" tabindex="0" data-sv-toggle="1" aria-label="Info" aria-controls="sv-tb-notes-1" aria-expanded="false"><span class="sv-ico sv-ico--info" aria-hidden="true">i</span></span>
<div class="sv-tip-pop sv-hidden" id="sv-tb-notes-1" role="dialog" aria-label="Info">
<div class="sv-tip-pop-head"><div class="sv-tip-pop-title">Info</div></div>
<div class="sv-tip-pop-body">
* Bullet line one (wrap test for compact width).
* Bullet line two with a longer phrase to force vertical growth.
</div>
</div>
</div>


{| class="infobox custom-table"
=== 2) Notes (Small Hover) — Single Sentence ===
|-
<div class="sv-tip">
! colspan="2" |
<span class="sv-tip-btn sv-focus-ring" role="button" tabindex="0" data-sv-toggle="1" aria-label="Notes" aria-controls="sv-tb-notes-2" aria-expanded="false"><span class="sv-ico sv-ico--info" aria-hidden="true">i</span></span>
'''{{{name|Example Infobox}}}'''<br />
<div class="sv-tip-pop sv-hidden" id="sv-tb-notes-2" role="dialog" aria-label="Notes">
{{#if:{{{image|}}}|[[File:{{{image}}}|100px]]}}
<div class="sv-tip-pop-head"><div class="sv-tip-pop-title">Notes</div></div>
|-
<div class="sv-tip-pop-body">
| style="border-right:1px solid #555;" | {{{row1_label|}}}
A short single-line note that should wrap early and grow vertically.
| {{{row1_value|}}}
</div>
|-
</div>
| style="border-right:1px solid #555;" | {{{row2_label|}}}
</div>
| {{{row2_value|}}}
|-
| style="border-right:1px solid #555;" | {{{row3_label|}}}
| {{{row3_value|}}}
|}


=== Example 1 ===
=== 3) Notes (Small Hover) — Two Paragraphs ===
<div class="sv-tip">
<span class="sv-tip-btn sv-focus-ring" role="button" tabindex="0" data-sv-toggle="1" aria-label="Details" aria-controls="sv-tb-notes-3" aria-expanded="false"><span class="sv-ico sv-ico--info" aria-hidden="true">i</span></span>
<div class="sv-tip-pop sv-hidden" id="sv-tb-notes-3" role="dialog" aria-label="Details">
<div class="sv-tip-pop-head"><div class="sv-tip-pop-title">Details</div></div>
<div class="sv-tip-pop-body">
First paragraph for spacing checks.
Second paragraph for spacing checks (should not add huge margins).
</div>
</div>
</div>


{| class="infobox custom-table"
=== 4) Definition (Small Hover) — No Link, 2 Lines ===
|-
<span class="sv-def" tabindex="0" data-sv-def-tip="Hover-only definition.\nSecond line test for newline rendering.">Ground Cast (no link)</span>
! colspan="2" |
'''Player'''<br />
[[File:SpiritValeLogo.png|100px]]<br />
|-
| style="border-right:1px solid #555;" | Character
| Eviand
|-
| style="border-right:1px solid #555;" | Class
| Acolyte
|-
| style="border-right:1px solid #555;" | Role
| Support
|}


=== Example 2 ===
=== 5) Definition (Small Hover) — No Link, Long Wrap ===
<span class="sv-def" tabindex="0" data-sv-def-tip="This is a longer definition tooltip meant to wrap quickly to validate narrow width behavior and vertical growth.">Piercing (no link)</span>


This one is much more appropriate, and feels a lot easier to use. Will be for classes only.
=== 6) Users (Large Click) — Grouped List ===
<nowiki>
<div class="sv-disclose">
{| class="infobox custom-table"
<span class="sv-disclose-btn sv-focus-ring" role="button" tabindex="0" data-sv-toggle="1" aria-label="Users" aria-controls="sv-tb-users-1" aria-expanded="false"><span class="sv-disclose-label">Users</span><span class="sv-disclose-count">(6)</span></span>
|-
<div class="sv-disclose-pop sv-hidden" id="sv-tb-users-1" role="dialog" aria-label="Users">
! colspan="2" |
<div class="sv-disclose-pop-head"><div class="sv-disclose-pop-title">Users</div></div>
'''Class Overview'''<br />
<ul class="sv-disclose-list">
|-
<li class="sv-disclose-group-title">Classes</li>
| style="border-right:1px solid #555;" | Role
<li>Paladin</li>
| {{{Role}}}
<li>Cleric</li>
|-
<li>Templar</li>
| style="border-right:1px solid #555;" | Primary Stats
<li class="sv-disclose-group-title">Summons</li>
| {{{Stats}}}
<li>Turtle Champion</li>
|-
<li>Celestial Squire</li>
| style="border-right:1px solid #555;" | Weapons
<li>Holy Sentinel</li>
| {{{Weapons}}}
</ul>
|}
</div>
</nowiki>
</div>


== Fun Class Template Idea ==
=== 7) Requirements (Large Click) — Simple List ===
<div class="sv-disclose">
<span class="sv-disclose-btn sv-focus-ring" role="button" tabindex="0" data-sv-toggle="1" aria-label="Requirements" aria-controls="sv-tb-req-1" aria-expanded="false"><span class="sv-disclose-label">Requirements</span><span class="sv-disclose-count">(4)</span></span>
<div class="sv-disclose-pop sv-hidden" id="sv-tb-req-1" role="dialog" aria-label="Requirements">
<div class="sv-disclose-pop-head"><div class="sv-disclose-pop-title">Requirements</div></div>
<ul class="sv-disclose-list">
<li>Level 25</li>
<li>Weapon: Sword</li>
<li>Cost: 12 SP</li>
<li>Cooldown: 8s</li>
</ul>
</div>
</div>


Had fun creating this for testing, but will instead use a simpler template.
=== 8) Scroll Test (Large Click) — Long List ===
<div class="sv-disclose">
<span class="sv-disclose-btn sv-focus-ring" role="button" tabindex="0" data-sv-toggle="1" aria-label="Scroll Test" aria-controls="sv-tb-scroll-1" aria-expanded="false"><span class="sv-disclose-label">Scroll Test</span><span class="sv-disclose-count">(14)</span></span>
<div class="sv-disclose-pop sv-hidden" id="sv-tb-scroll-1" role="dialog" aria-label="Scroll Test">
<div class="sv-disclose-pop-head"><div class="sv-disclose-pop-title">Scroll Test</div></div>
<ul class="sv-disclose-list">
<li class="sv-disclose-group-title">Entries</li>
<li>Entry 1</li>
<li>Entry 2</li>
<li>Entry 3</li>
<li>Entry 4</li>
<li>Entry 5</li>
<li>Entry 6</li>
<li>Entry 7</li>
<li>Entry 8</li>
<li>Entry 9</li>
<li>Entry 10</li>
<li>Entry 11</li>
<li>Entry 12</li>
<li>Entry 13</li>
<li>Entry 14</li>
</ul>
</div>
</div>


{| class="infobox custom-table"
=== 9) Definition (Large Click) — With Link (Header Link) ===
|-
<span class="sv-def" tabindex="0" data-sv-def-tip="This definition is click-open so the user can interact inside the popup.\nHeader title should be a real link (no action button)." data-sv-def-link="Casting">Casting (with link)</span>
! |
[[File:SpiritValeLogo.png|100px]]<br />
'''{{{Class}}}'''
|-
| {{{ClassDescription}}}


|-
=== 10) Definition (Large Click) — With Link, Long Wrap ===
! | '''Class Information'''
<span class="sv-def" tabindex="0" data-sv-def-tip="A longer linked definition to confirm that click-open popups remain compact in width but comfortably readable with vertical growth and scrolling when needed." data-sv-def-link="Judgement Blade">Judgement Blade (with link)</span>
|-
|
{| class="infobox custom-table"
|-
! colspan="2" | '''Class Information'''
|-
| style="border-right:1px solid #555;" | Role
| {{{Role}}}
|-
| style="border-right:1px solid #555;" | Primary Stats
| {{{Stats}}}
|-
| style="border-right:1px solid #555;" | Weapon Type(s)
| {{{Weapons}}}
|}


! | '''Skills'''
=== 11) Notes (Small Hover) — Inline Wiki Link in Body ===
|-
<div class="sv-tip">
|
<span class="sv-tip-btn sv-focus-ring" role="button" tabindex="0" data-sv-toggle="1" aria-label="Link Test" aria-controls="sv-tb-link-1" aria-expanded="false"><span class="sv-ico sv-ico--info" aria-hidden="true">i</span></span>
 
<div class="sv-tip-pop sv-hidden" id="sv-tb-link-1" role="dialog" aria-label="Link Test">
<!-- ========= DESKTOP / TABLET (wide) ========= -->
<div class="sv-tip-pop-head"><div class="sv-tip-pop-title">Link Test</div></div>
<div class="nomobile">
<div class="sv-tip-pop-body">
{| class="infobox custom-table" style="width:100%; text-align:center;"
This popup contains a wiki link to validate Popups extension behavior: [[Casting]].
|-
</div>
| style="width:16%;" | {{{Skill1}}}
</div>
| style="width:16%;" | {{{Skill2}}}
| style="width:16%;" | {{{Skill3}}}
| style="width:16%;" | {{{Skill4}}}
| style="width:16%;" | {{{Skill5}}}
| style="width:16%;" | {{{Skill6}}}
|-
| {{#if:{{{SkillImage1|}}}|[[File:{{{SkillImage1}}}|50px]]}}<br />{{{SkillDescription1}}}
| {{#if:{{{SkillImage2|}}}|[[File:{{{SkillImage2}}}|50px]]}}<br />{{{SkillDescription2}}}
| {{#if:{{{SkillImage3|}}}|[[File:{{{SkillImage3}}}|50px]]}}<br />{{{SkillDescription3}}}
| {{#if:{{{SkillImage4|}}}|[[File:{{{SkillImage4}}}|50px]]}}<br />{{{SkillDescription4}}}
| {{#if:{{{SkillImage5|}}}|[[File:{{{SkillImage5}}}|50px]]}}<br />{{{SkillDescription5}}}
| {{#if:{{{SkillImage6|}}}|[[File:{{{SkillImage6}}}|50px]]}}<br />{{{SkillDescription6}}}
|-
| style="width:16%;" | {{{Skill7}}}
| style="width:16%;" | {{{Skill8}}}
| style="width:16%;" | {{{Skill9}}}
| style="width:16%;" | {{{Skill10}}}
| style="width:16%;" | {{{Skill11}}}
| style="width:16%;" | {{{Skill12}}}
|-
| {{#if:{{{SkillImage7|}}}|[[File:{{{SkillImage7}}}|50px]]}}<br />{{{SkillDescription7}}}
| {{#if:{{{SkillImage8|}}}|[[File:{{{SkillImage8}}}|50px]]}}<br />{{{SkillDescription8}}}
| {{#if:{{{SkillImage9|}}}|[[File:{{{SkillImage9}}}|50px]]}}<br />{{{SkillDescription9}}}
| {{#if:{{{SkillImage10|}}}|[[File:{{{SkillImage10}}}|50px]]}}<br />{{{SkillDescription10}}}
| {{#if:{{{SkillImage11|}}}|[[File:{{{SkillImage11}}}|50px]]}}<br />{{{SkillDescription11}}}
| {{#if:{{{SkillImage12|}}}|[[File:{{{SkillImage12}}}|50px]]}}<br />{{{SkillDescription12}}}
|-
| style="width:16%;" | {{{Skill13}}}
| style="width:16%;" | {{{Skill14}}}
| style="width:16%;" | {{{Skill15}}}
| style="width:16%;" | {{{Skill16}}}
| style="width:16%;" | {{{Skill17}}}
| style="width:16%;" | {{{Skill18}}}
|-
| {{#if:{{{SkillImage13|}}}|[[File:{{{SkillImage13}}}|50px]]}}<br />{{{SkillDescription13}}}
| {{#if:{{{SkillImage14|}}}|[[File:{{{SkillImage14}}}|50px]]}}<br />{{{SkillDescription14}}}
| {{#if:{{{SkillImage15|}}}|[[File:{{{SkillImage15}}}|50px]]}}<br />{{{SkillDescription15}}}
| {{#if:{{{SkillImage16|}}}|[[File:{{{SkillImage16}}}|50px]]}}<br />{{{SkillDescription16}}}
| {{#if:{{{SkillImage17|}}}|[[File:{{{SkillImage17}}}|50px]]}}<br />{{{SkillDescription17}}}
| {{#if:{{{SkillImage18|}}}|[[File:{{{SkillImage18}}}|50px]]}}<br />{{{SkillDescription18}}}
|-
| style="width:16%;" | {{{Skill19}}}
| style="width:16%;" | {{{Skill20}}}
| style="width:16%;" | {{{Skill21}}}
| style="width:16%;" | {{{Skill22}}}
| style="width:16%;" | {{{Skill23}}}
| style="width:16%;" | {{{Skill24}}}
|-
| {{#if:{{{SkillImage19|}}}|[[File:{{{SkillImage19}}}|50px]]}}<br />{{{SkillDescription19}}}
| {{#if:{{{SkillImage20|}}}|[[File:{{{SkillImage20}}}|50px]]}}<br />{{{SkillDescription20}}}
| {{#if:{{{SkillImage21|}}}|[[File:{{{SkillImage21}}}|50px]]}}<br />{{{SkillDescription21}}}
| {{#if:{{{SkillImage22|}}}|[[File:{{{SkillImage22}}}|50px]]}}<br />{{{SkillDescription22}}}
| {{#if:{{{SkillImage23|}}}|[[File:{{{SkillImage23}}}|50px]]}}<br />{{{SkillDescription23}}}
| {{#if:{{{SkillImage24|}}}|[[File:{{{SkillImage24}}}|50px]]}}<br />{{{SkillDescription24}}}
|}
</div>
</div>


<!-- ========= MOBILE (stacked / 2-column) ========= -->
=== 12) Mixed Content (Large Click) — Text + List ===
<div class="mobileonly">
<div class="sv-disclose">
{| class="infobox custom-table" style="width:100%; text-align:center;"
<span class="sv-disclose-btn sv-focus-ring" role="button" tabindex="0" data-sv-toggle="1" aria-label="Mixed" aria-controls="sv-tb-mixed-1" aria-expanded="false"><span class="sv-disclose-label">Mixed</span><span class="sv-disclose-count">(5)</span></span>
|-
<div class="sv-disclose-pop sv-hidden" id="sv-tb-mixed-1" role="dialog" aria-label="Mixed">
| colspan="2" | {{{Skill1}}} • {{{Skill2}}}
<div class="sv-disclose-pop-head"><div class="sv-disclose-pop-title">Mixed</div></div>
|-
<div class="sv-disclose-pop-body">
| {{#if:{{{SkillImage1|}}}|[[File:{{{SkillImage1}}}|50px]]}}<br />{{{SkillDescription1}}}
Short intro line for mixed content test.
| {{#if:{{{SkillImage2|}}}|[[File:{{{SkillImage2}}}|50px]]}}<br />{{{SkillDescription2}}}
<ul>
|-
<li>Bullet A</li>
| colspan="2" | {{{Skill3}}} • {{{Skill4}}}
<li>Bullet B</li>
|-
<li>Bullet C</li>
| {{#if:{{{SkillImage3|}}}|[[File:{{{SkillImage3}}}|50px]]}}<br />{{{SkillDescription3}}}
</ul>
| {{#if:{{{SkillImage4|}}}|[[File:{{{SkillImage4}}}|50px]]}}<br />{{{SkillDescription4}}}
|-
| colspan="2" | {{{Skill5}}} • {{{Skill6}}}
|-
| {{#if:{{{SkillImage5|}}}|[[File:{{{SkillImage5}}}|50px]]}}<br />{{{SkillDescription5}}}
| {{#if:{{{SkillImage6|}}}|[[File:{{{SkillImage6}}}|50px]]}}<br />{{{SkillDescription6}}}
|-
| colspan="2" | {{{Skill7}}} • {{{Skill8}}}
|-
| {{#if:{{{SkillImage7|}}}|[[File:{{{SkillImage7}}}|50px]]}}<br />{{{SkillDescription7}}}
| {{#if:{{{SkillImage8|}}}|[[File:{{{SkillImage8}}}|50px]]}}<br />{{{SkillDescription8}}}
|-
| colspan="2" | {{{Skill9}}} • {{{Skill10}}}
|-
| {{#if:{{{SkillImage9|}}}|[[File:{{{SkillImage9}}}|50px]]}}<br />{{{SkillDescription9}}}
| {{#if:{{{SkillImage10|}}}|[[File:{{{SkillImage10}}}|50px]]}}<br />{{{SkillDescription10}}}
|-
| colspan="2" | {{{Skill11}}} • {{{Skill12}}}
|-
| {{#if:{{{SkillImage11|}}}|[[File:{{{SkillImage11}}}|50px]]}}<br />{{{SkillDescription11}}}
| {{#if:{{{SkillImage12|}}}|[[File:{{{SkillImage12}}}|50px]]}}<br />{{{SkillDescription12}}}
|-
| colspan="2" | {{{Skill13}}} • {{{Skill14}}}
|-
| {{#if:{{{SkillImage13|}}}|[[File:{{{SkillImage13}}}|50px]]}}<br />{{{SkillDescription13}}}
| {{#if:{{{SkillImage14|}}}|[[File:{{{SkillImage14}}}|50px]]}}<br />{{{SkillDescription14}}}
|-
| colspan="2" | {{{Skill15}}} • {{{Skill16}}}
|-
| {{#if:{{{SkillImage15|}}}|[[File:{{{SkillImage15}}}|50px]]}}<br />{{{SkillDescription15}}}
| {{#if:{{{SkillImage16|}}}|[[File:{{{SkillImage16}}}|50px]]}}<br />{{{SkillDescription16}}}
|-
| colspan="2" | {{{Skill17}}} • {{{Skill18}}}
|-
| {{#if:{{{SkillImage17|}}}|[[File:{{{SkillImage17}}}|50px]]}}<br />{{{SkillDescription17}}}
| {{#if:{{{SkillImage18|}}}|[[File:{{{SkillImage18}}}|50px]]}}<br />{{{SkillDescription18}}}
|-
| colspan="2" | {{{Skill19}}} • {{{Skill20}}}
|-
| {{#if:{{{SkillImage19|}}}|[[File:{{{SkillImage19}}}|50px]]}}<br />{{{SkillDescription19}}}
| {{#if:{{{SkillImage20|}}}|[[File:{{{SkillImage20}}}|50px]]}}<br />{{{SkillDescription20}}}
|-
| colspan="2" | {{{Skill21}}} • {{{Skill22}}}
|-
| {{#if:{{{SkillImage21|}}}|[[File:{{{SkillImage21}}}|50px]]}}<br />{{{SkillDescription21}}}
| {{#if:{{{SkillImage22|}}}|[[File:{{{SkillImage22}}}|50px]]}}<br />{{{SkillDescription22}}}
|-
| colspan="2" | {{{Skill23}}} • {{{Skill24}}}
|-
| {{#if:{{{SkillImage23|}}}|[[File:{{{SkillImage23}}}|50px]]}}<br />{{{SkillDescription23}}}
| {{#if:{{{SkillImage24|}}}|[[File:{{{SkillImage24}}}|50px]]}}<br />{{{SkillDescription24}}}
|}
</div>
</div>
|-
! | '''Advanced Classes'''
|-
|
<!-- ========= DESKTOP / TABLET (side-by-side) ========= -->
<div class="nomobile" style="display:flex; gap:20px;">
  <div style="flex:1;">
  {| class="infobox custom-table"
  |-
  ! colspan="2" | '''{{{AdvancedClass1}}}'''<br />[[File:{{{AdvancedClassImage1}}}|100px]]
  |-
  | style="border-right:1px solid #555;" | Role
  | {{{AdvancedClassRole1}}}
  |-
  | style="border-right:1px solid #555;" | Description
  | {{{AdvancedClassDescription1}}}
  |}
  </div>
  <div style="flex:1;">
  {| class="infobox custom-table"
  |-
  ! colspan="2" | '''{{{AdvancedClass2}}}'''<br />[[File:{{{AdvancedClassImage2}}}|100px]]
  |-
  | style="border-right:1px solid #555;" | Role
  | {{{AdvancedClassRole2}}}
  |-
  | style="border-right:1px solid #555;" | Description
  | {{{AdvancedClassDescription2}}}
  |}
  </div>
</div>
</div>
<!-- ========= MOBILE (stacked cards) ========= -->
<div class="mobileonly">
  {| class="infobox custom-table"
  |-
  ! colspan="2" | '''{{{AdvancedClass1}}}'''<br />[[File:{{{AdvancedClassImage1}}}|100px]]
  |-
  | style="border-right:1px solid #555;" | Role
  | {{{AdvancedClassRole1}}}
  |-
  | style="border-right:1px solid #555;" | Description
  | {{{AdvancedClassDescription1}}}
  |}
  {| class="infobox custom-table"
  |-
  ! colspan="2" | '''{{{AdvancedClass2}}}'''<br />[[File:{{{AdvancedClassImage2}}}|100px]]
  |-
  | style="border-right:1px solid #555;" | Role
  | {{{AdvancedClassRole2}}}
  |-
  | style="border-right:1px solid #555;" | Description
  | {{{AdvancedClassDescription2}}}
  |}
</div>
</div>
|-
! | '''Advice & Guides'''
|-
| {{{Advice|}}}
|}
== Template Box ==
Had this super fun template idea, but I couldn't get it to work on mobile. Going to shelve it for now as it might be useful for later.
{| class="infobox custom-table" style="float:{{{float|right}}}; width:100%; max-width:260px; font-size:95%;"
|-
! colspan="2" |
'''{{{BoxName}}}'''
{{#if:{{{A1|}}}|
|-
| style="border-right:1px solid #555; width:{{{Col1Width|35%}}};" | {{{A1}}}
| {{{B1}}}
}}
{{#if:{{{A2|}}}|
|-
| style="border-right:1px solid #555; width:{{{Col1Width|35%}}};" | {{{A2}}}
| {{{B2}}}
}}
{{#if:{{{A3|}}}|
|-
| style="border-right:1px solid #555; width:{{{Col1Width|35%}}};" | {{{A3}}}
| {{{B3}}}
}}
{{#if:{{{A4|}}}|
|-
| style="border-right:1px solid #555; width:{{{Col1Width|35%}}};" | {{{A4}}}
| {{{B4}}}
}}
{{#if:{{{A5|}}}|
|-
| style="border-right:1px solid #555; width:{{{Col1Width|35%}}};" | {{{A5}}}
| {{{B5}}}
}}
{{#if:{{{A6|}}}|
|-
| style="border-right:1px solid #555; width:{{{Col1Width|35%}}};" | {{{A6}}}
| {{{B6}}}
}}
{{#if:{{{A7|}}}|
|-
| style="border-right:1px solid #555; width:{{{Col1Width|35%}}};" | {{{A7}}}
| {{{B7}}}
}}
|}
Retrieved from "https://spiritvale.info/wiki/User:Eviand/TemplateTesting"