54 lines
1.1 KiB
Svelte
54 lines
1.1 KiB
Svelte
<script lang="ts">
|
|
import { attributeLabels } from '$lib/util/labels';
|
|
import UpLink from '$lib/components/display/UpLink.svelte';
|
|
import Ellipsis from '$lib/components/utils/Ellipsis.svelte';
|
|
|
|
export let attribute: string;
|
|
export let mark = false;
|
|
</script>
|
|
|
|
<div
|
|
class="attribute mark-attribute"
|
|
class:formatted={Boolean(Object.keys($attributeLabels).includes(attribute))}
|
|
class:mark
|
|
>
|
|
<UpLink to={{ attribute }}>
|
|
<Ellipsis
|
|
value={$attributeLabels[attribute] || attribute}
|
|
title={$attributeLabels[attribute]
|
|
? `${$attributeLabels[attribute]} (${attribute})`
|
|
: attribute}
|
|
/>
|
|
</UpLink>
|
|
</div>
|
|
|
|
<style>
|
|
.attribute {
|
|
min-width: 0;
|
|
font-family: var(--monospace-font);
|
|
&.formatted {
|
|
font-family: var(--default-font);
|
|
}
|
|
|
|
&.mark {
|
|
position: relative;
|
|
top: 0.2em;
|
|
flex-grow: 1;
|
|
text-align: center;
|
|
font-weight: 300;
|
|
font-size: 0.9em;
|
|
&::after {
|
|
content: '\00a0→';
|
|
|
|
position: absolute;
|
|
top: calc(-50% + 2px);
|
|
left: calc(50% - 2px);
|
|
|
|
transform: translateX(-50%);
|
|
font-size: 0.66em;
|
|
font-weight: normal;
|
|
}
|
|
}
|
|
}
|
|
</style>
|