spawntree
/
matsen-tool-fe
2
0
Fork 0
Code Issues 0 Pull Requests 0 Releases 0 Wiki Activity
Browse Source

styling

master
Florian Eisenmenger 1 year ago
parent
eafcce9026
commit
23ac493ad7
13 changed files with 119 additions and 113 deletions
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +5
    -4
      matsen-tool/src/app/_views/contacts/contacts-detail/contacts-detail.component.html
  2. +1
    -1
      matsen-tool/src/app/_views/partners/partners-detail/partners-detail.component.html
  3. +26
    -27
      matsen-tool/src/app/_views/posts/post-list/post-list.component.html
  4. +2
    -2
      matsen-tool/src/app/_views/products/products-detail/products-detail.component.html
  5. +1
    -1
      matsen-tool/src/app/_views/sales/sales-detail/sales-detail.component.html
  6. +4
    -2
      matsen-tool/src/app/_views/sales/sales.component.html
  7. +47
    -49
      matsen-tool/src/app/_views/tasks/task-list/task-list.component.html
  8. +3
    -5
      matsen-tool/src/app/_views/tasks/tasks.component.html
  9. +5
    -5
      matsen-tool/src/app/_views/user/user-detail/user-detail.component.html
  10. +0
    -6
      matsen-tool/src/assets/scss/_accordion.scss
  11. +10
    -1
      matsen-tool/src/assets/scss/_basics.scss
  12. +10
    -10
      matsen-tool/src/assets/scss/_sales.scss
  13. +5
    -0
      matsen-tool/src/assets/scss/_text.scss

+ 5
- 4
matsen-tool/src/app/_views/contacts/contacts-detail/contacts-detail.component.html View File

@@ -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="spt-col col-8">
<div class="row"> <div class="row">
<div class="col-6"> <div class="col-6">
@@ -18,12 +18,13 @@
</div> </div>
<div class="col-6"> <div class="col-6">
<ul *ngFor="let contactPartnerProduct of contactPartnerProducts"> <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> <li><a href="/products/{{this.appHelperService.extractId(contactPartnerProduct.productName)}}">{{contactPartnerProduct.productName}}</a></li>
</ul> </ul>
</div> </div>
</div> </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" <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}}" /> alt="{{contact.firstName}} {{contact.lastName}}" title="{{contact.firstName}} {{contact.lastName}}" />
</div> </div>


+ 1
- 1
matsen-tool/src/app/_views/partners/partners-detail/partners-detail.component.html View File

@@ -34,7 +34,7 @@
</div> </div>
</div> </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}}" <img *ngIf="partner.logoUrl !== null && partner.logoUrl !== undefined" src="{{partner.logoUrl}}"
width="247" width="247"
height="94" alt="{{partner.name}}" title="{{partner.name}}" /> height="94" alt="{{partner.name}}" title="{{partner.name}}" />


+ 26
- 27
matsen-tool/src/app/_views/posts/post-list/post-list.component.html View File

@@ -7,52 +7,51 @@
[getDataFunction]="getData" [getDataFunction]="getData"
[dataSource]="dataSource" [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" *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> <p>{{ post.ownerName }}</p>
</div> </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> <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> </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> </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="card-body">
<div class="d-flex justify-content-between align-items-center"> <div class="d-flex justify-content-between align-items-center">
<p>{{ comment.createdAt | date:'dd.MM.YYYY' }}</p> <p>{{ comment.createdAt | date:'dd.MM.YYYY' }}</p>
<p>{{ comment.ownerName }}</p> <p>{{ comment.ownerName }}</p>
</div> </div>
<div> <div>
<p class="m-0" [innerHTML]="appHelperService.getSafeLongtext(comment.message)"></p>
<p [innerHTML]="appHelperService.getSafeLongtext(comment.message)"></p>
</div> </div>
<span *ngIf="comment.owner === user?.id" class="position-absolute bi bi-pencil p-2" <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> data-type="user-tool" data-action="edit" (click)="openModalEditComment(comment)"></span>
</div> </div>
</div> </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> </div>
</app-paging> </app-paging>
</div> </div>

+ 2
- 2
matsen-tool/src/app/_views/products/products-detail/products-detail.component.html View File

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


+ 1
- 1
matsen-tool/src/app/_views/sales/sales-detail/sales-detail.component.html View File

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


+ 4
- 2
matsen-tool/src/app/_views/sales/sales.component.html View File

@@ -2,6 +2,8 @@
<div class="d-flex justify-content-between align-items-start"> <div class="d-flex justify-content-between align-items-start">
<h2>{{ 'basic.sales' | translate }}</h2> <h2>{{ 'basic.sales' | translate }}</h2>
</div> </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> </div>

+ 47
- 49
matsen-tool/src/app/_views/tasks/task-list/task-list.component.html View File

@@ -1,59 +1,57 @@
<div class="spt-container"> <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>
</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> </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>
</div> </div>
</div> </div>
</app-paging>
</div>
</div>
</app-paging>
</div> </div>

+ 3
- 5
matsen-tool/src/app/_views/tasks/tasks.component.html View File

@@ -1,8 +1,6 @@
<div class="spt-container"> <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> </div>
<app-task-list #taskListComponent></app-task-list>
</div> </div>

+ 5
- 5
matsen-tool/src/app/_views/user/user-detail/user-detail.component.html View File

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


+ 0
- 6
matsen-tool/src/assets/scss/_accordion.scss View File

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

+ 10
- 1
matsen-tool/src/assets/scss/_basics.scss View File

@@ -175,6 +175,13 @@ img {
} }
} }


.icon-mini {
height: 15px;
display: inline;
margin-right: 6px;
margin-top: -2px;
}

.spt-main { .spt-main {
background: #fff; background: #fff;
color: rgba(33,37,41); color: rgba(33,37,41);
@@ -188,7 +195,7 @@ img {
display: flex; display: flex;
justify-content: flex-end; justify-content: flex-end;
} }
.card:not(.contacts .card, .tasks .card) {
.card:not(.contacts .card, .tasks .card, .post .card) {
border: none; border: none;
border-radius: 0; border-radius: 0;
border-top: 1px solid #2B3A44; border-top: 1px solid #2B3A44;
@@ -225,11 +232,13 @@ img {
} }
} }


.posts .post,
.tasks-box { .tasks-box {
border-top: 1px solid #525f66; border-top: 1px solid #525f66;
padding-top: 3px; padding-top: 3px;
background: #fff; background: #fff;
} }
.posts .post,
.tasks { .tasks {
.card { .card {
border: none; border: none;


+ 10
- 10
matsen-tool/src/assets/scss/_sales.scss View File

@@ -1,27 +1,27 @@
.sales-summary-container { .sales-summary-container {


.sales-summary-bar { .sales-summary-bar {
border-radius: 6px;
background: #bbb;
margin: 0 0 0.5rem 0;
background: #f2f2f2;
color: #fff;
div { div {
animation: expand 2.5s ease; animation: expand 2.5s ease;
border-radius: 6px;
span { span {
display: block; display: block;
border-radius: 6px;
padding: 15px;
padding: 10px 13px;
white-space: nowrap; white-space: nowrap;
} }
} }
} }
.sales-summary-turnover { .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 { .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%);
} }
} }




+ 5
- 0
matsen-tool/src/assets/scss/_text.scss View File

@@ -1,3 +1,7 @@
strong {
font-weight: 600;
}

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


Write Preview
Loading…
Cancel
Save