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,40 +55,87 @@
<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">
{$current_exercice.gain} {$current_exercice.gain==1?"point":"points"} <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} {#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}
{#if $current_exercice.curcoeff != 1.0 || $settings.exerciceCurrentCoefficient != 1.0} {#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} {/if}
</li> </div>
<li> </Col>
<strong>Tenté par&nbsp;:</strong> <Col class="d-none d-md-block">
{#if !$current_exercice.tried} <div class="level-item">
aucune équipe <div class="heading">
{:else} Tenté par
{$current_exercice.tried} {$current_exercice.tried == 1?"équipe":"équipes"} </div>
{#if $my && $my.exercices[$current_exercice.id] && $my.exercices[$current_exercice.id].total_tries} <div class="value">
(cumulant {$my.exercices[$current_exercice.id].total_tries} {$my.exercices[$current_exercice.id].total_tries == 1?"tentative":"tentatives"}) {#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}
{/if} </div>
</li> </div>
<li> </Col>
<strong>Résolu par&nbsp;:</strong> <Col class="d-none d-md-block">
{#if !$current_exercice.solved} <div class="level-item">
aucune équipe <div class="heading">
{:else} Résolu par
{$current_exercice.solved} {$current_exercice.solved == 1?"équipe":"équipes"} </div>
{/if} <div class="value">
</li> {#if !$current_exercice.solved}
</ul> 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> </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" />