sélecteurs sur ligne séparée

src/app/composants/participant-list/participant-list.component.html

@@ -1,50 +1,56 @@
 <app-menu></app-menu>
 <div id="main">
 <div class="card shadow" style="max-height:97vh;">
-	<div class="card-header"><span i18n>Liste des participants : {{pagination.nombreElements}}</span></div>
-	<div class="card-header shadow-sm">
-		<div class="row justify-content-between">
-			<div class="form-group col-sm-2 label-nobr">
-				<button type="button" (click)="goToRefreshListParticipant()" class="btn bg-gradient btn-primary btn-sm field-separate" style="margin-right: 5px;"><i class="fa-solid fa-rotate"></i>&nbsp;<span i18n>Actualiser</span></button>
-				<button type="button" (click)="goToNewParticipant()" class="btn bg-gradient btn-primary btn-sm field-separate" style="margin-right: 5px;" style="margin-right: 5px;"><i class="fa-solid fa-plus"></i>&nbsp;<span i18n>Créer</span></button>
-				<button type="button" (click)="topperArrives()" class="btn bg-gradient btn-primary btn-sm field-separate disabled" style="margin-right: 5px;" #boutonSetArrives i18n-tooltip tooltip="Déclarer les participants sélectionnés comme arrivés" placement="bottom" containor="body"><i class="fa-solid fa-flag-checkered"></i>&nbsp;<span i18n>Sont arrivés</span></button>
-			</div>
-			<div class="form-group col-sm-2 label-nobr">
-				<div class="input-group input-group-sn">
-					<button type="button" class="btn bg-gradient btn-secondary btn-sm field-separate" disabled><span i18n>Tri</span></button>
- 				  <select class="form-select form-select-sm field-separate" id="select_tri" [(ngModel)]="listeTri" (change)="trier($event)" placement="bottom">
-						<option value="0"><span i18n>par nom, prénom, pseudo</span></option>
-						<option value="1"><span i18n>par ordre d'inscription</span></option>
+	<div class="card-header">
+		<span i18n>Liste des participants : {{pagination.nombreElements}}</span>
+	</div>
+	<div class="card-header">
+		<div class="row justify-content-end">
+			<div class="form-group col-sm-3 label-nobr">
+			  <div class="input-group input-group-sn">
+				  <button type="button" class="btn bg-gradient btn-secondary btn-sm field-separate" disabled><span i18n>Tri</span></button>
+				  <select class="form-select form-select-sm field-separate" id="select_tri" [(ngModel)]="listeTri" (change)="trier($event)" placement="bottom">
+				 	  <option value="0"><span i18n>par nom, prénom, pseudo</span></option>
+					  <option value="1"><span i18n>par ordre d'inscription</span></option>
 				  </select>
 			  </div>
-			</div>
-			<div class="form-group col-sm-2 label-nobr">
-				<div class="input-group input-group-sn">
-					<button type="button" (click)="filtrageParNom()" class="btn bg-gradient btn-primary btn-sm field-separate"><i class="fa-solid fa-filter"></i>&nbsp;<span i18n>Filtrer</span></button>
-					<input type="text" (keydown.enter)="filtrageParNom()" class="form-control form-control-sm field-separate" id="input_nom" [(ngModel)]="nomFiltre" i18n-tooltip tooltip="Filtrer par nom, prenom, pseudonyme ou adresse email" placement="bottom" containor="body">
+		  </div>
+		  <div class="form-group col-sm-2 label-nobr">
+			  <div class="input-group input-group-sn">
+				  <button type="button" (click)="filtrageParNom()" class="btn bg-gradient btn-primary btn-sm field-separate"><i class="fa-solid fa-filter"></i>&nbsp;<span i18n>Filtrer</span></button>
+				  <input type="text" (keydown.enter)="filtrageParNom()" class="form-control form-control-sm field-separate" id="input_nom" [(ngModel)]="nomFiltre" i18n-tooltip tooltip="Filtrer par nom, prenom, pseudonyme ou adresse email" placement="bottom" containor="body">
 			  </div>
-			</div>
-			<div class="form-group col-sm-2 label-nobr">
-				<div class="input-group input-group-sn">
-					<button type="button" class="btn bg-gradient btn-secondary btn-sm field-separate" disabled><span i18n>Réglement</span></button>
+		  </div>
+		  <div class="form-group col-sm-2 label-nobr">
+			  <div class="input-group input-group-sn">
+				  <button type="button" class="btn bg-gradient btn-secondary btn-sm field-separate" disabled><span i18n>Réglement</span></button>
 				  <select class="form-select form-select-sm field-separate" id="select_statut" [(ngModel)]="statutFiltre" (change)="filtrageParStatut($event)">
-						<option value="0">Indifférent</option>
-						<option value="1"><span i18n>En attente</span></option>
+					  <option value="0">Indifférent</option>
+					  <option value="1"><span i18n>En attente</span></option>
 				  </select>
 			  </div>
-			</div>
-			<div class="form-group col-sm-2 label-nobr">
-				<div class="input-group input-group-sn">
-					<button type="button" class="btn bg-gradient btn-secondary btn-sm field-separate" disabled><span i18n>Arrivé(s)</span></button>
+		  </div>
+		  <div class="form-group col-sm-2 label-nobr">
+			  <div class="input-group input-group-sn">
+				  <button type="button" class="btn bg-gradient btn-secondary btn-sm field-separate" disabled><span i18n>Arrivé(s)</span></button>
 				  <select class="form-select form-select-sm field-separate" id="select_arrive" [(ngModel)]="arriveFiltre" (change)="filtrageParArrive($event)">
 					  <option value="0">Indifférent</option>
-						<option value="1"><span i18n>Non</span></option>
-						<option value="2"><span i18n>Oui</span></option>
+					  <option value="1"><span i18n>Non</span></option>
+					  <option value="2"><span i18n>Oui</span></option>
 				  </select>
 			  </div>
-			</div>
+		  </div>
+		  <div class="form-group col-sm-2 label-nobr">
+			  <button type="button" (click)="filtrageReset()" class="btn bg-gradient btn-secondary btn-sm field-separate" style="margin-right: 5px;"><i class="fa-solid fa-filter-circle-xmark"></i>&nbsp;<span i18n>Retirer les filtres</span></button>
+		  </div>
+		</div>
+	</div>
+	<div class="card-header shadow-sm">
+		<div class="row justify-content-start">
 			<div class="form-group col-sm-2 label-nobr">
-				<button type="button" (click)="filtrageReset()" class="btn bg-gradient btn-secondary btn-sm field-separate" style="margin-right: 5px;"><i class="fa-solid fa-filter-circle-xmark"></i>&nbsp;<span i18n>Retirer les filtres</span></button>
+				<button type="button" (click)="goToRefreshListParticipant()" class="btn bg-gradient btn-primary btn-sm field-separate" style="margin-right: 5px;"><i class="fa-solid fa-rotate"></i>&nbsp;<span i18n>Actualiser</span></button>
+				<button type="button" (click)="goToNewParticipant()" class="btn bg-gradient btn-primary btn-sm field-separate" style="margin-right: 5px;" style="margin-right: 5px;"><i class="fa-solid fa-plus"></i>&nbsp;<span i18n>Créer</span></button>
+				<button type="button" (click)="topperArrives()" class="btn bg-gradient btn-primary btn-sm field-separate disabled" style="margin-right: 5px;" #boutonSetArrives i18n-tooltip tooltip="Déclarer les participants sélectionnés comme arrivés" placement="bottom" containor="body"><i class="fa-solid fa-flag-checkered"></i>&nbsp;<span i18n>Sont arrivés</span></button>
 			</div>
    	</div>
 	</div>