Slider easy day gui (#3605)

* Slider easy day gui

* Removed: Borders

* Added: Bottom borders
This commit is contained in:
Luc Mcgrady 2024-12-06 13:34:56 +00:00 committed by GitHub
parent d897b4588e
commit 6524a24a89
No known key found for this signature in database
GPG key ID: B5690EEEBB952194

View file

@ -36,6 +36,10 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
];
</script>
<datalist id="easy_day_steplist">
<option>0.5</option>
</datalist>
<TitledContainer title={tr.deckConfigEasyDaysTitle()}>
<DynamicallySlottable slotHost={Item} {api}>
<Item>
@ -44,40 +48,27 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
<thead>
<tr>
<th></th>
<th>{tr.deckConfigEasyDaysNormal()}</th>
<th>{tr.deckConfigEasyDaysReduced()}</th>
<th>{tr.deckConfigEasyDaysMinimum()}</th>
<th colspan="3">
<div class="header">
<span>{tr.deckConfigEasyDaysMinimum()}</span>
<span>{tr.deckConfigEasyDaysReduced()}</span>
<span>{tr.deckConfigEasyDaysNormal()}</span>
</div>
</th>
</tr>
</thead>
<tbody>
{#each easyDays as day, index}
<tr>
<td>{day}</td>
<td>
<td colspan="3">
<input
type="radio"
bind:group={$config.easyDaysPercentages[index]}
value={1.0}
checked={$config.easyDaysPercentages[index] ===
1.0}
/>
</td>
<td>
<input
type="radio"
bind:group={$config.easyDaysPercentages[index]}
value={0.5}
checked={$config.easyDaysPercentages[index] ===
0.5}
/>
</td>
<td>
<input
type="radio"
bind:group={$config.easyDaysPercentages[index]}
value={0.0}
checked={$config.easyDaysPercentages[index] ===
0.0}
type="range"
bind:value={$config.easyDaysPercentages[index]}
step={0.5}
max={1.0}
min={0.0}
list="easy_day_steplist"
/>
</td>
</tr>
@ -101,6 +92,19 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
.easy-days-settings td {
padding: 8px;
text-align: center;
border: 1px solid #ddd;
border-bottom: var(--border) solid 1px;
}
.header {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
.header span:nth-child(1) {
text-align: left;
}
.header span:nth-child(3) {
text-align: right;
}
.easy-days-settings input[type="range"] {
width: 100%;
}
</style>