refactor: put label above input & improve spacing

Dataport · Nov 27, 2024 · 49b3638 · 49b3638
1 parent e6ae89e
commit 49b3638
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 9 deletions.
diff --git a/src/app/poll/mobile-poll-table.component.html b/src/app/poll/mobile-poll-table.component.html
@@ -4,19 +4,19 @@
          class="row g-0 toolbar d-lg-none p-1 invalid-message-highlight">
       <!-- add button ^ dropdown & edit button (only visible when _not_ in add or edit mode) -->
       @if (!formHelper.hasAddOrEditParticipantForm()) {
-        <div class="col-auto mx-1">
+        <div class="col-auto mx-2 d-flex align-items-center">
           <button
             (click)="formHelper.addParticipant()"
-            class="btn btn-round btn-secondary btn-add-participant"
+            class="btn btn-round btn-secondary btn-add-participant p-0 border-0"
             type="button"
             title="{{ 'poll.addParticipant' | translate}}"
           >
             <img aria-hidden="true" alt="" class="icon" src="assets/add-user.svg">
           </button>
         </div>
         @if (formHelper.hasParticipants()) {
-          <div class="col d-flex align-items-center">
-            <label class="sr-only" for="select-participant">{{ 'participant.select' | translate }}</label>
+          <div class="col m-1">
+            <label for="select-participant">{{ 'participant.select' | translate }}</label>
             <select class="form-control" formControlName="selectedParticipant" id="select-participant">
               @for (participant of formHelper.appointment.participants; track participant) {
                 <option
@@ -25,7 +25,7 @@
               }
             </select>
           </div>
-          <div class="col-auto px-1">
+          <div class="col-auto mx-2 d-flex align-items-end">
             <button
               (click)="formHelper.editParticipant(getSelectedParticipant())"
               class="btn btn-transparent p-0 border-0"
@@ -40,7 +40,7 @@
       <!-- text input and delete button (only visible when in add or edit mode) -->
       @if (formHelper.hasAddOrEditParticipantForm()) {
         <ng-container [formGroup]="formHelper.getParticipantForm()">
-          <div class="col d-flex align-items-center">
+          <div class="col m-1">
             <!-- text input for entering/editing the participant name -->
             <label for="name-add">{{ 'participant.name' | translate }}</label>
             <input
@@ -52,7 +52,7 @@
               id="name-add"
               type="text">
           </div>
-          <div class="col-auto px-1">
+          <div class="col-auto px-1 d-flex align-items-end">
             <!-- button to delete the currently edited participant -->
             <button
               (click)="formHelper.deleteEditParticipant(getSelectedParticipant())"

diff --git a/src/app/poll/mobile-poll-table.component.scss b/src/app/poll/mobile-poll-table.component.scss
@@ -14,11 +14,14 @@
   }
 }
 
+select {
+  height: 40px !important;
+}
+
 .btn.btn-transparent {
   display: inline-block;
   width: 45px;
-  height: 100%;
-  vertical-align: middle;
+  height: 47px;
   outline-offset: 0;
 }