refactor(home): replace gh-form pill with DaisyUI input + joined button
Wrap inputs in <label class="input"> (DaisyUI v5 compound input pattern). Form uses flex fill so inputs auto-size and the button stays on the right on a single line regardless of container width.
This commit is contained in:
Julien Calixte
@@ -139,25 +139,25 @@ const showReviewCard = computed(
|
|||||||
<div class="li-quick">
|
<div class="li-quick">
|
||||||
<div class="li-quick-label mono">jump to a repo</div>
|
<div class="li-quick-label mono">jump to a repo</div>
|
||||||
<form class="gh-form compact" @submit.prevent="submit">
|
<form class="gh-form compact" @submit.prevent="submit">
|
||||||
<span class="gh-prefix mono">github/</span>
|
<label class="input gh-input-group">
|
||||||
<input
|
<span class="gh-prefix mono">github/</span>
|
||||||
v-model="userInput"
|
<input
|
||||||
placeholder="user"
|
v-model="userInput"
|
||||||
class="gh-input"
|
placeholder="user"
|
||||||
spellcheck="false"
|
class="gh-input"
|
||||||
autocapitalize="off"
|
spellcheck="false"
|
||||||
/>
|
autocapitalize="off"
|
||||||
<span class="gh-slash">/</span>
|
/>
|
||||||
<input
|
<span class="gh-slash">/</span>
|
||||||
v-model="repoInput"
|
<input
|
||||||
placeholder="repo"
|
v-model="repoInput"
|
||||||
class="gh-input"
|
placeholder="repo"
|
||||||
spellcheck="false"
|
class="gh-input"
|
||||||
autocapitalize="off"
|
spellcheck="false"
|
||||||
/>
|
autocapitalize="off"
|
||||||
<button type="submit" class="hw-btn hw-btn-pink gh-go">
|
/>
|
||||||
Open →
|
</label>
|
||||||
</button>
|
<button type="submit" class="hw-btn hw-btn-pink gh-go">→</button>
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -211,22 +211,24 @@ const showReviewCard = computed(
|
|||||||
or open one directly
|
or open one directly
|
||||||
</div>
|
</div>
|
||||||
<form class="gh-form" @submit.prevent="submit">
|
<form class="gh-form" @submit.prevent="submit">
|
||||||
<span class="gh-prefix mono">github/</span>
|
<label class="input gh-input-group">
|
||||||
<input
|
<span class="gh-prefix mono">github/</span>
|
||||||
v-model="userInput"
|
<input
|
||||||
placeholder="user"
|
v-model="userInput"
|
||||||
class="gh-input"
|
placeholder="user"
|
||||||
spellcheck="false"
|
class="gh-input"
|
||||||
autocapitalize="off"
|
spellcheck="false"
|
||||||
/>
|
autocapitalize="off"
|
||||||
<span class="gh-slash">/</span>
|
/>
|
||||||
<input
|
<span class="gh-slash">/</span>
|
||||||
v-model="repoInput"
|
<input
|
||||||
placeholder="repo"
|
v-model="repoInput"
|
||||||
class="gh-input"
|
placeholder="repo"
|
||||||
spellcheck="false"
|
class="gh-input"
|
||||||
autocapitalize="off"
|
spellcheck="false"
|
||||||
/>
|
autocapitalize="off"
|
||||||
|
/>
|
||||||
|
</label>
|
||||||
<button type="submit" class="hw-btn hw-btn-pink gh-go">
|
<button type="submit" class="hw-btn hw-btn-pink gh-go">
|
||||||
Open →
|
Open →
|
||||||
</button>
|
</button>
|
||||||
@@ -309,7 +311,7 @@ const showReviewCard = computed(
|
|||||||
</p>
|
</p>
|
||||||
<div class="hero-ed-paths">
|
<div class="hero-ed-paths">
|
||||||
<!-- CTA 01: GitHub repo -->
|
<!-- CTA 01: GitHub repo -->
|
||||||
<div class="hero-ed-path">
|
<div class="hero-ed-path w-2xl">
|
||||||
<div class="hep-head">
|
<div class="hep-head">
|
||||||
<span class="hep-n mono">01</span>
|
<span class="hep-n mono">01</span>
|
||||||
<div>
|
<div>
|
||||||
@@ -321,22 +323,24 @@ const showReviewCard = computed(
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<form class="gh-form" @submit.prevent="submit">
|
<form class="gh-form" @submit.prevent="submit">
|
||||||
<span class="gh-prefix mono">github/</span>
|
<label class="input gh-input-group">
|
||||||
<input
|
<span class="gh-prefix mono">github/</span>
|
||||||
v-model="userInput"
|
<input
|
||||||
placeholder="user"
|
v-model="userInput"
|
||||||
class="gh-input"
|
placeholder="user"
|
||||||
spellcheck="false"
|
class="gh-input"
|
||||||
autocapitalize="off"
|
spellcheck="false"
|
||||||
/>
|
autocapitalize="off"
|
||||||
<span class="gh-slash">/</span>
|
/>
|
||||||
<input
|
<span class="gh-slash">/</span>
|
||||||
v-model="repoInput"
|
<input
|
||||||
placeholder="repo"
|
v-model="repoInput"
|
||||||
class="gh-input"
|
placeholder="repo"
|
||||||
spellcheck="false"
|
class="gh-input"
|
||||||
autocapitalize="off"
|
spellcheck="false"
|
||||||
/>
|
autocapitalize="off"
|
||||||
|
/>
|
||||||
|
</label>
|
||||||
<button type="submit" class="hw-btn hw-btn-pink gh-go">→</button>
|
<button type="submit" class="hw-btn hw-btn-pink gh-go">→</button>
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
@@ -347,6 +351,7 @@ const showReviewCard = computed(
|
|||||||
<div>
|
<div>
|
||||||
<div class="hep-t">From the open network</div>
|
<div class="hep-t">From the open network</div>
|
||||||
<div class="hep-d">
|
<div class="hep-d">
|
||||||
|
Your `.pub.md` files become public.
|
||||||
Read public notes published via ATProto — no account
|
Read public notes published via ATProto — no account
|
||||||
needed.
|
needed.
|
||||||
</div>
|
</div>
|
||||||
@@ -855,26 +860,13 @@ main {
|
|||||||
|
|
||||||
/* ── GitHub form ────────────────────────────────────────────── */
|
/* ── GitHub form ────────────────────────────────────────────── */
|
||||||
.gh-form {
|
.gh-form {
|
||||||
display: inline-flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: stretch;
|
||||||
gap: 0.3rem;
|
|
||||||
padding: 0.35rem 0.5rem 0.35rem 0.9rem;
|
|
||||||
background: var(--hw-surface);
|
|
||||||
border: 1px solid var(--hw-rule);
|
|
||||||
border-radius: 999px;
|
|
||||||
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.02),
|
|
||||||
0 6px 18px -10px rgba(201, 74, 125, 0.15);
|
|
||||||
transition: border-color 0.15s, box-shadow 0.15s;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
|
|
||||||
&:focus-within {
|
|
||||||
border-color: var(--hw-pink);
|
|
||||||
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.02),
|
|
||||||
0 10px 28px -10px rgba(201, 74, 125, 0.25);
|
|
||||||
}
|
|
||||||
|
|
||||||
&.compact {
|
&.compact {
|
||||||
padding: 0.2rem 0.4rem 0.2rem 0.75rem;
|
.gh-input-group {
|
||||||
|
padding: 0.15rem 0.35rem 0.15rem 0.75rem;
|
||||||
|
}
|
||||||
|
|
||||||
.gh-go {
|
.gh-go {
|
||||||
padding: 0.3rem 0.7rem;
|
padding: 0.3rem 0.7rem;
|
||||||
@@ -883,6 +875,32 @@ main {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.gh-input-group {
|
||||||
|
flex: 1;
|
||||||
|
min-width: 0;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.25rem;
|
||||||
|
padding: 0.35rem 0.45rem 0.35rem 0.9rem;
|
||||||
|
background: var(--hw-surface);
|
||||||
|
border: 1px solid var(--hw-rule);
|
||||||
|
border-right: none;
|
||||||
|
border-radius: 999px 0 0 999px;
|
||||||
|
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.02),
|
||||||
|
0 6px 18px -10px rgba(201, 74, 125, 0.15);
|
||||||
|
cursor: text;
|
||||||
|
transition: border-color 0.15s, box-shadow 0.15s;
|
||||||
|
height: auto;
|
||||||
|
outline: none;
|
||||||
|
|
||||||
|
&:focus-within {
|
||||||
|
border-color: var(--hw-pink);
|
||||||
|
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.02),
|
||||||
|
0 10px 28px -10px rgba(201, 74, 125, 0.25);
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.gh-prefix {
|
.gh-prefix {
|
||||||
color: var(--hw-ink-faint);
|
color: var(--hw-ink-faint);
|
||||||
font-size: 0.85rem;
|
font-size: 0.85rem;
|
||||||
@@ -895,14 +913,15 @@ main {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.gh-input {
|
.gh-input {
|
||||||
|
flex: 1;
|
||||||
|
min-width: 0;
|
||||||
border: 0;
|
border: 0;
|
||||||
outline: 0;
|
outline: 0;
|
||||||
background: transparent;
|
background: transparent;
|
||||||
font-family: var(--hw-mono);
|
font-family: var(--hw-mono);
|
||||||
font-size: 0.95rem;
|
font-size: 0.95rem;
|
||||||
color: var(--hw-ink);
|
color: var(--hw-ink);
|
||||||
width: 8ch;
|
padding: 0;
|
||||||
padding: 0.35rem 0.25rem;
|
|
||||||
|
|
||||||
&::placeholder {
|
&::placeholder {
|
||||||
color: var(--hw-ink-faint);
|
color: var(--hw-ink-faint);
|
||||||
@@ -911,10 +930,13 @@ main {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.gh-go {
|
.gh-go {
|
||||||
margin-left: 0.25rem;
|
flex-shrink: 0;
|
||||||
padding: 0.4rem 0.9rem;
|
padding: 0.4rem 0.9rem;
|
||||||
font-size: 0.9rem;
|
font-size: 0.9rem;
|
||||||
border-radius: 999px;
|
border-radius: 0 999px 999px 0;
|
||||||
|
align-self: stretch;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* ── Hero (logged out) ──────────────────────────────────────── */
|
/* ── Hero (logged out) ──────────────────────────────────────── */
|
||||||
@@ -1863,10 +1885,7 @@ img {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.gh-form {
|
|
||||||
border-radius: 8px;
|
|
||||||
flex-wrap: nowrap;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
Reference in New Issue
Block a user