User:Eviand/TemplateTesting: Difference between revisions
From SpiritVale Wiki
More actions
No edit summary Tags: Reverted Mobile edit Mobile web edit |
No edit summary Tags: Reverted Mobile edit Mobile web edit |
||
| Line 5: | Line 5: | ||
<div> | <div> | ||
<div class="sv-pill" style="margin-bottom:10px;">Small (Hover) — Info</div> | <div class="sv-pill" style="margin-bottom:10px;">Small (Hover) — Info (span trigger)</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-test-notes" 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-test-notes" aria-expanded="false"><span class="sv-ico sv-ico--info" aria-hidden="true">i</span></span> | ||
| Line 17: | Line 17: | ||
</div> | </div> | ||
</div> | </div> | ||
<div style="margin-top:10px; font-size:13px; opacity:0.85;">Keyboard: focus the “i” and press Enter/Space.</div> | |||
</div> | |||
<div> | |||
<div class="sv-pill" style="margin-bottom:10px;">Small (Hover) — Info (details/summary trigger)</div> | |||
<details class="sv-tip"> | |||
<summary class="sv-tip-btn sv-focus-ring" role="button" tabindex="0" data-sv-toggle="1" aria-label="Info Summary" aria-expanded="false"><span class="sv-ico sv-ico--info" aria-hidden="true">i</span></summary> | |||
<div class="sv-tip-pop sv-hidden" role="dialog" aria-label="Info Summary"> | |||
<div class="sv-tip-pop-head"> | |||
<div class="sv-tip-pop-title">Info Summary</div> | |||
</div> | |||
<div class="sv-tip-pop-body"> | |||
This tests that <summary> does NOT toggle native details open/closed. | |||
</div> | |||
</div> | |||
</details> | |||
</div> | </div> | ||
| Line 39: | Line 55: | ||
</div> | </div> | ||
</div> | </div> | ||
<div style="margin-top:10px; font-size:13px; opacity:0.85;">Close: click header, click outside, or press Escape.</div> | |||
</div> | </div> | ||
<div> | <div> | ||
<div class="sv-pill" style="margin-bottom:10px;">Small (Hover) — Definition (no link)</div> | <div class="sv-pill" style="margin-bottom:10px;">Small (Hover) — Definition (no link)</div> | ||
<span class="sv-def" data-sv-def-tip="This is a hover-only definition tooltip.\nIt uses the Popup B shell and wraps early.">Ground Cast (no link)</span> | <span class="sv-def" tabindex="0" data-sv-def-tip="This is a hover-only definition tooltip.\nIt uses the Popup B shell and wraps early.">Ground Cast (no link)</span> | ||
<div style="margin-top:10px; font-size:13px; opacity:0.85;">Mobile: should tap-open and tap-outside-close.</div> | |||
</div> | </div> | ||
<div> | <div> | ||
<div class="sv-pill" style="margin-bottom:10px;">Large (Click) — Definition (with link)</div> | <div class="sv-pill" style="margin-bottom:10px;">Large (Click) — Definition (with link)</div> | ||
<span class="sv-def" data-sv-def-tip="This definition is click-open so the user can interact inside the popup." 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." data-sv-def-link="Casting">Casting (with link)</span> | ||
<div style="margin-top:10px; font-size:13px; opacity:0.85;">Popups extension link-preview sanity check: [[Casting]]</div> | <div style="margin-top:10px; font-size:13px; opacity:0.85;">Popups extension link-preview sanity check: [[Casting]]</div> | ||
</div> | </div> | ||
Revision as of 22:18, 26 February 2026
Universal Popups v2 — Testbed (Refined)
Small (Hover) — Info (span trigger)
Info
Hand-crafted reference page for the Skill pipeline (wikiupdate will emulate this structure).
Keyboard: focus the “i” and press Enter/Space.
Small (Hover) — Info (details/summary trigger)
<details class="sv-tip"> <summary class="sv-tip-btn sv-focus-ring" role="button" tabindex="0" data-sv-toggle="1" aria-label="Info Summary" aria-expanded="false"></summary>
Info Summary
This tests that <summary> does NOT toggle native details open/closed.
</details>
Large (Click) — Users
Users(6)
Users
- Classes
- Paladin
- Cleric
- Templar
- Summons
- Turtle Champion
- Celestial Squire
- Holy Sentinel
Close: click header, click outside, or press Escape.
Small (Hover) — Definition (no link)
Ground Cast (no link)
Mobile: should tap-open and tap-outside-close.
Large (Click) — Definition (with link)
Casting (with link)
Popups extension link-preview sanity check: Casting