result simple bar width calculations

src/app/features/administration/stepper/stepper.component.html

@@ -109,7 +109,7 @@
 		[(visible)]="display_cancel_dialog"
 		[breakpoints]="{ '960px': '75vw' }"
 		[style]="{ width: '50vw', 'border-radius': '1rem' }"
-		[styleClass]="'round-borders'"
+		[styleClass]="'roundToPercentWidth-borders'"
 		[draggable]="false"
 		[showHeader]="false"
 		[resizable]="false"

src/app/features/consultation/choice-table/choice-table.component.html

@@ -4,8 +4,13 @@
 			{{ 'participation.yes' | translate }}
 		</div>
 		<div class="column">
-			<div class="bar has-text-centered has-background-yes" *ngIf="choice.yes">
+			<div
+				class="bar has-text-centered has-background-yes"
+				*ngIf="choice.yes"
+				[style.width]="roundToPercentWidth(choice.yes.count)"
+			>
 				{{ choice.yes.count }}
+				<!--				sur {{countMaxVotesForThisAnswer}}. {{roundToPercentWidth(choice.yes.count) }}-->
 			</div>
 		</div>
 	</div>
@@ -14,7 +19,10 @@
 			{{ 'participation.maybe' | translate }}
 		</div>
 		<div class="column">
-			<div class="bar has-text-centered has-background-maybe">
+			<div
+				class="bar has-text-centered has-background-maybe"
+				[style.width]="roundToPercentWidth(choice.maybe.count)"
+			>
 				{{ choice.maybe.count }}
 			</div>
 		</div>
@@ -24,7 +32,7 @@
 			{{ 'participation.no' | translate }}
 		</div>
 		<div class="column">
-			<div class="bar has-text-centered has-background-no">
+			<div class="bar has-text-centered has-background-no" [style.width]="roundToPercentWidth(choice.no.count)">
 				{{ choice.no.count }}
 			</div>
 		</div>

src/app/features/consultation/choice-table/choice-table.component.ts

@@ -9,7 +9,13 @@ import { Choice } from '../../../core/models/choice.model';
 export class ChoiceTableComponent implements OnInit {
 	@Input() detailledDisplay: boolean;
 	@Input() choice: Choice;
+	@Input() countMaxVotesForThisAnswer: number = 5;
+
 	constructor() {}
 
 	ngOnInit(): void {}
+
+	roundToPercentWidth(number: number) {
+		return Math.ceil((number / this.countMaxVotesForThisAnswer) * 100) + '%';
+	}
 }

src/app/features/consultation/consultation.component.html

@@ -106,18 +106,18 @@
 
 			<app-poll-results-dinum [poll]="poll" [detailledDisplay]="detailledDisplay"></app-poll-results-dinum>
 		</section>
-		<section class="poll-comments">
+		<!--		<section class="poll-comments">-->
-			<h2 class="title is-3">
+		<!--			<h2 class="title is-3">-->
-				{{ 'participation.comments' | translate }}
+		<!--				{{ 'participation.comments' | translate }}-->
-			</h2>
+		<!--			</h2>-->
-			<div class="rounded-block">
+		<!--			<div class="rounded-block">-->
-				<!--					*ngIf="poll.allow_comments"-->
+		<!--				&lt;!&ndash;					*ngIf="poll.allow_comments"&ndash;&gt;-->
-				<app-comments [poll]="poll" [vote_stack]="storageService.vote_stack"></app-comments>
+		<!--				<app-comments [poll]="poll" [vote_stack]="storageService.vote_stack"></app-comments>-->
-				<div class="alert has-background-info" *ngIf="!poll.allow_comments">
+		<!--				<div class="alert has-background-info" *ngIf="!poll.allow_comments">-->
-					Ce sondage ne permet pas d'ajouter de commentaires
+		<!--					Ce sondage ne permet pas d'ajouter de commentaires-->
-				</div>
+		<!--				</div>-->
-			</div>
+		<!--			</div>-->
-		</section>
+		<!--		</section>-->
 	</div>
 </section>
 <section class="loadin_poll" *ngIf="fetching">

src/app/features/consultation/poll-results-dinum/poll-results-dinum.component.html

@@ -31,7 +31,11 @@
 					</div>
 					<div class="choice-header" *ngIf="poll.max_score > 0"></div>
 
-					<app-choice-table [choice]="choice" [detailledDisplay]="detailledDisplay"></app-choice-table>
+					<app-choice-table
+						[choice]="choice"
+						[detailledDisplay]="detailledDisplay"
+						[countMaxVotesForThisAnswer]="getMax(choice)"
+					></app-choice-table>
 				</div>
 			</div>
 		</div>

src/app/features/consultation/poll-results-dinum/poll-results-dinum.component.ts

@@ -3,6 +3,7 @@ import { Poll } from '../../../core/models/poll.model';
 import { Answer } from '../../../core/enums/answer.enum';
 import { ModalService } from '../../../core/services/modal.service';
 import { StorageService } from '../../../core/services/storage.service';
+import { Choice, ChoiceGroup } from '../../../core/models/choice.model';
 
 @Component({
 	selector: 'app-poll-results-dinum',
@@ -12,7 +13,6 @@ import { StorageService } from '../../../core/services/storage.service';
 export class PollResultsDinumComponent implements OnInit {
 	@Input() public poll: Poll;
 	@Input() public detailledDisplay: boolean = false;
-	public answerEnum = Answer;
 	constructor(private modalService: ModalService, private storageService: StorageService) {}
 
 	ngOnInit(): void {}
@@ -24,4 +24,8 @@ export class PollResultsDinumComponent implements OnInit {
 	showAsDate(date_string: string) {
 		return new Date(date_string);
 	}
+
+	getMax(c: Choice) {
+		return Math.max(c[Answer.YES].count, c[Answer.MAYBE].count, c[Answer.NO].count);
+	}
 }

src/styles/partials/_forms.scss

@@ -360,6 +360,9 @@ label {
 	}
 }
 
+.people {
+	max-width: $main-column-width/2;
+}
 .bar-div {
 	padding: 0.25rem 0.025rem;
 	text-align: center;