58 lines
1.2 KiB
Svelte
58 lines
1.2 KiB
Svelte
<script>
|
|
import {
|
|
Alert,
|
|
Card,
|
|
CardBody,
|
|
CardTitle,
|
|
Col,
|
|
Icon,
|
|
Row,
|
|
} from 'sveltestrap';
|
|
|
|
export { className as class };
|
|
export let theme = {};
|
|
export let exercice = null;
|
|
let className = '';
|
|
</script>
|
|
|
|
<div class="theme-card h-100">
|
|
<Card
|
|
class="text-light h-100 rounded-3 niceborder {className}"
|
|
color="dark"
|
|
on:click
|
|
>
|
|
{#if theme.image}
|
|
<div class="card-img-top" style="background-image: url({ theme.image.substr(0, theme.image.length-3) }thumb.jpg)"></div>
|
|
{/if}
|
|
<CardBody class="text-indent">
|
|
<CardTitle class="fw-bolder">
|
|
{#if exercice}{exercice.title}{:else}{theme.name}{/if}
|
|
</CardTitle>
|
|
<p class="card-text text-justify">{#if exercice}{@html exercice.headline}{:else}{@html theme.headline}{/if}</p>
|
|
</CardBody>
|
|
</Card>
|
|
</div>
|
|
|
|
<style>
|
|
.theme-card {
|
|
cursor: pointer;
|
|
transition: transform 250ms;
|
|
}
|
|
.theme-card:hover {
|
|
transform: scale(1.07);
|
|
}
|
|
|
|
.card-img-top {
|
|
background-position: center;
|
|
background-repeat: no-repeat;
|
|
background-size: cover;
|
|
}
|
|
.theme-card .card-img-top {
|
|
height: 10rem;
|
|
}
|
|
|
|
p {
|
|
color: #ccc;
|
|
}
|
|
</style>
|