You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
77 lines
1.6 KiB
77 lines
1.6 KiB
<script lang="ts">
|
|
import Icon from "./Icon.svelte";
|
|
import type { IconName } from "./Icon.svelte";
|
|
import type Status from "$lib/models/status";
|
|
import StatusColor from "../common/StatusColor.svelte";
|
|
import Title from "./Title.svelte";
|
|
|
|
export let title = "";
|
|
export let big = false;
|
|
export let small = false;
|
|
export let noProgress = false;
|
|
export let icon: IconName = null;
|
|
export let status: Status = null;
|
|
</script>
|
|
|
|
<div class="sl3-entry">
|
|
<div class="header">
|
|
<div class="entry-icon">
|
|
{#if icon != null}
|
|
<StatusColor status={status}>
|
|
<Icon name={icon} />
|
|
</StatusColor>
|
|
{/if}
|
|
</div>
|
|
{#if title != ""}
|
|
<Title value={title} big={big} small={small} />
|
|
{/if}
|
|
<div class="right" class:noProgress>
|
|
<slot name="right"></slot>
|
|
</div>
|
|
</div>
|
|
<slot></slot>
|
|
</div>
|
|
|
|
<style lang="sass">
|
|
@import "../../css/colors.sass"
|
|
|
|
div.sl3-entry
|
|
margin: 0.5em 0
|
|
padding: 0.33em 0.75ch
|
|
|
|
div.entry-icon
|
|
opacity: 0.6
|
|
margin-right: 0.75ch
|
|
font-size: 0.75em
|
|
margin-top: auto
|
|
|
|
&:empty
|
|
display: none
|
|
|
|
div.header
|
|
display: flex
|
|
|
|
h2
|
|
font-size: 1.25em
|
|
margin: 0
|
|
color: $color-entry10
|
|
|
|
span.sub
|
|
color: $color-entry5
|
|
|
|
&.big
|
|
margin-top: 1em
|
|
font-size: 2em
|
|
|
|
&.small
|
|
font-size: 1em
|
|
|
|
div.right
|
|
color: $color-entry2-transparent
|
|
margin-left: auto
|
|
margin-top: auto
|
|
|
|
&.noProgress
|
|
margin-top: -0.25em
|
|
margin-bottom: auto
|
|
</style>
|