feat(find): surface time budget inline, always visible (closes #131)
The time budget selector (hands-on and total time chips) was previously gated behind the time_first_layout Settings preference. Removed the v-if guard so both rows are always visible in the Find tab without requiring a Settings change. Added "No limit" clear buttons that appear next to the chip row when a time limit is active, so users can reset a time filter in one tap without needing to find the active chip and re-tap it. The time_first_layout setting in Settings remains for users who want control over the layout.
This commit is contained in:
parent
973c76a4c8
commit
3f4b756fc6
1 changed files with 23 additions and 3 deletions
|
|
@ -147,9 +147,8 @@
|
||||||
Tap "Find recipes" again to apply.
|
Tap "Find recipes" again to apply.
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<!-- Time Budget selector (kiwi#52) -->
|
<!-- Time Budget selector — always visible; closes #131 -->
|
||||||
<!-- Shows when time_first_layout != 'normal' (auto or time_first) -->
|
<div class="form-group time-bucket-group">
|
||||||
<div v-if="settingsStore.timeFirstLayout !== 'normal'" class="form-group time-bucket-group">
|
|
||||||
<!-- Hands-on / active time row -->
|
<!-- Hands-on / active time row -->
|
||||||
<div class="time-row">
|
<div class="time-row">
|
||||||
<span class="time-row-label">Hands-on time</span>
|
<span class="time-row-label">Hands-on time</span>
|
||||||
|
|
@ -163,6 +162,12 @@
|
||||||
:aria-pressed="recipesStore.maxActiveMin === bucket.value"
|
:aria-pressed="recipesStore.maxActiveMin === bucket.value"
|
||||||
:title="'Max ' + bucket.label + ' of active cooking'"
|
:title="'Max ' + bucket.label + ' of active cooking'"
|
||||||
>{{ bucket.label }}</button>
|
>{{ bucket.label }}</button>
|
||||||
|
<button
|
||||||
|
v-if="recipesStore.maxActiveMin !== null"
|
||||||
|
class="btn btn-sm btn-secondary time-bucket-clear"
|
||||||
|
@click="recipesStore.maxActiveMin = null"
|
||||||
|
aria-label="Clear hands-on time limit"
|
||||||
|
>No limit</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
@ -179,6 +184,12 @@
|
||||||
:aria-pressed="recipesStore.maxTotalMin === bucket.value"
|
:aria-pressed="recipesStore.maxTotalMin === bucket.value"
|
||||||
:title="'Max ' + bucket.label + ' start to finish'"
|
:title="'Max ' + bucket.label + ' start to finish'"
|
||||||
>{{ bucket.label }}</button>
|
>{{ bucket.label }}</button>
|
||||||
|
<button
|
||||||
|
v-if="recipesStore.maxTotalMin !== null"
|
||||||
|
class="btn btn-sm btn-secondary time-bucket-clear"
|
||||||
|
@click="recipesStore.maxTotalMin = null"
|
||||||
|
aria-label="Clear total time limit"
|
||||||
|
>No limit</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
@ -1638,6 +1649,15 @@ details[open] .collapsible-summary::before {
|
||||||
border-color: var(--color-primary, #1a6b4a);
|
border-color: var(--color-primary, #1a6b4a);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.time-bucket-clear {
|
||||||
|
font-style: italic;
|
||||||
|
opacity: 0.7;
|
||||||
|
}
|
||||||
|
|
||||||
|
.time-bucket-clear:hover {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
@media (max-width: 480px) {
|
@media (max-width: 480px) {
|
||||||
.time-row {
|
.time-row {
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue