anki/ts/editor/Fields.svelte
Matthias Metelka b12476de9a
Simplify NoteEditor by replacing Pane components with Collapsible (#2395)
* Remove Pane components and use Collapsible for TagEditor

* Update translations

* Give TagEditor border and focus outline

* Use ScrollArea from #2248 for fields

* Refactor ScrollArea

* Fix error caused by calling bridgeCommand when it's not available

* Make sure tag editor fills whole width of container

which is important for the CSV import page.

* Update NoteEditor.svelte

* Add back removed ftl strings

* Fix tests (dae)
2023-02-27 16:23:19 +10:00

37 lines
857 B
Svelte

<!--
Copyright: Ankitects Pty Ltd and contributors
License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
-->
<script lang="ts">
import ScrollArea from "components/ScrollArea.svelte";
</script>
<!--
@component
Contains the fields. This contains the scrollable area.
-->
<ScrollArea>
<div class="fields">
<slot />
</div>
</ScrollArea>
<style lang="scss">
.fields {
margin-top: 5px;
display: grid;
grid-auto-rows: min-content;
grid-gap: 6px;
/* Add space after the last field and the start of the tag editor */
padding-bottom: 5px;
/* Move the scrollbar for the NoteEditor into this element */
position: relative;
overflow-y: auto;
/* Push the tag editor to the bottom of the note editor */
flex-grow: 1;
}
</style>