Commit 2a03ffb1 authored by Loic Cesar Boubeji Tiangueu's avatar Loic Cesar Boubeji Tiangueu Committed by Christopher Mark Fullarton
Browse files

leaderboard fixed

parent 88979b7a
......@@ -13,7 +13,8 @@
<ng-container *ngIf="quizService.quiz?.sessionConfig?.nicks.memberGroups.length;else attendeeView">
<ng-container *ngFor="let group of memberGroupResults; let isLast = last">
<div [class.mb-5]="!isLast" class="d-flex align-items-center flex-wrap" *ngIf="getPercentForGroup(group) as percent;">
<div [class.mb-5]="!isLast" class="d-flex align-items-center flex-wrap"
*ngIf="getPercentForGroup(group) as percent;">
<p class="mx-2 text-right w-100">{{'component.leaderboard.team-result.score' | translate:{SCORE: group.score} }}</p>
<div [innerHTML]="parseNickname(group._id)" [title]="group._id"></div>
......@@ -29,6 +30,7 @@
aria-valuemax="100"
aria-valuemin="0"
role="progressbar">
<div class="rocket"></div>
</div>
<div *ngIf="!group.score"
......@@ -62,8 +64,14 @@
<div class="col-12">
<h5 *ngIf="!quizService.isOwner && hasOwnResponse()"
class="mb-0 mt-5 text-center">
<span>{{'component.leaderboard.own-rank.own-data' | translate:{INDEX: ownResponse.index + 1, SCORE: ownResponse.element?.score} }}</span>
<span *ngIf="ownResponse.closestOpponent">{{'component.leaderboard.own-rank.closest-opponent' | translate:{NAME: ownResponse.closestOpponent?.name, SCORE: ownResponse.closestOpponent?.score} }}</span>
<span>{{'component.leaderboard.own-rank.own-data' | translate:{
INDEX: ownResponse.index + 1,
SCORE: ownResponse.element?.score
} }}</span>
<span *ngIf="ownResponse.closestOpponent">{{'component.leaderboard.own-rank.closest-opponent' | translate:{
NAME: ownResponse.closestOpponent?.name,
SCORE: ownResponse.closestOpponent?.score
} }}</span>
</h5>
</div>
</div>
......
.progress {
line-height: 40px;
height: 40px;
> div {
overflow: visible;
justify-content: unset;
.rocket {
min-width: 9em;
width: calc(100% - 0.75em);
height: 1px;
position: relative;
overflow: visible;
transition: width 1s ease-in-out;
animation: slideIn 1s ease-in-out;
&::after {
content: "🚀";
font-size: 7em;
line-height: 0.35;
position: absolute;
transform: rotate(45deg);
right: 0;
}
}
}
}
@keyframes slideIn {
0% {
width: 9em;
}
100% {
width: calc(100% - 0.75em);
}
}
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment