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

minor layout tweaks to deck conf screen

Browse source 
- more space for dropdown
- limit width of main area so popups wrap correctly
- experiment with different colour dropdown
This commit is contained in:
Damien Elmes 2021-04-22 11:33:27 +10:00
parent 30f5269304
commit 7dc131c3de
3 changed files with 21 additions and 29 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

43
ts/deckconfig/ConfigSelector.svelte
View file

@ -22,12 +22,10 @@ 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; grid-column: 1 / 5;
grid-row: 2;
grid-column: 1 / 4;
} }
.outer { .fixed-bar {
position: fixed; position: fixed;
z-index: 1; z-index: 1;
top: 0; top: 0;
@ -35,19 +33,14 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
width: 100%; width: 100%;
color: var(--text-fg); color: var(--text-fg);
background: var(--window-bg); background: var(--window-bg);
padding: 0.5em;
display: flex; display: flex;
justify-content: center; justify-content: center;
} }
.inner { .grid {
display: grid; display: grid;
width: 35em; grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
grid-template-columns: 1fr 1fr 1fr 1fr; grid-column-gap: 0.5em;
& > :global(*) {
padding-left: 0.5em;
padding-right: 0.5em;
}
} }
.padding { .padding {
@ -55,22 +48,20 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
} }
</style> </style>
<div class="outer"> <div class="fixed-bar">
<div class="inner"> <div class="width-limited">
<div style="grid-column: 1 / 4;"> <div>{tr.actionsOptionsFor({ val: state.currentDeck.name })}</div>
{tr.actionsOptionsFor({ val: state.currentDeck.name })}
</div>
<!-- svelte-ignore a11y-no-onchange --> <div class="grid">
<select class="form-select" on:change={blur}> <!-- svelte-ignore a11y-no-onchange -->
{#each $configList as entry} <select class="form-select" on:change={blur}>
<option value={entry.idx} selected={entry.current}> {#each $configList as entry}
{configLabel(entry)} <option value={entry.idx} selected={entry.current}>
</option> {configLabel(entry)}
{/each} </option>
</select> {/each}
</select>
<div style="grid-row: 2; align-items: right;">
<OptionsDropdown {state} /> <OptionsDropdown {state} />
</div> </div>
</div> </div>

5
ts/deckconfig/DeckConfigPage.svelte
View file

@ -16,7 +16,8 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
justify-content: center; justify-content: center;
} }
.inner { :global(.width-limited) {
width: 40em;
padding: 0.5em; padding: 0.5em;
} }
</style> </style>
@ -28,7 +29,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
<ConfigSelector {state} /> <ConfigSelector {state} />
<div class="outer"> <div class="outer">
<div class="inner"> <div class="width-limited">
<ConfigEditor {state} /> <ConfigEditor {state} />
</div> </div>
</div> </div>

2
ts/deckconfig/OptionsDropdown.svelte
View file

@ -73,7 +73,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
on:click={() => save(false)}>Save</button> on:click={() => save(false)}>Save</button>
<button <button
type="button" type="button"
class="btn btn-primary dropdown-toggle dropdown-toggle-split" class="btn btn-secondary dropdown-toggle dropdown-toggle-split"
data-bs-toggle="dropdown" data-bs-toggle="dropdown"
aria-expanded="false"> aria-expanded="false">
<span class="visually-hidden">Toggle Dropdown</span> <span class="visually-hidden">Toggle Dropdown</span>