Anki/ts/routes/reviewer/reviewer-bottom/ReviewerBottom.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 type { Writable } from "svelte/store";
    import AnswerButton from "./AnswerButton.svelte";
    import { bridgeCommand } from "@tslib/bridgecommand";
    import * as tr from "@generated/ftl";
    import RemainingNumber from "./RemainingNumber.svelte";
    import type { AnswerButtonInfo } from "./types";

    export let answerButtons: Writable<AnswerButtonInfo[]>;
    export let remaining: Writable<number[]>;
    export let remainingIndex: Writable<number>;

    $: console.log($remaining);
</script>

<div id="outer" class="fancy">
    <div id="tableinner">
        <div class="edit">
            <button
                title={tr.actionsShortcutKey({ val: "E" })}
                on:click={() => bridgeCommand("edit")}
            >
                {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">
            <button
                on:click={() => bridgeCommand("more")}
                title={tr.actionsShortcutKey({ val: "M" })}
            >
                {tr.studyingMore()}&#8615
            </button>
        </div>
    </div>
</div>

<style lang="scss">
    #tableinner {
        width: 100%;
        display: grid;
        grid-template-columns: auto 1fr 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;
    }

    @media (max-width: 583px) {
        .edit,
        .more {
            display: none;
        }

        #tableinner {
            grid-template-columns: 1fr;
        }
    }
</style>