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

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} /> <ConfigSelector {state} />
<Container api={options} class="g-1"> <Container api={options} class="g-1 mb-3 mt-3">
<Item> <div class="multi-column">
<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}
<Item> <Item>
<DisplayOrder {state} api={displayOrder} /> <DailyLimits {state} api={dailyLimits} />
</Item> </Item>
{/if}
<Item> <Item>
<TimerOptions {state} api={timerOptions} /> <NewOptions {state} api={newOptions} />
</Item> </Item>
<Item>
<AudioOptions {state} api={audioOptions} /> <Item>
</Item> <LapseOptions {state} api={lapseOptions} />
<Item> </Item>
<Addons {state} api={addonOptions} />
</Item> <Item>
<Item> <BuryOptions {state} api={buryOptions} />
<AdvancedOptions {state} api={advancedOptions} /> </Item>
</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> </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; export let api: Record<string, never> | undefined = undefined;
</script> </script>
<div class="container-fluid my-4"> <div class="container-fluid mb-5">
<h1>{title}</h1> <h1>{title}</h1>
<Section {api}> <Section {api}>
@ -21,4 +21,8 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
h1 { h1 {
border-bottom: 1px solid var(--medium-border); border-bottom: 1px solid var(--medium-border);
} }
.container-fluid {
break-inside: avoid;
}
</style> </style>