From aef984ab2725382047746ab73037c0077b82e98f Mon Sep 17 00:00:00 2001
From: Simon <therealslimv@yahoo.de>
Date: Wed, 25 May 2022 16:16:01 +0200
Subject: [PATCH 01/12] fix(*): Improved layout of note details in mobile view

---
 .../attendance-status-select.component.scss   |  2 --
 ...ild-meeting-note-attendance.component.html | 26 ++++++++-----------
 ...ild-meeting-note-attendance.component.scss | 12 +++++++--
 .../note-details/note-details.stories.ts      |  2 +-
 .../entity-subrecord.stories.ts               |  4 +--
 5 files changed, 23 insertions(+), 23 deletions(-)

diff --git a/src/app/child-dev-project/attendance/attendance-status-select/attendance-status-select.component.scss b/src/app/child-dev-project/attendance/attendance-status-select/attendance-status-select.component.scss
index 19ebe42f9c..8b5c255190 100644
--- a/src/app/child-dev-project/attendance/attendance-status-select/attendance-status-select.component.scss
+++ b/src/app/child-dev-project/attendance/attendance-status-select/attendance-status-select.component.scss
@@ -4,11 +4,9 @@
   display: inline-block;
   vertical-align: text-top;
   border-radius: 50%;
-
   margin-right: 8px;
 }
 
 .compact-form-field {
   margin-bottom: -10px;
-  margin-top: -10px;
 }
diff --git a/src/app/child-dev-project/notes/note-details/child-meeting-attendance/child-meeting-note-attendance.component.html b/src/app/child-dev-project/notes/note-details/child-meeting-attendance/child-meeting-note-attendance.component.html
index 2dde14f63d..d8ac88c8fc 100644
--- a/src/app/child-dev-project/notes/note-details/child-meeting-attendance/child-meeting-note-attendance.component.html
+++ b/src/app/child-dev-project/notes/note-details/child-meeting-attendance/child-meeting-note-attendance.component.html
@@ -1,22 +1,18 @@
-<div fxLayout="col" fxLayoutGap="4px" fxLayoutAlign="start baseline">
-  <div class="actions" fxFlex="40px" *ngIf="!disabled">
-    <button mat-icon-button (click)="remove.emit()">
-      <fa-icon icon="times"></fa-icon>
-    </button>
-  </div>
+<div fxLayout="row wrap" fxLayoutAlign="start baseline" class="attendance-box">
 
-  <div fxFlex="250px">
-    <app-attendance-status-select
-      [(value)]="attendance.status"
-      (valueChange)="change.emit(attendance)"
-      [disabled]="disabled"
-    >
-    </app-attendance-status-select>
-  </div>
+  <fa-icon *ngIf="!disabled" icon="times" (click)="remove.emit()"></fa-icon>
 
   <app-child-block [entityId]="childId" fxFlex> </app-child-block>
 
-  <mat-form-field class="dense-form-field" fxFlex>
+  <app-attendance-status-select
+    [(value)]="attendance.status"
+    (valueChange)="change.emit(attendance)"
+    [disabled]="disabled"
+    fxFlex="250px"
+  >
+  </app-attendance-status-select>
+
+  <mat-form-field fxFlex>
     <input
       matInput
       i18n-placeholder
diff --git a/src/app/child-dev-project/notes/note-details/child-meeting-attendance/child-meeting-note-attendance.component.scss b/src/app/child-dev-project/notes/note-details/child-meeting-attendance/child-meeting-note-attendance.component.scss
index 1516703f21..882aa4f4ee 100644
--- a/src/app/child-dev-project/notes/note-details/child-meeting-attendance/child-meeting-note-attendance.component.scss
+++ b/src/app/child-dev-project/notes/note-details/child-meeting-attendance/child-meeting-note-attendance.component.scss
@@ -2,6 +2,14 @@
   display: none;
 }
 
-.dense-form-field {
-  margin-top: -1em;
+fa-icon {
+  padding-right: 10px;
+  cursor: pointer;
+}
+
+.attendance-box {
+  border: 1px solid lightgrey;
+  border-radius: 5px;
+  padding: 10px;
+  margin-bottom: 5px
 }
diff --git a/src/app/child-dev-project/notes/note-details/note-details.stories.ts b/src/app/child-dev-project/notes/note-details/note-details.stories.ts
index 77f2dd044d..33beda5d0b 100644
--- a/src/app/child-dev-project/notes/note-details/note-details.stories.ts
+++ b/src/app/child-dev-project/notes/note-details/note-details.stories.ts
@@ -26,7 +26,7 @@ export default {
         { provide: MatDialogRef, useValue: {} },
         {
           provide: ChildrenService,
-          useValue: { getChild: () => of(new Child()) },
+          useValue: { getChild: () => of(Child.create("John Doe")) },
         },
       ],
     }),
diff --git a/src/app/core/entity-components/entity-subrecord/entity-subrecord/entity-subrecord.stories.ts b/src/app/core/entity-components/entity-subrecord/entity-subrecord/entity-subrecord.stories.ts
index cb3ad5eca9..4b1c30f544 100644
--- a/src/app/core/entity-components/entity-subrecord/entity-subrecord/entity-subrecord.stories.ts
+++ b/src/app/core/entity-components/entity-subrecord/entity-subrecord/entity-subrecord.stories.ts
@@ -34,9 +34,7 @@ const userGenerator = new DemoUserGeneratorService();
 const data = new DemoNoteGeneratorService(
   { minNotesPerChild: 5, maxNotesPerChild: 10, groupNotes: 2 },
   childGenerator,
-  userGenerator,
-  schemaService,
-  configService
+  userGenerator
 ).generateEntities();
 
 export default {

From 1b3f36e40158bf498834768498831b934a2c8b6d Mon Sep 17 00:00:00 2001
From: Schottkyc137 <lukas2121@icloud.com>
Date: Thu, 26 May 2022 20:13:14 +0200
Subject: [PATCH 02/12] Center the indicator

---
 .../attendance-status-select.component.scss                      | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/app/child-dev-project/attendance/attendance-status-select/attendance-status-select.component.scss b/src/app/child-dev-project/attendance/attendance-status-select/attendance-status-select.component.scss
index 8b5c255190..14ba06fdc2 100644
--- a/src/app/child-dev-project/attendance/attendance-status-select/attendance-status-select.component.scss
+++ b/src/app/child-dev-project/attendance/attendance-status-select/attendance-status-select.component.scss
@@ -5,6 +5,7 @@
   vertical-align: text-top;
   border-radius: 50%;
   margin-right: 8px;
+  margin-top: 3px;
 }
 
 .compact-form-field {

From 3b48fe22570a2716138127a3a39559b06720cf16 Mon Sep 17 00:00:00 2001
From: Schottkyc137 <lukas2121@icloud.com>
Date: Thu, 26 May 2022 20:14:56 +0200
Subject: [PATCH 03/12] replace fxFlex with flex

---
 ...ild-meeting-note-attendance.component.html | 45 ++++++++++---------
 ...ild-meeting-note-attendance.component.scss | 19 +++++---
 .../child-dev-project/notes/notes.module.ts   |  2 -
 src/styles.scss                               |  8 ++++
 4 files changed, 45 insertions(+), 29 deletions(-)

diff --git a/src/app/child-dev-project/notes/note-details/child-meeting-attendance/child-meeting-note-attendance.component.html b/src/app/child-dev-project/notes/note-details/child-meeting-attendance/child-meeting-note-attendance.component.html
index d8ac88c8fc..13dd3fd766 100644
--- a/src/app/child-dev-project/notes/note-details/child-meeting-attendance/child-meeting-note-attendance.component.html
+++ b/src/app/child-dev-project/notes/note-details/child-meeting-attendance/child-meeting-note-attendance.component.html
@@ -1,26 +1,29 @@
-<div fxLayout="row wrap" fxLayoutAlign="start baseline" class="attendance-box">
+<div class="attendance-box">
 
-  <fa-icon *ngIf="!disabled" icon="times" (click)="remove.emit()"></fa-icon>
+  <div class="content-wrapper">
+    <app-child-block [entityId]="childId"></app-child-block>
 
-  <app-child-block [entityId]="childId" fxFlex> </app-child-block>
+    <app-attendance-status-select
+      [(value)]="attendance.status"
+      (valueChange)="change.emit(attendance)"
+      [disabled]="disabled"
+    >
+    </app-attendance-status-select>
 
-  <app-attendance-status-select
-    [(value)]="attendance.status"
-    (valueChange)="change.emit(attendance)"
-    [disabled]="disabled"
-    fxFlex="250px"
-  >
-  </app-attendance-status-select>
+    <mat-form-field class="flex-grow">
+      <input
+        matInput
+        i18n-placeholder
+        placeholder="Remarks"
+        name="remarks"
+        type="text"
+        [(ngModel)]="attendance.remarks"
+        [disabled]="disabled"
+      />
+    </mat-form-field>
+  </div>
 
-  <mat-form-field fxFlex>
-    <input
-      matInput
-      i18n-placeholder
-      placeholder="Remarks"
-      name="remarks"
-      type="text"
-      [(ngModel)]="attendance.remarks"
-      [disabled]="disabled"
-    />
-  </mat-form-field>
+  <button mat-icon-button>
+    <fa-icon *ngIf="!disabled" icon="trash" (click)="remove.emit()"></fa-icon>
+  </button>
 </div>
diff --git a/src/app/child-dev-project/notes/note-details/child-meeting-attendance/child-meeting-note-attendance.component.scss b/src/app/child-dev-project/notes/note-details/child-meeting-attendance/child-meeting-note-attendance.component.scss
index 882aa4f4ee..42d2d684a1 100644
--- a/src/app/child-dev-project/notes/note-details/child-meeting-attendance/child-meeting-note-attendance.component.scss
+++ b/src/app/child-dev-project/notes/note-details/child-meeting-attendance/child-meeting-note-attendance.component.scss
@@ -2,14 +2,21 @@
   display: none;
 }
 
-fa-icon {
-  padding-right: 10px;
-  cursor: pointer;
-}
-
 .attendance-box {
   border: 1px solid lightgrey;
   border-radius: 5px;
   padding: 10px;
-  margin-bottom: 5px
+  margin-bottom: 7px;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.content-wrapper {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  align-items: baseline;
+  gap: 12px;
+  flex-grow: 1;
 }
diff --git a/src/app/child-dev-project/notes/notes.module.ts b/src/app/child-dev-project/notes/notes.module.ts
index 94eb56d568..01cc5bdf1f 100644
--- a/src/app/child-dev-project/notes/notes.module.ts
+++ b/src/app/child-dev-project/notes/notes.module.ts
@@ -8,7 +8,6 @@ import { NotesManagerComponent } from "./notes-manager/notes-manager.component";
 import { MatExpansionModule } from "@angular/material/expansion";
 import { MatButtonToggleModule } from "@angular/material/button-toggle";
 import { MatTableModule } from "@angular/material/table";
-import { FlexLayoutModule } from "@angular/flex-layout";
 import { RouterModule } from "@angular/router";
 import { MatFormFieldModule } from "@angular/material/form-field";
 import { MatInputModule } from "@angular/material/input";
@@ -61,7 +60,6 @@ import { ExportModule } from "../../core/export/export.module";
     CommonModule,
     FormsModule,
     ConfirmationDialogModule,
-    FlexLayoutModule,
     RouterModule,
     MatFormFieldModule,
     MatInputModule,
diff --git a/src/styles.scss b/src/styles.scss
index 204830d9d4..b525007684 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -274,3 +274,11 @@ $standard-icon-size: 1.5em;
 .margin-bottom-small {
   margin-bottom: $standard-margin-small;
 }
+
+/**
+ * Flex
+ */
+
+.flex-grow {
+  flex-grow: 1;
+}

From 961d25065c95de76edd5767f90b75fac9fc83c9b Mon Sep 17 00:00:00 2001
From: Sebastian Leidig <sebastian.leidig@gmail.com>
Date: Fri, 3 Jun 2022 20:42:37 +0200
Subject: [PATCH 04/12] better margins

---
 .../notes/note-details/note-details.component.html           | 5 +++--
 .../notes/note-details/note-details.component.scss           | 4 ++++
 2 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/src/app/child-dev-project/notes/note-details/note-details.component.html b/src/app/child-dev-project/notes/note-details/note-details.component.html
index 570a509ce1..6d0e9287c5 100644
--- a/src/app/child-dev-project/notes/note-details/note-details.component.html
+++ b/src/app/child-dev-project/notes/note-details/note-details.component.html
@@ -162,7 +162,7 @@ <h1>{{ entity.date | date }}: {{ entity.subject }}</h1>
 
     <!-- Participants and groups -->
     <app-entity-select
-      style="margin-top: 12px"
+      class="form-section"
       entityType="Child"
       [(selection)]="entity.children"
       (selectionChange)="entityForm.form.markAsDirty()"
@@ -185,7 +185,7 @@ <h1>{{ entity.date | date }}: {{ entity.subject }}</h1>
       </mat-option>
     </app-entity-select>
 
-    <div *ngIf="entity.category?.isMeeting">
+    <div *ngIf="entity.category?.isMeeting" style="margin-top: -1.25em">
       <app-child-meeting-note-attendance
         *ngFor="let childId of entity.children"
         [childId]="childId"
@@ -198,6 +198,7 @@ <h1>{{ entity.date | date }}: {{ entity.subject }}</h1>
     </div>
 
     <app-entity-select
+      class="form-section"
       entityType="School"
       [(selection)]="entity.schools"
       (selectionChange)="entityForm.form.markAsDirty()"
diff --git a/src/app/child-dev-project/notes/note-details/note-details.component.scss b/src/app/child-dev-project/notes/note-details/note-details.component.scss
index fc11944072..b3b4d9b61e 100644
--- a/src/app/child-dev-project/notes/note-details/note-details.component.scss
+++ b/src/app/child-dev-project/notes/note-details/note-details.component.scss
@@ -28,3 +28,7 @@
   right: 8px;
   top: 16px;
 }
+
+.form-section {
+  margin-top: 24px;
+}

From 40758948a8157f44c30b5728dd90e0e5ee2160ad Mon Sep 17 00:00:00 2001
From: Schottkyc137 <lukas2121@icloud.com>
Date: Mon, 20 Jun 2022 13:11:21 +0200
Subject: [PATCH 05/12] fix styles

---
 .../attendance-status-select.component.html   | 29 +++++++++----------
 .../attendance-status-select.component.scss   | 28 ++++++++++++------
 2 files changed, 32 insertions(+), 25 deletions(-)

diff --git a/src/app/child-dev-project/attendance/attendance-status-select/attendance-status-select.component.html b/src/app/child-dev-project/attendance/attendance-status-select/attendance-status-select.component.html
index ddd34320f3..6a138bde22 100644
--- a/src/app/child-dev-project/attendance/attendance-status-select/attendance-status-select.component.html
+++ b/src/app/child-dev-project/attendance/attendance-status-select/attendance-status-select.component.html
@@ -1,16 +1,13 @@
-<div>
-  <span class="indicator {{ value.style }}">&nbsp;</span>
-  <mat-form-field class="compact-form-field">
-    <mat-select
-      [(ngModel)]="value"
-      (ngModelChange)="valueChange.emit(value)"
-      [disabled]="disabled"
-      [compareWith]="compareFn"
-    >
-      <mat-option *appConfigurableEnum="let s of statusID" [value]="s">
-        <span class="indicator {{ s.style }}">&nbsp;</span>
-        {{ s.label }}
-      </mat-option>
-    </mat-select>
-  </mat-form-field>
-</div>
+<mat-form-field class="compact-form-field">
+  <div [class]="value.style" class="indicator indicator__prefix" matPrefix></div>
+  <mat-select
+    [(ngModel)]="value"
+    (ngModelChange)="valueChange.emit(value)"
+    [disabled]="disabled"
+    [compareWith]="compareFn"
+  >
+    <mat-option *appConfigurableEnum="let s of statusID" [value]="s">
+      <span class="indicator indicator__option" [class]="s.style"></span>{{ s.label }}
+    </mat-option>
+  </mat-select>
+</mat-form-field>
diff --git a/src/app/child-dev-project/attendance/attendance-status-select/attendance-status-select.component.scss b/src/app/child-dev-project/attendance/attendance-status-select/attendance-status-select.component.scss
index 14ba06fdc2..b58561c440 100644
--- a/src/app/child-dev-project/attendance/attendance-status-select/attendance-status-select.component.scss
+++ b/src/app/child-dev-project/attendance/attendance-status-select/attendance-status-select.component.scss
@@ -1,13 +1,23 @@
+// The indicator is a round, colored shape with a small margin on the right
+// it is used as prefix in the form field and for the individual options
 .indicator {
-  width: 14px;
-  height: 14px;
-  display: inline-block;
-  vertical-align: text-top;
+  width: 1em;
+  height: 1em;
   border-radius: 50%;
-  margin-right: 8px;
-  margin-top: 3px;
-}
 
-.compact-form-field {
-  margin-bottom: -10px;
+  margin-right: 0.5em;
+
+  // when the indicator is used as prefix in a form field
+  // it should be center-aligned with the content, but is baseline-aligned
+  // without this small margin
+  &__prefix {
+    margin-bottom: -0.15em;
+  }
+
+  // when the indicator is used inside the option-field it has `display: inline`
+  // which causes the field not to draw correctly
+  &__option {
+    display: inline-block;
+    vertical-align: middle;
+  }
 }

From 652e77979b43003273a626602c1e6354c6fc24c4 Mon Sep 17 00:00:00 2001
From: Schottkyc137 <lukas2121@icloud.com>
Date: Thu, 30 Jun 2022 20:14:40 +0200
Subject: [PATCH 06/12] Implement a working prototype for a new design

---
 .../attendance-status-select.component.scss   |  5 ++
 .../child-block/child-block.component.html    |  8 ++-
 .../child-block/child-block.component.scss    | 22 +++++++++
 ...ild-meeting-note-attendance.component.html | 49 +++++++++----------
 ...ild-meeting-note-attendance.component.scss |  2 +-
 .../note-details/note-details.component.html  | 40 +++++++++++----
 .../note-details/note-details.component.scss  | 37 ++++++++++++++
 7 files changed, 120 insertions(+), 43 deletions(-)

diff --git a/src/app/child-dev-project/attendance/attendance-status-select/attendance-status-select.component.scss b/src/app/child-dev-project/attendance/attendance-status-select/attendance-status-select.component.scss
index b58561c440..eacdaa7ba2 100644
--- a/src/app/child-dev-project/attendance/attendance-status-select/attendance-status-select.component.scss
+++ b/src/app/child-dev-project/attendance/attendance-status-select/attendance-status-select.component.scss
@@ -21,3 +21,8 @@
     vertical-align: middle;
   }
 }
+
+mat-form-field {
+  // don't allow this to overflow
+  max-width: 100%;
+}
diff --git a/src/app/child-dev-project/children/child-block/child-block.component.html b/src/app/child-dev-project/children/child-block/child-block.component.html
index bdc03ca99c..dda32bbe34 100644
--- a/src/app/child-dev-project/children/child-block/child-block.component.html
+++ b/src/app/child-dev-project/children/child-block/child-block.component.html
@@ -4,13 +4,11 @@
   (mouseleave)="hideTooltip()"
   (click)="showDetailsPage()"
   [ngClass]="{ inactive: !entity.isActive }"
-  class="truncate-text"
+  class="truncate-text container"
 >
   <img [src]="entity.photo?.photo?.value" class="child-pic" alt=""/>
-  <span class="mat-body-1">{{ entity?.name }}</span>
-  <span style="font-size: x-small" *ngIf="entity?.projectNumber"
-    > ({{ entity?.projectNumber }})</span
-  >
+  <span class="font-size-rel">{{ entity?.name }}</span>
+  <span class="subnote" *ngIf="entity?.projectNumber"> ({{ entity?.projectNumber }})</span>
 </span>
 
 <div style="position: absolute" *ngIf="tooltipVisible">
diff --git a/src/app/child-dev-project/children/child-block/child-block.component.scss b/src/app/child-dev-project/children/child-block/child-block.component.scss
index 05222f2cf8..46ff97507b 100644
--- a/src/app/child-dev-project/children/child-block/child-block.component.scss
+++ b/src/app/child-dev-project/children/child-block/child-block.component.scss
@@ -29,3 +29,25 @@
 .inactive {
   color: grey;
 }
+
+.container {
+  display: flex;
+  align-items: center;
+  font-size: 1em;
+}
+
+.font-size-rel {
+  font-size: 1em;
+  margin-right: 3px;
+  font-weight: 500;
+  color: #262626;
+}
+
+.subnote {
+  font-size: 0.7em;
+  position: relative;
+  top: 0.2em;
+  color: #5e5e5e;
+}
+
+
diff --git a/src/app/child-dev-project/notes/note-details/child-meeting-attendance/child-meeting-note-attendance.component.html b/src/app/child-dev-project/notes/note-details/child-meeting-attendance/child-meeting-note-attendance.component.html
index e52d1658dd..cb9bff5d28 100644
--- a/src/app/child-dev-project/notes/note-details/child-meeting-attendance/child-meeting-note-attendance.component.html
+++ b/src/app/child-dev-project/notes/note-details/child-meeting-attendance/child-meeting-note-attendance.component.html
@@ -1,30 +1,25 @@
-<div class="attendance-box">
+<app-child-block [entityId]="childId"></app-child-block>
 
-  <div class="content-wrapper">
-    <app-child-block [entityId]="childId"></app-child-block>
+<app-attendance-status-select
+  [(value)]="attendance.status"
+  (valueChange)="change.emit(attendance)"
+  [disabled]="disabled"
+>
+</app-attendance-status-select>
 
-    <app-attendance-status-select
-      [(value)]="attendance.status"
-      (valueChange)="change.emit(attendance)"
-      [disabled]="disabled"
-    >
-    </app-attendance-status-select>
+<mat-form-field class="flex-grow">
+  <input
+    matInput
+    i18n-placeholder
+    placeholder="Remarks"
+    name="remarks"
+    type="text"
+    [(ngModel)]="attendance.remarks"
+    [disabled]="disabled"
+    (input)="change.emit(attendance)"
+  />
+</mat-form-field>
 
-    <mat-form-field class="flex-grow">
-      <input
-        matInput
-        i18n-placeholder
-        placeholder="Remarks"
-        name="remarks"
-        type="text"
-        [(ngModel)]="attendance.remarks"
-        [disabled]="disabled"
-        (input)="change.emit(attendance)"
-      />
-    </mat-form-field>
-  </div>
-
-  <button mat-icon-button>
-    <fa-icon *ngIf="!disabled" icon="trash" (click)="remove.emit()"></fa-icon>
-  </button>
-</div>
+<button mat-icon-button>
+  <fa-icon *ngIf="!disabled" icon="trash" (click)="remove.emit()"></fa-icon>
+</button>
diff --git a/src/app/child-dev-project/notes/note-details/child-meeting-attendance/child-meeting-note-attendance.component.scss b/src/app/child-dev-project/notes/note-details/child-meeting-attendance/child-meeting-note-attendance.component.scss
index 42d2d684a1..81aafe81cc 100644
--- a/src/app/child-dev-project/notes/note-details/child-meeting-attendance/child-meeting-note-attendance.component.scss
+++ b/src/app/child-dev-project/notes/note-details/child-meeting-attendance/child-meeting-note-attendance.component.scss
@@ -2,7 +2,7 @@
   display: none;
 }
 
-.attendance-box {
+:host {
   border: 1px solid lightgrey;
   border-radius: 5px;
   padding: 10px;
diff --git a/src/app/child-dev-project/notes/note-details/note-details.component.html b/src/app/child-dev-project/notes/note-details/note-details.component.html
index 6d0e9287c5..e9c67dcd5e 100644
--- a/src/app/child-dev-project/notes/note-details/note-details.component.html
+++ b/src/app/child-dev-project/notes/note-details/note-details.component.html
@@ -185,16 +185,36 @@ <h1>{{ entity.date | date }}: {{ entity.subject }}</h1>
       </mat-option>
     </app-entity-select>
 
-    <div *ngIf="entity.category?.isMeeting" style="margin-top: -1.25em">
-      <app-child-meeting-note-attendance
-        *ngFor="let childId of entity.children"
-        [childId]="childId"
-        [attendance]="entity.getAttendance(childId)"
-        (change)="entityForm.form.markAsDirty()"
-        (remove)="entity.removeChild(childId); entityForm.form.markAsDirty()"
-        [disabled]="formDialogWrapper.readonly"
-      >
-      </app-child-meeting-note-attendance>
+    <div *ngIf="entity.category?.isMeeting" style="margin-top: -1.25em" class="attendance-blocks">
+      <div *ngFor="let childId of entity.children" class="attendance-item">
+        <app-child-block [entityId]="childId" class="attendance-item--header"></app-child-block>
+
+        <div class="attendance-item--content">
+          <app-attendance-status-select
+            [(value)]="entity.getAttendance(childId).status"
+            (valueChange)="entityForm.form.markAsDirty()"
+            [disabled]="formDialogWrapper.readonly"
+          >
+          </app-attendance-status-select>
+
+          <mat-form-field>
+            <input
+              matInput
+              i18n-placeholder
+              placeholder="Remarks"
+              name="remarks"
+              type="text"
+              [(ngModel)]="entity.getAttendance(childId).remarks"
+              [disabled]="formDialogWrapper.readonly"
+              (input)="entityForm.form.markAsDirty()"
+            />
+          </mat-form-field>
+
+          <button mat-icon-button>
+            <fa-icon *ngIf="!formDialogWrapper.readonly" icon="trash" (click)="entity.removeChild(childId); entityForm.form.markAsDirty()"></fa-icon>
+          </button>
+        </div>
+      </div>
     </div>
 
     <app-entity-select
diff --git a/src/app/child-dev-project/notes/note-details/note-details.component.scss b/src/app/child-dev-project/notes/note-details/note-details.component.scss
index b3b4d9b61e..3b0062f5b6 100644
--- a/src/app/child-dev-project/notes/note-details/note-details.component.scss
+++ b/src/app/child-dev-project/notes/note-details/note-details.component.scss
@@ -16,6 +16,43 @@
   @include adaptive-grid(450px);
 }
 
+.attendance-blocks {
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  gap: 0.5em;
+}
+
+.attendance-item {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+
+  border: 1px solid lightgray;
+  border-radius: 4px;
+  gap: 1em;
+
+  padding: 1em;
+  box-sizing: border-box;
+
+  &--header {
+    align-self: center;
+  }
+
+  &--content {
+    display: flex;
+    flex-wrap: wrap;
+    width: 100%;
+    gap: 1em;
+    align-items: baseline;
+    justify-content: center;
+
+    > mat-form-field {
+      flex-grow: 1;
+    }
+  }
+}
+
 .information-body {
   display: flex;
   flex-direction: column;

From 2480156233f0671afeaf38bd6a1a82527753241c Mon Sep 17 00:00:00 2001
From: Schottkyc137 <lukas2121@icloud.com>
Date: Thu, 30 Jun 2022 20:53:46 +0200
Subject: [PATCH 07/12] Rework basic design

---
 .../notes/note-details/note-details.component.html   | 12 +++++++-----
 .../notes/note-details/note-details.component.scss   |  5 +++++
 2 files changed, 12 insertions(+), 5 deletions(-)

diff --git a/src/app/child-dev-project/notes/note-details/note-details.component.html b/src/app/child-dev-project/notes/note-details/note-details.component.html
index e9c67dcd5e..0876f1beea 100644
--- a/src/app/child-dev-project/notes/note-details/note-details.component.html
+++ b/src/app/child-dev-project/notes/note-details/note-details.component.html
@@ -187,7 +187,13 @@ <h1>{{ entity.date | date }}: {{ entity.subject }}</h1>
 
     <div *ngIf="entity.category?.isMeeting" style="margin-top: -1.25em" class="attendance-blocks">
       <div *ngFor="let childId of entity.children" class="attendance-item">
-        <app-child-block [entityId]="childId" class="attendance-item--header"></app-child-block>
+        <div class="attendance-item--header">
+          <app-child-block [entityId]="childId"></app-child-block>
+
+          <button mat-icon-button>
+            <fa-icon *ngIf="!formDialogWrapper.readonly" icon="trash" (click)="entity.removeChild(childId); entityForm.form.markAsDirty()"></fa-icon>
+          </button>
+        </div>
 
         <div class="attendance-item--content">
           <app-attendance-status-select
@@ -209,10 +215,6 @@ <h1>{{ entity.date | date }}: {{ entity.subject }}</h1>
               (input)="entityForm.form.markAsDirty()"
             />
           </mat-form-field>
-
-          <button mat-icon-button>
-            <fa-icon *ngIf="!formDialogWrapper.readonly" icon="trash" (click)="entity.removeChild(childId); entityForm.form.markAsDirty()"></fa-icon>
-          </button>
         </div>
       </div>
     </div>
diff --git a/src/app/child-dev-project/notes/note-details/note-details.component.scss b/src/app/child-dev-project/notes/note-details/note-details.component.scss
index 3b0062f5b6..f8af3f4d65 100644
--- a/src/app/child-dev-project/notes/note-details/note-details.component.scss
+++ b/src/app/child-dev-project/notes/note-details/note-details.component.scss
@@ -37,6 +37,11 @@
 
   &--header {
     align-self: center;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+    width: 100%;
   }
 
   &--content {

From de6e8f7772b9347fb970f671c60d9f95c404cf7e Mon Sep 17 00:00:00 2001
From: Schottkyc137 <lukas2121@icloud.com>
Date: Thu, 30 Jun 2022 21:54:30 +0200
Subject: [PATCH 08/12] Component works different on screens with different
 sizes

---
 .../note-details/note-details.component.html  | 38 ++++++++++++++-
 .../note-details/note-details.component.scss  | 48 ++++++++++++++++++-
 .../note-details/note-details.component.ts    |  6 ++-
 3 files changed, 88 insertions(+), 4 deletions(-)

diff --git a/src/app/child-dev-project/notes/note-details/note-details.component.html b/src/app/child-dev-project/notes/note-details/note-details.component.html
index 0876f1beea..d2b9c7c38e 100644
--- a/src/app/child-dev-project/notes/note-details/note-details.component.html
+++ b/src/app/child-dev-project/notes/note-details/note-details.component.html
@@ -185,7 +185,42 @@ <h1>{{ entity.date | date }}: {{ entity.subject }}</h1>
       </mat-option>
     </app-entity-select>
 
-    <div *ngIf="entity.category?.isMeeting" style="margin-top: -1.25em" class="attendance-blocks">
+    <div *ngIf="entity.category?.isMeeting && !desktop">
+      <table class="table">
+        <tr *ngFor="let childId of entity.children">
+          <td>
+            <button mat-icon-button>
+              <fa-icon *ngIf="!formDialogWrapper.readonly" icon="trash" (click)="entity.removeChild(childId); entityForm.form.markAsDirty()"></fa-icon>
+            </button>
+          </td>
+          <td><app-child-block [entityId]="childId"></app-child-block></td>
+          <td>
+            <app-attendance-status-select
+              [(value)]="entity.getAttendance(childId).status"
+              (valueChange)="entityForm.form.markAsDirty()"
+              [disabled]="formDialogWrapper.readonly"
+            >
+            </app-attendance-status-select>
+          </td>
+          <td class="full-width">
+            <mat-form-field class="adjust-top">
+              <input
+                matInput
+                i18n-placeholder
+                placeholder="Remarks"
+                name="remarks"
+                type="text"
+                [(ngModel)]="entity.getAttendance(childId).remarks"
+                [disabled]="formDialogWrapper.readonly"
+                (input)="entityForm.form.markAsDirty()"
+              />
+            </mat-form-field>
+          </td>
+        </tr>
+      </table>
+    </div>
+
+    <div *ngIf="entity.category?.isMeeting && desktop" class="attendance-blocks">
       <div *ngFor="let childId of entity.children" class="attendance-item">
         <div class="attendance-item--header">
           <app-child-block [entityId]="childId"></app-child-block>
@@ -231,5 +266,6 @@ <h1>{{ entity.date | date }}: {{ entity.subject }}</h1>
       placeholder="Add group ..."
     >
     </app-entity-select>
+
   </form>
 </app-form-dialog-wrapper>
diff --git a/src/app/child-dev-project/notes/note-details/note-details.component.scss b/src/app/child-dev-project/notes/note-details/note-details.component.scss
index f8af3f4d65..8a2b397c0f 100644
--- a/src/app/child-dev-project/notes/note-details/note-details.component.scss
+++ b/src/app/child-dev-project/notes/note-details/note-details.component.scss
@@ -23,13 +23,16 @@
   gap: 0.5em;
 }
 
+
+$border: 1px solid lightgray;
+
 .attendance-item {
   display: flex;
   flex-direction: column;
   width: 100%;
 
-  border: 1px solid lightgray;
-  border-radius: 4px;
+  border: $border;
+
   gap: 1em;
 
   padding: 1em;
@@ -58,6 +61,47 @@
   }
 }
 
+.table {
+
+  border-spacing: 0 4px;
+
+  > tr > td {
+
+    padding-left: 0.5em;
+    padding-right: 0.5em;
+
+    &:first-child {
+      border-radius: 4px 0 0 4px;
+      border-left: $border;
+      border-top: $border;
+      border-bottom: $border;
+    }
+
+    &:last-child {
+      border-radius: 0 4px 4px 0;
+      border-right: $border;
+      border-top: $border;
+      border-bottom: $border;
+    }
+
+    &:not(:first-child):not(:last-child) {
+      border-top: $border;
+      border-bottom: $border;
+    }
+  }
+}
+
+.adjust-top {
+  position: relative;
+  top: 4px;
+  padding-right: 1em;
+  width: 100%;
+}
+
+.full-width {
+  width: 100%;
+}
+
 .information-body {
   display: flex;
   flex-direction: column;
diff --git a/src/app/child-dev-project/notes/note-details/note-details.component.ts b/src/app/child-dev-project/notes/note-details/note-details.component.ts
index d0a6e71e81..b767884b5e 100644
--- a/src/app/child-dev-project/notes/note-details/note-details.component.ts
+++ b/src/app/child-dev-project/notes/note-details/note-details.component.ts
@@ -10,6 +10,7 @@ import { ExportColumnConfig } from "../../../core/export/export-service/export-c
 import { ConfigService } from "../../../core/config/config.service";
 import { EntityListConfig } from "../../../core/entity-components/entity-list/EntityListConfig";
 import { compareEnums } from "../../../utils/utils";
+import { BreakpointObserver } from "@angular/cdk/layout";
 
 /**
  * Component responsible for displaying the Note creation/view window
@@ -34,12 +35,15 @@ export class NoteDetailsComponent implements ShowsEntity<Note> {
   /** export format for notes to be used for downloading the individual details */
   exportConfig: ExportColumnConfig[];
 
-  constructor(private configService: ConfigService) {
+  constructor(private configService: ConfigService, private breakpointObserver: BreakpointObserver) {
     this.exportConfig = this.configService.getConfig<{
       config: EntityListConfig;
     }>("view:note").config.exportConfig;
+    this.breakpointObserver.observe("(max-width: 1000px)").subscribe((next) => this.desktop = next.matches);
   }
 
+  desktop: boolean;
+
   toggleIncludeInactiveChildren() {
     this.includeInactiveChildren = !this.includeInactiveChildren;
     // This needs to be set so that the filtering will start immediately

From dab06b678405812aa2f92ee0bd4323a0b1f002a6 Mon Sep 17 00:00:00 2001
From: Schottkyc137 <lukas2121@icloud.com>
Date: Thu, 30 Jun 2022 21:59:43 +0200
Subject: [PATCH 09/12] Add some comments

---
 .../notes/note-details/note-details.component.html         | 7 +++++++
 .../notes/note-details/note-details.component.scss         | 7 +++++--
 2 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/src/app/child-dev-project/notes/note-details/note-details.component.html b/src/app/child-dev-project/notes/note-details/note-details.component.html
index d2b9c7c38e..1603b2a49d 100644
--- a/src/app/child-dev-project/notes/note-details/note-details.component.html
+++ b/src/app/child-dev-project/notes/note-details/note-details.component.html
@@ -185,6 +185,12 @@ <h1>{{ entity.date | date }}: {{ entity.subject }}</h1>
       </mat-option>
     </app-entity-select>
 
+    <!-- Additional elements when the note is a meeting -->
+    <!-- If feasible, this whole setup should be replaced with a more simple setup that
+      automatically adapts to the screen size without having to rely on two different layout techniques for
+      small and big screens.
+     -->
+    <!-- Desktop view: display the information as table -->
     <div *ngIf="entity.category?.isMeeting && !desktop">
       <table class="table">
         <tr *ngFor="let childId of entity.children">
@@ -220,6 +226,7 @@ <h1>{{ entity.date | date }}: {{ entity.subject }}</h1>
       </table>
     </div>
 
+    <!-- Mobile view / smaller screen: display the information using a flex-layout -->
     <div *ngIf="entity.category?.isMeeting && desktop" class="attendance-blocks">
       <div *ngFor="let childId of entity.children" class="attendance-item">
         <div class="attendance-item--header">
diff --git a/src/app/child-dev-project/notes/note-details/note-details.component.scss b/src/app/child-dev-project/notes/note-details/note-details.component.scss
index 8a2b397c0f..e4d62fcc93 100644
--- a/src/app/child-dev-project/notes/note-details/note-details.component.scss
+++ b/src/app/child-dev-project/notes/note-details/note-details.component.scss
@@ -27,18 +27,19 @@
 $border: 1px solid lightgray;
 
 .attendance-item {
+  /* Align the items in one column */
   display: flex;
   flex-direction: column;
   width: 100%;
+  gap: 1em;
 
   border: $border;
 
-  gap: 1em;
-
   padding: 1em;
   box-sizing: border-box;
 
   &--header {
+    /* Header: Display the child name on the right, the delete item on the left */
     align-self: center;
     display: flex;
     flex-direction: row;
@@ -47,6 +48,7 @@ $border: 1px solid lightgray;
     width: 100%;
   }
 
+  /* Content: Display all items as a column; allow the items to wrap to the next line */
   &--content {
     display: flex;
     flex-wrap: wrap;
@@ -55,6 +57,7 @@ $border: 1px solid lightgray;
     align-items: baseline;
     justify-content: center;
 
+    /* This field should be the biggest, allow it to grow */
     > mat-form-field {
       flex-grow: 1;
     }

From 49f7dead9e63c56bf634c1bab35177e2b60d6643 Mon Sep 17 00:00:00 2001
From: Simon <therealslimv@yahoo.de>
Date: Mon, 4 Jul 2022 12:42:12 +0200
Subject: [PATCH 10/12] removed justify content to have elements left aligned

---
 .../notes/note-details/note-details.component.scss               | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/app/child-dev-project/notes/note-details/note-details.component.scss b/src/app/child-dev-project/notes/note-details/note-details.component.scss
index e4d62fcc93..09270b8d9d 100644
--- a/src/app/child-dev-project/notes/note-details/note-details.component.scss
+++ b/src/app/child-dev-project/notes/note-details/note-details.component.scss
@@ -55,7 +55,6 @@ $border: 1px solid lightgray;
     width: 100%;
     gap: 1em;
     align-items: baseline;
-    justify-content: center;
 
     /* This field should be the biggest, allow it to grow */
     > mat-form-field {

From 04ecb1b19d7cac0d8d2de700361fef0a49eb16bc Mon Sep 17 00:00:00 2001
From: Simon <therealslimv@yahoo.de>
Date: Mon, 4 Jul 2022 13:36:23 +0200
Subject: [PATCH 11/12] moved meeting attendance section to own component

---
 ...ild-meeting-note-attendance.component.html | 93 +++++++++++++-----
 ...ild-meeting-note-attendance.component.scss | 94 ++++++++++++++++---
 ...-meeting-note-attendance.component.spec.ts |  5 +-
 ...child-meeting-note-attendance.component.ts | 10 +-
 .../note-details/note-details.component.html  | 81 ++--------------
 .../note-details/note-details.component.scss  | 88 -----------------
 .../note-details/note-details.component.ts    | 18 +++-
 7 files changed, 179 insertions(+), 210 deletions(-)

diff --git a/src/app/child-dev-project/notes/note-details/child-meeting-attendance/child-meeting-note-attendance.component.html b/src/app/child-dev-project/notes/note-details/child-meeting-attendance/child-meeting-note-attendance.component.html
index cb9bff5d28..8fb9edb179 100644
--- a/src/app/child-dev-project/notes/note-details/child-meeting-attendance/child-meeting-note-attendance.component.html
+++ b/src/app/child-dev-project/notes/note-details/child-meeting-attendance/child-meeting-note-attendance.component.html
@@ -1,25 +1,74 @@
-<app-child-block [entityId]="childId"></app-child-block>
+<!-- If feasible, this whole setup should be replaced with a more simple setup that
+  automatically adapts to the screen size without having to rely on two different layout techniques for
+  small and big screens.
+ -->
+<div *ngIf="!mobile">
+  <!-- Desktop view: display the information as table -->
+  <table class="table">
+    <tr *ngFor="let childId of entity.children">
+      <td>
+        <button mat-icon-button>
+          <fa-icon *ngIf="!disabled" icon="trash" (click)="remove.emit(childId)"></fa-icon>
+        </button>
+      </td>
+      <td><app-child-block [entityId]="childId"></app-child-block></td>
+      <td>
+        <app-attendance-status-select
+          [(value)]="entity.getAttendance(childId).status"
+          (valueChange)="change.emit(childId)"
+          [disabled]="disabled"
+        >
+        </app-attendance-status-select>
+      </td>
+      <td class="full-width">
+        <mat-form-field class="adjust-top">
+          <input
+            matInput
+            i18n-placeholder
+            placeholder="Remarks"
+            name="remarks"
+            type="text"
+            [(ngModel)]="entity.getAttendance(childId).remarks"
+            [disabled]="disabled"
+            (input)="change.emit(childId)"
+          />
+        </mat-form-field>
+      </td>
+    </tr>
+  </table>
+</div>
 
-<app-attendance-status-select
-  [(value)]="attendance.status"
-  (valueChange)="change.emit(attendance)"
-  [disabled]="disabled"
->
-</app-attendance-status-select>
+<div *ngIf="mobile" class="attendance-blocks">
+  <!-- Mobile view / smaller screen: display the information using a flex-layout -->
+  <div *ngFor="let childId of entity.children" class="attendance-item">
+    <div class="attendance-item--header">
+      <app-child-block [entityId]="childId"></app-child-block>
 
-<mat-form-field class="flex-grow">
-  <input
-    matInput
-    i18n-placeholder
-    placeholder="Remarks"
-    name="remarks"
-    type="text"
-    [(ngModel)]="attendance.remarks"
-    [disabled]="disabled"
-    (input)="change.emit(attendance)"
-  />
-</mat-form-field>
+      <button mat-icon-button>
+        <fa-icon *ngIf="!disabled" icon="trash" (click)="remove.emit(childId)"></fa-icon>
+      </button>
+    </div>
 
-<button mat-icon-button>
-  <fa-icon *ngIf="!disabled" icon="trash" (click)="remove.emit()"></fa-icon>
-</button>
+    <div class="attendance-item--content">
+      <app-attendance-status-select
+        [(value)]="entity.getAttendance(childId).status"
+        (valueChange)="change.emit(childId)"
+        [disabled]="disabled"
+      >
+      </app-attendance-status-select>
+
+      <mat-form-field>
+        <input
+          matInput
+          i18n-placeholder
+          placeholder="Remarks"
+          name="remarks"
+          type="text"
+          [(ngModel)]="entity.getAttendance(childId).remarks"
+          (input)="change.emit(childId)"
+          [disabled]="disabled"
+        />
+      </mat-form-field>
+    </div>
+  </div>
+</div>
diff --git a/src/app/child-dev-project/notes/note-details/child-meeting-attendance/child-meeting-note-attendance.component.scss b/src/app/child-dev-project/notes/note-details/child-meeting-attendance/child-meeting-note-attendance.component.scss
index 81aafe81cc..bb2e04f907 100644
--- a/src/app/child-dev-project/notes/note-details/child-meeting-attendance/child-meeting-note-attendance.component.scss
+++ b/src/app/child-dev-project/notes/note-details/child-meeting-attendance/child-meeting-note-attendance.component.scss
@@ -1,22 +1,86 @@
-.hide-remarks {
-  display: none;
+$border: 1px solid lightgray;
+
+.table {
+
+  border-spacing: 0 4px;
+
+  > tr > td {
+
+    padding-left: 0.5em;
+    padding-right: 0.5em;
+
+    &:first-child {
+      border-radius: 4px 0 0 4px;
+      border-left: $border;
+      border-top: $border;
+      border-bottom: $border;
+    }
+
+    &:last-child {
+      border-radius: 0 4px 4px 0;
+      border-right: $border;
+      border-top: $border;
+      border-bottom: $border;
+    }
+
+    &:not(:first-child):not(:last-child) {
+      border-top: $border;
+      border-bottom: $border;
+    }
+  }
+}
+
+.adjust-top {
+  position: relative;
+  top: 4px;
+  padding-right: 1em;
+  width: 100%;
 }
 
-:host {
-  border: 1px solid lightgrey;
-  border-radius: 5px;
-  padding: 10px;
-  margin-bottom: 7px;
+.full-width {
+  width: 100%;
+}
+
+.attendance-item {
+  /* Align the items in one column */
   display: flex;
-  align-items: center;
-  gap: 12px;
+  flex-direction: column;
+  width: 100%;
+  gap: 1em;
+
+  border: $border;
+
+  padding: 1em;
+  box-sizing: border-box;
+
+  &--header {
+    /* Header: Display the child name on the right, the delete item on the left */
+    align-self: center;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+    width: 100%;
+  }
+
+  /* Content: Display all items as a column; allow the items to wrap to the next line */
+  &--content {
+    display: flex;
+    flex-wrap: wrap;
+    width: 100%;
+    gap: 1em;
+    align-items: baseline;
+
+    /* This field should be the biggest, allow it to grow */
+    > mat-form-field {
+      flex-grow: 1;
+    }
+  }
 }
 
-.content-wrapper {
+.attendance-blocks {
   display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
-  align-items: baseline;
-  gap: 12px;
-  flex-grow: 1;
+  align-items: center;
+  flex-direction: column;
+  gap: 0.5em;
 }
diff --git a/src/app/child-dev-project/notes/note-details/child-meeting-attendance/child-meeting-note-attendance.component.spec.ts b/src/app/child-dev-project/notes/note-details/child-meeting-attendance/child-meeting-note-attendance.component.spec.ts
index aa7fad24c4..01e4b6fcd9 100644
--- a/src/app/child-dev-project/notes/note-details/child-meeting-attendance/child-meeting-note-attendance.component.spec.ts
+++ b/src/app/child-dev-project/notes/note-details/child-meeting-attendance/child-meeting-note-attendance.component.spec.ts
@@ -1,13 +1,12 @@
 import { ChildMeetingNoteAttendanceComponent } from "./child-meeting-note-attendance.component";
-import { EventAttendance } from "../../../attendance/model/event-attendance";
+import { EventNote } from "../../../attendance/model/event-note";
 
 describe("ChildMeetingAttendanceComponent", () => {
   let component: ChildMeetingNoteAttendanceComponent;
 
   beforeEach(() => {
     component = new ChildMeetingNoteAttendanceComponent();
-    component.childId = "child1";
-    component.attendance = new EventAttendance();
+    component.entity = EventNote.create(new Date());
   });
 
   it("should create", () => {
diff --git a/src/app/child-dev-project/notes/note-details/child-meeting-attendance/child-meeting-note-attendance.component.ts b/src/app/child-dev-project/notes/note-details/child-meeting-attendance/child-meeting-note-attendance.component.ts
index de30cc744a..6f53ff18b5 100644
--- a/src/app/child-dev-project/notes/note-details/child-meeting-attendance/child-meeting-note-attendance.component.ts
+++ b/src/app/child-dev-project/notes/note-details/child-meeting-attendance/child-meeting-note-attendance.component.ts
@@ -1,5 +1,7 @@
 import { Component, EventEmitter, Input, Output } from "@angular/core";
 import { EventAttendance } from "../../../attendance/model/event-attendance";
+import { Note } from "../../model/note";
+import { FormGroup } from "@angular/forms";
 
 /**
  * Display a single participant's attendance status in a compact row.
@@ -10,9 +12,9 @@ import { EventAttendance } from "../../../attendance/model/event-attendance";
   styleUrls: ["./child-meeting-note-attendance.component.scss"],
 })
 export class ChildMeetingNoteAttendanceComponent {
-  @Input() childId: string;
+  @Input() mobile = false;
+  @Input() entity: Note;
   @Input() disabled: boolean = false;
-  @Input() attendance: EventAttendance;
-  @Output() change = new EventEmitter();
-  @Output() remove = new EventEmitter();
+  @Output() change = new EventEmitter<string>();
+  @Output() remove = new EventEmitter<string>();
 }
diff --git a/src/app/child-dev-project/notes/note-details/note-details.component.html b/src/app/child-dev-project/notes/note-details/note-details.component.html
index 1603b2a49d..5dcea7be30 100644
--- a/src/app/child-dev-project/notes/note-details/note-details.component.html
+++ b/src/app/child-dev-project/notes/note-details/note-details.component.html
@@ -185,80 +185,15 @@ <h1>{{ entity.date | date }}: {{ entity.subject }}</h1>
       </mat-option>
     </app-entity-select>
 
-    <!-- Additional elements when the note is a meeting -->
-    <!-- If feasible, this whole setup should be replaced with a more simple setup that
-      automatically adapts to the screen size without having to rely on two different layout techniques for
-      small and big screens.
-     -->
-    <!-- Desktop view: display the information as table -->
-    <div *ngIf="entity.category?.isMeeting && !desktop">
-      <table class="table">
-        <tr *ngFor="let childId of entity.children">
-          <td>
-            <button mat-icon-button>
-              <fa-icon *ngIf="!formDialogWrapper.readonly" icon="trash" (click)="entity.removeChild(childId); entityForm.form.markAsDirty()"></fa-icon>
-            </button>
-          </td>
-          <td><app-child-block [entityId]="childId"></app-child-block></td>
-          <td>
-            <app-attendance-status-select
-              [(value)]="entity.getAttendance(childId).status"
-              (valueChange)="entityForm.form.markAsDirty()"
-              [disabled]="formDialogWrapper.readonly"
-            >
-            </app-attendance-status-select>
-          </td>
-          <td class="full-width">
-            <mat-form-field class="adjust-top">
-              <input
-                matInput
-                i18n-placeholder
-                placeholder="Remarks"
-                name="remarks"
-                type="text"
-                [(ngModel)]="entity.getAttendance(childId).remarks"
-                [disabled]="formDialogWrapper.readonly"
-                (input)="entityForm.form.markAsDirty()"
-              />
-            </mat-form-field>
-          </td>
-        </tr>
-      </table>
-    </div>
-
-    <!-- Mobile view / smaller screen: display the information using a flex-layout -->
-    <div *ngIf="entity.category?.isMeeting && desktop" class="attendance-blocks">
-      <div *ngFor="let childId of entity.children" class="attendance-item">
-        <div class="attendance-item--header">
-          <app-child-block [entityId]="childId"></app-child-block>
-
-          <button mat-icon-button>
-            <fa-icon *ngIf="!formDialogWrapper.readonly" icon="trash" (click)="entity.removeChild(childId); entityForm.form.markAsDirty()"></fa-icon>
-          </button>
-        </div>
 
-        <div class="attendance-item--content">
-          <app-attendance-status-select
-            [(value)]="entity.getAttendance(childId).status"
-            (valueChange)="entityForm.form.markAsDirty()"
-            [disabled]="formDialogWrapper.readonly"
-          >
-          </app-attendance-status-select>
-
-          <mat-form-field>
-            <input
-              matInput
-              i18n-placeholder
-              placeholder="Remarks"
-              name="remarks"
-              type="text"
-              [(ngModel)]="entity.getAttendance(childId).remarks"
-              [disabled]="formDialogWrapper.readonly"
-              (input)="entityForm.form.markAsDirty()"
-            />
-          </mat-form-field>
-        </div>
-      </div>
+    <div *ngIf="entity.category?.isMeeting">
+      <app-child-meeting-note-attendance
+        [mobile]="mobile"
+        [entity]="entity"
+        [disabled]="formDialogWrapper.readonly"
+        (change)="entityForm.form.markAsDirty()"
+        (remove)="entity.removeChild($event); entityForm.form.markAsDirty()"
+      ></app-child-meeting-note-attendance>
     </div>
 
     <app-entity-select
diff --git a/src/app/child-dev-project/notes/note-details/note-details.component.scss b/src/app/child-dev-project/notes/note-details/note-details.component.scss
index 09270b8d9d..b3b4d9b61e 100644
--- a/src/app/child-dev-project/notes/note-details/note-details.component.scss
+++ b/src/app/child-dev-project/notes/note-details/note-details.component.scss
@@ -16,94 +16,6 @@
   @include adaptive-grid(450px);
 }
 
-.attendance-blocks {
-  display: flex;
-  align-items: center;
-  flex-direction: column;
-  gap: 0.5em;
-}
-
-
-$border: 1px solid lightgray;
-
-.attendance-item {
-  /* Align the items in one column */
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  gap: 1em;
-
-  border: $border;
-
-  padding: 1em;
-  box-sizing: border-box;
-
-  &--header {
-    /* Header: Display the child name on the right, the delete item on the left */
-    align-self: center;
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    justify-content: space-between;
-    width: 100%;
-  }
-
-  /* Content: Display all items as a column; allow the items to wrap to the next line */
-  &--content {
-    display: flex;
-    flex-wrap: wrap;
-    width: 100%;
-    gap: 1em;
-    align-items: baseline;
-
-    /* This field should be the biggest, allow it to grow */
-    > mat-form-field {
-      flex-grow: 1;
-    }
-  }
-}
-
-.table {
-
-  border-spacing: 0 4px;
-
-  > tr > td {
-
-    padding-left: 0.5em;
-    padding-right: 0.5em;
-
-    &:first-child {
-      border-radius: 4px 0 0 4px;
-      border-left: $border;
-      border-top: $border;
-      border-bottom: $border;
-    }
-
-    &:last-child {
-      border-radius: 0 4px 4px 0;
-      border-right: $border;
-      border-top: $border;
-      border-bottom: $border;
-    }
-
-    &:not(:first-child):not(:last-child) {
-      border-top: $border;
-      border-bottom: $border;
-    }
-  }
-}
-
-.adjust-top {
-  position: relative;
-  top: 4px;
-  padding-right: 1em;
-  width: 100%;
-}
-
-.full-width {
-  width: 100%;
-}
-
 .information-body {
   display: flex;
   flex-direction: column;
diff --git a/src/app/child-dev-project/notes/note-details/note-details.component.ts b/src/app/child-dev-project/notes/note-details/note-details.component.ts
index b767884b5e..4e135dcbc0 100644
--- a/src/app/child-dev-project/notes/note-details/note-details.component.ts
+++ b/src/app/child-dev-project/notes/note-details/note-details.component.ts
@@ -11,6 +11,7 @@ import { ConfigService } from "../../../core/config/config.service";
 import { EntityListConfig } from "../../../core/entity-components/entity-list/EntityListConfig";
 import { compareEnums } from "../../../utils/utils";
 import { BreakpointObserver } from "@angular/cdk/layout";
+import { FormDialogWrapperComponent } from "../../../core/form-dialog/form-dialog-wrapper/form-dialog-wrapper.component";
 
 /**
  * Component responsible for displaying the Note creation/view window
@@ -22,7 +23,8 @@ import { BreakpointObserver } from "@angular/cdk/layout";
 })
 export class NoteDetailsComponent implements ShowsEntity<Note> {
   @Input() entity: Note;
-  @ViewChild("dialogForm", { static: true }) formDialogWrapper;
+  @ViewChild("dialogForm", { static: true })
+  formDialogWrapper: FormDialogWrapperComponent<Note>;
 
   readonly Child: EntityConstructor<Child> = Child;
   readonly School: EntityConstructor<School> = School;
@@ -35,15 +37,21 @@ export class NoteDetailsComponent implements ShowsEntity<Note> {
   /** export format for notes to be used for downloading the individual details */
   exportConfig: ExportColumnConfig[];
 
-  constructor(private configService: ConfigService, private breakpointObserver: BreakpointObserver) {
+  /** Is it mobile view or not */
+  mobile = false;
+
+  constructor(
+    private configService: ConfigService,
+    private breakpointObserver: BreakpointObserver
+  ) {
     this.exportConfig = this.configService.getConfig<{
       config: EntityListConfig;
     }>("view:note").config.exportConfig;
-    this.breakpointObserver.observe("(max-width: 1000px)").subscribe((next) => this.desktop = next.matches);
+    this.breakpointObserver
+      .observe("(max-width: 1000px)")
+      .subscribe((next) => (this.mobile = next.matches));
   }
 
-  desktop: boolean;
-
   toggleIncludeInactiveChildren() {
     this.includeInactiveChildren = !this.includeInactiveChildren;
     // This needs to be set so that the filtering will start immediately

From 21a9c29f31c516b6f5c26d610c7f10c4ce64ee4d Mon Sep 17 00:00:00 2001
From: Simon <therealslimv@yahoo.de>
Date: Mon, 4 Jul 2022 13:48:20 +0200
Subject: [PATCH 12/12] fixed e2e test

---
 e2e/integration/RecordingAttendanceOfChild.ts | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/e2e/integration/RecordingAttendanceOfChild.ts b/e2e/integration/RecordingAttendanceOfChild.ts
index 774d37a7db..cc3db2aca1 100644
--- a/e2e/integration/RecordingAttendanceOfChild.ts
+++ b/e2e/integration/RecordingAttendanceOfChild.ts
@@ -13,7 +13,10 @@ describe("Scenario: Recording attendance of a child - E2E test", function () {
     cy.contains("mat-card", "School Class")
       .eq(0)
       .click({ scrollBehavior: "center" });
-    cy.get(".mat-body-1").invoke("text").as("childName");
+    cy.get(".child-block > span > span ")
+      .first()
+      .invoke("text")
+      .as("childName");
     cy.get(".group-select-option").contains("Present").click();
     cy.get('[fxflex=""] > .ng-star-inserted > .mat-focus-indicator').click();
     cy.contains("button", "Save").click();