refactor styles of dialogs

puzzle · Oct 22, 2024 · a43a92e · a43a92e
1 parent cb9f330
commit a43a92e
Show file tree

Hide file tree

Showing 14 changed files with 60 additions and 125 deletions.
diff --git a/frontend/src/app/components/check-in-history-dialog/check-in-history-dialog.component.html b/frontend/src/app/components/check-in-history-dialog/check-in-history-dialog.component.html
@@ -1,7 +1,7 @@
 <div class="ps-4 pt-3 pe-4">
   <app-dialog-header [dialogTitle]="'Check-in History'"></app-dialog-header>
   <div
-    class="d-flex justify-content-start flex-column gap-4 text-black dialog-content overflow-y-scroll text-break mt-3"
+    class="d-flex justify-content-start flex-column gap-4 text-black overflow-y-scroll text-break mt-3"
     tabindex="-1"
   >
     <ng-container

diff --git a/frontend/src/app/components/check-in-history-dialog/check-in-history-dialog.component.scss b/frontend/src/app/components/check-in-history-dialog/check-in-history-dialog.component.scss
@@ -28,58 +28,6 @@
   width: 81%;
 }
 
-.dialog-content {
-  max-height: 28.5vh;
-}
-
 .close-button {
   margin-top: 32px;
 }
-
-@media only screen and (max-width: 690px) {
-  .label-width {
-    width: 60%;
-  }
-}
-
-@media only screen and (min-height: 600px) and (max-width: 450px) {
-  .dialog-content {
-    max-height: 500px;
-  }
-}
-
-@media only screen and (min-height: 700px) and (max-width: 450px) {
-  .dialog-content {
-    max-height: 590px;
-  }
-}
-
-@media only screen and (min-height: 800px) and (max-width: 450px) {
-  .dialog-content {
-    max-height: 625px;
-  }
-}
-
-@media only screen and (min-height: 850px) and (max-width: 450px) {
-  .dialog-content {
-    max-height: 685px;
-  }
-}
-
-@media only screen and (min-height: 875px) and (max-width: 450px) {
-  .dialog-content {
-    max-height: 715px;
-  }
-}
-
-@media only screen and (min-height: 900px) and (max-width: 450px) {
-  .dialog-content {
-    max-height: 750px;
-  }
-}
-
-@media only screen and (min-height: 1000px) and (max-width: 450px) {
-  .dialog-content {
-    max-height: 550px;
-  }
-}
diff --git a/frontend/src/app/components/checkin/check-in-form/check-in-form.component.html b/frontend/src/app/components/checkin/check-in-form/check-in-form.component.html
@@ -5,7 +5,7 @@
 
 <mat-dialog-content>
   <div
-    class="d-flex flex-column scroll-shadows overflow-x-hidden p-2 ps-0 justify-content-between align-items-center dialog-content"
+    class="d-flex flex-column scroll-shadows overflow-x-hidden p-2 ps-0 justify-content-between align-items-center"
     tabindex="-1"
   >
     <form [formGroup]="dialogForm" class="d-flex flex-column flex-wrap container p-0">

diff --git a/frontend/src/app/components/checkin/check-in-form/check-in-form.component.scss b/frontend/src/app/components/checkin/check-in-form/check-in-form.component.scss
@@ -16,7 +16,3 @@
 app-check-in-form-ordinal {
   padding-top: 0.1rem;
 }
-
-.dialog-content {
-  max-height: 45vh;
-}
diff --git a/frontend/src/app/shared/dialog/complete-dialog/complete-dialog.component.html b/frontend/src/app/shared/dialog/complete-dialog/complete-dialog.component.html
@@ -3,60 +3,58 @@
 </section>
 
 <mat-dialog-content>
-  <div class="dialog-content">
-    <div class="input-style gap-2 col-12">
-      <p class="fs-6 text-black">Objective</p>
-      <p class="linebreak bg-display-element py-2 ps-2 fs-6 fw-normal text-black">{{ data.objectiveTitle }}</p>
-    </div>
+  <div class="input-style gap-2 col-12">
+    <p class="fs-6 text-black">Objective</p>
+    <p class="linebreak bg-display-element py-2 ps-2 fs-6 fw-normal text-black">{{ data.objectiveTitle }}</p>
+  </div>
 
-    <form [formGroup]="completeForm">
-      <div class="input-style gap-2 col-12">
-        <label class="text-black">Bewertung</label>
-        <div class="d-flex gap-3">
-          <div
-            class="successful w-50 valuation-card card-hover-successful"
-            [ngClass]="{
-              'active-successful': completeForm.value.isSuccessful == true,
-              'non-active-successful': completeForm.value.isSuccessful === false,
-            }"
-            (click)="switchSuccessState('successful')"
-            (keydown.enter)="switchSuccessState('successful')"
-            [attr.data-testId]="'successful'"
-            tabindex="0"
-          >
-            Objective erreicht
-          </div>
-          <div
-            class="not-successful w-50 valuation-card card-hover-not-successful"
-            [ngClass]="{
-              'active-not-successful': completeForm.value.isSuccessful === false,
-              'non-active-not-successful': completeForm.value.isSuccessful == true,
-            }"
-            (click)="switchSuccessState('notSuccessful')"
-            (keydown.enter)="switchSuccessState('notSuccessful')"
-            [attr.data-testId]="'not-successful'"
-            tabindex="0"
-          >
-            Objective nicht erreicht
-          </div>
+  <form [formGroup]="completeForm">
+    <div class="input-style gap-2 col-12">
+      <label class="text-black">Bewertung</label>
+      <div class="d-flex gap-3">
+        <div
+          class="successful w-50 valuation-card card-hover-successful"
+          [ngClass]="{
+            'active-successful': completeForm.value.isSuccessful == true,
+            'non-active-successful': completeForm.value.isSuccessful === false,
+          }"
+          (click)="switchSuccessState('successful')"
+          (keydown.enter)="switchSuccessState('successful')"
+          [attr.data-testId]="'successful'"
+          tabindex="0"
+        >
+          Objective erreicht
+        </div>
+        <div
+          class="not-successful w-50 valuation-card card-hover-not-successful"
+          [ngClass]="{
+            'active-not-successful': completeForm.value.isSuccessful === false,
+            'non-active-not-successful': completeForm.value.isSuccessful == true,
+          }"
+          (click)="switchSuccessState('notSuccessful')"
+          (keydown.enter)="switchSuccessState('notSuccessful')"
+          [attr.data-testId]="'not-successful'"
+          tabindex="0"
+        >
+          Objective nicht erreicht
         </div>
       </div>
+    </div>
 
-      <div class="input-style gap-2 col-12">
-        <label for="comment" class="text-black">Kommentar (optional)</label>
-        <textarea
-          class="big-dialog-form-field"
-          formControlName="comment"
-          [attr.data-testId]="'completeComment'"
-          [ngClass]="formInputCheck(completeForm, 'comment')"
-          id="comment"
-        ></textarea>
-        <mat-error *ngIf="hasFormFieldErrors(completeForm, 'comment')">
-          <span>{{ getErrorMessage("MAX_VALUE", "Kommentar", 4096) }}</span>
-        </mat-error>
-      </div>
-    </form>
-  </div>
+    <div class="input-style gap-2 col-12">
+      <label for="comment" class="text-black">Kommentar (optional)</label>
+      <textarea
+        class="big-dialog-form-field"
+        formControlName="comment"
+        [attr.data-testId]="'completeComment'"
+        [ngClass]="formInputCheck(completeForm, 'comment')"
+        id="comment"
+      ></textarea>
+      <mat-error *ngIf="hasFormFieldErrors(completeForm, 'comment')">
+        <span>{{ getErrorMessage("MAX_VALUE", "Kommentar", 4096) }}</span>
+      </mat-error>
+    </div>
+  </form>
 </mat-dialog-content>
 
 <mat-dialog-actions>

diff --git a/frontend/src/app/shared/dialog/complete-dialog/complete-dialog.component.scss b/frontend/src/app/shared/dialog/complete-dialog/complete-dialog.component.scss
@@ -73,7 +73,3 @@ div:hover {
   @extend .card-shadow;
   background-color: #ba3838;
 }
-
-.dialog-content {
-  max-height: 30vh;
-}
diff --git a/frontend/src/app/shared/dialog/objective-dialog/objective-form.component.html b/frontend/src/app/shared/dialog/objective-dialog/objective-form.component.html
@@ -20,9 +20,9 @@
 </section>
 
 <mat-dialog-content>
-  <div class="dialog-content" tabindex="-1">
+  <div tabindex="-1">
     <div class="d-flex justify-content-between align-items-center pt-2 ps-0">
-      <form [formGroup]="objectiveForm" class="d-flex flex-column flex-wrap container p-0">
+      <form [formGroup]="objectiveForm" class="d-flex flex-column flex-wrap container-fluid p-0">
         <div class="input-style gap-2 col-12">
           <label class="text-black" for="title">Titel</label>
           <textarea

diff --git a/frontend/src/app/shared/dialog/objective-dialog/objective-form.component.scss b/frontend/src/app/shared/dialog/objective-dialog/objective-form.component.scss
@@ -36,7 +36,3 @@
 .add-keyresult-text {
   margin-left: -10px;
 }
-
-.dialog-content {
-  max-height: 35vh;
-}
diff --git a/frontend/src/app/team-management/add-edit-team-dialog/add-edit-team-dialog.component.html b/frontend/src/app/team-management/add-edit-team-dialog/add-edit-team-dialog.component.html
@@ -3,7 +3,7 @@
 </section>
 
 <mat-dialog-content>
-  <div class="dialog-content" tabindex="-1">
+  <div tabindex="-1">
     <div class="w-100 d-flex justify-content-between align-items-center">
       <form [formGroup]="teamForm" class="d-flex flex-column flex-wrap container p-0">
         <div class="input-style gap-2 col-12">

diff --git a/frontend/src/app/team-management/add-edit-team-dialog/add-edit-team-dialog.component.scss b/frontend/src/app/team-management/add-edit-team-dialog/add-edit-team-dialog.component.scss
@@ -13,7 +13,3 @@ mat-select:hover {
   outline: 1px solid #5d6974;
   overflow-y: visible;
 }
-
-.dialog-content {
-  max-height: 30vh;
-}
diff --git a/...rc/app/team-management/add-member-to-team-dialog/add-member-to-team-dialog.component.html b/...rc/app/team-management/add-member-to-team-dialog/add-member-to-team-dialog.component.html
@@ -3,7 +3,7 @@
 </section>
 
 <mat-dialog-content>
-  <div class="dialog-content" tabindex="-1">
+  <div tabindex="-1">
     <div class="w-100 d-flex justify-content-between align-items-center">
       <form class="example-form w-100">
         <mat-form-field

diff --git a/frontend/src/app/team-management/invite-user-dialog/invite-user-dialog.component.html b/frontend/src/app/team-management/invite-user-dialog/invite-user-dialog.component.html
@@ -6,7 +6,7 @@
   </div>
 </section>
 <mat-dialog-content>
-  <div class="dialog-content" tabindex="-1">
+  <div tabindex="-1">
     <form>
       @for (userFormGroup of form.controls; track $index) {
         <div class="w-100 d-flex justify-content-between align-items-center pe-4">

diff --git a/frontend/src/style/custom_angular.components.scss b/frontend/src/style/custom_angular.components.scss
@@ -58,6 +58,10 @@ mat-dialog-actions {
   padding: 0 1.62rem 0 1.62rem !important;
 }
 
+mat-dialog-content {
+  //max-height: 30vh;
+}
+
 //Offset for top bar
 .cdk-overlay-backdrop.cdk-overlay-dark-backdrop.cdk-overlay-backdrop-showing {
   margin-top: $top-bar-height;

diff --git a/frontend/src/style/styles.scss b/frontend/src/style/styles.scss
@@ -372,6 +372,7 @@ table.okr-table {
 }
 
 .okr-dialog-panel {
+  margin-top: $top-bar-height;
   @extend .col-12;
 
   @extend .col-md-6;