GitHub/Anki
1
0
Fork 0
mirror of https://github.com/ankitects/anki.git synced 2025-09-18 22:12:21 -04:00
Code Issues Projects Releases Packages 1 Wiki Activity Actions

Feat/Replace easy day table with display:grid (#4179)

Browse source 
* Feat/Replace easy day table with grid

* Add max width
This commit is contained in:
Luc Mcgrady 2025-07-07 09:46:52 +01:00 committed by GitHub
parent 3d6b4761e4
commit d3e1fd1f80
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 54 additions and 51 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

81
ts/routes/deck-options/EasyDaysInput.svelte
View file

@ -20,27 +20,16 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
</script> </script>
<Item> <Item>
<div class="container">
<div class="easy-days-settings"> <div class="easy-days-settings">
<table> <span></span>
<thead> <span class="header min-col">{tr.deckConfigEasyDaysMinimum()}</span>
<tr> <span class="header">{tr.deckConfigEasyDaysReduced()}</span>
<th></th> <span class="header normal-col">{tr.deckConfigEasyDaysNormal()}</span>
<th class="header min-col">
<span>{tr.deckConfigEasyDaysMinimum()}</span>
</th>
<th class="header text-center">
<span>{tr.deckConfigEasyDaysReduced()}</span>
</th>
<th class="header normal-col">
<span>{tr.deckConfigEasyDaysNormal()}</span>
</th>
</tr>
</thead>
<tbody>
{#each easyDays as day, index} {#each easyDays as day, index}
<tr> <span class="day">{day}</span>
<td class="day">{day}</td> <div class="input-container">
<td colspan="3">
<input <input
type="range" type="range"
bind:value={values[index]} bind:value={values[index]}
@ -49,25 +38,47 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
min={0.0} min={0.0}
list="easy_day_steplist" list="easy_day_steplist"
/> />
</td> </div>
</tr>
{/each} {/each}
</tbody> </div>
</table>
</div> </div>
</Item> </Item>
<style> <style lang="scss">
.easy-days-settings table { .container {
width: 100%; display: flex;
border-collapse: collapse; justify-content: center;
table-layout: fixed;
} }
.easy-days-settings th, .easy-days-settings {
.easy-days-settings td { width: 100%;
padding: 8px; max-width: 1000px;
border-collapse: collapse;
display: grid;
grid-template-columns: auto 1fr 1fr 1fr;
border-collapse: collapse;
& > * {
padding: 8px 16px;
border-bottom: var(--border) solid 1px; border-bottom: var(--border) solid 1px;
} }
}
.input-container {
grid-column: 2 / span 3;
}
span {
display: flex;
align-items: center;
justify-content: center;
&.min-col {
justify-content: flex-start;
}
&.normal-col {
justify-content: flex-end;
}
}
.header { .header {
word-wrap: break-word; word-wrap: break-word;
font-size: smaller; font-size: smaller;
@ -80,12 +91,4 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
word-wrap: break-word; word-wrap: break-word;
font-size: smaller; font-size: smaller;
} }
.min-col {
text-align: start;
}
.normal-col {
text-align: end;
}
</style> </style>