mirror of
https://github.com/NoCrypt/migu.git
synced 2026-01-11 20:10:22 +00:00
40 lines
1.2 KiB
Svelte
40 lines
1.2 KiB
Svelte
<script>
|
|
import { click } from '@/modules/click.js'
|
|
export let list = null
|
|
let showMore = false
|
|
function toggleList () {
|
|
showMore = !showMore
|
|
}
|
|
export let title = 'Relations'
|
|
export let promise = null
|
|
</script>
|
|
{#if list?.length}
|
|
<span class='d-flex align-items-end pointer' use:click={toggleList}>
|
|
<div class='w-full d-flex flex-row align-items-center pt-20 mt-10'>
|
|
<hr class='w-full' />
|
|
<div class='title position-absolute font-size-18 font-weight-semi-bold px-20 text-white'>{title}</div>
|
|
<hr class='w-full' />
|
|
{#if list.length > 4}
|
|
<div class='ml-auto pl-20 font-size-12 more text-muted text-nowrap'>{showMore ? 'Show Less' : 'Show More'}</div>
|
|
{/if}
|
|
</div>
|
|
</span>
|
|
<div class='d-flex text-capitalize flex-wrap pt-10 justify-content-center gallery'>
|
|
{#each list.slice(0, showMore ? 100 : 4) as item}
|
|
<slot {item} {promise} />
|
|
{/each}
|
|
</div>
|
|
{/if}
|
|
|
|
<style>
|
|
.title {
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
}
|
|
.gallery :global(.first-check:first-child) :global(.absolute-container) {
|
|
left: -48% !important;
|
|
}
|
|
.more:hover {
|
|
color: var(--dm-link-text-color-hover) !important;
|
|
}
|
|
</style>
|