Toggle menu
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

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}}}
}}
|}

Latest revision as of 05:24, 27 February 2026

Universal Popups v3 — Full Testbed (Sectioned)

edit edit source

1) Notes (Small Hover) — Bullet List

edit edit source

2) Notes (Small Hover) — Single Sentence

edit edit source

3) Notes (Small Hover) — Two Paragraphs

edit edit source

4) Definition (Small Hover) — No Link, 2 Lines

edit edit source

Ground Cast (no link)

5) Definition (Small Hover) — No Link, Long Wrap

edit edit source

Piercing (no link)

6) Users (Large Click) — Grouped List

edit edit source

Users(6)

7) Requirements (Large Click) — Simple List

edit edit source

Requirements(4)

8) Scroll Test (Large Click) — Long List

edit edit source

Scroll Test(14)

edit edit source

Casting (with link)

10) Definition (Large Click) — With Link, Long Wrap

edit edit source

Judgement Blade (with link)

edit edit source

12) Mixed Content (Large Click) — Text + List

edit edit source

Mixed(5)