mirror of
https://github.com/ankitects/anki.git
synced 2025-09-21 23:42:23 -04:00
tweak deckconfig top area formatting
I suspect there's a better way to ensure selector and save button are shown on the same line on both large and small widths; PRs are welcome.
This commit is contained in:
parent
76eb119870
commit
3abe6168aa
3 changed files with 16 additions and 12 deletions
|
@ -17,6 +17,10 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
|
||||||
:global(h2) {
|
:global(h2) {
|
||||||
margin-top: 1em;
|
margin-top: 1em;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
:global(input, select) {
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
|
|
|
@ -23,7 +23,8 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
|
||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
.form-select {
|
.form-select {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
width: 70%;
|
grid-row: 2;
|
||||||
|
grid-column: 1 / 4;
|
||||||
}
|
}
|
||||||
|
|
||||||
.outer {
|
.outer {
|
||||||
|
@ -40,10 +41,9 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
|
||||||
}
|
}
|
||||||
|
|
||||||
.inner {
|
.inner {
|
||||||
display: flex;
|
display: grid;
|
||||||
flex-wrap: wrap;
|
|
||||||
width: 35em;
|
width: 35em;
|
||||||
|
grid-template-columns: 1fr 1fr 1fr 1fr;
|
||||||
& > :global(*) {
|
& > :global(*) {
|
||||||
padding-left: 0.5em;
|
padding-left: 0.5em;
|
||||||
padding-right: 0.5em;
|
padding-right: 0.5em;
|
||||||
|
@ -57,7 +57,9 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
|
||||||
|
|
||||||
<div class="outer">
|
<div class="outer">
|
||||||
<div class="inner">
|
<div class="inner">
|
||||||
<div>{tr.actionsOptionsFor({ val: state.currentDeck.name })}</div>
|
<div style="grid-column: 1 / 4;">
|
||||||
|
{tr.actionsOptionsFor({ val: state.currentDeck.name })}
|
||||||
|
</div>
|
||||||
|
|
||||||
<!-- svelte-ignore a11y-no-onchange -->
|
<!-- svelte-ignore a11y-no-onchange -->
|
||||||
<select class="form-select" on:change={blur}>
|
<select class="form-select" on:change={blur}>
|
||||||
|
@ -68,7 +70,9 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
|
||||||
{/each}
|
{/each}
|
||||||
</select>
|
</select>
|
||||||
|
|
||||||
<OptionsDropdown {state} />
|
<div style="grid-row: 2; align-items: right;">
|
||||||
|
<OptionsDropdown {state} />
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
|
@ -19,20 +19,16 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
|
||||||
.inner {
|
.inner {
|
||||||
padding: 0.5em;
|
padding: 0.5em;
|
||||||
}
|
}
|
||||||
|
|
||||||
:global(input, select) {
|
|
||||||
font-size: 16px;
|
|
||||||
}
|
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
<div id="modal">
|
<div id="modal">
|
||||||
<!-- filled in later-->
|
<!-- filled in later-->
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<ConfigSelector {state} />
|
||||||
|
|
||||||
<div class="outer">
|
<div class="outer">
|
||||||
<div class="inner">
|
<div class="inner">
|
||||||
<ConfigSelector {state} />
|
|
||||||
|
|
||||||
<ConfigEditor {state} />
|
<ConfigEditor {state} />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
Loading…
Reference in a new issue