fic/server
Archived
1
0
Fork 0
Code Issues Pull requests 10 Releases Wiki Activity

ui: Change exercices' theme alignment

Browse source
This commit is contained in:
nemunaire 2023-04-05 02:07:22 +02:00
commit 37bfd8f2b9
1 changed files with 41 additions and 28 deletions
Download patch file Download diff file Expand all files Collapse all files

69
frontend/ui/src/routes/[theme]/+page.svelte
View file

@ -16,9 +16,11 @@
import { my } from '$lib/stores/my.js'; import { my } from '$lib/stores/my.js';
</script> </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;"> <div style="position: relative; display: inline-block;">
{#if $current_theme.locked} {#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"> <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> </Row>
</div> </div>
</CardBody> </CardBody>
</Col>
{#if $current_theme.exercices} <Col lg={6} xl={5}>
{#if $current_theme.exercices && $current_theme.exercices.length}
<ul class="list-group"> <ul class="list-group">
{#each $current_theme.exercices as exercice, index} {#each $current_theme.exercices as exercice, index}
<li <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" /> 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> </svg>
</div> </div>
{#each exercice.tags as tag, idx} <div class="d-flex justify-content-between flex-wrap">
<Badge href="tags/{tag}" pill color="secondary" class="mx-1 float-end">#{tag}</Badge> <h5 class="fw-bold">
{/each} {#if $my && $my.exercices[exercice.id]}
<h5 class="fw-bold"> <span style="white-space: nowrap">
{#if $my && $my.exercices[exercice.id]} {#if $my.exercices[exercice.id].wip}
<span style="white-space: nowrap"> <Icon name="cone-striped" aria-hidden="true" title="Cette étape est encore en construction." />
{#if $my.exercices[exercice.id].wip} {/if}
<Icon name="cone-striped" aria-hidden="true" title="Cette étape est encore en construction." /> {exercice.title}
{/if} </span>
{exercice.title} {:else}
</span> <span style="white-space: nowrap">
{:else} <Icon name="lock-fill" aria-hidden="true" title="Vous n'avez pas encore accès à ce défi" />
<span style="white-space: nowrap"> {exercice.title}
<Icon name="lock-fill" aria-hidden="true" title="Vous n'avez pas encore accès à ce défi" /> </span>
{exercice.title} {/if}
</span> {#if exercice.curcoeff > 1.0}
{/if} <Icon name="gift" aria-hidden="true" title="Un bonus est actuellement appliqué lors de la résolution de ce défi" />
{#if exercice.curcoeff > 1.0} {/if}
<Icon name="gift" aria-hidden="true" title="Un bonus est actuellement appliqué lors de la résolution de ce défi" /> </h5>
{/if} <div>
</h5> {#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> <p>{@html exercice.headline}</p>
</div> </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]} {#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" /> <Icon name="chevron-right" aria-hidden="true" />
</a> </a>
{:else} {:else}
<span class="float-right" style="font-size: 3rem"> <span class="float-end" style="font-size: 3rem">
<Icon name="chevron-right" aria-hidden="true" /> <Icon name="chevron-right" aria-hidden="true" />
</span> </span>
{/if} {/if}
@ -123,7 +130,13 @@
</li> </li>
{/each} {/each}
</ul> </ul>
{:else}
<p class="text-center my-5">
Aucun contenu disponible actuellement.
</p>
{/if} {/if}
</Col>
</Row>
</Card> </Card>