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: Manual revert Mobile edit Mobile web edit |
||
| Line 1: | Line 1: | ||
== Universal Popups v2 — Testbed | == Universal Popups v2 — 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) --> | |||
<div> | <div> | ||
<div class="sv-pill" style="margin-bottom:10px;">Small (Hover) — | <div class="sv-pill" style="margin-bottom:10px;">Small (Hover) — Notes</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 11: | 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 class="sv-tip-pop-hint">Click to close</div> | |||
</div> | </div> | ||
<div class="sv-tip-pop-body"> | <div class="sv-tip-pop-body"> | ||
Hand-crafted reference page for the Skill pipeline (wikiupdate will emulate this structure). | * Hand-crafted reference page for the Skill pipeline (wikiupdate will emulate this structure). | ||
</div> | </div> | ||
</div> | </div> | ||
</div> | </div> | ||
</div> | </div> | ||
<!-- USERS / REQUIREMENTS (large click) --> | |||
<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 42: | Line 29: | ||
<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 class="sv-disclose-pop-hint">Click to close</div> | |||
</div> | </div> | ||
<ul class="sv-disclose-list"> | <ul class="sv-disclose-list"> | ||
| Line 55: | Line 43: | ||
</div> | </div> | ||
</div> | </div> | ||
</div> | </div> | ||
<!-- DEFINITIONS (small hover, no link) --> | |||
<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 | <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> | ||
</div> | </div> | ||
<!-- DEFINITIONS (large click, with link) --> | |||
<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 | <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> | ||
</div> | </div> | ||
</div> | </div> | ||
</div> | </div> | ||