User:Eviand/TemplateTesting: Difference between revisions
From SpiritVale Wiki
More actions
No edit summary Tags: Manual revert Mobile edit Mobile web edit |
No edit summary Tags: Mobile edit Mobile web edit |
||
| Line 1: | Line 1: | ||
== Universal Popups | == Universal Popups v3 — Testbed == | ||
<div class="sv-card" style="padding:16px; margin:16px 0;"> | <div class="sv-card" style="padding:16px; margin:16px 0;"> | ||
<div style="display:flex; gap:18px; flex-wrap:wrap; align-items:flex-start;"> | <div style="display:flex; gap:18px; flex-wrap:wrap; align-items:flex-start;"> | ||
<!-- NOTES / INFO (small hover) --> | <!-- NOTES / INFO (small hover on desktop; tap-open on mobile) --> | ||
<div> | <div> | ||
<div class="sv-pill" style="margin-bottom:10px;">Small (Hover) — Notes</div> | <div class="sv-pill" style="margin-bottom:10px;">Small (Hover) — Notes</div> | ||
| Line 12: | Line 12: | ||
<div class="sv-tip-pop-head"> | <div class="sv-tip-pop-head"> | ||
<div class="sv-tip-pop-title">Info</div> | <div class="sv-tip-pop-title">Info</div> | ||
</div> | </div> | ||
<div class="sv-tip-pop-body"> | <div class="sv-tip-pop-body"> | ||
| Line 21: | Line 20: | ||
</div> | </div> | ||
<!-- USERS / REQUIREMENTS (large click) --> | <!-- NOTES / INFO (details/summary trigger test) --> | ||
<div> | |||
<div class="sv-pill" style="margin-bottom:10px;">Small (Hover) — Notes (summary test)</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 verifies <summary> does NOT toggle native details open/closed. | |||
</div> | |||
</div> | |||
</details> | |||
</div> | |||
<!-- USERS / REQUIREMENTS (large click/tap) --> | |||
<div> | <div> | ||
<div class="sv-pill" style="margin-bottom:10px;">Large (Click) — Users</div> | <div class="sv-pill" style="margin-bottom:10px;">Large (Click) — Users</div> | ||
| Line 29: | Line 44: | ||
<div class="sv-disclose-pop-head"> | <div class="sv-disclose-pop-head"> | ||
<div class="sv-disclose-pop-title">Users</div> | <div class="sv-disclose-pop-title">Users</div> | ||
</div> | </div> | ||
<ul class="sv-disclose-list"> | <ul class="sv-disclose-list"> | ||
| Line 45: | Line 59: | ||
</div> | </div> | ||
<!-- DEFINITIONS (small hover | <!-- DEFINITIONS (small hover on desktop; tap-open on mobile) --> | ||
<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.">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.\nSecond line test.">Ground Cast (no link)</span> | ||
</div> | </div> | ||
<!-- DEFINITIONS (large click, with link) --> | <!-- DEFINITIONS (large click/tap, with link + action button) --> | ||
<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> | </div> | ||
</div> | </div> | ||
</div> | </div> | ||