| @@ -1,5 +1,5 @@ | |||
| <div class="toggle-component"> | |||
| <div class="toggle" data-bs-toggle="collapse" [attr.data-bs-target]="'#collapse-' + toggleId" | |||
| <div class="toggle collapsed" data-bs-toggle="collapse" [attr.data-bs-target]="'#collapse-' + toggleId" | |||
| aria-expanded="false"> | |||
| <h2>{{ headline }}</h2> | |||
| </div> | |||
| @@ -24,59 +24,58 @@ | |||
| </div> | |||
| </div> | |||
| </div> | |||
| <div class="spt-container"> | |||
| <div class="posts"> | |||
| <div class="d-flex justify-content-between align-items-start"> | |||
| <h2>{{'basic.posts' | translate}}</h2> | |||
| <button class="btn btn-primary" (click)="openModalNewPosting()">{{'basic.new-post' | translate}}</button> | |||
| </div> | |||
| <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"> | |||
| <p>{{ post.createdAt | date:'dd.MM.YYYY' }}</p> | |||
| <p>{{ post.ownerName }}</p> | |||
| </div> | |||
| <div> | |||
| <h3>{{ post.headline }}</h3> | |||
| <p class="m-0" [innerHTML]="apiConverter.getSafeLongtext(post.message)"></p> | |||
| </div> | |||
| <span *ngIf="post.owner === user?.id" class="position-absolute bi bi-pencil p-2" data-type="user-tool" | |||
| data-action="edit" (click)="openModalEditPosting(post)"></span> | |||
| </div> | |||
| </div> | |||
| <div *ngIf="post.id && commentsVisibility.get(post.id)"> | |||
| <div class="card ms-5" *ngFor="let comment of post.comments"> | |||
| <app-toggle #togglePosts [headline]="'basic.posts' | translate"> | |||
| <div class="spt-container"> | |||
| <div class="posts position-relative"> | |||
| <button class="btn btn-primary toggle-btn" (click)="openModalNewPosting()">{{'basic.new-post' | translate}}</button> | |||
| <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"> | |||
| <p>{{ comment.createdAt | date:'dd.MM.YYYY' }}</p> | |||
| <p>{{ comment.ownerName }}</p> | |||
| <p>{{ post.createdAt | date:'dd.MM.YYYY' }}</p> | |||
| <p>{{ post.ownerName }}</p> | |||
| </div> | |||
| <div> | |||
| <p class="m-0" [innerHTML]="apiConverter.getSafeLongtext(comment.message)"></p> | |||
| <h3>{{ post.headline }}</h3> | |||
| <p class="m-0" [innerHTML]="apiConverter.getSafeLongtext(post.message)"></p> | |||
| </div> | |||
| <span *ngIf="post.owner === user?.id" class="position-absolute bi bi-pencil p-2" data-type="user-tool" | |||
| data-action="edit" (click)="openModalEditPosting(post)"></span> | |||
| </div> | |||
| </div> | |||
| <div *ngIf="post.id && commentsVisibility.get(post.id)"> | |||
| <div class="card ms-5" *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]="apiConverter.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> | |||
| <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 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> | |||
| <mat-paginator *ngIf="posts.length > 0" class="rounded-1" | |||
| [pageSizeOptions]="[10,20,30]" | |||
| [length]="postsLength" | |||
| (page)="postsHandlePageEvent($event)" | |||
| [pageSize]="postsPageSize" | |||
| [pageIndex]="postsPageIndex" | |||
| showFirstLastButtons> | |||
| </mat-paginator> | |||
| </div> | |||
| <mat-paginator *ngIf="posts.length > 0" class="rounded-1" | |||
| [pageSizeOptions]="[10,20,30]" | |||
| [length]="postsLength" | |||
| (page)="postsHandlePageEvent($event)" | |||
| [pageSize]="postsPageSize" | |||
| [pageIndex]="postsPageIndex" | |||
| showFirstLastButtons> | |||
| </mat-paginator> | |||
| </div> | |||
| </div> | |||
| </app-toggle> | |||
| @@ -127,6 +127,8 @@ export class ContactsDetailComponent implements OnInit, AfterViewInit { | |||
| let posting: PostJsonld = {} as PostJsonld; | |||
| posting.contact = this.contact.id ?? null; | |||
| posting.partner = this.contact.partner ?? null; | |||
| // TODO: REAL PRODUCT | |||
| posting.product = "/api/products/101"; | |||
| modalRefPosting.componentInstance.posting = posting; | |||
| modalRefPosting.componentInstance.submit.subscribe((modalStatus: ModalStatus) => { | |||
| if (modalStatus === ModalStatus.Submitted) { | |||
| @@ -61,66 +61,65 @@ | |||
| </div> | |||
| <div class="container spt-container"> | |||
| <div class="spt-accordion"> | |||
| <div class="d-flex justify-content-between align-items-start"> | |||
| <h2>{{'user.my' | translate}} {{'basic.tasks' | translate}}</h2> | |||
| <button class="btn btn-primary" (click)="openModalNewTask()">{{'basic.new-task' | translate}}</button> | |||
| </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)" | |||
| aria-expanded="false" | |||
| aria-controls="collapseExample"> | |||
| <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> | |||
| </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> | |||
| <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> | |||
| <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> | |||
| <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)" | |||
| aria-expanded="false" | |||
| aria-controls="collapseExample"> | |||
| <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> | |||
| </div> | |||
| </div> | |||
| </div> | |||
| <ng-container *ngIf="task.id && taskNotesVisibility.get(task.id)"> | |||
| <div class="card ms-5" *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 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> | |||
| <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> | |||
| <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> | |||
| </div> | |||
| </div> | |||
| </ng-container> | |||
| <ng-container *ngIf="task.id && taskNotesVisibility.get(task.id)"> | |||
| <div class="card ms-5" *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 === user?.id" class="position-absolute bi bi-pencil p-2" | |||
| data-type="user-tool" data-action="edit" (click)="openModalEditTaskNote(taskNote)"></span> | |||
| </div> | |||
| </div> | |||
| </ng-container> | |||
| <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> | |||
| </span> | |||
| <span role="button" class="badge bg-secondary p-2" (click)="openModalNewTaskNote(task)">{{'basic.comment-it' | translate}}</span> | |||
| <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> | |||
| </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" | |||
| [pageSizeOptions]="[10,20,30]" | |||
| [length]="tasksLength" | |||
| (page)="tasksHandlePageEvent($event)" | |||
| [pageSize]="tasksPageSize" | |||
| [pageIndex]="tasksPageIndex" | |||
| showFirstLastButtons> | |||
| </mat-paginator> | |||
| </div> | |||
| <mat-paginator *ngIf="tasks.length > 0" class="rounded-1" | |||
| [pageSizeOptions]="[10,20,30]" | |||
| [length]="tasksLength" | |||
| (page)="tasksHandlePageEvent($event)" | |||
| [pageSize]="tasksPageSize" | |||
| [pageIndex]="tasksPageIndex" | |||
| showFirstLastButtons> | |||
| </mat-paginator> | |||
| </div> | |||
| </app-toggle> | |||
| </div> | |||
| <!-- <div class="container spt-container">--> | |||
| @@ -52,7 +52,7 @@ | |||
| </li> | |||
| </ul> | |||
| </div> | |||
| <div class="col-10"> | |||
| <div class="col-10 pb-5"> | |||
| <div class="pe-3 pt-3"> | |||
| <button class="btn btn-secondary mb-3" (click)="goBack()">{{'basic.back' | translate}}</button> | |||
| <router-outlet></router-outlet> | |||
| @@ -48,11 +48,9 @@ | |||
| </div> | |||
| <app-toggle #toggleContacts [headline]="'basic.contacts' | translate"> | |||
| <div class="spt-container"> | |||
| <div class="contacts"> | |||
| <div class="d-flex justify-content-end align-items-start mb-3 toggle-btn"> | |||
| <button class="btn btn-primary" (click)="openModalNewContact()">{{ 'basic.new-contact' | translate }} | |||
| </button> | |||
| </div> | |||
| <div class="contacts position-relative"> | |||
| <button class="btn btn-primary toggle-btn" (click)="openModalNewContact()">{{ 'basic.new-contact' | translate }} | |||
| </button> | |||
| <div class="row"> | |||
| <div class="col-4" *ngFor="let contact of contacts"> | |||
| <div class="card"> | |||
| @@ -91,10 +89,8 @@ | |||
| <app-toggle #toggleTasks [headline]="'basic.tasks' | translate"> | |||
| <div class="spt-container"> | |||
| <div class="spt-accordion"> | |||
| <div class="d-flex justify-content-end align-items-start mb-3 toggle-btn"> | |||
| <button class="btn btn-primary" (click)="openModalNewTask()">{{ 'basic.new-task' | translate }}</button> | |||
| </div> | |||
| <div class="spt-accordion position-relative"> | |||
| <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" | |||
| @@ -158,10 +154,8 @@ | |||
| </app-toggle> | |||
| <app-toggle #togglePosts [headline]="'basic.posts' | translate"> | |||
| <div class="spt-container"> | |||
| <div class="posts"> | |||
| <div class="d-flex justify-content-end align-items-start mb-3 toggle-btn"> | |||
| <button class="btn btn-primary" (click)="openModalNewPosting()">{{ 'basic.new-post' | translate }}</button> | |||
| </div> | |||
| <div class="posts position-relative"> | |||
| <button class="btn btn-primary toggle-btn" (click)="openModalNewPosting()">{{ 'basic.new-post' | translate }}</button> | |||
| <div class="post mb-3" *ngFor="let post of posts"> | |||
| <div class="card"> | |||
| <div class="card-body"> | |||
| @@ -295,6 +295,8 @@ export class PartnersDetailComponent implements OnInit, AfterViewInit { | |||
| const modalRefPosting = this.modalService.open(NewPostingComponent, this.modalOptions); | |||
| let posting: PostJsonld = {} as PostJsonld; | |||
| posting.partner = this.partner.id ?? null; | |||
| // TODO: REAL PRODUCT | |||
| posting.product = "/api/products/101"; | |||
| modalRefPosting.componentInstance.posting = posting; | |||
| modalRefPosting.componentInstance.submit.subscribe((modalStatus: ModalStatus) => { | |||
| if (modalStatus === ModalStatus.Submitted) { | |||
| @@ -2,7 +2,7 @@ import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core'; | |||
| import {ModalStatus} from "@app/_helpers/modal.states"; | |||
| import {FormGroup} from "@angular/forms"; | |||
| import {postForm} from "@app/_forms/apiForms"; | |||
| import {PostJsonld, PostService} from "@app/core/api/v1"; | |||
| import {PartnerJsonld, PostJsonld, PostService} from "@app/core/api/v1"; | |||
| import {FormGroupInitializer} from "@app/_helpers/formgroup.initializer"; | |||
| import {ApiConverter} from "@app/_helpers/api.converter"; | |||
| import {Subscription} from "rxjs"; | |||
| @@ -23,59 +23,58 @@ | |||
| </div> | |||
| </div> | |||
| <div class="spt-container"> | |||
| <div class="posts"> | |||
| <div class="d-flex justify-content-between align-items-start"> | |||
| <h2>{{'basic.posts' | translate}}</h2> | |||
| <button class="btn btn-primary" (click)="openModalNewPosting()">{{'basic.new-post' | translate}}</button> | |||
| </div> | |||
| <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"> | |||
| <p>{{ post.createdAt | date:'dd.MM.YYYY' }}</p> | |||
| <p>{{ post.ownerName }}</p> | |||
| </div> | |||
| <div> | |||
| <h3>{{ post.headline }}</h3> | |||
| <p class="m-0" [innerHTML]="apiConverter.getSafeLongtext(post.message)"></p> | |||
| </div> | |||
| <span *ngIf="post.owner === user?.id" class="position-absolute bi bi-pencil p-2" data-type="user-tool" | |||
| data-action="edit" (click)="openModalEditPosting(post)"></span> | |||
| </div> | |||
| </div> | |||
| <div *ngIf="post.id && commentsVisibility.get(post.id)"> | |||
| <div class="card ms-5" *ngFor="let comment of post.comments"> | |||
| <app-toggle #togglePosts [headline]="'basic.posts' | translate"> | |||
| <div class="spt-container"> | |||
| <div class="posts position-relative"> | |||
| <button class="btn btn-primary toggle-btn" (click)="openModalNewPosting()">{{'basic.new-post' | translate}}</button> | |||
| <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"> | |||
| <p>{{ comment.createdAt | date:'dd.MM.YYYY' }}</p> | |||
| <p>{{ comment.ownerName }}</p> | |||
| <p>{{ post.createdAt | date:'dd.MM.YYYY' }}</p> | |||
| <p>{{ post.ownerName }}</p> | |||
| </div> | |||
| <div> | |||
| <p class="m-0" [innerHTML]="apiConverter.getSafeLongtext(comment.message)"></p> | |||
| <h3>{{ post.headline }}</h3> | |||
| <p class="m-0" [innerHTML]="apiConverter.getSafeLongtext(post.message)"></p> | |||
| </div> | |||
| <span *ngIf="post.owner === user?.id" class="position-absolute bi bi-pencil p-2" data-type="user-tool" | |||
| data-action="edit" (click)="openModalEditPosting(post)"></span> | |||
| </div> | |||
| </div> | |||
| <div *ngIf="post.id && commentsVisibility.get(post.id)"> | |||
| <div class="card ms-5" *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]="apiConverter.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> | |||
| <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 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> | |||
| <mat-paginator *ngIf="posts.length > 0" class="rounded-1" | |||
| [pageSizeOptions]="[10,20,30]" | |||
| [length]="postsLength" | |||
| (page)="postsHandlePageEvent($event)" | |||
| [pageSize]="postsPageSize" | |||
| [pageIndex]="postsPageIndex" | |||
| showFirstLastButtons> | |||
| </mat-paginator> | |||
| </div> | |||
| <mat-paginator *ngIf="posts.length > 0" class="rounded-1" | |||
| [pageSizeOptions]="[10,20,30]" | |||
| [length]="postsLength" | |||
| (page)="postsHandlePageEvent($event)" | |||
| [pageSize]="postsPageSize" | |||
| [pageIndex]="postsPageIndex" | |||
| showFirstLastButtons> | |||
| </mat-paginator> | |||
| </div> | |||
| </div> | |||
| </app-toggle> | |||
| @@ -1,5 +1,11 @@ | |||
| html, body { height: 100%; } | |||
| body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; } | |||
| html, body { | |||
| height: 100%; | |||
| } | |||
| body { | |||
| margin: 0; | |||
| font-family: Roboto, "Helvetica Neue", sans-serif; | |||
| } | |||
| body { | |||
| background: #d2d2d2; | |||
| @@ -27,6 +33,7 @@ img { | |||
| } | |||
| .spt-container { | |||
| min-height: 1px; | |||
| margin-bottom: 3rem; | |||
| } | |||
| @@ -39,12 +46,15 @@ img { | |||
| position: absolute; | |||
| right: 0; | |||
| top: -16px; | |||
| &[data-importance="low"] { | |||
| background: #77bb33; | |||
| } | |||
| &[data-importance="medium"] { | |||
| background: #ffee55; | |||
| } | |||
| &[data-importance="high"] { | |||
| background: #bb1414; | |||
| } | |||
| @@ -58,6 +68,52 @@ img { | |||
| } | |||
| } | |||
| .toggle { | |||
| background: $color-matsen; | |||
| color: #fff; | |||
| padding: 3px 10px 3px 40px; | |||
| border-radius: 6px; | |||
| margin-bottom: 1rem; | |||
| position: relative; | |||
| cursor: pointer; | |||
| * { | |||
| margin: 0 !important; | |||
| } | |||
| &:before, | |||
| &:after { | |||
| content: ""; | |||
| position: absolute; | |||
| top: 17px; | |||
| width: 15px; | |||
| height: 2px; | |||
| background: #fff; | |||
| @include transition(); | |||
| } | |||
| &:before { | |||
| transform: rotate(45deg); | |||
| left: 10px; | |||
| } | |||
| &:after { | |||
| transform: rotate(-45deg); | |||
| left: 20px; | |||
| } | |||
| &.collapsed { | |||
| &:before { | |||
| transform: rotate(-45deg); | |||
| } | |||
| &:after { | |||
| transform: rotate(45deg); | |||
| } | |||
| } | |||
| } | |||
| .toggle-btn { | |||
| margin-top: -3.25rem; | |||
| } | |||
| position: absolute; | |||
| right: 0; | |||
| top: -3.38rem; | |||
| } | |||
| @@ -5,7 +5,7 @@ | |||
| align-items: center; | |||
| cursor: pointer; | |||
| padding: 2px 0; | |||
| border-radius: 5px; | |||
| border-radius: 6px; | |||
| @include transition(); | |||
| &:hover { | |||
| background: $color-matsen; | |||
| @@ -1,15 +1,15 @@ | |||
| .sales-summary-container { | |||
| .sales-summary-bar { | |||
| border-radius: 5px; | |||
| border-radius: 6px; | |||
| background: #bbb; | |||
| margin: 0 0 0.5rem 0; | |||
| div { | |||
| animation: expand 2.5s ease; | |||
| border-radius: 5px; | |||
| border-radius: 6px; | |||
| span { | |||
| display: block; | |||
| border-radius: 5px; | |||
| border-radius: 6px; | |||
| padding: 15px; | |||
| white-space: nowrap; | |||
| } | |||