mirror of
https://github.com/PR0M3TH3AN/bitvid.git
synced 2026-10-29 08:52:25 +00:00
Merge pull request #417 from PR0M3TH3AN/codex/add-profile-modal-examples-to-kitchen-sink
Add profile and edit modal shells to kitchen sink
This commit is contained in:
1 file changed
+268
@@ -268,6 +268,274 @@
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="space-y-md">
|
||||
<div class="space-y-xs">
|
||||
<h2 class="text-xl font-semibold text-text-strong">
|
||||
Profile & Edit Modal Shells
|
||||
</h2>
|
||||
<p class="text-sm text-muted">
|
||||
Both shells share the `.bv-modal` overlay and tokenized
|
||||
primitives (`.card`, `.btn`, `.btn-ghost`, `.badge`, `.grid-stack`,
|
||||
`.focus-ring`). Compatibility hooks like `modal-content` remain on
|
||||
the panels so legacy CSS selectors keep working alongside the new
|
||||
primitives.
|
||||
</p>
|
||||
</div>
|
||||
<div class="grid gap-lg lg:grid-cols-2">
|
||||
<div class="space-y-sm">
|
||||
<h3 class="text-lg font-semibold">Profile Modal</h3>
|
||||
<p class="text-sm text-muted">
|
||||
Static scaffold that mirrors `components/profile-modal.html`.
|
||||
Tab buttons keep their `aria-controls`/`data-state` attributes
|
||||
so designers can map the layout to controller behaviour.
|
||||
</p>
|
||||
<div
|
||||
class="relative isolate overflow-hidden rounded-xl bg-surface-alt p-lg text-text shadow-inner"
|
||||
>
|
||||
<div class="absolute inset-0" style="position: relative">
|
||||
<div
|
||||
id="profileModal"
|
||||
class="bv-modal items-start"
|
||||
style="position: absolute; inset: 0"
|
||||
>
|
||||
<div class="bv-modal-backdrop"></div>
|
||||
<div
|
||||
class="bv-modal__panel modal-content flex max-h-[80vh] flex-col gap-lg"
|
||||
role="dialog"
|
||||
aria-labelledby="profileModalTitle"
|
||||
>
|
||||
<header class="card flex items-center justify-between gap-sm p-md">
|
||||
<div>
|
||||
<p class="text-xs uppercase tracking-wide text-muted">
|
||||
Modal header
|
||||
</p>
|
||||
<h4 id="profileModalTitle" class="text-lg font-semibold">
|
||||
Active profile
|
||||
</h4>
|
||||
</div>
|
||||
<button
|
||||
class="focus-ring inline-flex h-10 w-10 items-center justify-center rounded-full"
|
||||
type="button"
|
||||
aria-label="Close profile modal"
|
||||
>
|
||||
×
|
||||
</button>
|
||||
</header>
|
||||
<div class="flex flex-1 flex-col gap-lg lg:flex-row">
|
||||
<nav
|
||||
class="grid gap-xs sm:grid-cols-3 lg:w-56 lg:flex lg:flex-col"
|
||||
aria-label="Profile sections"
|
||||
>
|
||||
<button
|
||||
class="btn-ghost focus-ring justify-start"
|
||||
type="button"
|
||||
data-state="active"
|
||||
aria-controls="profilePaneAccount"
|
||||
>
|
||||
Account
|
||||
</button>
|
||||
<button
|
||||
class="btn-ghost focus-ring justify-start"
|
||||
type="button"
|
||||
aria-controls="profilePaneRelays"
|
||||
>
|
||||
Relays
|
||||
</button>
|
||||
<button
|
||||
class="btn-ghost focus-ring justify-start"
|
||||
type="button"
|
||||
aria-controls="profilePaneBlocked"
|
||||
>
|
||||
Blocked users
|
||||
</button>
|
||||
</nav>
|
||||
<div class="grid-stack flex-1 gap-md" data-variant="cards">
|
||||
<article
|
||||
id="profilePaneAccount"
|
||||
class="card space-y-sm p-md"
|
||||
data-profile-pane
|
||||
>
|
||||
<div class="flex items-start justify-between gap-sm">
|
||||
<div>
|
||||
<p class="text-xs uppercase tracking-wide text-muted">
|
||||
Current identity
|
||||
</p>
|
||||
<h5 class="text-base font-semibold">npub1example...</h5>
|
||||
</div>
|
||||
<span class="badge" data-variant="info">Active</span>
|
||||
</div>
|
||||
<p class="text-sm text-muted">
|
||||
`.grid-stack` arranges saved identities with
|
||||
responsive gutters. Cards inherit `.focus-ring`
|
||||
styles when they become actionable.
|
||||
</p>
|
||||
<footer class="flex flex-wrap gap-sm">
|
||||
<button class="btn">Switch</button>
|
||||
<button class="btn-ghost">Manage keys</button>
|
||||
</footer>
|
||||
</article>
|
||||
<article class="card space-y-sm p-md" data-profile-pane>
|
||||
<h5 class="text-base font-semibold">Relay presets</h5>
|
||||
<p class="text-sm text-muted">
|
||||
Use badges to indicate status (e.g.
|
||||
<span class="badge" data-variant="neutral">New</span>)
|
||||
while keeping content spacing consistent with the
|
||||
production modal.
|
||||
</p>
|
||||
<ul class="space-y-xs text-sm text-muted">
|
||||
<li data-relay-row>relay.example.com</li>
|
||||
<li data-relay-row>wss://nostr.tools</li>
|
||||
<li data-relay-row>wss://bitvid.relays</li>
|
||||
</ul>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
<footer class="card flex flex-wrap items-center justify-between gap-sm p-md">
|
||||
<p class="text-xs text-muted">
|
||||
Footer keeps shared spacing tokens while exposing
|
||||
legacy hooks like `data-profile-action` for scripts if
|
||||
needed.
|
||||
</p>
|
||||
<div class="flex gap-sm">
|
||||
<button class="btn-ghost" data-profile-action="cancel">
|
||||
Cancel
|
||||
</button>
|
||||
<button class="btn" data-profile-action="save">
|
||||
Save changes
|
||||
</button>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="space-y-sm">
|
||||
<h3 class="text-lg font-semibold">Edit Video Modal</h3>
|
||||
<p class="text-sm text-muted">
|
||||
Layout reflects `components/edit-video-modal.html`. The
|
||||
`.bv-modal__panel.modal-content` pairing keeps backwards
|
||||
selectors alive while new primitives manage spacing and
|
||||
typography.
|
||||
</p>
|
||||
<div
|
||||
class="relative isolate overflow-hidden rounded-xl bg-surface-alt p-lg text-text shadow-inner"
|
||||
>
|
||||
<div class="absolute inset-0" style="position: relative">
|
||||
<div
|
||||
id="editVideoModal"
|
||||
class="bv-modal items-start"
|
||||
style="position: absolute; inset: 0"
|
||||
role="dialog"
|
||||
aria-labelledby="editVideoModalTitle"
|
||||
>
|
||||
<div class="bv-modal-backdrop"></div>
|
||||
<div
|
||||
class="bv-modal__panel modal-content flex max-h-[80vh] flex-col gap-lg"
|
||||
data-modal="edit"
|
||||
>
|
||||
<header class="card flex items-center justify-between gap-sm p-md">
|
||||
<div class="space-y-xs">
|
||||
<p class="text-xs uppercase tracking-wide text-muted">
|
||||
Edit metadata
|
||||
</p>
|
||||
<h4 id="editVideoModalTitle" class="text-lg font-semibold">
|
||||
Update video note
|
||||
</h4>
|
||||
</div>
|
||||
<button
|
||||
class="focus-ring inline-flex h-10 w-10 items-center justify-center rounded-full"
|
||||
type="button"
|
||||
aria-label="Close edit modal"
|
||||
>
|
||||
×
|
||||
</button>
|
||||
</header>
|
||||
<div class="space-y-lg px-md">
|
||||
<p class="text-sm text-muted">
|
||||
Form rows reuse `.card` groupings and `.btn-ghost`
|
||||
action chips. Locked fields can keep
|
||||
`data-edit-target` attributes to stay compatible with
|
||||
controller toggles.
|
||||
</p>
|
||||
<div class="card space-y-md p-md">
|
||||
<div class="space-y-xs">
|
||||
<label class="text-sm font-medium text-text" for="editTitleDemo">
|
||||
Title
|
||||
</label>
|
||||
<div class="flex flex-wrap gap-sm sm:flex-nowrap">
|
||||
<input
|
||||
id="editTitleDemo"
|
||||
class="input flex-1"
|
||||
type="text"
|
||||
placeholder="Bitvid Weekly Update"
|
||||
/>
|
||||
<button
|
||||
class="btn-ghost focus-ring"
|
||||
type="button"
|
||||
data-edit-target="title"
|
||||
>
|
||||
Edit field
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid gap-md md:grid-cols-2" data-nip71-grid>
|
||||
<div class="space-y-xs">
|
||||
<label class="text-sm font-medium text-text" for="editKindDemo">
|
||||
NIP-71 kind
|
||||
</label>
|
||||
<div class="card space-y-xs p-sm" data-nip71-fieldset>
|
||||
<label class="flex items-center gap-xs text-sm">
|
||||
<input class="focus-ring" type="radio" name="editKindDemo" checked />
|
||||
Kind 21 — Full video
|
||||
</label>
|
||||
<label class="flex items-center gap-xs text-sm">
|
||||
<input class="focus-ring" type="radio" name="editKindDemo" />
|
||||
Kind 22 — Short
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="space-y-xs">
|
||||
<label class="text-sm font-medium text-text" for="editPublishDemo">
|
||||
Published at
|
||||
</label>
|
||||
<input
|
||||
id="editPublishDemo"
|
||||
class="input"
|
||||
type="datetime-local"
|
||||
value="2024-05-01T15:00"
|
||||
/>
|
||||
<p class="text-xs text-muted">
|
||||
Shared input tokens handle spacing; legacy
|
||||
scripts can read the timestamp via
|
||||
`data-nip71-input` if needed.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<footer class="card flex flex-wrap items-center justify-between gap-sm p-md">
|
||||
<p class="text-xs text-muted">
|
||||
Footer actions mix `.btn` variants while referencing
|
||||
`data-submit-state` for controller hand-offs.
|
||||
</p>
|
||||
<div class="flex gap-sm">
|
||||
<button class="btn-ghost" data-submit-state="idle">
|
||||
Cancel
|
||||
</button>
|
||||
<button class="btn" data-submit-state="pending">
|
||||
Save draft
|
||||
</button>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="space-y-md">
|
||||
<div class="space-y-xs">
|
||||
<h2 class="text-xl font-semibold text-text-strong">Grid Stack</h2>
|
||||
|
||||
Reference in new issue
Block a user