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

frontend: Visual improvements on themes details page
Some checks are pending
continuous-integration/drone/push Build is running
Details

Browse source
This commit is contained in:
nemunaire 2025-03-29 13:00:42 +01:00
parent 7da127ecb0
commit 404f29e6ea
1 changed files with 20 additions and 24 deletions
Download patch file Download diff file Expand all files Collapse all files

44
frontend/fic/src/routes/[theme]/+page.svelte
View file

@ -84,24 +84,27 @@
</Col> </Col>
<Col lg={6} xl={5}> <Col lg={6} xl={5}>
{#if $current_theme.exercices && $current_theme.exercices.length} {#if $current_theme.exercices && $current_theme.exercices.length}
<ul class="list-group"> <ul class="list-group h-100 d-flex flex-column">
{#each $current_theme.exercices as exercice, index} {#each $current_theme.exercices as exercice, index}
<li <li
class="list-group-item" class="list-group-item flex-fill border-0 rounded-0"
class:list-group-item-action={$my && $my.exercices[exercice.id]} class:list-group-item-action={$my && $my.exercices[exercice.id]}
on:click={goto(`${$current_theme.urlid}/${exercice.urlid}`)} on:click={goto(`${$current_theme.urlid}/${exercice.urlid}`)}
on:keypress={goto(`${$current_theme.urlid}/${exercice.urlid}`)} on:keypress={goto(`${$current_theme.urlid}/${exercice.urlid}`)}
> >
<div class="row"> <div class="row h-100">
<div class="col-1" style="margin-top: -0.5rem; margin-bottom: -0.5rem; text-align: right; border-right: 5px solid #{$my && $my.exercices[exercice.id] && $my.exercices[exercice.id].solved_rank ? '62c462' : 'bbb'}"> {#if index + 1 == $current_theme.exercices.length}
</div> <div class="col-1"></div>
{:else}
<div class="col-1" style="margin-top: -0.5rem; margin-bottom: -0.5rem; text-align: right; border-right: 5px solid #{$my && $my.exercices[exercice.id] && $my.exercices[exercice.id].solved_rank ? '62c462' : 'bbb'}"></div>
{/if}
<div class="col-10"> <div class="col-10">
<div style="position: absolute; margin-left: calc(var(--bs-gutter-x) * -.5 - 15px); margin-top: -0.5rem;"> <div style="position: absolute; margin-left: calc(var(--bs-gutter-x) * -.5 - 15px); margin-top: -0.5rem;">
<svg style="height: 50px; width: 23px;"> <svg style="height: 50px; width: 23px;">
<rect <rect
style="fill:#{$my && $my.exercices[exercice.id] && (index < 1 || ($my.exercices[$current_theme.exercices[index-1].id] && $my.exercices[$current_theme.exercices[index-1].id].solved_rank)) ? '62c462' : 'bbb'}" style="fill:#{$my && $my.exercices[exercice.id] && (index < 1 || ($my.exercices[$current_theme.exercices[index-1].id] && $my.exercices[$current_theme.exercices[index-1].id].solved_rank)) ? '62c462' : 'bbb'}"
width="5" width="5"
height="30" height="27"
x="10" x="10"
y="0" /> y="0" />
<path <path
@ -111,24 +114,17 @@
</div> </div>
<div class="d-flex justify-content-between flex-wrap"> <div class="d-flex justify-content-between flex-wrap">
<h5 class="fw-bold text-truncate"> <h5 class="fw-bold text-truncate">
{#if $my && $my.exercices[exercice.id]} <span style="white-space: nowrap">
<span style="white-space: nowrap"> {#if $my && $my.exercices[exercice.id] && $my.exercices[exercice.id].wip}
{#if $my.exercices[exercice.id].wip} <Icon name="cone-striped" aria-hidden="true" title="Cette étape est encore en construction." />
<Icon name="cone-striped" aria-hidden="true" title="Cette étape est encore en construction." /> {/if}
{/if} {exercice.title}
{exercice.title} </span>
</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} {#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" /> <Icon name="gift" aria-hidden="true" title="Un bonus est actuellement appliqué lors de la résolution de ce défi" />
{/if} {/if}
</h5> </h5>
<div> <div class="mb-2">
{#each exercice.tags as tag, idx} {#each exercice.tags as tag, idx}
<Badge href="tags/{tag}" pill color="secondary" class="mx-1 float-end">#{tag}</Badge> <Badge href="tags/{tag}" pill color="secondary" class="mx-1 float-end">#{tag}</Badge>
{/each} {/each}
@ -136,14 +132,14 @@
</div> </div>
<p>{@html exercice.headline}</p> <p>{@html exercice.headline}</p>
</div> </div>
<div class="d-none d-md-block col-1 pe-0"> <div class="d-none d-md-flex flex-column h-100 justify-content-center align-items-end col-1 pe-0">
{#if $my && $my.exercices[exercice.id]} {#if $my && $my.exercices[exercice.id]}
<a class="float-end" href="{$current_theme.urlid}/{exercice.urlid}" style="font-size: 3rem"> <a 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-end" style="font-size: 3rem"> <span style="font-size: 3rem">
<Icon name="chevron-right" aria-hidden="true" /> <Icon name="lock-fill" aria-hidden="true" title="Vous n'avez pas encore accès à ce défi" />
</span> </span>
{/if} {/if}
</div> </div>