ui: Redesign step attributs display

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

View File

@ -30,3 +30,15 @@ p img {
p:has(img) { p:has(img) {
text-align: center; 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;
}

View File

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