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

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>; 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,35 +29,28 @@ 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} {:else}
{:else} <span class="remaining-count">
<span class="remaining-count"> <RemainingNumber cls="new-count" underlined={$remainingIndex === 0}>
<RemainingNumber cls="new-count" underlined={$remainingIndex === 0}> {$remaining[0]}
{$remaining[0]} </RemainingNumber> +
</RemainingNumber> + <RemainingNumber cls="learn-count" underlined={$remainingIndex === 1}>
<RemainingNumber {$remaining[1]}
cls="learn-count" </RemainingNumber> +
underlined={$remainingIndex === 1} <RemainingNumber cls="review-count" underlined={$remainingIndex === 2}>
> {$remaining[2]}
{$remaining[1]} </RemainingNumber>
</RemainingNumber> + </span>
<RemainingNumber <button on:click={() => bridgeCommand("ans")}>
cls="review-count" {tr.studyingShowAnswer()}
underlined={$remainingIndex === 2} </button>
> {/if}
{$remaining[2]} <span class="disappearing"></span>
</RemainingNumber> <div class="disappearing more">
</span>
<button on:click={() => bridgeCommand("ans")}>
{tr.studyingShowAnswer()}
</button>
{/if}
</div>
<div class="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;
} }
.more,
.edit {
width: 100%;
}
.more {
text-align: right;
}
@media (max-width: 583px) { @media (max-width: 583px) {
.edit, .disappearing {
.more {
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>