From a525c6fe3ece1346bd2d7b987b4de2677dba6ff0 Mon Sep 17 00:00:00 2001
From: Enea Jahollari <enea.jahollari@4science.com>
Date: Mon, 29 May 2023 15:47:16 +0200
Subject: [PATCH] Fix sections alignment

---
 ...cess-control-form-container.component.html | 118 ++++++++++--------
 1 file changed, 64 insertions(+), 54 deletions(-)

diff --git a/src/app/shared/access-control-form-container/access-control-form-container.component.html b/src/app/shared/access-control-form-container/access-control-form-container.component.html
index 5c2c32a45b..7ee49ce26e 100644
--- a/src/app/shared/access-control-form-container/access-control-form-container.component.html
+++ b/src/app/shared/access-control-form-container/access-control-form-container.component.html
@@ -8,64 +8,72 @@
       </ds-alert>
 
       <div class="row mt-5">
-        <div class="col-12 col-md-6 border-right">
-          <div class="d-flex align-items-center">
-            <h4 class="mb-0 mr-4">
-              {{ 'access-control-item-header-toggle' | translate }}
-            </h4>
-            <ui-switch
-              [(ngModel)]="state.item.toggleStatus"
-              (ngModelChange)="handleStatusChange('item', $event)">
-            </ui-switch>
-          </div>
+        <div class="col-12 col-md-6 border-right d-flex flex-column justify-content-between">
 
-          <div class="row mt-3">
-            <div class="col-12 col-md-3">
-              {{ 'access-control-mode' | translate }}
+          <div>
+            <div class="d-flex align-items-center">
+              <h4 class="mb-0 mr-4">
+                {{ 'access-control-item-header-toggle' | translate }}
+              </h4>
+              <ui-switch
+                [(ngModel)]="state.item.toggleStatus"
+                (ngModelChange)="handleStatusChange('item', $event)">
+              </ui-switch>
             </div>
-            <div class="col-12 col-md-8">
-              <div class="form-check">
-                <input class="form-check-input" type="radio"
-                       name="itemMode" id="itemReplace" value="replace"
-                       [disabled]="!state.item.toggleStatus"
-                       [(ngModel)]="state.item.accessMode">
-                <label class="form-check-label" for="itemReplace">
-                  {{'access-control-replace-all' | translate}}
-                </label>
+
+            <div class="row mt-3">
+              <div class="col-12 col-md-3">
+                {{ 'access-control-mode' | translate }}
               </div>
-              <div class="form-check">
-                <input class="form-check-input" type="radio"
-                       name="itemMode" id="itemAdd" value="add"
-                       [disabled]="!state.item.toggleStatus"
-                       [(ngModel)]="state.item.accessMode">
-                <label class="form-check-label" for="itemAdd">
-                  {{'access-control-add-to-existing' | translate}}
-                </label>
+              <div class="col-12 col-md-8">
+                <div class="form-check">
+                  <input class="form-check-input" type="radio"
+                         name="itemMode" id="itemReplace" value="replace"
+                         [disabled]="!state.item.toggleStatus"
+                         [(ngModel)]="state.item.accessMode">
+                  <label class="form-check-label" for="itemReplace">
+                    {{'access-control-replace-all' | translate}}
+                  </label>
+                </div>
+                <div class="form-check">
+                  <input class="form-check-input" type="radio"
+                         name="itemMode" id="itemAdd" value="add"
+                         [disabled]="!state.item.toggleStatus"
+                         [(ngModel)]="state.item.accessMode">
+                  <label class="form-check-label" for="itemAdd">
+                    {{'access-control-add-to-existing' | translate}}
+                  </label>
+                </div>
               </div>
             </div>
           </div>
 
-          <h5 class="mt-3">{{'access-control-access-conditions' | translate}}</h5>
+          <div>
+            <h5 class="mt-3">{{'access-control-access-conditions' | translate}}</h5>
 
-          <ds-access-control-array-form
-            #itemAccessCmp
-            [mode]="state.item.accessMode"
-            [dropdownOptions]="(dropdownData$ | async)?.itemAccessConditionOptions || []">
-          </ds-access-control-array-form>
+            <ds-access-control-array-form
+              #itemAccessCmp
+              [mode]="state.item.accessMode"
+              [dropdownOptions]="(dropdownData$ | async)?.itemAccessConditionOptions || []">
+            </ds-access-control-array-form>
+          </div>
 
         </div>
-        <div class="col-12 col-md-6">
-          <div class="d-flex align-items-center">
-            <h4 class="mb-0 mr-4">
-              {{'access-control-bitstream-header-toggle' | translate}}
-            </h4>
-            <ui-switch
-              [(ngModel)]="state.bitstream.toggleStatus"
-              (ngModelChange)="handleStatusChange('bitstream', $event)">
-            </ui-switch>
-          </div>
 
-          <div *ngIf="showLimitToSpecificBitstreams" class="row mt-3">
+        <div class="col-12 col-md-6 d-flex flex-column justify-content-between">
+
+          <div>
+            <div class="d-flex align-items-center">
+              <h4 class="mb-0 mr-4">
+                {{'access-control-bitstream-header-toggle' | translate}}
+              </h4>
+              <ui-switch
+                [(ngModel)]="state.bitstream.toggleStatus"
+                (ngModelChange)="handleStatusChange('bitstream', $event)">
+              </ui-switch>
+            </div>
+
+            <div *ngIf="showLimitToSpecificBitstreams" class="row mt-3">
             <div class="col-12">
               {{'access-control-limit-to-specific' | translate}}
             </div>
@@ -99,6 +107,7 @@
                 </label>
               </div>
             </div>
+            </div>
           </div>
 
           <div class="row mt-3">
@@ -127,14 +136,15 @@
             </div>
           </div>
 
-          <h5 class="mt-3">{{'access-control-access-conditions' | translate}}</h5>
-
-          <ds-access-control-array-form
-            #bitstreamAccessCmp
-            [mode]="state.bitstream.accessMode"
-            [dropdownOptions]="(dropdownData$ | async)?.bitstreamAccessConditionOptions || []">
-          </ds-access-control-array-form>
+          <div>
+            <h5 class="mt-3">{{'access-control-access-conditions' | translate}}</h5>
 
+            <ds-access-control-array-form
+              #bitstreamAccessCmp
+              [mode]="state.bitstream.accessMode"
+              [dropdownOptions]="(dropdownData$ | async)?.bitstreamAccessConditionOptions || []">
+            </ds-access-control-array-form>
+          </div>
         </div>
       </div>