GitHub/Anki
1
0
Fork 0
mirror of https://github.com/ankitects/anki.git synced 2025-11-06 20:57:13 -05:00
Code Issues Projects Releases Packages 1 Wiki Activity Actions

Fix: edit and more buttons not aligned

Browse source
This commit is contained in:
Luc Mcgrady 2025-10-03 00:41:59 +01:00
parent 6dfb1ad20f
commit 69097ebb50
No known key found for this signature in database
GPG key ID: 4F3D7A0B17CC3D9C
1 changed files with 40 additions and 40 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

46
ts/routes/reviewer/reviewer-bottom/ReviewerBottom.svelte
View file

@ -15,11 +15,13 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
export let remainingIndex: Writable<number>; export let remainingIndex: Writable<number>;
$: console.log($remaining); $: console.log($remaining);
$: answerShown = $answerButtons.length;
</script> </script>
<div id="outer" class="fancy"> <div id="outer" class="fancy">
<div id="tableinner"> <div id="tableinner" style="--answer-button-count: {$answerButtons.length || 1}">
<div class="edit"> <span class="disappearing"></span>
<div class="disappearing edit">
<button <button
title={tr.actionsShortcutKey({ val: "E" })} title={tr.actionsShortcutKey({ val: "E" })}
on:click={() => bridgeCommand("edit")} on:click={() => bridgeCommand("edit")}
@ -27,8 +29,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
{tr.studyingEdit()} {tr.studyingEdit()}
</button> </button>
</div> </div>
<div class="review-buttons"> {#if answerShown}
{#if $answerButtons.length}
{#each $answerButtons as answerButton} {#each $answerButtons as answerButton}
<AnswerButton info={answerButton}></AnswerButton> <AnswerButton info={answerButton}></AnswerButton>
{/each} {/each}
@ -37,16 +38,10 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
<RemainingNumber cls="new-count" underlined={$remainingIndex === 0}> <RemainingNumber cls="new-count" underlined={$remainingIndex === 0}>
{$remaining[0]} {$remaining[0]}
</RemainingNumber> + </RemainingNumber> +
<RemainingNumber <RemainingNumber cls="learn-count" underlined={$remainingIndex === 1}>
cls="learn-count"
underlined={$remainingIndex === 1}
>
{$remaining[1]} {$remaining[1]}
</RemainingNumber> + </RemainingNumber> +
<RemainingNumber <RemainingNumber cls="review-count" underlined={$remainingIndex === 2}>
cls="review-count"
underlined={$remainingIndex === 2}
>
{$remaining[2]} {$remaining[2]}
</RemainingNumber> </RemainingNumber>
</span> </span>
@ -54,8 +49,8 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
{tr.studyingShowAnswer()} {tr.studyingShowAnswer()}
</button> </button>
{/if} {/if}
</div> <span class="disappearing"></span>
<div class="more"> <div class="disappearing more">
<button <button
on:click={() => bridgeCommand("more")} on:click={() => bridgeCommand("more")}
title={tr.actionsShortcutKey({ val: "M" })} title={tr.actionsShortcutKey({ val: "M" })}
@ -70,30 +65,35 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
#tableinner { #tableinner {
width: 100%; width: 100%;
display: grid; display: grid;
grid-template-columns: auto 1fr auto; grid-template-columns: 1fr repeat(var(--answer-button-count, 1), auto) 1fr;
grid-template-rows: auto auto;
justify-content: space-between; justify-content: space-between;
justify-items: center; justify-items: center;
align-items: center; align-items: center;
}
.review-buttons {
display: grid;
grid-auto-flow: column; grid-auto-flow: column;
grid-template-rows: auto auto;
} }
.remaining-count { .remaining-count {
text-align: center; text-align: center;
} }
@media (max-width: 583px) { .more,
.edit, .edit {
width: 100%;
}
.more { .more {
text-align: right;
}
@media (max-width: 583px) {
.disappearing {
display: none; display: none;
} }
#tableinner { #tableinner {
grid-template-columns: 1fr; grid-template-columns: repeat(var(--answer-button-count, 1), auto);
justify-content: center;
} }
} }
</style> </style>