101 lines
2.5 KiB
Svelte
101 lines
2.5 KiB
Svelte
<script>
|
|
import {
|
|
Alert,
|
|
Container,
|
|
Icon,
|
|
Spinner,
|
|
} from 'sveltestrap';
|
|
|
|
import { challengeInfo } from '$lib/stores/challengeinfo';
|
|
import { current_exercice } from '$lib/stores/exercices';
|
|
import { current_theme } from '$lib/stores/themes';
|
|
|
|
let heading_image = "";
|
|
let current_authors = "";
|
|
$: if ($current_theme) {
|
|
if ($current_exercice && $current_exercice.image) {
|
|
heading_image = $current_exercice.image;
|
|
} else {
|
|
heading_image = $current_theme.image;
|
|
}
|
|
|
|
if ($current_exercice && $current_exercice.authors) {
|
|
current_authors = $current_exercice.authors;
|
|
} else {
|
|
current_authors = $current_theme.authors;
|
|
}
|
|
} else {
|
|
heading_image = "";
|
|
current_authors = "";
|
|
}
|
|
</script>
|
|
|
|
<svelte:head>
|
|
<title>{$current_theme?($current_theme.name + " - "):""}{$challengeInfo.title}</title>
|
|
</svelte:head>
|
|
|
|
{#if $current_theme === null}
|
|
<Container class="d-flex justify-content-center mt-5 text-dark align-items-center">
|
|
<Spinner size="lg" type="border" color="dark" />
|
|
<span class="ms-3 display-6">Chargement en cours…</span>
|
|
</Container>
|
|
{:else if !$current_theme}
|
|
<Container>
|
|
<Alert color="danger" class="mt-3" fade={false}>
|
|
<Icon name="dash-circle-fill" />
|
|
Ce scénario n'existe pas.
|
|
</Alert>
|
|
</Container>
|
|
{:else}
|
|
<div style="background-image: url({heading_image})" class="page-header">
|
|
<Container class="text-primary">
|
|
<h1 class="display-2">
|
|
<a href="{$current_theme.urlid}">{$current_theme.name}</a>
|
|
</h1>
|
|
<h2>{@html current_authors}</h2>
|
|
</Container>
|
|
<div class="headerfade"></div>
|
|
</div>
|
|
<Container>
|
|
<slot></slot>
|
|
</Container>
|
|
{/if}
|
|
|
|
<style>
|
|
.page-header {
|
|
background-size: cover;
|
|
background-position: center;
|
|
margin-bottom: -15rem;
|
|
}
|
|
.page-header h1 {
|
|
text-shadow: 0 0 15px rgba(255,255,255,0.95), 0 0 5px rgb(255,255,255)
|
|
}
|
|
.page-header h1, .page-header h1 a {
|
|
color: black;
|
|
text-decoration: none;
|
|
}
|
|
.page-header h2 {
|
|
font-size: 100%;
|
|
text-shadow: 1px 1px 1px rgba(0,0,0,0.9)
|
|
}
|
|
.page-header h2, .page-header h2 a {
|
|
color: #4eaee6;
|
|
}
|
|
.page-header h2 a:hover {
|
|
text-decoration: underline;
|
|
}
|
|
.page-header h1 {
|
|
padding-top: 4rem;
|
|
text-align: center;
|
|
}
|
|
.page-header h2 {
|
|
padding-bottom: 14rem;
|
|
text-align: center;
|
|
}
|
|
|
|
.page-header .headerfade {
|
|
background: linear-gradient(transparent 0%, rgb(233,236,239) 100%);
|
|
height: 3rem;
|
|
}
|
|
</style>
|