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

Make StickyBottom actually stick and make editor fullsize + flexbox

Browse source
This commit is contained in:
Henrik Giesel 2021-09-15 15:21:37 +02:00
parent c46f39c88e
commit c227c7dc39
5 changed files with 23 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
qt/aqt/editor.py
View file

@ -80,10 +80,10 @@ audio = (
_html = """ _html = """
<div id="fields"></div> <div id="fields"></div>
<div id="dupes" class="is-inactive"> <div id="dupes" class="d-none">
<a href="#" onclick="pycmd('dupes');return false;">%s</a> <a href="#" onclick="pycmd('dupes');return false;">%s</a>
</div> </div>
<div id="cloze-hint"></div> <div id="cloze-hint" class="d-none"></div>
<div id="tag-editor-anchor" class="d-none"></div> <div id="tag-editor-anchor" class="d-none"></div>
""" """

4
ts/components/StickyBottom.svelte
View file

@ -7,7 +7,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
let className: string = ""; let className: string = "";
export { className as class }; export { className as class };
export let height: number; export let height: number = 0;
</script> </script>
<footer {id} bind:offsetHeight={height} class={`container-fluid pt-1 ${className}`}> <footer {id} bind:offsetHeight={height} class={`container-fluid pt-1 ${className}`}>
@ -16,7 +16,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
<style lang="scss"> <style lang="scss">
footer { footer {
position: fixed; position: sticky;
bottom: 0; bottom: 0;
left: 0; left: 0;
right: 0; right: 0;

4
ts/editor/TagEditor.svelte
View file

@ -390,9 +390,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
$: shortenTags = shortenTags || assumedRows > 2; $: shortenTags = shortenTags || assumedRows > 2;
</script> </script>
<Spacer --height="{height}px" /> <StickyBottom bind:height class="d-flex">
<StickyBottom class="d-flex" bind:height>
{#if !wrap} {#if !wrap}
<TagOptionsBadge <TagOptionsBadge
--buttons-size="{size}rem" --buttons-size="{size}rem"

17
ts/editor/fields.scss
View file

@ -5,14 +5,25 @@
@use 'scrollbar'; @use 'scrollbar';
@use 'button-mixins'; @use 'button-mixins';
html,
body {
height: 100%;
}
body {
display: flex;
flex-direction: column;
}
.nightMode { .nightMode {
@include scrollbar.night-mode; @include scrollbar.night-mode;
} }
#fields { #fields {
display: flex; display: flex;
overflow-x: hidden;
flex-direction: column; flex-direction: column;
flex-grow: 1;
overflow-x: hidden;
margin: 3px 0; margin: 3px 0;
} }
@ -66,10 +77,6 @@
text-align: center; text-align: center;
background-color: var(--window-bg); background-color: var(--window-bg);
&.is-inactive {
display: none;
}
a { a {
color: var(--link); color: var(--link);
} }

9
ts/editor/index.ts
View file

@ -152,11 +152,14 @@ export function setBackgrounds(cols: ("dupe" | "")[]): void {
); );
document document
.getElementById("dupes")! .getElementById("dupes")!
.classList.toggle("is-inactive", !cols.includes("dupe")); .classList.toggle("d-none", !cols.includes("dupe"));
} }
export function setClozeHint(cloze_hint: string): void { export function setClozeHint(hint: string): void {
document.getElementById("cloze-hint")!.innerHTML = cloze_hint; const clozeHint = document.getElementById("cloze-hint")!;
clozeHint.innerHTML = hint;
clozeHint.classList.toggle("d-none", hint.length === 0);
} }
export function setFonts(fonts: [string, number, boolean][]): void { export function setFonts(fonts: [string, number, boolean][]): void {