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
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 (10+) ==
== Universal Popups v3 — Full Testbed (Sectioned) ==


<div class="sv-card" style="padding:16px; margin:16px 0;">
=== 1) Notes (Small Hover) — Bullet List ===
<div style="display:flex; gap:18px; flex-wrap:wrap; align-items:flex-start;">
 
<div>
<div class="sv-pill" style="margin-bottom:10px;">1) Small (Hover) — Notes (bullet list)</div>
<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>
</div>


<div>
=== 2) Notes (Small Hover) — Single Sentence ===
<div class="sv-pill" style="margin-bottom:10px;">2) Small (Hover) — Notes (single sentence)</div>
<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>
</div>


<div>
=== 3) Notes (Small Hover) — Two Paragraphs ===
<div class="sv-pill" style="margin-bottom:10px;">3) Small (Hover) — Notes (two paragraphs)</div>
<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>
</div>


<div>
=== 4) Definition (Small Hover) — No Link, 2 Lines ===
<div class="sv-pill" style="margin-bottom:10px;">4) Small (Hover) — Definition (no link, 2 lines)</div>
<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>
</div>


<div>
=== 5) Definition (Small Hover) — No Link, Long Wrap ===
<div class="sv-pill" style="margin-bottom:10px;">5) Small (Hover) — Definition (no link, long wrap)</div>
<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>
</div>


<div>
=== 6) Users (Large Click) — Grouped List ===
<div class="sv-pill" style="margin-bottom:10px;">6) Large (Click) — Users (grouped list)</div>
<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>
</div>


<div>
=== 7) Requirements (Large Click) — Simple List ===
<div class="sv-pill" style="margin-bottom:10px;">7) Large (Click) — Requirements (simple list)</div>
<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>
</div>


<div>
=== 8) Scroll Test (Large Click) — Long List ===
<div class="sv-pill" style="margin-bottom:10px;">8) Large (Click) — Long list (scroll test)</div>
<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>
</div>


<div>
=== 9) Definition (Large Click) — With Link (Header Link) ===
<div class="sv-pill" style="margin-bottom:10px;">9) Large (Click) — Definition (with link + action)</div>
<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.\nIncludes an action button." data-sv-def-link="Casting">Casting (with link)</span>
</div>


<div>
=== 10) Definition (Large Click) — With Link, Long Wrap ===
<div class="sv-pill" style="margin-bottom:10px;">10) Large (Click) — Definition (with link, long wrap)</div>
<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="Damage">Damage (with link)</span>
</div>


<div>
=== 11) Notes (Small Hover) — Inline Wiki Link in Body ===
<div class="sv-pill" style="margin-bottom:10px;">11) Small (Hover) — Notes (inline link inside body)</div>
<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>
</div>


<div>
=== 12) Mixed Content (Large Click) — Text + List ===
<div class="sv-pill" style="margin-bottom:10px;">12) Large (Click) — Mixed content (text + list)</div>
<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-tip-pop-body">
<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>
</div>
</div>
</div>
Retrieved from "https://spiritvale.info/wiki/User:Eviand/TemplateTesting"