anki/ts/deck-options/HelpSection.svelte
Matthias Metelka 264561cd0d
Redesign deck options screen, swap tooltips for help modals (#2139)
* Redesign deck config, swap tooltips for help modals, link to manual

* Replace canvas-inset with canvas-code for custom scheduling

* Make section header link to manual too

* Include elevation Sass library

* Remove two unused exports

* Fix tabbed spinboxes

* Update ftl/core/deck-config.ftl

* Update ftl/core/deck-config.ftl

* Fix format

* Make border-radius and box-shadow more subtle

* Fix margin for vertical aspect ratio

* Make direct hover on info badge apply effect instantly

* Add redirect line to manual underneath chapter
2022-10-25 16:18:50 +10:00

71 lines
1.7 KiB
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 { marked } from "marked";
import Row from "../components/Row.svelte";
import * as tr from "../lib/ftl";
import type { DeckOption } from "./types";
export let section: DeckOption;
</script>
<Row>
<h2>
{#if section.url}
<a
href={section.url}
title={tr.helpOpenManualChapter({ name: section.title })}
>
{@html section.title}
</a>
{:else}
{@html section.title}
{/if}
</h2>
{#if section.help}
{@html marked(section.help)}
{:else}
{@html marked(
tr.helpNoExplanation({
link: "[GitHub](https://github.com/ankitects/anki)",
}),
)}
{/if}
</Row>
{#if section.url}
<hr />
<div class="chapter-redirect">
{@html marked(
tr.helpForMoreInfo({
link: `<a href="${section.url}" title="${tr.helpOpenManualChapter({
name: section.title,
})}">${section.title}</a>`,
}),
)}
</div>
{/if}
<style lang="scss">
h2 {
margin-bottom: 1em;
a {
cursor: pointer;
border-bottom: 1px solid var(--border);
text-decoration: none;
color: var(--fg);
&:hover {
border-color: var(--fg);
}
}
}
.chapter-redirect {
width: 100%;
color: var(--fg-subtle);
font-size: small;
}
</style>