ui: Change exercices' theme alignment

This commit is contained in:
Pierre-Olivier Mercier 2023-04-05 02:07:22 +02:00
parent 9ac09278f6
commit 37bfd8f2b9

View File

@ -16,9 +16,11 @@
import { my } from '$lib/stores/my.js';
</script>
<Card class="niceborder text-indent mt-2 mb-4">
<Card class="bg-dark niceborder text-indent mt-2 mb-4">
<CardBody class="bg-dark text-light">
<Row>
<Col lg={6} xl={7}>
<CardBody class="text-light">
<div style="position: relative; display: inline-block;">
{#if $current_theme.locked}
<div style="position: absolute; z-index: 0; top: 0; bottom: 0; left: 0; right: 0;" class="d-flex justify-content-center align-items-center">
@ -58,8 +60,9 @@
</Row>
</div>
</CardBody>
{#if $current_theme.exercices}
</Col>
<Col lg={6} xl={5}>
{#if $current_theme.exercices && $current_theme.exercices.length}
<ul class="list-group">
{#each $current_theme.exercices as exercice, index}
<li
@ -85,36 +88,40 @@
d="m 22,20 a 9.5700617,9.5700617 0 0 1 -9.5690181,9.57006 9.5700617,9.5700617 0 0 1 -9.57110534,-9.56797 9.5700617,9.5700617 0 0 1 9.56692984,-9.57215 9.5700617,9.5700617 0 0 1 9.5731926,9.56588" />
</svg>
</div>
{#each exercice.tags as tag, idx}
<Badge href="tags/{tag}" pill color="secondary" class="mx-1 float-end">#{tag}</Badge>
{/each}
<h5 class="fw-bold">
{#if $my && $my.exercices[exercice.id]}
<span style="white-space: nowrap">
{#if $my.exercices[exercice.id].wip}
<Icon name="cone-striped" aria-hidden="true" title="Cette étape est encore en construction." />
{/if}
{exercice.title}
</span>
{:else}
<span style="white-space: nowrap">
<Icon name="lock-fill" aria-hidden="true" title="Vous n'avez pas encore accès à ce défi" />
{exercice.title}
</span>
{/if}
{#if exercice.curcoeff > 1.0}
<Icon name="gift" aria-hidden="true" title="Un bonus est actuellement appliqué lors de la résolution de ce défi" />
{/if}
</h5>
<div class="d-flex justify-content-between flex-wrap">
<h5 class="fw-bold">
{#if $my && $my.exercices[exercice.id]}
<span style="white-space: nowrap">
{#if $my.exercices[exercice.id].wip}
<Icon name="cone-striped" aria-hidden="true" title="Cette étape est encore en construction." />
{/if}
{exercice.title}
</span>
{:else}
<span style="white-space: nowrap">
<Icon name="lock-fill" aria-hidden="true" title="Vous n'avez pas encore accès à ce défi" />
{exercice.title}
</span>
{/if}
{#if exercice.curcoeff > 1.0}
<Icon name="gift" aria-hidden="true" title="Un bonus est actuellement appliqué lors de la résolution de ce défi" />
{/if}
</h5>
<div>
{#each exercice.tags as tag, idx}
<Badge href="tags/{tag}" pill color="secondary" class="mx-1 float-end">#{tag}</Badge>
{/each}
</div>
</div>
<p>{@html exercice.headline}</p>
</div>
<div class="d-none d-md-block col-1">
<div class="d-none d-md-block col-1 pe-0">
{#if $my && $my.exercices[exercice.id]}
<a class="float-right" href="{$current_theme.urlid}/{exercice.urlid}" style="font-size: 3rem">
<a class="float-end" href="{$current_theme.urlid}/{exercice.urlid}" style="font-size: 3rem">
<Icon name="chevron-right" aria-hidden="true" />
</a>
{:else}
<span class="float-right" style="font-size: 3rem">
<span class="float-end" style="font-size: 3rem">
<Icon name="chevron-right" aria-hidden="true" />
</span>
{/if}
@ -123,7 +130,13 @@
</li>
{/each}
</ul>
{:else}
<p class="text-center my-5">
Aucun contenu disponible actuellement.
</p>
{/if}
</Col>
</Row>
</Card>