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