styling

matsen-tool/src/app/_views/contacts/contacts-detail/contacts-detail.component.html

@@ -1,6 +1,6 @@
-<div class="spt-container">
-    <div *ngIf="contact" class="card contacts-detail">
-        <div class="card-body row pb-5">
+<div *ngIf="contact" class="spt-container">
+    <div class="card contacts-detail">
+        <div class="card-body row">
             <div class="spt-col col-8">
                 <div class="row">
                     <div class="col-6">
@@ -18,12 +18,13 @@
                     </div>
                     <div class="col-6">
                         <ul *ngFor="let contactPartnerProduct of contactPartnerProducts">
+<!--                            TODO: contactPartnerProduct.productName ist falsch, hier muss die ID rein -->
                             <li><a href="/products/{{this.appHelperService.extractId(contactPartnerProduct.productName)}}">{{contactPartnerProduct.productName}}</a></li>
                         </ul>
                     </div>
                 </div>
             </div>
-            <div class="spt-col col-4 has-image">
+            <div class="col-4 has-image">
                 <img *ngIf="contact.imageUrl !== null && contact.imageUrl !== undefined"  src="{{contact.imageUrl}}" width="247" height="94"
                      alt="{{contact.firstName}} {{contact.lastName}}" title="{{contact.firstName}} {{contact.lastName}}"  />
             </div>

matsen-tool/src/app/_views/partners/partners-detail/partners-detail.component.html

@@ -34,7 +34,7 @@
                     </div>
                 </div>
             </div>
-            <div class="spt-col col-4 has-image">
+            <div class="col-4 has-image">
                 <img *ngIf="partner.logoUrl !== null && partner.logoUrl !== undefined"  src="{{partner.logoUrl}}"
                      width="247"
                      height="94" alt="{{partner.name}}" title="{{partner.name}}"  />

matsen-tool/src/app/_views/posts/post-list/post-list.component.html

@@ -7,52 +7,51 @@
             [getDataFunction]="getData"
             [dataSource]="dataSource"
         >
-            <div class="post mb-3" *ngFor="let post of posts">
-                <div class="card">
-                    <div class="card-body">
-                        <div class="d-flex justify-content-between align-items-center">
-                            <h3 class="m-0"><a href="/{{post.partnerType}}/{{this.appHelperService.extractId(post.partner)}}">{{post.partnerName}}</a></h3>
+            <div class="post pb-1" *ngFor="let post of posts">
+                <div class="card p-3">
+                    <div class="row">
+                        <div class="col-4">
+                            <span class="due-date">{{ post.createdAt | date:'dd.MM.YYYY':'GMT+0000' }}</span>
+                            <h3 class="m-0"><img src="/assets/images/icons/{{post.partnerType}}.svg" class="icon-mini" alt="" /><a href="/{{post.partnerType}}/{{this.appHelperService.extractId(post.partner)}}">{{post.partnerName}}</a></h3>
                             <h3 class="m-0" *ngIf="post.contact"><a href="/contact/{{this.appHelperService.extractId(post.contact)}}">{{post.contactName}}</a></h3>
-                            <h3 class="m-0"><a href="/product/{{this.appHelperService.extractId(post.product)}}">{{post.productName}}</a></h3>
-                            <p>{{ post.createdAt | date:'dd.MM.YYYY' }}</p>
+                            <h3 class="m-0"><img src="/assets/images/icons/product.svg" class="icon-mini" alt="" /><a href="/product/{{this.appHelperService.extractId(post.product)}}">{{post.productName}}</a></h3>
                             <p>{{ post.ownerName }}</p>
                         </div>
-                        <div>
-                            <h3>{{ post.headline }}</h3>
+                        <div class="spt-border col-8">
+                            <h2 class="m-0">{{ post.headline }}</h2>
                             <p class="m-0" [innerHTML]="appHelperService.getSafeLongtext(post.message)"></p>
+                            <span *ngIf="post.owner === user?.id" class="position-absolute bi bi-pencil p-2"
+                                  data-type="user-tool"
+                                  data-action="edit" (click)="openModalEditPost(post)"></span>
+                            <div class="spt-comments-box d-flex justify-content-end mt-1 position-absolute">
+                                <span *ngIf="post.comments?.length !== 0" role="button" class="badge bg-secondary p-2 me-2"
+                                      (click)="showComments(post)">
+                                    <ng-container
+                                        *ngIf="post.id && commentsVisibility.get(post.id)">{{ 'basic.hide-comments' | translate }}</ng-container>
+                                    <ng-container
+                                        *ngIf="post.id && !commentsVisibility.get(post.id)">{{ 'basic.show-comments' | translate }}</ng-container>
+                                </span>
+                                <span role="button" class="badge bg-secondary p-2"
+                                      (click)="openModalNewComment(post)">{{ 'basic.comment-it' | translate }}</span>
+                            </div>
                         </div>
-                        <span *ngIf="post.owner === user?.id" class="position-absolute bi bi-pencil p-2"
-                              data-type="user-tool"
-                              data-action="edit" (click)="openModalEditPost(post)"></span>
                     </div>
                 </div>
-                <div *ngIf="post.id && commentsVisibility.get(post.id)">
-                    <div class="card ms-5" *ngFor="let comment of post.comments">
+                <div *ngIf="post.id && commentsVisibility.get(post.id)" class="pb-1">
+                    <div class="card spt-comments" *ngFor="let comment of post.comments">
                         <div class="card-body">
                             <div class="d-flex justify-content-between align-items-center">
                                 <p>{{ comment.createdAt | date:'dd.MM.YYYY' }}</p>
                                 <p>{{ comment.ownerName }}</p>
                             </div>
                             <div>
-                                <p class="m-0" [innerHTML]="appHelperService.getSafeLongtext(comment.message)"></p>
+                                <p [innerHTML]="appHelperService.getSafeLongtext(comment.message)"></p>
                             </div>
                             <span *ngIf="comment.owner === user?.id" class="position-absolute bi bi-pencil p-2"
                                   data-type="user-tool" data-action="edit" (click)="openModalEditComment(comment)"></span>
                         </div>
                     </div>
                 </div>
-
-                <div class="d-flex justify-content-end mt-1">
-                        <span *ngIf="post.comments?.length !== 0" role="button" class="badge bg-secondary p-2 me-2"
-                              (click)="showComments(post)">
-                            <ng-container
-                                *ngIf="post.id && commentsVisibility.get(post.id)">{{ 'basic.hide-comments' | translate }}</ng-container>
-                            <ng-container
-                                *ngIf="post.id && !commentsVisibility.get(post.id)">{{ 'basic.show-comments' | translate }}</ng-container>
-                        </span>
-                    <span role="button" class="badge bg-secondary p-2"
-                          (click)="openModalNewComment(post)">{{ 'basic.comment-it' | translate }}</span>
-                </div>
             </div>
         </app-paging>
     </div>

matsen-tool/src/app/_views/products/products-detail/products-detail.component.html

@@ -1,7 +1,7 @@
 <div class="spt-container">
     <div class="card">
         <div class="card-body row">
-            <div class="col-8">
+            <div class="spt-col col-8">
                 <h1>{{ product.name }}</h1>
                 <p>{{ product.description }}</p>
                 <dl>
@@ -17,7 +17,7 @@
                     <dd>234856372</dd>
                 </dl>
             </div>
-            <div class="col-4">
+            <div class="col-4 has-image">
                 <img *ngIf="product.imageUrl !== null && product.imageUrl !== undefined"
                       src="{{product.imageUrl}}" width="247" height="94"
                      alt="{{product.name}}" title="{{product.name}}"  />

matsen-tool/src/app/_views/sales/sales-detail/sales-detail.component.html

@@ -1,7 +1,7 @@
 <div class="spt-container">
     <div class="card">
         <div *ngIf="sale" class="card-body row pb-5">
-            <div class="col-8">
+            <div class="spt-col col-8">
                 <h1>{{'overview.sale-user' | translate }}: {{ sale.ownerName }}</h1>
                 <dl>
                     <dt *ngIf="sale.partnerName">{{'overview.partner' | translate}}:</dt>

matsen-tool/src/app/_views/sales/sales.component.html

@@ -2,6 +2,8 @@
     <div class="d-flex justify-content-between align-items-start">
         <h2>{{ 'basic.sales' | translate }}</h2>
     </div>
-<app-sale-summary></app-sale-summary>
-<app-sale-list></app-sale-list>
+    <div class="pb-5">
+        <app-sale-summary></app-sale-summary>
+    </div>
+    <app-sale-list></app-sale-list>
 </div>

matsen-tool/src/app/_views/tasks/task-list/task-list.component.html

@@ -1,59 +1,57 @@
 <div class="spt-container">
-    <div class="spt-accordion position-relative">
-        <div class="top-btn">
-            <button *ngIf="partner" class="btn btn-primary" (click)="openModalNewTask()">+ {{ 'basic.new-task' | translate }}</button>
-        </div>
-        <app-paging #pagingComponent
-                    [getDataFunction]="getData"
-                    [dataSource]="dataSource"
-        >
-            <div class="tasks-box">
-                <div class="tasks pb-1" *ngFor="let task of tasks">
-                    <div class="card p-3">
-                        <div class="row">
-                            <div class="col-4">
-                                <span class="due-date">{{ task.dueAt | date:'dd.MM.YYYY':'GMT+0000' }}</span>
-                                <h3 class="m-0" *ngIf="task.partner"><a href="/{{task.partnerType}}/{{this.appHelperService.extractId(task.partner)}}">{{task.partnerName}}</a></h3>
-                                <h3 class="m-0" *ngIf="task.product"><a href="/product/{{this.appHelperService.extractId(task.product)}}">{{task.productName}}</a></h3>
-                                <p>Zugewiesen an: {{ task.assignedToName }}</p>
-                            </div>
-                            <div class="spt-border col-8">
-                                <span class="importance" [attr.data-importance]="task.prio"></span>
-                                <h2 class="m-0">{{ task.headline }}</h2>
-                                <p class="m-0" [innerHTML]="appHelperService.getSafeLongtext(task.description)"></p>
-                                <span *ngIf="task.createdBy === currentUser?.id" class="position-absolute bi bi-pencil p-2"
-                                      data-type="user-tool" data-action="edit" (click)="openModalEditTask(task)"></span>
-                                <div class="spt-comments-box d-flex justify-content-end mt-1 position-absolute">
-                                    <span *ngIf="task.taskNotes?.length !== 0" role="button" class="spt-btn-low 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>
-                                    </span>
-                                    <span role="button" class="badge bg-secondary p-2"
-                                          (click)="openModalNewTaskNote(task)">{{ 'basic.comment-it' | translate }}</span>
-                                </div>
+    <div class="top-btn">
+        <button *ngIf="partner" class="btn btn-primary" (click)="openModalNewTask()">+ {{ 'basic.new-task' | translate }}</button>
+    </div>
+    <app-paging #pagingComponent
+                [getDataFunction]="getData"
+                [dataSource]="dataSource"
+    >
+        <div class="tasks-box">
+            <div class="tasks pb-1" *ngFor="let task of tasks">
+                <div class="card p-3">
+                    <div class="row">
+                        <div class="col-4">
+                            <span class="due-date">{{ task.dueAt | date:'dd.MM.YYYY':'GMT+0000' }}</span>
+                            <h3 class="m-0" *ngIf="task.partner"><img src="/assets/images/icons/{{task.partnerType}}.svg" class="icon-mini" alt="" /><a href="/{{task.partnerType}}/{{this.appHelperService.extractId(task.partner)}}">{{task.partnerName}}</a></h3>
+                            <h3 class="m-0" *ngIf="task.product"><img src="/assets/images/icons/product.svg" class="icon-mini" alt="" /><a href="/product/{{this.appHelperService.extractId(task.product)}}">{{task.productName}}</a></h3>
+                            <p><img src="/assets/images/icons/profile.svg" class="icon-mini" alt="" />{{ task.assignedToName }}</p>
+                        </div>
+                        <div class="spt-border col-8">
+                            <span class="importance" [attr.data-importance]="task.prio"></span>
+                            <h2 class="m-0">{{ task.headline }}</h2>
+                            <p class="m-0" [innerHTML]="appHelperService.getSafeLongtext(task.description)"></p>
+                            <span *ngIf="task.createdBy === currentUser?.id" class="position-absolute bi bi-pencil p-2"
+                                  data-type="user-tool" data-action="edit" (click)="openModalEditTask(task)"></span>
+                            <div class="spt-comments-box d-flex justify-content-end mt-1 position-absolute">
+                                <span *ngIf="task.taskNotes?.length !== 0" role="button" class="spt-btn-low 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>
+                                </span>
+                                <span role="button" class="badge bg-secondary p-2"
+                                      (click)="openModalNewTaskNote(task)">{{ 'basic.comment-it' | translate }}</span>
                             </div>
                         </div>
                     </div>
-                    <div *ngIf="task.id && taskNotesVisibility.get(task.id)" class="pb-1">
-                        <div class="card spt-comments" *ngFor="let taskNote of task.taskNotes">
-                            <div class="card-body">
-                                <div class="d-flex justify-content-between align-items-center">
-                                    <p>{{ taskNote.createdAt | date:'dd.MM.YYYY' }}</p>
-                                    <p>{{ taskNote.ownerName }}</p>
-                                </div>
-                                <div>
-                                    <p>{{ taskNote.message }}</p>
-                                </div>
-                                <span *ngIf="taskNote.owner === currentUser?.id" class="position-absolute bi bi-pencil p-2"
-                                      data-type="user-tool" data-action="edit" (click)="openModalEditTaskNote(taskNote)"></span>
+                </div>
+                <div *ngIf="task.id && taskNotesVisibility.get(task.id)" class="pb-1">
+                    <div class="card spt-comments" *ngFor="let taskNote of task.taskNotes">
+                        <div class="card-body">
+                            <div class="d-flex justify-content-between align-items-center">
+                                <p>{{ taskNote.createdAt | date:'dd.MM.YYYY' }}</p>
+                                <p>{{ taskNote.ownerName }}</p>
+                            </div>
+                            <div>
+                                <p [innerHTML]="appHelperService.getSafeLongtext(taskNote.message)"></p>
                             </div>
+                            <span *ngIf="taskNote.owner === currentUser?.id" class="position-absolute bi bi-pencil p-2"
+                                  data-type="user-tool" data-action="edit" (click)="openModalEditTaskNote(taskNote)"></span>
                         </div>
                     </div>
                 </div>
             </div>
-        </app-paging>
-    </div>
+        </div>
+    </app-paging>
 </div>

matsen-tool/src/app/_views/tasks/tasks.component.html

@@ -1,8 +1,6 @@
 <div class="spt-container">
-    <div class="spt-accordion">
-        <div class="d-flex justify-content-between align-items-start">
-            <h2>{{'basic.tasks' | translate}}</h2>
-        </div>
-        <app-task-list #taskListComponent></app-task-list>
+    <div class="d-flex justify-content-between align-items-start">
+        <h2>{{'basic.tasks' | translate}}</h2>
     </div>
+    <app-task-list #taskListComponent></app-task-list>
 </div>

matsen-tool/src/app/_views/user/user-detail/user-detail.component.html

@@ -1,14 +1,14 @@
 <div *ngIf="user" class="spt-container">
-    <div class="card">
+    <div class="card contacts-detail">
         <div class="card-body row">
-            <div class="col-4">
+            <div class="spt-col col-8">
                 <h1>{{ user.firstName }} {{ user.lastName }}</h1>
                 <dl>
-                    <dt>Email:</dt>
-                    <dd>{{ user.email }}</dd>
+                    <dt>E-Mail Adresse:</dt>
+                    <dd><a href="mailto:{{ user.email }}">{{ user.email }}</a></dd>
                 </dl>
             </div>
-            <div class="col-4">
+            <div class="col-4 has-image">
                 <img *ngIf="user.imageUrl !== null && user.imageUrl !== undefined"
                      src="{{user.imageUrl}}" width="247" height="94"
                      alt="{{user.firstName}} {{user.lastName}}" title="{{user.firstName}} {{user.lastName}}"  />

matsen-tool/src/assets/scss/_accordion.scss

@@ -1,6 +0,0 @@
-.spt-accordion {
-  .info {
-    right: 0;
-    top: 0;
-  }
-}

matsen-tool/src/assets/scss/_basics.scss

@@ -175,6 +175,13 @@ img {
   }
 }
 
+.icon-mini {
+  height: 15px;
+  display: inline;
+  margin-right: 6px;
+  margin-top: -2px;
+}
+
 .spt-main {
   background: #fff;
   color: rgba(33,37,41);
@@ -188,7 +195,7 @@ img {
     display: flex;
     justify-content: flex-end;
   }
-  .card:not(.contacts .card, .tasks .card) {
+  .card:not(.contacts .card, .tasks .card, .post .card) {
     border: none;
     border-radius: 0;
     border-top: 1px solid #2B3A44;
@@ -225,11 +232,13 @@ img {
   }
 }
 
+.posts .post,
 .tasks-box {
   border-top: 1px solid #525f66;
   padding-top: 3px;
   background: #fff;
 }
+.posts .post,
 .tasks {
   .card {
     border: none;

matsen-tool/src/assets/scss/_sales.scss

@@ -1,27 +1,27 @@
 .sales-summary-container {
 
   .sales-summary-bar {
-    border-radius: 6px;
-    background: #bbb;
-    margin: 0 0 0.5rem 0;
+    background: #f2f2f2;
+    color: #fff;
     div {
       animation: expand 2.5s ease;
-      border-radius: 6px;
       span {
         display: block;
-        border-radius: 6px;
-        padding: 15px;
+        padding: 10px 13px;
         white-space: nowrap;
       }
     }
   }
   .sales-summary-turnover {
-    background: rgb(45,209,159);
-    background: linear-gradient(109deg, rgba(45,209,159,1) 0%, rgba(64,208,203,1) 36%, rgba(44,138,181,1) 100%);
+    background: #2b3a44;
+    //background: rgb(45,209,159);
+    //background: linear-gradient(109deg, rgba(45,209,159,1) 0%, rgba(64,208,203,1) 36%, rgba(44,138,181,1) 100%);
   }
   .sales-summary-profit {
-    background: rgb(179,208,47);
-    background: linear-gradient(109deg, rgba(179,208,47,1) 0%, rgba(64,208,70,1) 36%, rgba(44,181,91,1) 100%);
+    background: #589476;
+    background: linear-gradient(109deg, #589476 0%, #a9ebaa 100%);
+    //background: rgb(179,208,47);
+    //background: linear-gradient(109deg, rgba(179,208,47,1) 0%, rgba(64,208,70,1) 36%, rgba(44,181,91,1) 100%);
   }
 }
 

matsen-tool/src/assets/scss/_text.scss

@@ -1,3 +1,7 @@
+strong {
+  font-weight: 600;
+}
+
 .mat-h1,
 .mat-headline-5,
 .mat-typography .mat-h1,
@@ -78,6 +82,7 @@ p,
 ul,
 ol,
 dl,
+.post h3,
 .tasks h3 {
   a {
     color: $color-matsen;