137 lines
2.8 KiB
Vue
137 lines
2.8 KiB
Vue
<script setup lang="ts">
|
|
import FAIcon from "@/assets/icons/FurAffinityIcon.vue";
|
|
import TwitterIcon from "@/assets/icons/TwitterIcon.vue";
|
|
|
|
interface ArtistLink {
|
|
furaffinity?: string;
|
|
twitter?: string;
|
|
}
|
|
|
|
interface Attribution {
|
|
artwork: string;
|
|
artist: string;
|
|
links: ArtistLink;
|
|
}
|
|
|
|
interface Props {
|
|
attributions: Attribution[];
|
|
}
|
|
|
|
defineProps<Props>();
|
|
</script>
|
|
|
|
<template>
|
|
<table class="attribution-table">
|
|
<thead class="attribution-table__head">
|
|
<tr class="attribution-table__row">
|
|
<th class="attribution-table__heading artwork">
|
|
{{ $t("attributions.artwork.headings[0]") }}
|
|
</th>
|
|
<th class="attribution-table__heading artist">
|
|
{{ $t("attributions.artwork.headings[1]") }}
|
|
</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="attribution-table__body">
|
|
<tr
|
|
class="attribution-table__row"
|
|
v-for="(attrib, idx) in attributions"
|
|
:key="idx"
|
|
>
|
|
<td class="attribution-table__cell artwork">
|
|
<img :src="attrib.artwork" alt="Image attribution" />
|
|
</td>
|
|
<td class="attribution-table__cell artist">
|
|
<p>
|
|
{{ attrib.artist }}
|
|
</p>
|
|
<ul>
|
|
<li v-if="attrib.links.furaffinity">
|
|
<a :href="attrib.links.furaffinity" title="Fur Affinity">
|
|
<FAIcon />
|
|
</a>
|
|
</li>
|
|
<li v-if="attrib.links.twitter">
|
|
<a :href="attrib.links.twitter" title="Twitter">
|
|
<TwitterIcon />
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</template>
|
|
|
|
<style lang="scss">
|
|
.attribution-table {
|
|
&__cell {
|
|
&.artwork {
|
|
width: 10rem;
|
|
|
|
img {
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
&.artist {
|
|
p {
|
|
margin: 0.5rem 0;
|
|
text-align: center;
|
|
}
|
|
|
|
ul {
|
|
display: flex;
|
|
flex-flow: row wrap;
|
|
justify-content: center;
|
|
align-items: center;
|
|
|
|
list-style: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
li {
|
|
flex: 0 0 2rem;
|
|
display: flex;
|
|
flex-flow: row wrap;
|
|
justify-content: center;
|
|
align-items: center;
|
|
|
|
background: var(--color-artist-link-background);
|
|
|
|
width: 2rem;
|
|
height: 2rem;
|
|
margin: 0 0.25rem;
|
|
border-radius: 100%;
|
|
}
|
|
|
|
a {
|
|
flex: 1 1 auto;
|
|
padding: 0.375rem;
|
|
box-shadow: none;
|
|
|
|
&:hover {
|
|
box-shadow: none;
|
|
}
|
|
}
|
|
|
|
svg {
|
|
fill: var(--color-artist-link-icon);
|
|
}
|
|
}
|
|
}
|
|
|
|
&__row {
|
|
&:hover {
|
|
li {
|
|
background: var(--color-artist-link-background-hover);
|
|
}
|
|
|
|
svg {
|
|
fill: var(--color-artist-link-icon-hover);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|