User:Eviand/TemplateTesting: Difference between revisions
From SpiritVale Wiki
More actions
Tags: Mobile edit Mobile web edit |
No edit summary Tags: Mobile edit Mobile web edit |
||
| (4 intermediate revisions by the same user not shown) | |||
| Line 1: | Line 1: | ||
== Universal Popups v3 — Full Testbed ( | == Universal Popups v3 — Full Testbed (Sectioned) == | ||
=== 1) Notes (Small Hover) — Bullet List === | |||
<div class="sv-tip"> | <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> | <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> | ||
| Line 13: | Line 9: | ||
* Bullet line one (wrap test for compact width). | * Bullet line one (wrap test for compact width). | ||
* Bullet line two with a longer phrase to force vertical growth. | * Bullet line two with a longer phrase to force vertical growth. | ||
</div> | </div> | ||
</div> | </div> | ||
</div> | </div> | ||
=== 2) Notes (Small Hover) — Single Sentence === | |||
<div class="sv-tip"> | <div class="sv-tip"> | ||
<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> | <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> | ||
| Line 26: | Line 20: | ||
<div class="sv-tip-pop-body"> | <div class="sv-tip-pop-body"> | ||
A short single-line note that should wrap early and grow vertically. | A short single-line note that should wrap early and grow vertically. | ||
</div> | </div> | ||
</div> | </div> | ||
</div> | </div> | ||
=== 3) Notes (Small Hover) — Two Paragraphs === | |||
<div class="sv-tip"> | <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> | <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> | ||
| Line 40: | Line 32: | ||
First paragraph for spacing checks. | First paragraph for spacing checks. | ||
Second paragraph for spacing checks (should not add huge margins). | Second paragraph for spacing checks (should not add huge margins). | ||
</div> | </div> | ||
</div> | </div> | ||
</div> | </div> | ||
=== 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> | <span class="sv-def" tabindex="0" data-sv-def-tip="Hover-only definition.\nSecond line test for newline rendering.">Ground Cast (no link)</span> | ||
=== 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> | <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> | ||
=== 6) Users (Large Click) — Grouped List === | |||
<div class="sv-disclose"> | <div class="sv-disclose"> | ||
<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> | <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> | ||
| Line 71: | Line 57: | ||
<li>Holy Sentinel</li> | <li>Holy Sentinel</li> | ||
</ul> | </ul> | ||
</div> | </div> | ||
</div> | </div> | ||
=== 7) Requirements (Large Click) — Simple List === | |||
<div class="sv-disclose"> | <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> | <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> | ||
| Line 87: | Line 71: | ||
<li>Cooldown: 8s</li> | <li>Cooldown: 8s</li> | ||
</ul> | </ul> | ||
</div> | </div> | ||
</div> | </div> | ||
=== 8) Scroll Test (Large Click) — Long List === | |||
<div class="sv-disclose"> | <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> | <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> | ||
| Line 114: | Line 96: | ||
<li>Entry 14</li> | <li>Entry 14</li> | ||
</ul> | </ul> | ||
</div> | </div> | ||
</div> | </div> | ||
=== 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> | |||
<span class="sv-def" tabindex="0" data-sv-def-tip="This definition is click-open so the user can interact inside the popup.\ | |||
=== 10) Definition (Large Click) — With Link, Long Wrap === | |||
<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> | |||
<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=" | |||
=== 11) Notes (Small Hover) — Inline Wiki Link in Body === | |||
<div class="sv-tip"> | <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> | <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> | ||
| Line 136: | Line 112: | ||
<div class="sv-tip-pop-body"> | <div class="sv-tip-pop-body"> | ||
This popup contains a wiki link to validate Popups extension behavior: [[Casting]]. | This popup contains a wiki link to validate Popups extension behavior: [[Casting]]. | ||
</div> | </div> | ||
</div> | </div> | ||
</div> | </div> | ||
=== 12) Mixed Content (Large Click) — Text + List === | |||
<div class="sv-disclose"> | <div class="sv-disclose"> | ||
<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> | <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"> | <div class="sv-disclose-pop sv-hidden" id="sv-tb-mixed-1" role="dialog" aria-label="Mixed"> | ||
<div class="sv-disclose-pop-head"><div class="sv-disclose-pop-title">Mixed</div></div> | <div class="sv-disclose-pop-head"><div class="sv-disclose-pop-title">Mixed</div></div> | ||
<div class="sv- | <div class="sv-disclose-pop-body"> | ||
Short intro line for mixed content test. | Short intro line for mixed content test. | ||
<ul> | <ul> | ||
| Line 155: | Line 129: | ||
</ul> | </ul> | ||
</div> | </div> | ||
</div> | </div> | ||
</div> | </div> | ||
Latest revision as of 05:24, 27 February 2026
Universal Popups v3 — Full Testbed (Sectioned)
edit edit source1) Notes (Small Hover) — Bullet List
edit edit source
Info
- Bullet line one (wrap test for compact width).
- Bullet line two with a longer phrase to force vertical growth.
2) Notes (Small Hover) — Single Sentence
edit edit source
Notes
A short single-line note that should wrap early and grow vertically.
3) Notes (Small Hover) — Two Paragraphs
edit edit source
Details
First paragraph for spacing checks. Second paragraph for spacing checks (should not add huge margins).
4) Definition (Small Hover) — No Link, 2 Lines
edit edit sourceGround Cast (no link)
5) Definition (Small Hover) — No Link, Long Wrap
edit edit sourcePiercing (no link)
6) Users (Large Click) — Grouped List
edit edit sourceUsers(6)
Users
- Classes
- Paladin
- Cleric
- Templar
- Summons
- Turtle Champion
- Celestial Squire
- Holy Sentinel
7) Requirements (Large Click) — Simple List
edit edit sourceRequirements(4)
Requirements
- Level 25
- Weapon: Sword
- Cost: 12 SP
- Cooldown: 8s
8) Scroll Test (Large Click) — Long List
edit edit sourceScroll Test(14)
Scroll Test
- Entries
- Entry 1
- Entry 2
- Entry 3
- Entry 4
- Entry 5
- Entry 6
- Entry 7
- Entry 8
- Entry 9
- Entry 10
- Entry 11
- Entry 12
- Entry 13
- Entry 14
9) Definition (Large Click) — With Link (Header Link)
edit edit sourceCasting (with link)
10) Definition (Large Click) — With Link, Long Wrap
edit edit sourceJudgement Blade (with link)
11) Notes (Small Hover) — Inline Wiki Link in Body
edit edit source
Link Test
This popup contains a wiki link to validate Popups extension behavior: Casting.
12) Mixed Content (Large Click) — Text + List
edit edit sourceMixed(5)
Mixed
Short intro line for mixed content test.
- Bullet A
- Bullet B
- Bullet C