style: question-form labels for trip detail fields

This commit is contained in:
haerikimmm
2026-06-16 19:26:05 +09:00
parent c7cf053105
commit 76d7e815c3

View File

@@ -183,12 +183,12 @@
<div class="row"> <div class="row">
<div class="field"> <div class="field">
<label class="label" for="nc-country">Country <span class="req">*</span></label> <label class="label" for="nc-country">Where did you go? <span class="req">*</span></label>
<SearchInput id="nc-country" bind:value={country} options={countryNames} /> <SearchInput id="nc-country" bind:value={country} options={countryNames} />
{#if errors.country}<span class="ferr">{errors.country}</span>{/if} {#if errors.country}<span class="ferr">{errors.country}</span>{/if}
</div> </div>
<div class="field"> <div class="field">
<label class="label" for="nc-city">Cities <span class="req">*</span></label> <label class="label" for="nc-city">Which cities did you visit? <span class="req">*</span></label>
<SearchInput id="nc-city" bind:value={cityInput} options={cityOptions} onselect={addCity} onblurcommit={addCity} /> <SearchInput id="nc-city" bind:value={cityInput} options={cityOptions} onselect={addCity} onblurcommit={addCity} />
{#if errors.cities}<span class="ferr">{errors.cities}</span>{/if} {#if errors.cities}<span class="ferr">{errors.cities}</span>{/if}
{#if cities.length > 0} {#if cities.length > 0}
@@ -203,19 +203,19 @@
<div class="row"> <div class="row">
<div class="field"> <div class="field">
<label class="label" for="nc-date">Date <span class="req">*</span></label> <label class="label" for="nc-date">When did you travel? <span class="req">*</span></label>
<input id="nc-date" class="input" type="date" bind:value={date} /> <input id="nc-date" class="input" type="date" bind:value={date} />
{#if errors.date}<span class="ferr">{errors.date}</span>{/if} {#if errors.date}<span class="ferr">{errors.date}</span>{/if}
</div> </div>
<div class="field"> <div class="field">
<label class="label" for="nc-days">Days <span class="req">*</span></label> <label class="label" for="nc-days">How long was the trip? <span class="req">*</span></label>
<input id="nc-days" class="input" type="number" min="1" bind:value={days} /> <input id="nc-days" class="input" type="number" min="1" bind:value={days} />
{#if errors.days}<span class="ferr">{errors.days}</span>{/if} {#if errors.days}<span class="ferr">{errors.days}</span>{/if}
</div> </div>
</div> </div>
<div class="field"> <div class="field">
<label class="label">Trip type <span class="req">*</span></label> <label class="label">Who did you travel with? <span class="req">*</span></label>
<div class="toggle-row"> <div class="toggle-row">
{#each ['solo','friends','family'] as t} {#each ['solo','friends','family'] as t}
<label class="toggle-opt" class:active={tripType === t}> <label class="toggle-opt" class:active={tripType === t}>