Make required option visible on smaller screens in edit Feature - #417

Author: thkoehler11

src/app/modules/query-editor/components/editor-content/profile/header/profile-header.component.scss

@@ -8,7 +8,7 @@
 
 .display-container {
   border-right: 4px solid rgba(90, 121, 175, 0.1);
-  padding: 20px;
+  padding: 0 20px;
   font-size: larger;
   width: 100%;
   color: black;

src/app/modules/shared-filter/components/edit-fields/edit-fields.component.html

@@ -1,62 +1,64 @@
 <div fxLayout="row" fxLayoutAlign="start" class="container">
   <div fxLayout="column" style="width: 100%">
-    <num-section-name>
-      {{ 'EDITOR.CONTENT.PROFILE.FIELDS.HEADER' | translate }}
-    </num-section-name>
     <div class="main-content">
-      <div class="width-70">
-        <div *ngFor="let singleTree of tree">
-          <num-tree
-            [treeData]="singleTree"
-            (selectedCheckbox)="setSelectedFieldElement($event)"
-          ></num-tree>
-        </div>
-      </div>
-    </div>
-  </div>
-  <div class="sidebar" *ngIf="selectedBasicFields">
-    <div fxLayout="column" class="height-100">
-      <div fxLayout="row">
+      <div class="field-box">
         <num-section-name>
-          {{ 'EDITOR.CONTENT.PROFILE.FIELDS.REQUIRED' | translate }}
+          {{ 'EDITOR.CONTENT.PROFILE.FIELDS.HEADER' | translate }}
         </num-section-name>
+        <div class="table-box">
+          <div *ngFor="let singleTree of tree">
+            <num-tree
+              [treeData]="singleTree"
+              (selectedCheckbox)="setSelectedFieldElement($event)"
+            ></num-tree>
+          </div>
+        </div>
       </div>
-      <div class="selected-fields-box">
-        <div
-          *ngFor="let selectedField of selectedBasicFields; let index = index"
-          fxLayout="row"
-          fxLayoutAlign="start center"
-          class="selected-filter-container"
-        >
-          <div>
-            <mat-checkbox
-              [checked]="selectedField.getMustHave()"
-              (change)="setFieldAsRequired(selectedField)"
-            >
-            </mat-checkbox>
+      <div class="sidebar" *ngIf="selectedBasicFields">
+        <div fxLayout="column" class="height-100">
+          <div fxLayout="row">
+            <num-section-name>
+              {{ 'EDITOR.CONTENT.PROFILE.FIELDS.REQUIRED' | translate }}
+            </num-section-name>
           </div>
-          <div class="display-part">
-            <span
-              matTooltipPosition="below"
-              matTooltipShowDelay="300"
-              [matTooltip]="selectedField.getDisplay() | displayTranslation"
+          <div class="selected-fields-box">
+            <div
+              *ngFor="let selectedField of selectedBasicFields; let index = index"
+              fxLayout="row"
+              fxLayoutAlign="start center"
+              class="selected-filter-container"
             >
-              {{ selectedField.getDisplay() | displayTranslation }}
-            </span>
-          </div>
-          <div
-            *ngIf="!selectedField.getIsRequired()"
-            fxLayout="row"
-            fxFlex="10"
-            fxLayoutAlign="end center"
-            class="padding-right-10"
-          >
-            <fa-icon
-              [icon]="'times'"
-              size="1x"
-              (click)="removeSelectedField(selectedField)"
-              class="delete-button"
-            ></fa-icon>
+              <div>
+                <mat-checkbox
+                  [checked]="selectedField.getMustHave()"
+                  (change)="setFieldAsRequired(selectedField)"
+                >
+                </mat-checkbox>
+              </div>
+              <div class="display-part">
+                <span
+                  matTooltipPosition="below"
+                  matTooltipShowDelay="300"
+                  [matTooltip]="selectedField.getDisplay() | displayTranslation"
+                >
+                  {{ selectedField.getDisplay() | displayTranslation }}
+                </span>
+              </div>
+              <div
+                *ngIf="!selectedField.getIsRequired()"
+                fxLayout="row"
+                fxFlex="10"
+                fxLayoutAlign="end center"
+                class="padding-right-10"
+              >
+                <fa-icon
+                  [icon]="'times'"
+                  size="1x"
+                  (click)="removeSelectedField(selectedField)"
+                  class="delete-button"
+                ></fa-icon>
+              </div>
+            </div>
           </div>
         </div>
       </div>

src/app/modules/shared-filter/components/edit-fields/edit-fields.component.scss

@@ -63,12 +63,19 @@
 }
 
 .main-content {
-  flex-grow: 1;
-  padding: 1rem;
+  display: flex;
+  padding: 0 1rem;
   height: 100%;
-  overflow-y: auto;
+  overflow-y: hidden;
 }
 
-.width-70 {
+.field-box {
   width: 70%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+.table-box {
+  height: auto;
+  overflow: auto;
 }