remanso-space/remanso
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(home): replace gh-form pill with DaisyUI input + joined button

Browse Source 
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
2026-04-20 18:15:12 +02:00
parent f809a1f5f8
commit ceb800b6ac
1 changed files with 97 additions and 78 deletions
Download Patch File Download Diff File Expand all files Collapse all files

79
src/components/WelcomeWorld.vue
View File

@@ -139,6 +139,7 @@ const showReviewCard = computed(
<div class="li-quick">
<div class="li-quick-label mono">jump to a repo</div>
<form class="gh-form compact" @submit.prevent="submit">
<label class="input gh-input-group">
<span class="gh-prefix mono">github/</span>
<input
v-model="userInput"
@@ -155,9 +156,8 @@ const showReviewCard = computed(
spellcheck="false"
autocapitalize="off"
/>
<button type="submit" class="hw-btn hw-btn-pink gh-go">
Open →
</button>
</label>
<button type="submit" class="hw-btn hw-btn-pink gh-go">→</button>
</form>
</div>
</div>
@@ -211,6 +211,7 @@ const showReviewCard = computed(
or open one directly
</div>
<form class="gh-form" @submit.prevent="submit">
<label class="input gh-input-group">
<span class="gh-prefix mono">github/</span>
<input
v-model="userInput"
@@ -227,6 +228,7 @@ const showReviewCard = computed(
spellcheck="false"
autocapitalize="off"
/>
</label>
<button type="submit" class="hw-btn hw-btn-pink gh-go">
Open →
</button>
@@ -309,7 +311,7 @@ const showReviewCard = computed(
</p>
<div class="hero-ed-paths">
<!-- CTA 01: GitHub repo -->
<div class="hero-ed-path">
<div class="hero-ed-path w-2xl">
<div class="hep-head">
<span class="hep-n mono">01</span>
<div>
@@ -321,6 +323,7 @@ const showReviewCard = computed(
</div>
</div>
<form class="gh-form" @submit.prevent="submit">
<label class="input gh-input-group">
<span class="gh-prefix mono">github/</span>
<input
v-model="userInput"
@@ -337,6 +340,7 @@ const showReviewCard = computed(
spellcheck="false"
autocapitalize="off"
/>
</label>
<button type="submit" class="hw-btn hw-btn-pink gh-go">→</button>
</form>
</div>
@@ -347,6 +351,7 @@ const showReviewCard = computed(
<div>
<div class="hep-t">From the open network</div>
<div class="hep-d">
Your `.pub.md` files become public.
Read public notes published via ATProto — no account
needed.
</div>
@@ -855,26 +860,13 @@ main {
/* ── GitHub form ────────────────────────────────────────────── */
.gh-form {
display: inline-flex;
align-items: center;
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);
}
display: flex;
align-items: stretch;
&.compact {
padding: 0.2rem 0.4rem 0.2rem 0.75rem;
.gh-input-group {
padding: 0.15rem 0.35rem 0.15rem 0.75rem;
}
.gh-go {
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 {
color: var(--hw-ink-faint);
font-size: 0.85rem;
@@ -895,14 +913,15 @@ main {
}
.gh-input {
flex: 1;
min-width: 0;
border: 0;
outline: 0;
background: transparent;
font-family: var(--hw-mono);
font-size: 0.95rem;
color: var(--hw-ink);
width: 8ch;
padding: 0.35rem 0.25rem;
padding: 0;
&::placeholder {
color: var(--hw-ink-faint);
@@ -911,10 +930,13 @@ main {
}
.gh-go {
margin-left: 0.25rem;
flex-shrink: 0;
padding: 0.4rem 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) ──────────────────────────────────────── */
@@ -1863,10 +1885,7 @@ img {
}
}
.gh-form {
border-radius: 8px;
flex-wrap: nowrap;
}
}
</style>