Feature/570 sidenav styling (#628)

* fix linebreak of ordinal boxes * make ordinal keyresult responsive * fix overlapping labels on mobile view * align confidence label with stretch and score labels * set line height to 115 percent * fix alignment of close icon in dialogs * align close icons of sidenav with title * fix alignment of mat-icon in sidepanel with flex css * reduce size of margin top of dialog header * increase margin right of stretch star to center it on mobile
puzzle · Nov 29, 2023 · e0bf265 · e0bf265
1 parent 776ad5b
commit e0bf265
Show file tree

Hide file tree

Showing 11 changed files with 72 additions and 30 deletions.
diff --git a/frontend/src/app/keyresult-detail/keyresult-detail.component.html b/frontend/src/app/keyresult-detail/keyresult-detail.component.html
@@ -1,10 +1,10 @@
 <div class="w-100" cdkTrapFocus cdkTrapFocusAutoCapture="true" [attr.data-testId]="'side-panel'">
   <ng-container *ngIf="(keyResult$ | async)?.id && (keyResult$ | async) as keyResult; else spinner">
     <div *ngIf="keyResult" class="d-flex flex-column">
-      <div class="w-100 d-flex justify-content-between align-items-start mb-3">
-        <span class="title pt-2">{{ keyResult.title }}</span>
+      <div class="w-100 d-flex justify-content-between align-items-center mb-3">
+        <span class="title">{{ keyResult.title }}</span>
         <button class="d-flex" mat-icon-button (click)="backToOverview()" [attr.data-testId]="'close-drawer'">
-          <mat-icon>close</mat-icon>
+          <mat-icon class="d-flex justify-content-center align-items-center">close</mat-icon>
         </button>
       </div>
       <div class="me-3">
@@ -21,7 +21,7 @@
 
         <div class="scoring-section">
           <app-scoring class="scoring-detail" [keyResult]="keyResult" [isDetail]="true"></app-scoring>
-          <span class="text-small d-flex align-items-center flex-column mb-2 ms-3">
+          <span class="text-small d-flex align-items-center flex-column mb-2 ms-3 confidence-container">
             Confidence
             <app-confidence
               [checkIn]="keyResult.lastCheckIn!"
@@ -62,22 +62,22 @@
           </ng-container>
 
           <ng-container *ngIf="keyResult.keyResultType == 'ordinal' && castToOrdinal(keyResult) as keyResultOrdinal">
-            <div class="d-flex justify-content-between mb-4 w-100">
+            <div class="d-flex justify-content-between w-100 ordinal-div mb-4">
               <div class="ordinal-col h-auto">
                 <p class="ordinal-zone-title">Commit</p>
-                <div class="keyResult-detail-attribute-show p-3 ordinal-box linebreak">
+                <div class="keyResult-detail-attribute-show ordinal-box p-3">
                   {{ keyResultOrdinal.commitZone }}
                 </div>
               </div>
               <div class="ordinal-col h-auto">
                 <p class="ordinal-zone-title">Target</p>
-                <p class="keyResult-detail-attribute-show p-3 ordinal-box linebreak">
+                <p class="keyResult-detail-attribute-show ordinal-box p-3">
                   {{ keyResultOrdinal.targetZone }}
                 </p>
               </div>
               <div class="ordinal-col h-auto">
                 <p class="ordinal-zone-title">Stretch</p>
-                <p class="keyResult-detail-attribute-show p-3 ordinal-box linebreak">
+                <p class="keyResult-detail-attribute-show ordinal-box p-3">
                   {{ keyResultOrdinal.stretchZone }}
                 </p>
               </div>

diff --git a/frontend/src/app/keyresult-detail/keyresult-detail.component.scss b/frontend/src/app/keyresult-detail/keyresult-detail.component.scss
@@ -18,14 +18,6 @@
   width: 81.5%;
 }
 
-.confidence-container {
-  width: 18.5%;
-}
-
-.ordinal-scoring-boxes {
-  width: 31%;
-}
-
 .ordinal-col {
   width: 30%;
 }
@@ -35,7 +27,7 @@
 }
 
 .ordinal-box {
-  line-break: normal;
+  word-break: break-word;
 }
 
 .action-checkbox {
@@ -67,4 +59,26 @@
     justify-content: space-between;
     row-gap: 10px;
   }
+
+  .ordinal-div {
+    flex-direction: column;
+    align-items: center;
+    justify-content: space-around;
+    row-gap: 10px;
+    margin-bottom: 0 !important;
+  }
+  .ordinal-col {
+    width: 100%;
+  }
+
+  .keyResult-detail-attribute-show {
+    height: auto;
+  }
+
+  .confidence-container {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    margin-bottom: 0.065rem !important;
+  }
 }
diff --git a/frontend/src/app/keyresult/keyresult.component.html b/frontend/src/app/keyresult/keyresult.component.html
@@ -5,7 +5,7 @@
   (keydown.enter)="openDrawer()"
   tabindex="0"
 >
-  <div class="lh-base text-start linebreak line-height mb-2">{{ keyResult.title }}</div>
+  <div class="lh-base text-start linebreak mb-2">{{ keyResult.title }}</div>
   <app-scoring [keyResult]="keyResult" [isDetail]="false"></app-scoring>
   <div class="d-flex justify-content-between mt-1">
     <div class="d-flex justify-content-center">

diff --git a/frontend/src/app/objective-detail/objective-detail.component.html b/frontend/src/app/objective-detail/objective-detail.component.html
@@ -1,10 +1,15 @@
 <div class="w-100" cdkTrapFocus cdkTrapFocusAutoCapture="true">
   <ng-container *ngIf="(objective$ | async)?.id && (objective$ | async) as objective; else spinner">
     <div *ngIf="objective" class="d-flex flex-column">
-      <div class="w-100 d-flex justify-content-between align-items-start mb-3">
-        <span class="title pt-2">{{ objective.title }}</span>
-        <button class="d-flex" mat-icon-button (click)="backToOverview()" data-test-id="closeDrawer">
-          <mat-icon>close</mat-icon>
+      <div class="w-100 d-flex justify-content-between align-items-center mb-3">
+        <span class="title">{{ objective.title }}</span>
+        <button
+          class="d-flex align-items-center justify-content-center"
+          mat-icon-button
+          (click)="backToOverview()"
+          data-test-id="closeDrawer"
+        >
+          <mat-icon class="d-flex justify-content-center align-items-center">close</mat-icon>
         </button>
       </div>
 

diff --git a/frontend/src/app/objective/objective.component.html b/frontend/src/app/objective/objective.component.html
@@ -17,7 +17,7 @@
         class="icon col-1 ms-1 me-2"
         [src]="'assets/icons/' + objective.state"
       />
-      <header class="title col-10 ps-2 line-height">{{ objective.title }}</header>
+      <header class="title col-10 ps-2">{{ objective.title }}</header>
       <button
         *ngIf="isWritable"
         class="icon-button three-dot-menu"

diff --git a/frontend/src/app/shared/custom/dialog-header/dialog-header.component.html b/frontend/src/app/shared/custom/dialog-header/dialog-header.component.html
@@ -1,4 +1,4 @@
-<div class="d-flex justify-content-between align-items-center position-relative dialog-header">
+<div class="d-flex justify-content-between align-items-center position-relative dialog-header mt-1">
   <span class="title w-75">
     <span>{{ dialogTitle }}</span>
   </span>

diff --git a/frontend/src/app/shared/custom/dialog-header/dialog-header.component.scss b/frontend/src/app/shared/custom/dialog-header/dialog-header.component.scss
@@ -7,3 +7,9 @@
     margin-bottom: 1rem;
   }
 }
+
+mat-icon {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
diff --git a/frontend/src/app/shared/custom/scoring/scoring.component.html b/frontend/src/app/shared/custom/scoring/scoring.component.html
@@ -27,7 +27,7 @@
       <div [ngStyle]="{ display: stretched ? 'block' : 'none' }" class="stretch-div">&nbsp;</div>
     </div>
 
-    <div class="okr-stretch d-flex flex-column align-items-center mb-2">
+    <div class="okr-stretch d-flex flex-column align-items-center mb-1">
       <span class="text-center text-small">Stretch</span>
       <img
         [src]="'assets/icons/star-' + iconPath + '-icon.svg'"

diff --git a/frontend/src/app/shared/custom/scoring/scoring.component.scss b/frontend/src/app/shared/custom/scoring/scoring.component.scss
@@ -1,3 +1,8 @@
+.scoring-container {
+  display: flex;
+  align-items: center;
+}
+
 .okr-score-label {
   display: inline-grid;
   width: 30%;
@@ -51,3 +56,10 @@
   display: inline-block;
   text-align: end;
 }
+
+@media screen and (max-width: 580px) {
+  .okr-stretch {
+    margin-bottom: 0.065rem !important;
+    margin-right: 0.5rem;
+  }
+}
diff --git a/frontend/src/style/custom_angular.components.scss b/frontend/src/style/custom_angular.components.scss
@@ -31,7 +31,6 @@ mat-dialog-actions {
 }
 
 .mat-mdc-menu-item.objective-menu-option {
-  line-height: normal !important;
   font-size: 1rem;
   height: 2rem !important;
   min-height: 0 !important;

diff --git a/frontend/src/style/styles.scss b/frontend/src/style/styles.scss
@@ -61,6 +61,12 @@ body pzsh-backdrop {
   font-size: 1rem;
 }
 
+@media screen and (max-width: 580px) {
+  .text-small {
+    font-size: 0.8rem;
+  }
+}
+
 .dialog {
   max-width: 769px;
   box-shadow:
@@ -255,10 +261,10 @@ mat-form-field.quarter-filter .mat-mdc-text-field-wrapper {
   border: 3px solid var(--scrollbarBG);
 }
 
-.line-height {
-  line-height: normal !important;
-}
-
 .sub-title-keyresult {
   font-size: 0.9rem !important;
 }
+
+* {
+  line-height: 115% !important;
+}