84 lines
No EOL
1.9 KiB
Svelte
84 lines
No EOL
1.9 KiB
Svelte
<script>
|
|
import {
|
|
Card,
|
|
CardTitle,
|
|
CardSubtitle,
|
|
CardActions,
|
|
Button,
|
|
Icon,
|
|
Divider,
|
|
MaterialApp }
|
|
from 'svelte-materialify';
|
|
import { slide } from 'svelte/transition';
|
|
import { mdiChevronDown } from '@mdi/js';
|
|
let active = false;
|
|
function toggle() {
|
|
active = !active;
|
|
}
|
|
export let author
|
|
export let title;
|
|
export let subtitle
|
|
export let buttontext
|
|
export let pulltext
|
|
export let img
|
|
export let testlist
|
|
var status = false
|
|
var toggletable = {true : "./liked.png", false : "./unliked.png"}
|
|
function test() {
|
|
testlist.push("32")
|
|
status = !status
|
|
}
|
|
</script>
|
|
|
|
<MaterialApp>
|
|
|
|
<div class="d-flex justify-center mt-4 mb-4">
|
|
|
|
<Card style="max-width:350px;">
|
|
<div class="container">
|
|
<img src={img} class="image" style="width: 300px; height: 300px; object-fit: cover;" alt="background" />
|
|
` <div class="overlay">
|
|
|
|
<div class="text" ><img on:click={test} style="width: 25px; height: 25px; object-fit: cover;" alt="background" src={toggletable[status]}></div>
|
|
</div>
|
|
</div>`
|
|
<CardTitle>{title}</CardTitle>
|
|
<CardTitle>{author}</CardTitle>
|
|
|
|
<CardSubtitle>{subtitle}</CardSubtitle>
|
|
<CardActions>
|
|
<Button text>{buttontext}</Button>
|
|
<Button text fab size="small" class="ml-auto" on:click={toggle}>
|
|
<Icon path={mdiChevronDown} rotate={active ? 180 : 0} />
|
|
</Button>
|
|
</CardActions>
|
|
{#if active}
|
|
<div transition:slide>
|
|
<Divider />
|
|
<div class="pl-4 pr-4 pt-2 pb-2">
|
|
{pulltext}
|
|
</div>
|
|
</div>
|
|
{/if}
|
|
</Card>
|
|
</div>
|
|
</MaterialApp>
|
|
|
|
<style>
|
|
|
|
|
|
|
|
.container:hover .overlay {
|
|
opacity: 1;
|
|
}
|
|
|
|
.text {
|
|
color: white;
|
|
font-size: 20px;
|
|
position: absolute;
|
|
top: 5%;
|
|
left: 90%;
|
|
transform: translate(-50%, -50%);
|
|
-ms-transform: translate(-50%, -50%);
|
|
}
|
|
</style> |