GitHub/Anki
1
0
Fork 0
mirror of https://github.com/ankitects/anki.git synced 2025-11-06 12:47:11 -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

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