From 8e12a77dfd87936a725a11f1125cce345f8f0fe4 Mon Sep 17 00:00:00 2001
From: Florian Eisenmenger <floeis@MacBook-Pro-von-Florian.fritz.box>
Date: Thu, 4 Apr 2024 14:05:11 +0200
Subject: [PATCH] small fix

---
 matsen-tool/src/app/home/home.component.html  | 157 +++++++++---------
 .../partners-detail.component.html            |   2 +-
 .../src/app/tasks/tasks.component.html        |   2 +-
 matsen-tool/src/assets/scss/_basics.scss      |  45 +++++
 4 files changed, 129 insertions(+), 77 deletions(-)

diff --git a/matsen-tool/src/app/home/home.component.html b/matsen-tool/src/app/home/home.component.html
index b8d07aa..2431d09 100644
--- a/matsen-tool/src/app/home/home.component.html
+++ b/matsen-tool/src/app/home/home.component.html
@@ -63,23 +63,26 @@
     <div class="container spt-container">
         <app-toggle #togglePosts [headline]="('user.my' | translate) + ' ' + ('basic.tasks' | translate)">
             <div class="spt-accordion position-relative">
-                <button class="btn btn-primary toggle-btn" (click)="openModalNewTask()">{{'basic.new-task' | translate}}</button>
+                <button class="btn btn-primary toggle-btn"
+                        (click)="openModalNewTask()">{{ 'basic.new-task' | translate }}
+                </button>
                 <div class="tasks mb-3" *ngFor="let task of tasks">
                     <div class="card p-3">
-                        <div class="position-relative" data-bs-toggle="collapse" [attr.data-bs-target]="'#collapse-' + ApiConverter.extractId(task.id)"
+                        <div class="spt-toggle position-relative collapsed" data-bs-toggle="collapse"
+                             [attr.data-bs-target]="'#collapse-' + ApiConverter.extractId(task.id)"
                              aria-expanded="false"
                              aria-controls="collapseExample">
-                            <h3 class="m-0">{{task.partnerName}}</h3>
+                            <h3 class="m-0">{{ task.partnerName }}</h3>
                             <span class="info d-flex position-absolute">
-                            <span class="due-date">{{ task.dueAt | date:'dd.MM.YYYY':'GMT+0000' }}</span>
-                            <span class="importance" [attr.data-importance]="task.prio"></span>
-                        </span>
-                            <h2 class="m-0">{{task.headline}}</h2>
+                                <span class="due-date">{{ task.dueAt | date:'dd.MM.YYYY':'GMT+0000' }}</span>
+                                <span class="importance" [attr.data-importance]="task.prio"></span>
+                            </span>
+                            <h2 class="m-0">{{ task.headline }}</h2>
                         </div>
                         <div class="collapse" id="collapse-{{ApiConverter.extractId(task.id)}}">
                             <div class="pt-3 pe-5 position-relative">
                                 <p class="m-0" [innerHTML]="apiConverter.getSafeLongtext(task.description)"></p>
-                                <p>Zugewiesen an: {{task.assignedToName}}</p>
+                                <p>Zugewiesen an: {{ task.assignedToName }}</p>
                                 <span *ngIf="task.createdBy === user?.id" class="position-absolute bi bi-pencil p-2"
                                       data-type="user-tool" data-action="edit" (click)="openModalEditTask(task)"></span>
                             </div>
@@ -96,7 +99,8 @@
                                     <p>{{ taskNote.message }}</p>
                                 </div>
                                 <span *ngIf="taskNote.owner === user?.id" class="position-absolute bi bi-pencil p-2"
-                                      data-type="user-tool" data-action="edit" (click)="openModalEditTaskNote(taskNote)"></span>
+                                      data-type="user-tool" data-action="edit"
+                                      (click)="openModalEditTaskNote(taskNote)"></span>
                             </div>
                         </div>
                     </ng-container>
@@ -104,10 +108,13 @@
                     <div class="d-flex justify-content-end mt-1">
                         <span *ngIf="task.taskNotes?.length !== 0" role="button" class="badge bg-secondary p-2 me-2"
                               (click)="showTaskNotes(task)">
-                            <ng-container *ngIf="task.id && taskNotesVisibility.get(task.id)">{{ 'basic.hide-comments' | translate }}</ng-container>
-                            <ng-container *ngIf="task.id && !taskNotesVisibility.get(task.id)">{{ 'basic.show-comments' | translate }}</ng-container>
+                            <ng-container
+                                    *ngIf="task.id && taskNotesVisibility.get(task.id)">{{ 'basic.hide-comments' | translate }}</ng-container>
+                            <ng-container
+                                    *ngIf="task.id && !taskNotesVisibility.get(task.id)">{{ 'basic.show-comments' | translate }}</ng-container>
                         </span>
-                        <span role="button" class="badge bg-secondary p-2" (click)="openModalNewTaskNote(task)">{{'basic.comment-it' | translate}}</span>
+                        <span role="button" class="badge bg-secondary p-2"
+                              (click)="openModalNewTaskNote(task)">{{ 'basic.comment-it' | translate }}</span>
                     </div>
                 </div>
                 <mat-paginator *ngIf="tasks.length > 0" class="rounded-1"
@@ -122,73 +129,73 @@
         </app-toggle>
     </div>
 
-<!--    <div class="container spt-container">-->
-<!--        <div class="d-flex justify-content-between align-items-start">-->
-<!--            <h2>{{'user.my' | translate}} {{'basic.customer' | translate}}</h2>-->
-<!--        </div>-->
-<!--        <table mat-table [dataSource]="dataSource" matSort (matSortChange)="onSortChange($event)"-->
-<!--               class="mat-elevation-z8 mb-3">-->
+    <!--    <div class="container spt-container">-->
+    <!--        <div class="d-flex justify-content-between align-items-start">-->
+    <!--            <h2>{{'user.my' | translate}} {{'basic.customer' | translate}}</h2>-->
+    <!--        </div>-->
+    <!--        <table mat-table [dataSource]="dataSource" matSort (matSortChange)="onSortChange($event)"-->
+    <!--               class="mat-elevation-z8 mb-3">-->
 
-<!--            <ng-container matColumnDef="pos">-->
-<!--                <th mat-header-cell *matHeaderCellDef>-->
-<!--                    {{ 'overview.number' | translate }}-->
-<!--                </th>-->
-<!--                <td mat-cell-->
-<!--                    *matCellDef="let element">{{ (pageSize * pageIndex) + dataSource.filteredData.indexOf(element) + 1 }}-->
-<!--                </td>-->
-<!--            </ng-container>-->
+    <!--            <ng-container matColumnDef="pos">-->
+    <!--                <th mat-header-cell *matHeaderCellDef>-->
+    <!--                    {{ 'overview.number' | translate }}-->
+    <!--                </th>-->
+    <!--                <td mat-cell-->
+    <!--                    *matCellDef="let element">{{ (pageSize * pageIndex) + dataSource.filteredData.indexOf(element) + 1 }}-->
+    <!--                </td>-->
+    <!--            </ng-container>-->
 
-<!--            <ng-container matColumnDef="image">-->
-<!--                <th mat-header-cell *matHeaderCellDef>-->
-<!--                    {{ 'overview.logo' | translate }}-->
-<!--                </th>-->
-<!--                <td mat-cell *matCellDef="let element">-->
-<!--                    <img role="button" src="{{ element.logoUrl }}" (click)="navigateToPartnerDetails(element)" width="40"-->
-<!--                         height="40"/>-->
-<!--                </td>-->
-<!--            </ng-container>-->
+    <!--            <ng-container matColumnDef="image">-->
+    <!--                <th mat-header-cell *matHeaderCellDef>-->
+    <!--                    {{ 'overview.logo' | translate }}-->
+    <!--                </th>-->
+    <!--                <td mat-cell *matCellDef="let element">-->
+    <!--                    <img role="button" src="{{ element.logoUrl }}" (click)="navigateToPartnerDetails(element)" width="40"-->
+    <!--                         height="40"/>-->
+    <!--                </td>-->
+    <!--            </ng-container>-->
 
-<!--            <ng-container matColumnDef="name">-->
-<!--                <th mat-header-cell *matHeaderCellDef mat-sort-header-->
-<!--                    sortActionDescription="{{ 'overview.sort' | translate }}: {{ partnerNameOne }}">-->
-<!--                    {{ partnerNameOne }}-->
-<!--                </th>-->
-<!--                <td mat-cell *matCellDef="let element"><span role="button"-->
-<!--                                                             (click)="navigateToPartnerDetails(element)">{{ element.name }}</span>-->
-<!--                </td>-->
-<!--            </ng-container>-->
+    <!--            <ng-container matColumnDef="name">-->
+    <!--                <th mat-header-cell *matHeaderCellDef mat-sort-header-->
+    <!--                    sortActionDescription="{{ 'overview.sort' | translate }}: {{ partnerNameOne }}">-->
+    <!--                    {{ partnerNameOne }}-->
+    <!--                </th>-->
+    <!--                <td mat-cell *matCellDef="let element"><span role="button"-->
+    <!--                                                             (click)="navigateToPartnerDetails(element)">{{ element.name }}</span>-->
+    <!--                </td>-->
+    <!--            </ng-container>-->
 
-<!--            <ng-container matColumnDef="address">-->
-<!--                <th mat-header-cell *matHeaderCellDef mat-sort-header="address"-->
-<!--                    sortActionDescription="{{ 'overview.sort' | translate }}: {{ 'overview.address' | translate }}">-->
-<!--                    {{ 'overview.address' | translate }}-->
-<!--                </th>-->
-<!--                <td mat-cell *matCellDef="let element">{{ element.street }} {{ element.streetNo }}-->
-<!--                    <br/>{{ element.zip }} {{ element.city }}-->
-<!--                    <br/>{{ element.country }}-->
-<!--                </td>-->
-<!--            </ng-container>-->
+    <!--            <ng-container matColumnDef="address">-->
+    <!--                <th mat-header-cell *matHeaderCellDef mat-sort-header="address"-->
+    <!--                    sortActionDescription="{{ 'overview.sort' | translate }}: {{ 'overview.address' | translate }}">-->
+    <!--                    {{ 'overview.address' | translate }}-->
+    <!--                </th>-->
+    <!--                <td mat-cell *matCellDef="let element">{{ element.street }} {{ element.streetNo }}-->
+    <!--                    <br/>{{ element.zip }} {{ element.city }}-->
+    <!--                    <br/>{{ element.country }}-->
+    <!--                </td>-->
+    <!--            </ng-container>-->
 
-<!--            <ng-container matColumnDef="website">-->
-<!--                <th mat-header-cell *matHeaderCellDef mat-sort-header-->
-<!--                    sortActionDescription="{{ 'overview.sort' | translate }}: {{ 'overview.website' | translate }}">-->
-<!--                    {{ 'overview.website' | translate }}-->
-<!--                </th>-->
-<!--                <td mat-cell *matCellDef="let element"><a href="{{ element.website }}"-->
-<!--                                                          target="_blank">{{ element.website }}</a>-->
-<!--                </td>-->
-<!--            </ng-container>-->
+    <!--            <ng-container matColumnDef="website">-->
+    <!--                <th mat-header-cell *matHeaderCellDef mat-sort-header-->
+    <!--                    sortActionDescription="{{ 'overview.sort' | translate }}: {{ 'overview.website' | translate }}">-->
+    <!--                    {{ 'overview.website' | translate }}-->
+    <!--                </th>-->
+    <!--                <td mat-cell *matCellDef="let element"><a href="{{ element.website }}"-->
+    <!--                                                          target="_blank">{{ element.website }}</a>-->
+    <!--                </td>-->
+    <!--            </ng-container>-->
 
-<!--            <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>-->
-<!--            <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>-->
-<!--        </table>-->
-<!--        <mat-paginator class="rounded-1"-->
-<!--                       [pageSizeOptions]="[10,25,50]"-->
-<!--                       [length]="length"-->
-<!--                       (page)="handlePageEvent($event)"-->
-<!--                       [pageSize]="pageSize"-->
-<!--                       [pageIndex]="pageIndex"-->
-<!--                       showFirstLastButtons>-->
-<!--        </mat-paginator>-->
-<!--    </div>-->
+    <!--            <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>-->
+    <!--            <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>-->
+    <!--        </table>-->
+    <!--        <mat-paginator class="rounded-1"-->
+    <!--                       [pageSizeOptions]="[10,25,50]"-->
+    <!--                       [length]="length"-->
+    <!--                       (page)="handlePageEvent($event)"-->
+    <!--                       [pageSize]="pageSize"-->
+    <!--                       [pageIndex]="pageIndex"-->
+    <!--                       showFirstLastButtons>-->
+    <!--        </mat-paginator>-->
+    <!--    </div>-->
 </div>
diff --git a/matsen-tool/src/app/partners/partners-detail/partners-detail.component.html b/matsen-tool/src/app/partners/partners-detail/partners-detail.component.html
index 94620e2..9cb7fb6 100644
--- a/matsen-tool/src/app/partners/partners-detail/partners-detail.component.html
+++ b/matsen-tool/src/app/partners/partners-detail/partners-detail.component.html
@@ -93,7 +93,7 @@
             <button class="btn btn-primary toggle-btn" (click)="openModalNewTask()">{{ 'basic.new-task' | translate }}</button>
             <div class="tasks mb-3" *ngFor="let task of tasks">
                 <div class="card p-3">
-                    <div class="position-relative" data-bs-toggle="collapse"
+                    <div class="position-relative collapsed" data-bs-toggle="collapse"
                          [attr.data-bs-target]="'#collapse-' + ApiConverter.extractId(task.id)"
                          aria-expanded="false"
                          aria-controls="collapseExample">
diff --git a/matsen-tool/src/app/tasks/tasks.component.html b/matsen-tool/src/app/tasks/tasks.component.html
index 14ea9fe..dfb513e 100644
--- a/matsen-tool/src/app/tasks/tasks.component.html
+++ b/matsen-tool/src/app/tasks/tasks.component.html
@@ -6,7 +6,7 @@
         </div>
         <div class="tasks mb-3" *ngFor="let task of tasks">
             <div class="card p-3">
-                <div class="position-relative" data-bs-toggle="collapse" [attr.data-bs-target]="'#collapse-' + ApiConverter.extractId(task.id)"
+                <div class="position-relative collapsed" data-bs-toggle="collapse" [attr.data-bs-target]="'#collapse-' + ApiConverter.extractId(task.id)"
                      aria-expanded="false"
                      aria-controls="collapseExample">
                     <h3 class="m-0">{{task.partnerName}}</h3>
diff --git a/matsen-tool/src/assets/scss/_basics.scss b/matsen-tool/src/assets/scss/_basics.scss
index abd12e0..b9c9792 100644
--- a/matsen-tool/src/assets/scss/_basics.scss
+++ b/matsen-tool/src/assets/scss/_basics.scss
@@ -101,10 +101,12 @@ img {
     transform: rotate(-45deg);
     left: 20px;
   }
+
   &.collapsed {
     &:before {
       transform: rotate(-45deg);
     }
+
     &:after {
       transform: rotate(45deg);
     }
@@ -117,3 +119,46 @@ img {
   top: -3.38rem;
 }
 
+.spt-toggle {
+  position: relative;
+  padding-left: 30px;
+  &:before,
+  &:after {
+    content: "";
+    position: absolute;
+    top: 42px;
+    width: 15px;
+    height: 2px;
+    background: #000;
+    @include transition();
+  }
+
+  &:before {
+    transform: rotate(45deg);
+    left: 0;
+  }
+
+  &:after {
+    transform: rotate(-45deg);
+    left: 10px;
+  }
+
+  &.collapsed {
+    &:before {
+      transform: rotate(-45deg);
+    }
+
+    &:after {
+      transform: rotate(45deg);
+    }
+  }
+}
+
+.tasks {
+  .collapse {
+    div {
+      padding-left: 30px;
+    }
+  }
+}
+