Feature/977 HTML structure (#1040)

* Implement html structure and fix tests * Shorten logic in component * Remove unwanted styling that broke every dialog * Add styling to headings and fix obvious mistakes * Fix font size in banner and alignment of stretch star * Fix e2e test * Remove files that do not belong to my PR
puzzle · Nov 8, 2024 · f9846fb · f9846fb
1 parent e9c41dd
commit f9846fb
Show file tree

Hide file tree

Showing 27 changed files with 167 additions and 144 deletions.
diff --git a/frontend/cypress/e2e/checkIn.cy.ts b/frontend/cypress/e2e/checkIn.cy.ts
@@ -131,7 +131,8 @@ describe('OKR Check-in e2e tests', () => {
       cy.contains('Letztes Check-in (' + getCurrentDate() + ')');
     });
 
-    it('Should generate checkin list', () => {
+    // TODO: Re-enable tests in ticket #1014 https://github.com/puzzle/okr/issues/1014
+    xit('Should generate checkin list', () => {
       cy.getByTestId('objective').first().getByTestId('add-keyResult').first().click();
       cy.getByTestId('submit').should('be.disabled');
 
@@ -368,7 +369,7 @@ describe('OKR Check-in e2e tests', () => {
 
       cy.intercept('**/keyresults/*').as('getKeyResultsAfterSave');
       cy.getByTestId('add-check-in').first().click();
-      cy.get('#old-value').should('not.exist');
+      cy.getByTestId('old-checkin-value').should('not.exist');
       cy.fillOutCheckInMetric(10, 0, 'changeinfo', 'initiatives');
       cy.wait('@getKeyResultsAfterSave');
 

diff --git a/frontend/cypress/e2e/overview.cy.ts b/frontend/cypress/e2e/overview.cy.ts
@@ -19,6 +19,6 @@ describe('OKR Overview', () => {
 
   it('Check font ', () => {
     cy.get('.team-title').first().invoke('css', 'font-family').should('eq', 'Roboto, sans-serif');
-    cy.get('.team-title').first().invoke('css', 'font-weight').should('eq', '700');
+    cy.get('.team-title').first().invoke('css', 'font-weight').should('eq', '600');
   });
 });
diff --git a/frontend/src/app/app.component.html b/frontend/src/app/app.component.html
@@ -1,2 +1,6 @@
-<app-application-top-bar></app-application-top-bar>
-<router-outlet></router-outlet>
+<header>
+  <app-application-top-bar></app-application-top-bar>
+</header>
+<main>
+  <router-outlet></router-outlet>
+</main>
diff --git a/frontend/src/app/components/action-plan/action-plan.component.html b/frontend/src/app/components/action-plan/action-plan.component.html
@@ -42,7 +42,7 @@
     </div>
   </div>
 
-  <section class="okr-form-row mx-0">
+  <div class="okr-form-row mx-0">
     <button
       mat-button
       color="primary"
@@ -60,5 +60,5 @@
         Weitere Action hinzufügen
       </span>
     </button>
-  </section>
+  </div>
 </div>
diff --git a/frontend/src/app/components/application-banner/application-banner.component.scss b/frontend/src/app/components/application-banner/application-banner.component.scss
@@ -4,6 +4,10 @@
   padding-left: 1.5rem;
 }
 
+p.mb-2 {
+  font-size: 16px;
+}
+
 .filters {
   flex: 1;
 }
diff --git a/frontend/src/app/components/application-top-bar/application-top-bar.component.scss b/frontend/src/app/components/application-top-bar/application-top-bar.component.scss
@@ -4,6 +4,10 @@
   height: $top-bar-height;
 }
 
+span.d-none.d-md-flex {
+  font-size: 16px;
+}
+
 #okrTopbar {
   display: flex;
   position: fixed;

diff --git a/...end/src/app/components/checkin/check-in-form-ordinal/check-in-form-ordinal.component.html b/...end/src/app/components/checkin/check-in-form-ordinal/check-in-form-ordinal.component.html
@@ -4,22 +4,25 @@
     <mat-radio-group formControlName="value" class="d-flex flex-column gap-2" id="ordinal-radio-group">
       <mat-radio-button [attr.data-testId]="'fail-radio'" value="{{ Zone.FAIL }}" class="ordinal-zone">
         <div class="radio-text-container d-flex align-items-center p-3 text-black">
-          <b>Fail:&nbsp;&nbsp; </b>Commit / Target / Stretch noch nicht erreicht
+          <strong>Fail:&nbsp;</strong> Commit / Target / Stretch noch nicht erreicht
         </div>
       </mat-radio-button>
+
       <mat-radio-button [attr.data-testId]="'commit-radio'" value="{{ Zone.COMMIT }}" class="ordinal-zone">
         <div class="radio-text-container d-flex p-3">
-          <p class="text-black"><b>Commit:&nbsp; </b> {{ keyResult.commitZone }}</p>
+          <span class="text-black"><strong>Commit:&nbsp;</strong>{{ keyResult.commitZone }}</span>
         </div>
       </mat-radio-button>
+
       <mat-radio-button [attr.data-testId]="'target-radio'" value="{{ Zone.TARGET }}" class="ordinal-zone">
         <div class="radio-text-container d-flex p-3 w-100">
-          <p class="text-black"><b>Target:&nbsp; </b>{{ keyResult.targetZone }}</p>
+          <span class="text-black"><strong>Target:&nbsp;</strong>{{ keyResult.targetZone }}</span>
         </div>
       </mat-radio-button>
+
       <mat-radio-button [attr.data-testId]="'stretch-radio'" value="{{ Zone.STRETCH }}" class="ordinal-zone">
         <div class="radio-text-container d-flex p-3">
-          <p class="text-black"><b>Stretch:&nbsp; </b>{{ keyResult.stretchZone }}</p>
+          <span class="text-black"><strong>Stretch:&nbsp;</strong>{{ keyResult.stretchZone }}</span>
         </div>
       </mat-radio-button>
     </mat-radio-group>

diff --git a/frontend/src/app/components/confidence/confidence.component.html b/frontend/src/app/components/confidence/confidence.component.html
@@ -1,4 +1,4 @@
-<div
+<span
   class="okr-form-row bg-inherit flex-nowrap align-items-center mx-0"
   *ngIf="checkIn.confidence || checkIn.confidence === 0"
 >
@@ -22,4 +22,4 @@
   >
     <input matSliderThumb [(ngModel)]="checkIn.confidence" />
   </mat-slider>
-</div>
+</span>
diff --git a/frontend/src/app/components/keyresult-detail/keyresult-detail.component.html b/frontend/src/app/components/keyresult-detail/keyresult-detail.component.html
@@ -2,36 +2,36 @@
   <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-center mb-3">
-        <h3 class="title">{{ keyResult.title }}</h3>
+        <h2 class="title">{{ keyResult.title }}</h2>
         <button class="d-flex" mat-icon-button (click)="backToOverview()" [attr.data-testId]="'close-drawer'">
           <mat-icon class="d-flex justify-content-center align-items-center">close</mat-icon>
         </button>
       </div>
       <div class="me-3">
-        <div class="d-flex justify-content-between mb-3">
-          <div>
+        <section class="d-flex justify-content-between mb-3">
+          <h4>
             {{ "KEY_RESULT_TYPE." + keyResult.keyResultType | translate }}
-          </div>
-          <div class="d-flex align-items-center">
+          </h4>
+          <span class="d-flex align-items-center">
             <img alt="person icon" class="me-1" height="10" src="../../../assets/icons/person-icon.svg" width="10" />
-            <p *ngIf="keyResult.owner as owner">{{ owner.firstname }} {{ owner.lastname }}</p>
-          </div>
-          <span *ngIf="keyResult?.objective?.quarter as quarter">{{ quarter.label }}</span>
-        </div>
+            <h4 *ngIf="keyResult.owner as owner">{{ owner.firstname }} {{ owner.lastname }}</h4>
+          </span>
+          <h4 *ngIf="keyResult?.objective?.quarter as quarter">{{ quarter.label }}</h4>
+        </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
+            <h4>Confidence</h4>
             <app-confidence
               [checkIn]="keyResult.lastCheckIn!"
               [edit]="false"
               class="bg-display-element"
             ></app-confidence>
           </span>
-        </div>
+        </section>
 
-        <div class="d-flex gap-4 flex-row mt-2">
+        <section class="d-flex gap-4 flex-row mt-2">
           <ng-container *ngIf="keyResult.keyResultType == 'metric' && castToMetric(keyResult) as keyResultMetric">
             <div class="d-flex justify-content-start w-100 metric-label-div">
               <p class="keyResult-detail-attribute-show rounded-5 p-2 d-flex justify-content-center metric-col">
@@ -62,31 +62,29 @@ <h3 class="title">{{ keyResult.title }}</h3>
           <ng-container *ngIf="keyResult.keyResultType == 'ordinal' && castToOrdinal(keyResult) as keyResultOrdinal">
             <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 ordinal-box p-3">
+                <h4 class="ordinal-zone-title">Commit</h4>
+                <p class="keyResult-detail-attribute-show ordinal-box p-3">
                   {{ keyResultOrdinal.commitZone }}
-                </div>
+                </p>
               </div>
               <div class="ordinal-col h-auto">
-                <p class="ordinal-zone-title">Target</p>
+                <h4 class="ordinal-zone-title">Target</h4>
                 <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>
+                <h4 class="ordinal-zone-title">Stretch</h4>
                 <p class="keyResult-detail-attribute-show ordinal-box p-3">
                   {{ keyResultOrdinal.stretchZone }}
                 </p>
               </div>
             </div>
           </ng-container>
-        </div>
+        </section>
 
-        <div *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>
+        <section *ngIf="keyResult.lastCheckIn as checkIn" class="mt-4">
+          <h3 class="mb-1">Letztes Check-in ({{ checkIn.createdOn | date: DATE_FORMAT }})</h3>
           <p class="linebreak" *ngIf="checkIn.changeInfo">{{ checkIn.changeInfo }}</p>
           <span class="d-flex justify-content-start">
             <button
@@ -100,28 +98,29 @@ <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>
-          <p class="linebreak" *ngIf="keyResult.description === ''">-</p>
-          <p class="linebreak" *ngIf="keyResult.description !== ''">{{ keyResult.description }}</p>
-        </div>
+        <section>
+          <div class="mt-3 mb-4">
+            <h3 class="mb-1">Beschrieb</h3>
+            <p class="linebreak">{{ keyResult.description || "-" }}</p>
+          </div>
 
-        <div *ngIf="keyResult.actionList?.length != 0" class="mt-3 mb-4">
-          <h2 class="sub-title-keyresult-detail fw-bold">Action Plan</h2>
-          <div *ngFor="let action of keyResult.actionList">
-            <div *ngIf="action.isChecked">
-              <div class="action-list-checked-item break-word ms-4">
-                <img src="../../../assets/icons/checkmark.svg" alt="checkbox" class="action-checkbox me-1" />
-                <span [ngStyle]="{ 'text-decoration': 'line-through' }"> {{ action.action }}</span>
+          <div *ngIf="keyResult.actionList?.length != 0" class="mt-3 mb-4">
+            <h3>Action Plan</h3>
+            <div *ngFor="let action of keyResult.actionList">
+              <div *ngIf="action.isChecked">
+                <div class="action-list-checked-item break-word ms-4">
+                  <img src="../../../assets/icons/checkmark.svg" alt="checkbox" class="action-checkbox me-1" />
+                  <p [ngStyle]="{ 'text-decoration': 'line-through' }">{{ action.action }}</p>
+                </div>
+              </div>
+              <div *ngIf="!action.isChecked">
+                <div class="action-list-item break-word ms-4"><span class="me-2">-</span> {{ action.action }}</div>
               </div>
-            </div>
-            <div *ngIf="!action.isChecked">
-              <div class="action-list-item break-word ms-4"><span class="me-2">-</span> {{ action.action }}</div>
             </div>
           </div>
-        </div>
+        </section>
 
         <div class="d-flex align-items-center flex-row justify-content-start">
           <button

diff --git a/frontend/src/app/components/keyresult/keyresult.component.html b/frontend/src/app/components/keyresult/keyresult.component.html
@@ -5,21 +5,18 @@
   class="key-result rounded-2 p-3 w-100 focus-outline"
   tabindex="0"
 >
-  <h3 class="keyresult-title linebreak mb-2">{{ keyResult.title }}</h3>
+  <h3 class="fw-normal 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="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
-        }}</span>
-        <span class="keyResult-attribute-show" *ngIf="keyResult.lastCheckIn == null">Keines</span>
-      </span>
+  <div class="d-flex justify-content-between mt-2">
+    <div class="d-flex justify-content-center align-items-center flex-wrap">
+      <h5 class="text-nowrap me-2">Letztes Check-in</h5>
+      <span class="keyResult-attribute-show">{{
+        keyResult.lastCheckIn == null ? "Keines" : (keyResult!.lastCheckIn!.createdOn | date: DATE_FORMAT)
+      }}</span>
     </div>
 
-    <div class="d-flex align-items-center flex-wrap justify-content-end">
-      <p class="sub-title-keyresult">Confidence</p>
+    <div class="d-flex align-items-center flex-wrap justify-content-end keyResult-overview-attribute">
+      <h5 class="me-2">Confidence</h5>
       <app-confidence
         [edit]="false"
         [isDetail]="false"

diff --git a/frontend/src/app/components/keyresult/keyresult.component.scss b/frontend/src/app/components/keyresult/keyresult.component.scss
@@ -15,10 +15,3 @@
     cursor: pointer;
   }
 }
-
-.keyresult-title {
-  font-size: 1rem;
-  font-weight: normal;
-  word-wrap: anywhere;
-  color: black;
-}
diff --git a/frontend/src/app/components/objective-detail/objective-detail.component.html b/frontend/src/app/components/objective-detail/objective-detail.component.html
@@ -1,22 +1,22 @@
 <div class="w-100" [cdkTrapFocus]="true" [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-center mb-3">
-        <h2 class="title">{{ objective.title }}</h2>
+      <section class="w-100 d-flex justify-content-between align-items-center mb-3">
+        <h2 class="title" [attr.data-testId]="'objective-title'">{{ objective.title }}</h2>
         <button
           class="d-flex align-items-center justify-content-center"
           mat-icon-button
           (click)="backToOverview()"
-          data-test-id="closeDrawer"
+          [attr.data-testId]="'closeDrawer'"
         >
           <mat-icon class="d-flex justify-content-center align-items-center">close</mat-icon>
         </button>
-      </div>
+      </section>
 
-      <div class="me-3">
-        <p class="sub-title-objective fw-bold mb-1">Beschrieb</p>
+      <section class="me-3">
+        <h3 class="mb-1">Beschrieb</h3>
         <div class="linebreak" *ngIf="objective.description === ''"><p>-</p></div>
-        <div *ngIf="objective.description !== ''" data-test-id="description" class="linebreak">
+        <div *ngIf="objective.description !== ''" [attr.data-testId]="'description'" class="linebreak">
           <p>{{ objective.description }}</p>
         </div>
 
@@ -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/components/objective-detail/objective-detail.component.scss b/frontend/src/app/components/objective-detail/objective-detail.component.scss
@@ -1,7 +1,3 @@
 :host {
   width: 100%;
 }
-
-.sub-title-objective {
-  font-size: 1rem;
-}
diff --git a/frontend/src/app/components/objective-detail/objective-detail.component.spec.ts b/frontend/src/app/components/objective-detail/objective-detail.component.spec.ts
@@ -56,8 +56,8 @@ describe('ObjectiveDetailComponent', () => {
   it('get data from backend', () => {
     fixture.detectChanges();
     component.objectiveId = 2;
-    const title = fixture.debugElement.query(By.css('.title')).nativeElement.innerHTML;
-    const description = fixture.debugElement.query(By.css('[data-test-id="description"]')).nativeElement.innerHTML;
+    const title = fixture.debugElement.query(By.css('[data-testId="objective-title"]'))?.nativeElement.innerHTML;
+    const description = fixture.debugElement.query(By.css('[data-testId="description"]'))?.nativeElement.innerHTML;
     expect(title).toContain(objective.title);
     expect(description).toContain(objective.description);
   });

diff --git a/frontend/src/app/components/objective-filter/objective-filter.component.html b/frontend/src/app/components/objective-filter/objective-filter.component.html
@@ -1,4 +1,4 @@
-<form class="d-flex search-form" (ngSubmit)="this.refresh.next()">
+<form class="d-flex search-form" (ngSubmit)="refresh.next()">
   <mat-form-field
     id="objective-form-field"
     class="bg-white header-form-field"
@@ -11,7 +11,7 @@
       [type]="'text'"
       [placeholder]="'Nach Objectives suchen'"
       [(ngModel)]="query"
-      (input)="this.refresh.next()"
+      (input)="refresh.next()"
       [ngModelOptions]="{ standalone: true }"
       [attr.data-testId]="'objectiveSearch'"
     />
@@ -20,6 +20,7 @@
   <button
     class="bg-pz-dark-blue d-flex justify-content-start align-items-center icon-button px-3 focus-outline"
     type="submit"
+    aria-label="Search Objectives"
   >
     <img src="../assets/icons/search-icon.svg" alt="search icon" class="text-white search-scale" />
   </button>

diff --git a/frontend/src/app/components/objective-filter/objective-filter.component.scss b/frontend/src/app/components/objective-filter/objective-filter.component.scss
@@ -1,3 +1,7 @@
 #objective-form-field {
   width: 300px;
 }
+
+.search-scale {
+  transform: scale(1.2);
+}