fic/server
2
0
Fork 0
Code Issues Pull Requests 6 Releases Wiki Activity

ui: Redesign step attributs display

Browse Source
This commit is contained in:
nemunaire 2022-11-05 19:10:56 +01:00
parent 2ace5e1e52
commit c13fd3d0b1
2 changed files with 86 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
frontend/ui/src/fic.scss
View File

@ -30,3 +30,15 @@ p img {
p:has(img) {
text-align: center;
}
.level .level-item {
text-align: center;
}
.level .level-item .heading {
font-variant: small-caps;
text-transform: lowercase;
}
.level .level-item .value {
font-size: 1.3rem;
font-weight: bolder;
}

101
frontend/ui/src/routes/[theme]/[exercice]/+page.svelte
View File

@ -55,40 +55,87 @@
<hr class="mt-0 mb-4">
<Row>
<Col>
<ul>
<li>
<strong>Gain&nbsp;:</strong>
{$current_exercice.gain} {$current_exercice.gain==1?"point":"points"}
<Row class="level" cols={{xs:2, md:3, xl:4}}>
<Col>
<div class="level-item">
<div class="heading">
Gain
</div>
<div class="value">
{$current_exercice.gain} {$current_exercice.gain==1?"point":"points"}
</div>
{#if $settings.firstBlood && $current_exercice.solved < 1}
<em>+{$settings.firstBlood * 100}% (prem's)</em>
<div class="text-muted">
<em>+{$settings.firstBlood * 100}% (prem's)</em>
</div>
{/if}
{#if $current_exercice.curcoeff != 1.0 || $settings.exerciceCurrentCoefficient != 1.0}
<em>{#if $current_exercice.curcoeff * $settings.exerciceCurrentCoefficient > 1}+{Math.round(($current_exercice.curcoeff * $settings.exerciceCurrentCoefficient - 1) * 100)}{:else}-{Math.round((1-($current_exercice.curcoeff * $settings.exerciceCurrentCoefficient)) * 100)}{/if}% (bonus)</em>
<div class="text-muted">
<em>{#if $current_exercice.curcoeff * $settings.exerciceCurrentCoefficient > 1}+{Math.round(($current_exercice.curcoeff * $settings.exerciceCurrentCoefficient - 1) * 100)}{:else}-{Math.round((1-($current_exercice.curcoeff * $settings.exerciceCurrentCoefficient)) * 100)}{/if}% (bonus)</em>
</div>
{/if}
</li>
<li>
<strong>Tenté par&nbsp;:</strong>
{#if !$current_exercice.tried}
aucune équipe
{:else}
{$current_exercice.tried} {$current_exercice.tried == 1?"équipe":"équipes"}
{#if $my && $my.exercices[$current_exercice.id] && $my.exercices[$current_exercice.id].total_tries}
(cumulant {$my.exercices[$current_exercice.id].total_tries} {$my.exercices[$current_exercice.id].total_tries == 1?"tentative":"tentatives"})
</div>
</Col>
<Col class="d-none d-md-block">
<div class="level-item">
<div class="heading">
Tenté par
</div>
<div class="value">
{#if !$current_exercice.tried}
aucune équipe
{:else}
{$current_exercice.tried} {$current_exercice.tried == 1?"équipe":"équipes"}
{#if $my && $my.exercices[$current_exercice.id] && $my.exercices[$current_exercice.id].total_tries}
(cumulant {$my.exercices[$current_exercice.id].total_tries} {$my.exercices[$current_exercice.id].total_tries == 1?"tentative":"tentatives"})
{/if}
{/if}
{/if}
</li>
<li>
<strong>Résolu par&nbsp;:</strong>
{#if !$current_exercice.solved}
aucune équipe
{:else}
{$current_exercice.solved} {$current_exercice.solved == 1?"équipe":"équipes"}
{/if}
</li>
</ul>
</div>
</div>
</Col>
<Col class="d-none d-md-block">
<div class="level-item">
<div class="heading">
Résolu par
</div>
<div class="value">
{#if !$current_exercice.solved}
aucune équipe
{:else}
{$current_exercice.solved} {$current_exercice.solved == 1?"équipe":"équipes"}
{/if}
</div>
</div>
</Col>
<Col class="d-block d-md-none">
<div class="level-item">
<div class="heading">
{#if !$current_exercice.solved}
Tenté par
{:else}
Résolu par
{/if}
</div>
<div class="value">
{#if !$current_exercice.solved}
{#if !$current_exercice.tried}
aucune équipe
{:else}
{$current_exercice.tried} {$current_exercice.tried == 1?"équipe":"équipes"}
{#if $my && $my.exercices[$current_exercice.id] && $my.exercices[$current_exercice.id].total_tries}
(cumulant {$my.exercices[$current_exercice.id].total_tries} {$my.exercices[$current_exercice.id].total_tries == 1?"tentative":"tentatives"})
{/if}
{/if}
{:else}
{$current_exercice.solved} {$current_exercice.solved == 1?"équipe":"équipes"}
{/if}
</div>
</div>
</Col>
</Row>
</Col>
{#if $my && $my.team_id}
<Col>
<Col xs="auto">
{#if $settings.acceptNewIssue}
<a href="issues/?eid={$current_exercice.id}" class="float-end btn btn-sm btn-warning">
<Icon name="bug" />