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

Start using Bootstrap grid for deckoptions

Browse source
This commit is contained in:
Henrik Giesel 2021-05-27 21:35:55 +02:00
parent 282de21675
commit 23f65f1a95
3 changed files with 36 additions and 69 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

68
ts/deckoptions/ConfigEntry.svelte
View file

@ -21,60 +21,24 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
$: renderedTooltip = marked(tooltip); $: renderedTooltip = marked(tooltip);
</script> </script>
<div {id} class="outer"> <div {id} class="row gx-0">
{#if label} <div class="col-8">
<div class="table"> <span
<span class="vcenter"> >{label}{#if renderedTooltip}<HelpPopup html={renderedTooltip} />{/if}</span
{label} >
{#if renderedTooltip}
<HelpPopup html={renderedTooltip} />
{/if}
</span>
</div>
{/if}
<div class="input-grid" class:full-grid-width={wholeLine}>
<slot />
<RevertButton bind:value {defaultValue} on:revert />
</div> </div>
<div class="full-grid-width"> <div class="col-3">
{#each warnings as warning} <slot />
{#if warning} </div>
<div class="alert alert-warning" in:slide out:slide>{warning}</div>
{/if} <div class="col-1">
{/each} <RevertButton bind:value {defaultValue} on:revert />
</div> </div>
</div> </div>
<style lang="scss"> {#each warnings as warning}
.outer { {#if warning}
display: grid; <div class="row alert alert-warning" in:slide out:slide>{warning}</div>
grid-template-columns: 7fr 3fr; {/if}
grid-row-gap: 0.5em; {/each}
}
.full-grid-width {
grid-column: 1 / 6;
}
.table {
display: table;
height: 100%;
}
.vcenter {
display: table-cell;
vertical-align: middle;
}
.alert {
margin-top: 0.5em;
}
.input-grid {
display: grid;
grid-column-gap: 0.5em;
grid-template-columns: 10fr 16px;
}
</style>

36
ts/deckoptions/DailyLimits.svelte
View file

@ -33,22 +33,24 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
: ""; : "";
</script> </script>
<h2>{tr.deckConfigDailyLimits()}</h2> <div class="container">
<p>{tr.deckConfigDailyLimits()}</p>
<SpinBox <SpinBox
label={tr.schedulingNewCardsday()} label={tr.schedulingNewCardsday()}
tooltip={tr.deckConfigNewLimitTooltip() + v3Extra} tooltip={tr.deckConfigNewLimitTooltip() + v3Extra}
min={0} min={0}
warnings={[newCardsGreaterThanParent]} warnings={[newCardsGreaterThanParent]}
defaultValue={defaults.newPerDay} defaultValue={defaults.newPerDay}
bind:value={$config.newPerDay} bind:value={$config.newPerDay}
/> />
<SpinBox <SpinBox
label={tr.schedulingMaximumReviewsday()} label={tr.schedulingMaximumReviewsday()}
tooltip={tr.deckConfigReviewLimitTooltip() + v3Extra} tooltip={tr.deckConfigReviewLimitTooltip() + v3Extra}
min={0} min={0}
warnings={[reviewsTooLow]} warnings={[reviewsTooLow]}
defaultValue={defaults.reviewsPerDay} defaultValue={defaults.reviewsPerDay}
bind:value={$config.reviewsPerDay} bind:value={$config.reviewsPerDay}
/> />
</div>

1
ts/deckoptions/deckoptions-base.scss
View file

@ -4,6 +4,7 @@
@import "ts/sass/base"; @import "ts/sass/base";
@import "ts/sass/bootstrap/containers"; @import "ts/sass/bootstrap/containers";
@import "ts/sass/bootstrap/grid";
@import "ts/sass/bootstrap/dropdown"; @import "ts/sass/bootstrap/dropdown";
@import "ts/sass/bootstrap/forms"; @import "ts/sass/bootstrap/forms";
@import "ts/sass/bootstrap/buttons"; @import "ts/sass/bootstrap/buttons";