langfingaz/anki
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #1260 from ankitects/option-columns

Browse Source 
use css columns instead of grid
This commit is contained in:
Damien Elmes 2021-06-29 11:21:45 +10:00 committed by GitHub
commit 1c953ef876
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 55 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

80
ts/deckoptions/DeckOptionsPage.svelte
View File

@ -57,37 +57,57 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
<ConfigSelector {state} />
<Container api={options} class="g-1">
<Item>
<DailyLimits {state} api={dailyLimits} />
</Item>
<Item>
<NewOptions {state} api={newOptions} />
</Item>
<Item>
<LapseOptions {state} api={lapseOptions} />
</Item>
<Item>
<BuryOptions {state} api={buryOptions} />
</Item>
{#if state.v3Scheduler}
<Container api={options} class="g-1 mb-3 mt-3">
<div class="multi-column">
<Item>
<DisplayOrder {state} api={displayOrder} />
<DailyLimits {state} api={dailyLimits} />
</Item>
{/if}
<Item>
<TimerOptions {state} api={timerOptions} />
</Item>
<Item>
<AudioOptions {state} api={audioOptions} />
</Item>
<Item>
<Addons {state} api={addonOptions} />
</Item>
<Item>
<AdvancedOptions {state} api={advancedOptions} />
</Item>
<Item>
<NewOptions {state} api={newOptions} />
</Item>
<Item>
<LapseOptions {state} api={lapseOptions} />
</Item>
<Item>
<BuryOptions {state} api={buryOptions} />
</Item>
{#if state.v3Scheduler}
<Item>
<DisplayOrder {state} api={displayOrder} />
</Item>
{/if}
<Item>
<TimerOptions {state} api={timerOptions} />
</Item>
<Item>
<AudioOptions {state} api={audioOptions} />
</Item>
<Item>
<Addons {state} api={addonOptions} />
</Item>
<Item>
<AdvancedOptions {state} api={advancedOptions} />
</Item>
</div>
</Container>
<style lang="scss">
.multi-column {
column-count: 2;
column-gap: 5em;
}
@media (max-width: 1000px) {
.multi-column {
column-count: 1;
}
}
</style>

6
ts/deckoptions/TitledContainer.svelte
View File

@ -9,7 +9,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
export let api: Record<string, never> | undefined = undefined;
</script>
<div class="container-fluid my-4">
<div class="container-fluid mb-5">
<h1>{title}</h1>
<Section {api}>
@ -21,4 +21,8 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
h1 {
border-bottom: 1px solid var(--medium-border);
}
.container-fluid {
break-inside: avoid;
}
</style>