Fix a few tags and rename a css class

puzzle · Oct 16, 2024 · f7d2a80 · f7d2a80
1 parent db6bcdf
commit f7d2a80
Show file tree

Hide file tree

Showing 10 changed files with 23 additions and 19 deletions.
diff --git a/frontend/src/app/components/application-banner/application-banner.component.html b/frontend/src/app/components/application-banner/application-banner.component.html
@@ -1,4 +1,5 @@
 <div id="okrBanner" #okrBanner>
+  <!-- Possibly cleanup a few div's here? -->
   <div class="d-flex flex-row">
     <div [ngClass]="isMobileDevice() ? 'filters' : 'none'" class="w-100 h-100 m-0 d-flex filters" slot="content">
       <section class="d-none d-md-flex">

diff --git a/frontend/src/app/components/application-top-bar/application-top-bar.component.html b/frontend/src/app/components/application-top-bar/application-top-bar.component.html
@@ -1,4 +1,4 @@
-<div id="topBarHeight">
+<header id="topBarHeight">
   <div id="okrTopbar">
     <span class="d-flex h-100 align-items-center ps-4">
       <img alt="okr-logo" height="32" ngSrc="{{ this.logoSrc$ | async }}" width="140" />
@@ -49,4 +49,4 @@
       </button>
     </mat-menu>
   </div>
-</div>
+</header>
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
@@ -1,6 +1,5 @@
 <section mat-dialog-title>
-  <app-dialog-header *ngIf="!this.checkIn.id" [dialogTitle]="'Check-in erfassen'"></app-dialog-header>
-  <app-dialog-header *ngIf="this.checkIn.id" [dialogTitle]="'Check-in bearbeiten'"></app-dialog-header>
+  <app-dialog-header [dialogTitle]="checkIn.id ? 'Check-in bearbeiten' : 'Check-in erfassen'"></app-dialog-header>
 </section>
 
 <mat-dialog-content>

diff --git a/frontend/src/app/components/confidence/confidence.component.html b/frontend/src/app/components/confidence/confidence.component.html
@@ -7,7 +7,9 @@
     class="bg-inherit d-flex justify-content-center align-items-center"
     [ngClass]="[edit ? 'keyResult-attribute-edit' : 'keyResult-attribute-show', isDetail ? 'height' : '']"
   >
-    <p class="fw-normal text-black sub-title-keyresult" data-testid="confidence">{{ checkIn.confidence }}/{{ max }}</p>
+    <span class="fw-normal text-black keyResult-overview-attribute" data-testid="confidence"
+      >{{ checkIn.confidence }}/{{ max }}</span
+    >
   </div>
 
   <mat-slider

diff --git a/frontend/src/app/components/keyresult-detail/keyresult-detail.component.html b/frontend/src/app/components/keyresult-detail/keyresult-detail.component.html
@@ -8,7 +8,7 @@ <h3 class="title">{{ keyResult.title }}</h3>
         </button>
       </div>
       <div class="me-3">
-        <div class="d-flex justify-content-between mb-3">
+        <section class="d-flex justify-content-between mb-3">
           <div>
             {{ "KEY_RESULT_TYPE." + keyResult.keyResultType | translate }}
           </div>
@@ -17,9 +17,9 @@ <h3 class="title">{{ keyResult.title }}</h3>
             <p *ngIf="keyResult.owner as owner">{{ owner.firstname }} {{ owner.lastname }}</p>
           </div>
           <span *ngIf="keyResult?.objective?.quarter as quarter">{{ quarter.label }}</span>
-        </div>
+        </section>
 
-        <div class="scoring-section">
+        <section 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 confidence-container">
             Confidence
@@ -29,7 +29,7 @@ <h3 class="title">{{ keyResult.title }}</h3>
               class="bg-display-element"
             ></app-confidence>
           </span>
-        </div>
+        </section>
 
         <div class="d-flex gap-4 flex-row mt-2">
           <ng-container *ngIf="keyResult.keyResultType == 'metric' && castToMetric(keyResult) as keyResultMetric">
@@ -81,7 +81,7 @@ <h3 class="title">{{ keyResult.title }}</h3>
           </ng-container>
         </div>
 
-        <div *ngIf="keyResult.lastCheckIn as checkIn" class="mt-4">
+        <section *ngIf="keyResult.lastCheckIn as checkIn" class="mt-4">
           <h2 class="sub-title-keyresult-detail fw-bold mb-1">
             Letztes Check-in ({{ checkIn.createdOn | date: DATE_FORMAT }})
           </h2>
@@ -98,7 +98,7 @@ <h2 class="sub-title-keyresult-detail fw-bold mb-1">
               Alle Check-ins anzeigen
             </button>
           </span>
-        </div>
+        </section>
 
         <div class="mt-3 mb-4">
           <h2 class="sub-title-keyresult-detail fw-bold mb-1">Beschrieb</h2>

diff --git a/frontend/src/app/components/keyresult-type/keyresult-type.component.html b/frontend/src/app/components/keyresult-type/keyresult-type.component.html
@@ -11,6 +11,7 @@
     >
       Metrisch
     </div>
+
     <div
       [style.cursor]="typeChangeAllowed ? 'pointer' : 'default'"
       [ngClass]="{ active: !isMetric, 'non-active': isMetric }"
@@ -22,11 +23,12 @@
     >
       Ordinal
     </div>
+
     <div class="buffer tab-title flex-fill"></div>
   </div>
 </div>
 
-<div *ngIf="isMetric; else ordinalBlock">
+<ng-template *ngIf="isMetric; else ordinalBlock">
   <form [formGroup]="keyResultForm" class="gap-1">
     <div class="d-flex flex-column flex-wrap container p-0">
       <div class="d-flex flex-row">
@@ -82,7 +84,7 @@
       </div>
     </div>
   </form>
-</div>
+</ng-template>
 
 <ng-template #ordinalBlock>
   <form [formGroup]="keyResultForm" class="gap-1">

diff --git a/frontend/src/app/components/keyresult/keyresult.component.html b/frontend/src/app/components/keyresult/keyresult.component.html
@@ -9,7 +9,7 @@ <h3 class="keyresult-title linebreak mb-2">{{ keyResult.title }}</h3>
   <app-scoring [keyResult]="keyResult" [isDetail]="false" [attr.data-testId]="'scoring-component'"></app-scoring>
   <div class="d-flex justify-content-between mt-1">
     <div class="d-flex justify-content-center">
-      <span class="d-flex align-items-center flex-wrap sub-title-keyresult">
+      <span class="d-flex align-items-center flex-wrap keyResult-overview-attribute">
         <span class="me-1 text-nowrap me-2">Letztes Check-in</span>
         <span class="keyResult-attribute-show" *ngIf="keyResult.lastCheckIn != null">{{
           keyResult!.lastCheckIn!.createdOn | date: DATE_FORMAT

diff --git a/frontend/src/app/components/objective-detail/objective-detail.component.html b/frontend/src/app/components/objective-detail/objective-detail.component.html
@@ -13,7 +13,7 @@ <h2 class="title">{{ objective.title }}</h2>
         </button>
       </div>
 
-      <div class="me-3">
+      <section class="me-3">
         <p class="sub-title-objective fw-bold mb-1">Beschrieb</p>
         <div class="linebreak" *ngIf="objective.description === ''"><p>-</p></div>
         <div *ngIf="objective.description !== ''" data-test-id="description" class="linebreak">
@@ -47,7 +47,7 @@ <h2 class="title">{{ objective.title }}</h2>
             Objective bearbeiten
           </button>
         </div>
-      </div>
+      </section>
     </div>
   </ng-container>
 

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,7 +1,7 @@
 <div class="d-flex justify-content-between align-items-center position-relative dialog-header mt-1">
-  <span class="title w-75">
+  <h3 class="title w-75">
     <span>{{ dialogTitle }}</span>
-  </span>
+  </h3>
   <div class="d-flex align-items-center w-25 p-0 m-0">
     <button
       class="d-flex justify-content-center align-items-center position-absolute closing-button"

diff --git a/frontend/src/style/styles.scss b/frontend/src/style/styles.scss
@@ -265,7 +265,7 @@ mat-form-field.quarter-filter .mat-mdc-text-field-wrapper {
   border: 3px solid var(--scrollbarBG);
 }
 
-.sub-title-keyresult {
+.keyResult-overview-attribute {
   font-size: 0.9rem !important;
 }