CSS Refactoring (Or: UI Redesign 2 )

angular.json

@@ -26,8 +26,8 @@
               "src/manifest.json"
             ],
             "styles": [
-              "src/ndb-theme.scss",
-              "src/styles.scss",
+              "src/styles/styles.scss",
+              "src/styles/themes/ndb-theme.scss",
               "node_modules/flag-icons/css/flag-icons.min.css"
             ],
             "vendorChunk": true,
@@ -90,8 +90,8 @@
             "polyfills": "src/polyfills.ts",
             "tsConfig": "src/tsconfig.spec.json",
             "styles": [
-              "src/ndb-theme.scss",
-              "src/styles.scss"
+              "src/styles/styles.scss",
+              "src/styles/themes/ndb-theme.scss"
             ],
             "assets": [
               "src/assets",

e2e/integration/LinkingChildToSchool.cy.ts

@@ -18,14 +18,14 @@ describe("Scenario: Linking a child to a school - E2E test", function () {
 
     // get the Add School button and click on it
     cy.get(
-      "app-previous-schools.ng-star-inserted > app-entity-subrecord > .mat-elevation-z1 > .mat-table > thead > .mat-header-row > .cdk-column-actions > app-disabled-wrapper.ng-star-inserted > .mat-tooltip-trigger > .mat-focus-indicator"
+      "app-previous-schools.ng-star-inserted > app-entity-subrecord > .mat-table > thead > .mat-header-row > .cdk-column-actions > app-disabled-wrapper.ng-star-inserted > .mat-tooltip-trigger"
     )
       .should("be.visible")
       .click();
 
     // choose the school to add
     cy.get('[ng-reflect-placeholder="Select School"]')
-      .type("E2E School")
+      .type("E2E School", { force: true })
       .click();
 
     // save school in child profile

e2e/integration/MarkingChildAsDropout.cy.ts

@@ -3,7 +3,7 @@ describe("Scenario: Marking a child as dropout - E2E test", function () {
     // go to the url with the Child
     cy.visit("child/1");
     // save the name of this Child to the variable
-    cy.get(".header-row > .header-title").invoke("text").as("childName");
+    cy.get(".mat-title > .remove-margin-bottom").invoke("text").as("childName");
   });
 
   it("WHEN I select a dropout date for this child", () => {

e2e/integration/RecordingAttendanceOfChild.cy.ts

@@ -13,12 +13,11 @@ describe("Scenario: Recording attendance of a child - E2E test", function () {
     cy.contains("mat-card", "School Class")
       .eq(0)
       .click({ scrollBehavior: "center" });
-    cy.get(".child-block > span > span ")
-      .first()
-      .invoke("text")
-      .as("childName");
+    cy.get(".font-size-rel").first().invoke("text").as("childName");
     cy.get(".group-select-option").contains("Present").click();
-    cy.get('[fxflex=""] > .ng-star-inserted > .mat-focus-indicator').click();
+    cy.get(
+      "app-add-day-attendance.ng-star-inserted > .flex-row > .mat-focus-indicator"
+    ).click();
     cy.contains("button", "Save").click();
   });
 

src/app/app.module.ts

@@ -34,7 +34,6 @@ import { UserModule } from "./core/user/user.module";
 import { ProgressDashboardWidgetModule } from "./features/progress-dashboard-widget/progress-dashboard-widget.module";
 import { ChildrenModule } from "./child-dev-project/children/children.module";
 import { SchoolsModule } from "./child-dev-project/schools/schools.module";
-import { FlexLayoutModule } from "@angular/flex-layout";
 import { ServiceWorkerModule } from "@angular/service-worker";
 import { environment } from "../environments/environment";
 import { AdminModule } from "./core/admin/admin.module";
@@ -105,7 +104,6 @@ import {
     }),
     BrowserModule,
     BrowserAnimationsModule,
-    FlexLayoutModule,
     HttpClientModule,
     routing,
     ViewModule,

src/app/child-dev-project/attendance/activity-attendance-section/activity-attendance-section.component.html

@@ -2,19 +2,18 @@
   <mat-progress-bar mode="indeterminate"></mat-progress-bar>
 </div>
 
-<div fxLayout="row wrap" *ngIf="!loading">
+<div class="flex-row flex-wrap gap-large" *ngIf="!loading">
   <app-attendance-calendar
+    class="flex-grow"
     [records]="combinedAttendance?.events || []"
     [highlightForChild]="forChild"
     [activity]="activity"
-    fxFlex
   ></app-attendance-calendar>
   <app-attendance-summary
     [attendance]="combinedAttendance"
     [forChild]="forChild"
     [columns]="columns"
-    style="margin-top: 1em;"
-    fxFlex
+    class="margin-top-regular flex-grow"
   ></app-attendance-summary>
 </div>
 
@@ -27,7 +26,7 @@
 >
 </app-entity-subrecord>
 
-<div style="margin-top: 16px">
+<div class="margin-top-regular">
   <mat-slide-toggle
     i18n="
       slider|show unrelated attendance-entries for an activity that are not

src/app/child-dev-project/attendance/activity-attendance-section/activity-attendance-section.component.ts

@@ -1,9 +1,16 @@
-import { Component, Input, OnChanges, SimpleChanges } from "@angular/core";
+import {
+  Component,
+  Inject,
+  Input,
+  LOCALE_ID,
+  OnChanges,
+  SimpleChanges,
+} from "@angular/core";
 import { OnInitDynamicComponent } from "../../../core/view/dynamic-components/on-init-dynamic-component.interface";
 import { RecurringActivity } from "../model/recurring-activity";
 import { AttendanceDetailsComponent } from "../attendance-details/attendance-details.component";
 import { AttendanceService } from "../attendance.service";
-import { PercentPipe } from "@angular/common";
+import { formatPercent } from "@angular/common";
 import { ActivityAttendance } from "../model/activity-attendance";
 import moment from "moment";
 import { FormFieldConfig } from "../../../core/entity-components/entity-form/entity-form/FormConfig";
@@ -14,10 +21,10 @@ import { DynamicComponent } from "../../../core/view/dynamic-components/dynamic-
 @Component({
   selector: "app-activity-attendance-section",
   templateUrl: "./activity-attendance-section.component.html",
-  styleUrls: ["./activity-attendance-section.component.scss"],
 })
 export class ActivityAttendanceSectionComponent
-  implements OnChanges, OnInitDynamicComponent {
+  implements OnChanges, OnInitDynamicComponent
+{
   @Input() activity: RecurringActivity;
   @Input() forChild?: string;
 
@@ -53,18 +60,19 @@ export class ActivityAttendanceSectionComponent
       label: $localize`:Percentage of people that attended an event:Attended`,
       view: "ReadonlyFunction",
       additional: (e: ActivityAttendance) =>
-        this.percentPipe.transform(
+        formatPercent(
           this.forChild
             ? e.getAttendancePercentage(this.forChild)
             : e.getAttendancePercentageAverage(),
+          this.locale,
           "1.0-0"
         ),
     },
   ];
 
   constructor(
     private attendanceService: AttendanceService,
-    private percentPipe: PercentPipe,
+    @Inject(LOCALE_ID) private locale: string,
     private formDialog: FormDialogService
   ) {}
 

src/app/child-dev-project/attendance/activity-card/activity-card.component.html

@@ -1,33 +1,20 @@
 <mat-card
-  class="main-card border-left-highlight border-{{warningLevel}}"
+  appBorderHighlight
+  [borderClass]="'border-' + warningLevel"
+  class="main-card"
 >
-  <mat-card-title>
-    <fa-icon
-      *ngIf="!recurring"
-      icon="calendar-alt"
-      i18n-matTooltip="
-        One-time event|Informs the user that this is a one-time event
-      "
-      matTooltip="one-time event"
-    >
-    </fa-icon>
-    <fa-icon
-      *ngIf="recurring"
-      icon="calendar-alt"
-      i18n-matTooltip="
-        Recurring-event|Informs the user that this is a recurring event
-      "
-      matTooltip="recurring activity - record for one day"
-    >
-    </fa-icon>
-    {{ event?.subject }}
-  </mat-card-title>
-  <mat-card-content>
-    {{ event.children.length }}
-    <span>
-      {event.children.length, plural, one {participant} other {participants}}
-    </span>
-    <span *ngIf="!recurring"> ({{ event.date | date: "shortDate" }}) </span>
-    ; {{ event.category?.label }}
-  </mat-card-content>
+  <h3 class="card-title">{{event?.subject}}</h3>
+  <p class="text-secondary">
+    <fa-icon icon="child"></fa-icon> {{event.children.length}} {
+      event.children.length, plural, one {participant} other {participants}
+    }
+    <ng-container *ngIf="!recurring">
+      <span class="sep">/</span><fa-icon icon="calendar"></fa-icon> {{
+      event.date | date: "shortDate"
+      }}
+    </ng-container>
+    <span class="sep">/</span>{{
+      event.category?.label
+    }}
+  </p>
 </mat-card>

src/app/child-dev-project/attendance/activity-card/activity-card.component.scss

@@ -1,26 +1,39 @@
-@import "../../../../styles";
-
-.recurring-container {
-  background-color: #fdfdb7;
-}
+@use "@angular/material" as mat;
+@use "src/styles/variables/colors";
 
 .border-ok {
-  border-color: $color-warning-ok;
+  border-color: colors.$success;
 }
 
 .border-warning {
-  border-color: $color-warning-warning;
+  border-color: colors.$warn;
 }
 
 .border-urgent {
-  border-color: $color-warning-urgent;
+  border-color: colors.$error;
 }
 
 .main-card {
   max-width: 500px;
+  height: 100%;
+  box-sizing: border-box;
 }
 
-mat-card-title {
-  font-size: 16px;
+.card-title {
   font-weight: bold;
 }
+
+.sep {
+  font-weight: 900;
+  color: mat.get-color-from-palette(mat.$light-theme-foreground-palette, hint-text);
+
+  // Add a whitespace before the separator
+  &::before {
+    content: " "
+  }
+
+  // Add a whitespace before the separator
+  &::after {
+    content: " "
+  }
+}

src/app/child-dev-project/attendance/activity-card/activity-card.component.ts

@@ -13,11 +13,6 @@ export class ActivityCardComponent {
    */
   @Input() event: Note;
 
-  /**
-   * Whether the card is visualized as selected
-   */
-  @Input() highlighted: boolean;
-
   private _displayAsRecurring: boolean | null = null;
   /**
    * Whether the event or activity is displayed in the style of events generated from a generic recurring activity.

src/app/child-dev-project/attendance/activity-card/activity-card.stories.ts

@@ -8,13 +8,21 @@ import { MatCardModule } from "@angular/material/card";
 import { RecurringActivity } from "../model/recurring-activity";
 import { MatTooltipModule } from "@angular/material/tooltip";
 import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
+import { CommonComponentsModule } from "../../../core/common-components/common-components.module";
+import { StorybookBaseModule } from "../../../utils/storybook-base.module";
 
 export default {
   title: "Attendance/Components/ActivityCard",
   component: ActivityCardComponent,
   decorators: [
     moduleMetadata({
-      imports: [MatCardModule, MatTooltipModule, BrowserAnimationsModule],
+      imports: [
+        StorybookBaseModule,
+        MatCardModule,
+        MatTooltipModule,
+        BrowserAnimationsModule,
+        CommonComponentsModule,
+      ],
     }),
   ],
 } as Meta;
@@ -55,12 +63,6 @@ OneTimeEvent.args = {
   event: simpleEvent,
 };
 
-export const Highlighted = Template.bind({});
-Highlighted.args = {
-  event: simpleEvent,
-  highlighted: true,
-};
-
 export const OneTimeEventComplex = Template.bind({});
 OneTimeEventComplex.args = {
   event: longEvent,

src/app/child-dev-project/attendance/add-day-attendance/add-day-attendance.component.html

@@ -1,40 +1,33 @@
-<div class="container" fxLayout="column">
-  <div fxFlex>
-    <app-view-title
-      [disableBackButton]="currentStage !== 0"
-      i18n="
-        Record Attendance|Title when recording the attendance at a particular
-        stage (e.g. selecting the event, recording it)
-      "
-    >
-      Record Attendance
-    </app-view-title>
+<app-view-title
+  [disableBackButton]="currentStage !== 0"
+  i18n="
+    Record Attendance|Title when recording the attendance at a particular
+    stage (e.g. selecting the event, recording it)
+  "
+>
+  Record Attendance
+</app-view-title>
 
-    <h2 *ngIf="currentStage === 0">
-      {{ stages[currentStage] }}
-    </h2>
-    <div class="subject-line" *ngIf="currentStage !== 0">
-      <button mat-icon-button (click)="exit()">
-        <fa-icon icon="arrow-left"></fa-icon>
-      </button>
-      <h2 class="remove-margin-bottom">{{ event.subject }}</h2>
-    </div>
-  </div>
-
-  <div fxFlex="grow" class="flex-fill-section">
-    <app-roll-call-setup
-      *ngIf="currentStage === 0"
-      (eventSelected)="finishBasicInformationStage($event)"
-    >
-    </app-roll-call-setup>
-
-    <app-roll-call
-      *ngIf="currentStage === 1"
-      [eventEntity]="event"
-      [sortParticipantsBy]="config?.sortParticipantsBy"
-      (exit)="finishRollCallState()"
-      (complete)="saveRollCallResult($event)"
-    >
-    </app-roll-call>
-  </div>
+<h2 *ngIf="currentStage === 0">
+  {{ stages[currentStage] }}
+</h2>
+<div class="flex-row align-center relative-left margin-bottom-small" *ngIf="currentStage !== 0">
+  <button mat-icon-button (click)="exit()" matTooltip="Back" i18n-matTooltip>
+    <fa-icon icon="arrow-left"></fa-icon>
+  </button>
+  <h2 class="remove-margin-bottom">{{event.subject}}</h2>
 </div>
+<app-roll-call-setup
+  *ngIf="currentStage === 0"
+  (eventSelected)="finishBasicInformationStage($event)"
+>
+</app-roll-call-setup>
+
+<app-roll-call
+  *ngIf="currentStage === 1"
+  [eventEntity]="event"
+  [sortParticipantsBy]="config?.sortParticipantsBy"
+  (exit)="finishRollCallState()"
+  (complete)="saveRollCallResult($event)"
+>
+</app-roll-call>