Styling Responsive

matsen-tool/src/app/_components/layout/two-column/two-column.component.html

@@ -66,7 +66,7 @@
             </li>
         </ul>
     </div>
-    <div class="col-10 pb-5 spt-main">
+    <div class="col-12 col-xl-10 pb-5 spt-main">
         <div class="pe-3 pt-3">
             <div class="spt-back-btn mb-4" (click)="goBack()">{{'basic.back' | translate}}</div>
             <router-outlet></router-outlet>

matsen-tool/src/app/_views/contacts/contact-list/contact-list.component.html

@@ -11,7 +11,7 @@
         >
             <div class="overflow-hidden">
                 <div class="row">
-                    <div class="col-4 spt-contact-box" *ngFor="let contact of contacts">
+                    <div class="col-12 col-md-6 col-xl-4 spt-contact-box" *ngFor="let contact of contacts">
                         <div class="card">
                             <div class="card-body row">
                                 <div class="col-4">
@@ -27,9 +27,9 @@
                                         {{ contact.position }}</p>
                                 </div>
                             </div>
+                            <span role="button" (click)="navigateToContactDetails(contact)"
+                                  class="badge bg-secondary p-2">{{ 'basic.details' | translate }}</span>
                         </div>
-                        <span role="button" (click)="navigateToContactDetails(contact)"
-                              class="badge bg-secondary p-2">{{ 'basic.details' | translate }}</span>
                     </div>
                 </div>
             </div>

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

@@ -1,9 +1,9 @@
 <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-12 col-sm-6 col-lg-8">
                 <div class="row">
-                    <div class="col-6">
+                    <div class="col-12 col-lg-6">
                         <h1>{{ contact.firstName }} {{ contact.lastName }}</h1>
                         <dl>
                             <dt *ngIf="contact.position">{{'form.position' | translate}}:</dt>
@@ -16,7 +16,7 @@
                             <dd *ngIf="contact.birthday">{{ contact.birthday | date:'dd.MM.YYYY' }}</dd>
                         </dl>
                     </div>
-                    <div class="col-6">
+                    <div class="col-12 col-lg-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.product?.id)}}">{{contactPartnerProduct.product?.name}}</a></li>
@@ -24,7 +24,7 @@
                     </div>
                 </div>
             </div>
-            <div class="col-4 has-image">
+            <div class="col-12 col-sm-6 col-lg-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/documents/document-list/document-list.component.html

@@ -6,89 +6,91 @@
                 [getDataFunction]="getData"
                 [dataSource]="dataSource"
     >
-        <table mat-table [dataSource]="dataSource" matSort (matSortChange)="onSortChange($event)"
-               class="mat-elevation-z8">
+        <div class="table-responsive">
+            <table mat-table [dataSource]="dataSource" matSort (matSortChange)="onSortChange($event)"
+                   class="mat-elevation-z8">
 
-            <ng-container matColumnDef="pos">
-                <th mat-header-cell *matHeaderCellDef>
-                    {{ 'overview.number' | translate }}
-                </th>
-                <td mat-cell
-                    *matCellDef="let element">{{ pagingComponent.getPageSize() * (pagingComponent.getPageIndex()-1) + 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">{{ pagingComponent.getPageSize() * (pagingComponent.getPageIndex()-1) + dataSource.filteredData.indexOf(element) + 1 }}
+                    </td>
+                </ng-container>
 
-            <ng-container matColumnDef="name">
-                <th mat-header-cell *matHeaderCellDef mat-sort-header
-                    sortActionDescription="{{ 'overview.sort' | translate }}: {{ 'overview.document' | translate }}">
-                    {{ 'overview.document' | translate }}
-                </th>
-                <td mat-cell *matCellDef="let element">{{ element.name }}
-                </td>
-            </ng-container>
+                <ng-container matColumnDef="name">
+                    <th mat-header-cell *matHeaderCellDef mat-sort-header
+                        sortActionDescription="{{ 'overview.sort' | translate }}: {{ 'overview.document' | translate }}">
+                        {{ 'overview.document' | translate }}
+                    </th>
+                    <td mat-cell *matCellDef="let element">{{ element.name }}
+                    </td>
+                </ng-container>
 
-            <ng-container matColumnDef="description">
-                <th mat-header-cell *matHeaderCellDef>
-                    {{ 'overview.description' | translate }}
-                </th>
-                <td mat-cell *matCellDef="let element"
-                    title="{{element.description}}">{{ element.description?.length > 70 ? element.description?.slice(0, 70) + '...' : element.description }}
-                </td>
-            </ng-container>
+                <ng-container matColumnDef="description">
+                    <th mat-header-cell *matHeaderCellDef>
+                        {{ 'overview.description' | translate }}
+                    </th>
+                    <td mat-cell *matCellDef="let element"
+                        title="{{element.description}}">{{ element.description?.length > 70 ? element.description?.slice(0, 70) + '...' : element.description }}
+                    </td>
+                </ng-container>
 
-            <ng-container matColumnDef="partnerName">
-                <th mat-header-cell *matHeaderCellDef>
-                    {{ 'overview.partner' | translate }}
-                </th>
-                <td mat-cell *matCellDef="let element">{{ element.partnerName }}
-                </td>
-            </ng-container>
+                <ng-container matColumnDef="partnerName">
+                    <th mat-header-cell *matHeaderCellDef>
+                        {{ 'overview.partner' | translate }}
+                    </th>
+                    <td mat-cell *matCellDef="let element">{{ element.partnerName }}
+                    </td>
+                </ng-container>
 
-            <ng-container matColumnDef="productName">
-                <th mat-header-cell *matHeaderCellDef>
-                    {{ 'overview.product' | translate }}
-                </th>
-                <td mat-cell *matCellDef="let element">{{ element.productName }}
-                </td>
-            </ng-container>
+                <ng-container matColumnDef="productName">
+                    <th mat-header-cell *matHeaderCellDef>
+                        {{ 'overview.product' | translate }}
+                    </th>
+                    <td mat-cell *matCellDef="let element">{{ element.productName }}
+                    </td>
+                </ng-container>
 
-            <ng-container matColumnDef="createdAt">
-                <th mat-header-cell *matHeaderCellDef mat-sort-header
-                    sortActionDescription="{{ 'overview.sort' | translate }}: {{ 'overview.uploaded' | translate }}">
-                    {{ 'overview.uploaded' | translate }}
-                </th>
-                <td mat-cell *matCellDef="let element">{{ element.createdAt | date:'dd.MM.YYYY HH:mm' }}
-                </td>
-            </ng-container>
+                <ng-container matColumnDef="createdAt">
+                    <th mat-header-cell *matHeaderCellDef mat-sort-header
+                        sortActionDescription="{{ 'overview.sort' | translate }}: {{ 'overview.uploaded' | translate }}">
+                        {{ 'overview.uploaded' | translate }}
+                    </th>
+                    <td mat-cell *matCellDef="let element">{{ element.createdAt | date:'dd.MM.YYYY HH:mm' }}
+                    </td>
+                </ng-container>
 
-            <ng-container matColumnDef="createdByName">
-                <th mat-header-cell *matHeaderCellDef mat-sort-header
-                    sortActionDescription="{{ 'overview.sort' | translate }}: {{ 'overview.createdBy' | translate }}">
-                    {{ 'overview.createdBy' | translate }}
-                </th>
-                <td mat-cell *matCellDef="let element">{{ element.createdByName }}
-                </td>
-            </ng-container>
+                <ng-container matColumnDef="createdByName">
+                    <th mat-header-cell *matHeaderCellDef mat-sort-header
+                        sortActionDescription="{{ 'overview.sort' | translate }}: {{ 'overview.createdBy' | translate }}">
+                        {{ 'overview.createdBy' | translate }}
+                    </th>
+                    <td mat-cell *matCellDef="let element">{{ element.createdByName }}
+                    </td>
+                </ng-container>
 
-            <ng-container matColumnDef="download">
-                <th mat-header-cell *matHeaderCellDef></th>
-                <td mat-cell *matCellDef="let element">
-                    <span class="btn btn-primary bi bi-download p-2-4"
-                          data-type="user-tool" data-action="edit" (click)="navigateToDocumentFile(element)"></span>
-                </td>
-            </ng-container>
+                <ng-container matColumnDef="download">
+                    <th mat-header-cell *matHeaderCellDef></th>
+                    <td mat-cell *matCellDef="let element">
+                        <span class="btn btn-primary bi bi-download p-2-4"
+                              data-type="user-tool" data-action="edit" (click)="navigateToDocumentFile(element)"></span>
+                    </td>
+                </ng-container>
 
-            <ng-container matColumnDef="edit">
-                <th mat-header-cell *matHeaderCellDef></th>
-                <td mat-cell *matCellDef="let element">
-                    <span class="btn btn-primary bi bi-pencil p-2-4"
-                          data-type="user-tool" data-action="edit" (click)="openModalEditDocument(element)"></span>
-                </td>
-            </ng-container>
+                <ng-container matColumnDef="edit">
+                    <th mat-header-cell *matHeaderCellDef></th>
+                    <td mat-cell *matCellDef="let element">
+                        <span class="btn btn-primary bi bi-pencil p-2-4"
+                              data-type="user-tool" data-action="edit" (click)="openModalEditDocument(element)"></span>
+                    </td>
+                </ng-container>
 
-            <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-            <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
-        </table>
+                <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+                <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
+            </table>
+        </div>
     </app-paging>
 </div>
 

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

@@ -9,73 +9,63 @@
     <div class="spt-home-cards">
         <div class="container">
             <div class="row pt-4 pb-4 d-flex">
-                <div class="col d-flex">
+                <div class="col-12 col-md-6 col-lg-4 mb-4 d-flex">
                     <a class="card" routerLink="/customer" routerLinkActive="active">
                         <div class="card-body position-relative" data-cat="customer">
                             <h3 class="position-absolute m-0">{{ 'basic.customer' | translate }}</h3>
                         </div>
                     </a>
                 </div>
-                <div class="col d-flex">
+                <div class="col-12 col-md-6 col-lg-4 mb-4 d-flex">
                     <a class="card" routerLink="/supplier" routerLinkActive="active">
                         <div class="card-body position-relative" data-cat="supplier">
                             <h3 class="position-absolute m-0">{{ 'basic.supplier' | translate }}</h3>
                         </div>
                     </a>
                 </div>
-                <div class="col d-flex">
+                <div class="col-12 col-md-6 col-lg-4 mb-4 d-flex">
                     <a class="card" routerLink="/service" routerLinkActive="active">
                         <div class="card-body position-relative" data-cat="service">
                             <h3 class="position-absolute m-0">{{ 'basic.service' | translate }}</h3>
                         </div>
                     </a>
                 </div>
-            </div>
-        </div>
-
-        <div class="container">
-            <div class="row pt-4 pb-4 d-flex">
-                <div class="col d-flex">
+                <div class="col-12 col-md-6 col-lg-4 mb-4 d-flex">
                     <a class="card" routerLink="/product" routerLinkActive="active">
                         <div class="card-body position-relative" data-cat="product">
                             <h3 class="position-absolute m-0">{{ 'basic.products' | translate }}</h3>
                         </div>
                     </a>
                 </div>
-                <div class="col d-flex">
+                <div class="col-12 col-md-6 col-lg-4 mb-4 d-flex">
                     <a class="card" routerLink="/task" routerLinkActive="active">
                         <div class="card-body position-relative" data-cat="task">
                             <h3 class="position-absolute m-0">{{ 'basic.tasks' | translate }}</h3>
                         </div>
                     </a>
                 </div>
-                <div class="col d-flex">
+                <div class="col-12 col-md-6 col-lg-4 mb-4 d-flex">
                     <a class="card" routerLink="/document" routerLinkActive="active">
                         <div class="card-body position-relative" data-cat="document">
                             <h3 class="position-absolute m-0">{{ 'basic.documents' | translate }}</h3>
                         </div>
                     </a>
                 </div>
-            </div>
-        </div>
-
-        <div class="container">
-            <div class="row pt-4 pb-4 d-flex">
-                <div class="col d-flex">
+                <div class="col-12 col-md-6 col-lg-4 mb-4 d-flex">
                     <a class="card" routerLink="/sale" routerLinkActive="active">
                         <div class="card-body position-relative" data-cat="sale">
                             <h3 class="position-absolute m-0">{{ 'basic.sales' | translate }}</h3>
                         </div>
                     </a>
                 </div>
-                <div class="col d-flex">
+                <div class="col-12 col-md-6 col-lg-4 mb-4 d-flex">
                     <a class="card" routerLink="/profile" routerLinkActive="active">
                         <div class="card-body position-relative" data-cat="profile">
                             <h3 class="position-absolute m-0">{{ 'basic.profile' | translate }}</h3>
                         </div>
                     </a>
                 </div>
-                <div class="col d-flex">
+                <div class="col-12 col-md-6 col-lg-4 mb-4 d-flex">
                     <a class="card" routerLink="/user" routerLinkActive="active">
                         <div class="card-body position-relative" data-cat="user">
                             <h3 class="position-absolute m-0">{{ 'basic.users' | translate }}</h3>

matsen-tool/src/app/_views/partners/partner-list/partner-list.component.html

@@ -6,70 +6,72 @@
                 [getDataFunction]="getData"
                 [dataSource]="dataSource"
     >
-        <table mat-table [dataSource]="dataSource" matSort (matSortChange)="onSortChange($event)" class="mat-elevation-z8">
+        <div class="table-responsive">
+            <table mat-table [dataSource]="dataSource" matSort (matSortChange)="onSortChange($event)" class="mat-elevation-z8">
 
-            <ng-container matColumnDef="pos">
-                <th mat-header-cell *matHeaderCellDef>
-                    {{ 'overview.number' | translate }}
-                </th>
-                <td mat-cell
-                    *matCellDef="let element">{{ pagingComponent.getPageSize() * (pagingComponent.getPageIndex()-1) + 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">{{ pagingComponent.getPageSize() * (pagingComponent.getPageIndex()-1) + 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 src="{{ element.logoUrl }}" 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 src="{{ element.logoUrl }}" width="40"
+                             height="40"  />
+                    </td>
+                </ng-container>
 
-            <ng-container matColumnDef="name">
-                <th mat-header-cell *matHeaderCellDef mat-sort-header
-                    sortActionDescription="{{ 'overview.sort' | translate }}: {{ partnerColumnHeadline }}">
-                    {{ partnerColumnHeadline }}
-                </th>
-                <td mat-cell *matCellDef="let element">
-                    {{ element.name }}
-                </td>
-            </ng-container>
+                <ng-container matColumnDef="name">
+                    <th mat-header-cell *matHeaderCellDef mat-sort-header
+                        sortActionDescription="{{ 'overview.sort' | translate }}: {{ partnerColumnHeadline }}">
+                        {{ partnerColumnHeadline }}
+                    </th>
+                    <td mat-cell *matCellDef="let element">
+                        {{ element.name }}
+                    </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>
 
-            <ng-container matColumnDef="details">
-                <th mat-header-cell class="text-end" *matHeaderCellDef>
-                    {{ 'overview.details' | translate }}
-                </th>
-                <td mat-cell class="text-end" *matCellDef="let element">
-                        <span class="btn btn-primary spt-icon-details"
-                              data-type="user-tool" data-action="edit" (click)="navigateToPartnerDetails(element)"></span>
-                </td>
-            </ng-container>
+                <ng-container matColumnDef="details">
+                    <th mat-header-cell class="text-end" *matHeaderCellDef>
+                        {{ 'overview.details' | translate }}
+                    </th>
+                    <td mat-cell class="text-end" *matCellDef="let element">
+                            <span class="btn btn-primary spt-icon-details"
+                                  data-type="user-tool" data-action="edit" (click)="navigateToPartnerDetails(element)"></span>
+                    </td>
+                </ng-container>
 
-            <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-            <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
-        </table>
+                <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+                <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
+            </table>
+        </div>
     </app-paging>
 </div>

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

@@ -1,16 +1,16 @@
 <div class="spt-container">
     <div *ngIf="partner" class="card">
         <div class="card-body row">
-            <div class="spt-col col-8">
+            <div class="spt-col col-12 col-sm-6 col-lg-8">
                 <div class="row">
-                    <div class="col-6">
+                    <div class="col-12 col-lg-6">
                         <h1>{{ partner.name }}</h1>
                         <p>{{ partner.street }} {{ partner.streetNo }}<br/>
                             {{ partner.zip }} {{ partner.city }}<br/>
                             {{ partner.country }}</p>
                         <p>Sprache: Deutsch</p>
                     </div>
-                    <div class="col-6">
+                    <div class="col-12 col-lg-6">
                         <h2>10002</h2>
                         <dl>
                             <dt>Telefon:</dt>
@@ -34,7 +34,7 @@
                     </div>
                 </div>
             </div>
-            <div class="col-4 has-image">
+            <div class="col-12 col-sm-6 col-lg-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

@@ -10,7 +10,7 @@
             <div class="post pb-1" *ngFor="let post of posts">
                 <div class="card p-3">
                     <div class="row">
-                        <div class="col-4">
+                        <div class="col-12 col-md-4">
                             <span class="due-date">{{ post.createdAt | date:'dd.MM.YYYY':'GMT+0000' }}</span>
                             <h3 class="m-0" *ngIf="post.partner">
                                 <app-linked-label [partner]="post.partner"></app-linked-label>
@@ -23,7 +23,7 @@
                             </h3>
                             <p>{{ post.owner?.fullName }}</p>
                         </div>
-                        <div class="spt-border col-8">
+                        <div class="spt-border col-12 col-md-8">
                             <h2 class="m-0">{{ post.headline }}</h2>
                             <p class="m-0" [innerHTML]="appHelperService.getSafeLongtext(post.message)"></p>
                             <span *ngIf="post.owner?.id === currentUser?.id" class="position-absolute bi bi-pencil p-2"

matsen-tool/src/app/_views/products/product-list/product-list.component.html

@@ -7,67 +7,69 @@
                 [getDataFunction]="getData"
                 [dataSource]="dataSource"
     >
-        <table mat-table [dataSource]="dataSource" matSort (matSortChange)="onSortChange($event)"
-               class="mat-elevation-z8">
+        <div class="table-responsive">
+            <table mat-table [dataSource]="dataSource" matSort (matSortChange)="onSortChange($event)"
+                   class="mat-elevation-z8">
 
-            <ng-container matColumnDef="pos">
-                <th mat-header-cell *matHeaderCellDef>
-                    {{ 'overview.number' | translate }}
-                </th>
-                <td mat-cell
-                    *matCellDef="let element">{{ pagingComponent.getPageSize() * (pagingComponent.getPageIndex()-1) + 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">{{ pagingComponent.getPageSize() * (pagingComponent.getPageIndex()-1) + dataSource.filteredData.indexOf(element) + 1 }}
+                    </td>
+                </ng-container>
 
-            <ng-container matColumnDef="image">
-                <th mat-header-cell *matHeaderCellDef>
-                    {{ 'overview.image' | translate }}
-                </th>
-                <td mat-cell *matCellDef="let element">
-                    <img src="{{element.imageUrl}}" width="40" height="40"/>
-                </td>
-            </ng-container>
+                <ng-container matColumnDef="image">
+                    <th mat-header-cell *matHeaderCellDef>
+                        {{ 'overview.image' | translate }}
+                    </th>
+                    <td mat-cell *matCellDef="let element">
+                        <img src="{{element.imageUrl}}" width="40" height="40"/>
+                    </td>
+                </ng-container>
 
-            <ng-container matColumnDef="name">
-                <th mat-header-cell *matHeaderCellDef mat-sort-header
-                    sortActionDescription="{{ 'overview.sort' | translate }}: {{ 'overview.productname' | translate }}">
-                    {{ 'overview.productname' | translate }}
-                </th>
-                <td mat-cell *matCellDef="let element">
-                    {{ element.name }}
-                </td>
-            </ng-container>
+                <ng-container matColumnDef="name">
+                    <th mat-header-cell *matHeaderCellDef mat-sort-header
+                        sortActionDescription="{{ 'overview.sort' | translate }}: {{ 'overview.productname' | translate }}">
+                        {{ 'overview.productname' | translate }}
+                    </th>
+                    <td mat-cell *matCellDef="let element">
+                        {{ element.name }}
+                    </td>
+                </ng-container>
 
-            <ng-container matColumnDef="storage">
-                <th mat-header-cell *matHeaderCellDef mat-sort-header
-                    sortActionDescription="{{ 'overview.sort' | translate }}: {{ 'overview.storage' | translate }}">
-                    {{ 'overview.storage' | translate }}
-                </th>
-                <td mat-cell *matCellDef="let element">{{ element.storage }}
-                </td>
-            </ng-container>
+                <ng-container matColumnDef="storage">
+                    <th mat-header-cell *matHeaderCellDef mat-sort-header
+                        sortActionDescription="{{ 'overview.sort' | translate }}: {{ 'overview.storage' | translate }}">
+                        {{ 'overview.storage' | translate }}
+                    </th>
+                    <td mat-cell *matCellDef="let element">{{ element.storage }}
+                    </td>
+                </ng-container>
 
-            <ng-container matColumnDef="number">
-                <th mat-header-cell *matHeaderCellDef mat-sort-header
-                    sortActionDescription="{{ 'overview.sort' | translate }}: {{ 'overview.number-long' | translate }}">
-                    {{ 'overview.number-long' | translate }}
-                </th>
-                <td mat-cell *matCellDef="let element">{{ element.number }}
-                </td>
-            </ng-container>
+                <ng-container matColumnDef="number">
+                    <th mat-header-cell *matHeaderCellDef mat-sort-header
+                        sortActionDescription="{{ 'overview.sort' | translate }}: {{ 'overview.number-long' | translate }}">
+                        {{ 'overview.number-long' | translate }}
+                    </th>
+                    <td mat-cell *matCellDef="let element">{{ element.number }}
+                    </td>
+                </ng-container>
 
-            <ng-container matColumnDef="details">
-                <th mat-header-cell class="text-end" *matHeaderCellDef>
-                    {{ 'overview.details' | translate }}
-                </th>
-                <td mat-cell class="text-end" *matCellDef="let element">
-                        <span class="btn btn-primary spt-icon-details"
-                              data-type="user-tool" data-action="edit" (click)="navigateToProductDetails(element)"></span>
-                </td>
-            </ng-container>
+                <ng-container matColumnDef="details">
+                    <th mat-header-cell class="text-end" *matHeaderCellDef>
+                        {{ 'overview.details' | translate }}
+                    </th>
+                    <td mat-cell class="text-end" *matCellDef="let element">
+                            <span class="btn btn-primary spt-icon-details"
+                                  data-type="user-tool" data-action="edit" (click)="navigateToProductDetails(element)"></span>
+                    </td>
+                </ng-container>
 
-            <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-            <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
-        </table>
+                <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+                <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
+            </table>
+        </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="spt-col col-8">
+            <div class="spt-col col-12 col-sm-6 col-lg-8">
                 <h1>{{ product.name }}</h1>
                 <p>{{ product.description }}</p>
                 <dl>
@@ -17,7 +17,7 @@
                     <dd>234856372</dd>
                 </dl>
             </div>
-            <div class="col-4 has-image">
+            <div class="col-12 col-sm-6 col-lg-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/sale-list/sale-list.component.html

@@ -6,90 +6,92 @@
                     [getDataFunction]="getData"
                     [dataSource]="dataSource"
         >
-        <table mat-table [dataSource]="dataSource" matSort (matSortChange)="onSortChange($event)"
-               class="mat-elevation-z8">
+        <div class="table-responsive">
+            <table mat-table [dataSource]="dataSource" matSort (matSortChange)="onSortChange($event)"
+                   class="mat-elevation-z8">
 
-            <ng-container matColumnDef="pos">
-                <th mat-header-cell *matHeaderCellDef>
-                    {{ 'overview.number' | translate }}
-                </th>
-                <td mat-cell
-                    *matCellDef="let element">{{ pagingComponent.getPageSize() * (pagingComponent.getPageIndex()-1) + 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">{{ pagingComponent.getPageSize() * (pagingComponent.getPageIndex()-1) + dataSource.filteredData.indexOf(element) + 1 }}
+                    </td>
+                </ng-container>
 
-            <ng-container matColumnDef="user">
-                <th mat-header-cell *matHeaderCellDef mat-sort-header
-                    sortActionDescription="{{ 'overview.sort' | translate }}:  {{ 'overview.sale-user' | translate }}">
-                    {{ 'overview.sale-user' | translate }}
-                </th>
-                <td mat-cell *matCellDef="let element">
-                    <a [routerLink]="['/user', appHelperService.extractId(element.owner.id)]">{{ element.owner.fullName }}</a>
-                </td>
-            </ng-container>
+                <ng-container matColumnDef="user">
+                    <th mat-header-cell *matHeaderCellDef mat-sort-header
+                        sortActionDescription="{{ 'overview.sort' | translate }}:  {{ 'overview.sale-user' | translate }}">
+                        {{ 'overview.sale-user' | translate }}
+                    </th>
+                    <td mat-cell *matCellDef="let element">
+                        <a [routerLink]="['/user', appHelperService.extractId(element.owner.id)]">{{ element.owner.fullName }}</a>
+                    </td>
+                </ng-container>
 
-            <ng-container matColumnDef="partner">
-                <th mat-header-cell *matHeaderCellDef mat-sort-header="address"
-                    sortActionDescription="{{ 'overview.sort' | translate }}: {{ 'overview.sale-partner' | translate }}">
-                    {{ 'overview.sale-partner' | translate }}
-                </th>
-                <td mat-cell *matCellDef="let element">
-                    <a [routerLink]="['/customer', appHelperService.extractId(element.partner.id)]">{{ element.partner.name }}</a>
-                </td>
-            </ng-container>
+                <ng-container matColumnDef="partner">
+                    <th mat-header-cell *matHeaderCellDef mat-sort-header="address"
+                        sortActionDescription="{{ 'overview.sort' | translate }}: {{ 'overview.sale-partner' | translate }}">
+                        {{ 'overview.sale-partner' | translate }}
+                    </th>
+                    <td mat-cell *matCellDef="let element">
+                        <a [routerLink]="['/customer', appHelperService.extractId(element.partner.id)]">{{ element.partner.name }}</a>
+                    </td>
+                </ng-container>
 
-            <ng-container matColumnDef="product">
-                <th mat-header-cell *matHeaderCellDef mat-sort-header
-                    sortActionDescription="{{ 'overview.sort' | translate }}: {{ 'overview.productname' | translate }}">
-                    {{ 'overview.productname' | translate }}
-                </th>
-                <td mat-cell *matCellDef="let element">
-                    <a [routerLink]="['/product', appHelperService.extractId(element.product.id)]">{{ element.product.name }}</a>
-                </td>
-            </ng-container>
+                <ng-container matColumnDef="product">
+                    <th mat-header-cell *matHeaderCellDef mat-sort-header
+                        sortActionDescription="{{ 'overview.sort' | translate }}: {{ 'overview.productname' | translate }}">
+                        {{ 'overview.productname' | translate }}
+                    </th>
+                    <td mat-cell *matCellDef="let element">
+                        <a [routerLink]="['/product', appHelperService.extractId(element.product.id)]">{{ element.product.name }}</a>
+                    </td>
+                </ng-container>
 
-            <ng-container matColumnDef="turnover">
-                <th mat-header-cell *matHeaderCellDef mat-sort-header
-                    sortActionDescription="{{ 'overview.sort' | translate }}: {{ 'overview.turnover' | translate }}">
-                    {{ 'overview.turnover' | translate }}
-                </th>
-                <td mat-cell *matCellDef="let element">
-                    {{ element.turnover | currency: 'EUR' }}
-                </td>
-            </ng-container>
+                <ng-container matColumnDef="turnover">
+                    <th mat-header-cell *matHeaderCellDef mat-sort-header
+                        sortActionDescription="{{ 'overview.sort' | translate }}: {{ 'overview.turnover' | translate }}">
+                        {{ 'overview.turnover' | translate }}
+                    </th>
+                    <td mat-cell *matCellDef="let element">
+                        {{ element.turnover | currency: 'EUR' }}
+                    </td>
+                </ng-container>
 
-            <ng-container matColumnDef="profit">
-                <th mat-header-cell *matHeaderCellDef mat-sort-header
-                    sortActionDescription="{{ 'overview.sort' | translate }}: {{ 'overview.profit' | translate }}">
-                    {{ 'overview.profit' | translate }}
-                </th>
-                <td mat-cell *matCellDef="let element">
-                    {{ element.profit | currency: 'EUR' }}
-                </td>
-            </ng-container>
+                <ng-container matColumnDef="profit">
+                    <th mat-header-cell *matHeaderCellDef mat-sort-header
+                        sortActionDescription="{{ 'overview.sort' | translate }}: {{ 'overview.profit' | translate }}">
+                        {{ 'overview.profit' | translate }}
+                    </th>
+                    <td mat-cell *matCellDef="let element">
+                        {{ element.profit | currency: 'EUR' }}
+                    </td>
+                </ng-container>
 
-            <ng-container matColumnDef="date">
-                <th mat-header-cell *matHeaderCellDef mat-sort-header
-                    sortActionDescription="{{ 'overview.sort' | translate }}: {{ 'overview.createdAt' | translate }}">
-                    {{ 'overview.createdAt' | translate }}
-                </th>
-                <td mat-cell *matCellDef="let element">
-                    {{ element.createdAt | date:'dd.MM.YYYY HH:mm' }}
-                </td>
-            </ng-container>
+                <ng-container matColumnDef="date">
+                    <th mat-header-cell *matHeaderCellDef mat-sort-header
+                        sortActionDescription="{{ 'overview.sort' | translate }}: {{ 'overview.createdAt' | translate }}">
+                        {{ 'overview.createdAt' | translate }}
+                    </th>
+                    <td mat-cell *matCellDef="let element">
+                        {{ element.createdAt | date:'dd.MM.YYYY HH:mm' }}
+                    </td>
+                </ng-container>
 
-            <ng-container matColumnDef="details">
-                <th mat-header-cell class="text-end" *matHeaderCellDef>
-                    {{ 'overview.details' | translate }}
-                </th>
-                <td mat-cell class="text-end" *matCellDef="let element">
-                        <span class="btn btn-primary spt-icon-details"
-                              data-type="user-tool" data-action="edit" (click)="navigateToSaleDetails(element)"></span>
-                </td>
-            </ng-container>
+                <ng-container matColumnDef="details">
+                    <th mat-header-cell class="text-end" *matHeaderCellDef>
+                        {{ 'overview.details' | translate }}
+                    </th>
+                    <td mat-cell class="text-end" *matCellDef="let element">
+                            <span class="btn btn-primary spt-icon-details"
+                                  data-type="user-tool" data-action="edit" (click)="navigateToSaleDetails(element)"></span>
+                    </td>
+                </ng-container>
 
-            <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-            <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
-        </table>
+                <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+                <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
+            </table>
+        </div>
     </app-paging>
 </div>

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="spt-col col-8">
+            <div class="spt-col col-12 col-sm-6 col-lg-8">
                 <h1>{{'overview.sale-user' | translate }}: {{ sale.owner?.fullName }}</h1>
                 <dl>
                     <dt *ngIf="sale.partner?.name">{{'overview.partner' | translate}}:</dt>
@@ -16,7 +16,7 @@
                     <dd *ngIf="sale.comment" [innerHTML]="appHelperService.getSafeLongtext(sale.comment)"></dd>
                 </dl>
             </div>
-            <div class="col-4"></div>
+            <div class="col-12 col-sm-6 col-lg-4">
             <span *ngIf="sale.owner === user?.id" class="position-absolute bi bi-pencil p-2" data-type="user-tool" data-action="edit"
                   (click)="openModalEditSale()"></span>
         </div>

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

@@ -12,26 +12,26 @@
                 <div class="card p-3" *ngIf="taskCompactMode">
                     <div class="row pb-1">
                         <div class="col-12">
-                            <div style="display: flex;justify-content: flex-start;align-items: center;">
+                            <div class="info-box">
                                 <span class="importance" [attr.data-importance]="task.prio"></span>
-                                <span class="due-date">{{ task.dueAt | date:'dd.MM.YYYY':'GMT+0000' }}</span>
-                                <h3 class="m-0 ps-3" *ngIf="task.partner">
+                                <span class="due-date pe-3">{{ task.dueAt | date:'dd.MM.YYYY':'GMT+0000' }}</span>
+                                <h3 class="m-0 pe-3" *ngIf="task.partner">
                                     <app-linked-label [partner]="task.partner"></app-linked-label>
                                 </h3>
-                                <h3 class="m-0 ps-3" *ngIf="task.product">
+                                <h3 class="m-0 pe-3" *ngIf="task.product">
                                     <app-linked-label [product]="task.product"></app-linked-label>
                                 </h3>
-                                <p class="m-0 ps-3" *ngIf="task.assignedTo">
+                                <p class="m-0" *ngIf="task.assignedTo">
                                     <app-linked-label [user]="task.assignedTo"></app-linked-label>
                                 </p>
                             </div>
                         </div>
                     </div>
                     <div class="row spt-compact">
-                        <div class="col-6">
+                        <div class="col-12 col-md-4">
                             <h2 class="m-0">{{ task.headline }}</h2>
                         </div>
-                        <div class="col-8">
+                        <div class="col-12 col-md-8">
                             <p class="m-0 mb-3 mt-2" [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>
@@ -51,7 +51,7 @@
                 </div>
                 <div class="card p-3" *ngIf="!taskCompactMode">
                     <div class="row">
-                        <div class="col-6">
+                        <div class="col-12 col-sm-6 col-lg-4">
                             <span class="due-date">{{ task.dueAt | date:'dd.MM.YYYY':'GMT+0000' }}</span>
                             <h3 class="m-0" *ngIf="task.partner">
                                 <app-linked-label [partner]="task.partner"></app-linked-label>
@@ -63,7 +63,7 @@
                                 <app-linked-label [user]="task.assignedTo"></app-linked-label>
                             </p>
                         </div>
-                        <div class="spt-border col-8">
+                        <div class="spt-border col-12 col-sm-6 col-lg-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>

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 contacts-detail">
         <div class="card-body row">
-            <div class="spt-col col-8">
+            <div class="spt-col col-12 col-sm-6 col-lg-8">
                 <h1>{{ user.firstName }} {{ user.lastName }}</h1>
                 <dl>
                     <dt>E-Mail Adresse:</dt>
                     <dd><a href="mailto:{{ user.email }}">{{ user.email }}</a></dd>
                 </dl>
             </div>
-            <div class="col-4 has-image">
+            <div class="col-12 col-sm-6 col-lg-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/app/_views/user/user-list/user-list.component.html

@@ -3,66 +3,68 @@
                 [getDataFunction]="getData"
                 [dataSource]="dataSource"
     >
-        <table mat-table [dataSource]="dataSource" matSort (matSortChange)="onSortChange($event)" class="mat-elevation-z8">
+        <div class="table-responsive">
+            <table mat-table [dataSource]="dataSource" matSort (matSortChange)="onSortChange($event)" class="mat-elevation-z8">
 
-            <ng-container matColumnDef="pos">
-                <th mat-header-cell *matHeaderCellDef>
-                    {{ 'overview.number' | translate }}
-                </th>
-                <td mat-cell
-                    *matCellDef="let element">{{ pagingComponent.getPageSize() * (pagingComponent.getPageIndex()-1) + 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">{{ pagingComponent.getPageSize() * (pagingComponent.getPageIndex()-1) + dataSource.filteredData.indexOf(element) + 1 }}
+                    </td>
+                </ng-container>
 
-            <ng-container matColumnDef="image">
-                <th mat-header-cell *matHeaderCellDef>
-                    {{ 'overview.image' | translate }}
-                </th>
-                <td mat-cell *matCellDef="let element">
-                    <img  src="{{ element.imageUrl }}" width="40"
-                         height="40"  />
-                </td>
-            </ng-container>
+                <ng-container matColumnDef="image">
+                    <th mat-header-cell *matHeaderCellDef>
+                        {{ 'overview.image' | translate }}
+                    </th>
+                    <td mat-cell *matCellDef="let element">
+                        <img  src="{{ element.imageUrl }}" width="40"
+                             height="40"  />
+                    </td>
+                </ng-container>
 
-            <ng-container matColumnDef="firstName">
-                <th mat-header-cell *matHeaderCellDef mat-sort-header>
-                    {{ 'overview.firstName' | translate }}
-                </th>
-                <td mat-cell *matCellDef="let element">
-                    <span>{{ element.firstName }}</span>
-                </td>
-            </ng-container>
+                <ng-container matColumnDef="firstName">
+                    <th mat-header-cell *matHeaderCellDef mat-sort-header>
+                        {{ 'overview.firstName' | translate }}
+                    </th>
+                    <td mat-cell *matCellDef="let element">
+                        <span>{{ element.firstName }}</span>
+                    </td>
+                </ng-container>
 
-            <ng-container matColumnDef="lastName">
-                <th mat-header-cell *matHeaderCellDef mat-sort-header>
-                    {{ 'overview.lastName' | translate }}
-                </th>
-                <td mat-cell *matCellDef="let element">
-                    <span>{{ element.lastName }}</span>
-                </td>
-            </ng-container>
+                <ng-container matColumnDef="lastName">
+                    <th mat-header-cell *matHeaderCellDef mat-sort-header>
+                        {{ 'overview.lastName' | translate }}
+                    </th>
+                    <td mat-cell *matCellDef="let element">
+                        <span>{{ element.lastName }}</span>
+                    </td>
+                </ng-container>
 
-            <ng-container matColumnDef="email">
-                <th mat-header-cell *matHeaderCellDef mat-sort-header>
-                    {{ 'overview.email' | translate }}
-                </th>
-                <td mat-cell *matCellDef="let element">
-                    <span><a href="mailto:{{ element.email }}">{{ element.email }}</a></span>
-                </td>
-            </ng-container>
+                <ng-container matColumnDef="email">
+                    <th mat-header-cell *matHeaderCellDef mat-sort-header>
+                        {{ 'overview.email' | translate }}
+                    </th>
+                    <td mat-cell *matCellDef="let element">
+                        <span><a href="mailto:{{ element.email }}">{{ element.email }}</a></span>
+                    </td>
+                </ng-container>
 
-            <ng-container matColumnDef="details">
-                <th mat-header-cell class="text-end" *matHeaderCellDef>
-                    {{ 'overview.details' | translate }}
-                </th>
-                <td mat-cell class="text-end" *matCellDef="let element">
-                        <span class="btn btn-primary spt-icon-details"
-                              data-type="user-tool" data-action="edit" (click)="navigateToUserDetails(element)"></span>
-                </td>
-            </ng-container>
+                <ng-container matColumnDef="details">
+                    <th mat-header-cell class="text-end" *matHeaderCellDef>
+                        {{ 'overview.details' | translate }}
+                    </th>
+                    <td mat-cell class="text-end" *matCellDef="let element">
+                            <span class="btn btn-primary spt-icon-details"
+                                  data-type="user-tool" data-action="edit" (click)="navigateToUserDetails(element)"></span>
+                    </td>
+                </ng-container>
 
-            <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-            <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
-        </table>
+                <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+                <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
+            </table>
+        </div>
     </app-paging>
 </div>

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

@@ -97,90 +97,6 @@ img {
   }
 }
 
-.spt-sidebar {
-  //background: #2b3a44;
-  padding: 0;
-  .card {
-    background: transparent;
-    color: #fff;
-    border-bottom: 1px solid #fff;
-    width: 100%;
-    text-decoration: none;
-    .card-body {
-      min-height: 50px;
-      text-transform: uppercase;
-      text-align: right;
-
-      h3 {
-        right: 10px;
-        bottom: 10px;
-      }
-    }
-    &.active {
-      .card-body {
-        min-height: 100px;
-        position: relative;
-        &:before {
-          content: "";
-          position: absolute;
-          left: 20px;
-          top: 50%;
-          transform: translate(0,-50%);
-          width: 65px;
-          height: 100%;
-          filter: brightness(600%);
-          border-right: 1px solid #fff;
-        }
-        &[data-cat="customer"]:before {
-          background: transparent url("/assets/images/icons/customer.svg") no-repeat left center;
-          background-size: 45px auto;
-        }
-        &[data-cat="supplier"]:before {
-          background: transparent url("/assets/images/icons/supplier.svg") no-repeat left center;
-          background-size: 45px auto;
-        }
-        &[data-cat="service"]:before {
-          background: transparent url("/assets/images/icons/service.svg") no-repeat left center;
-          background-size: 45px auto;
-        }
-        &[data-cat="product"]:before {
-          background: transparent url("/assets/images/icons/product.svg") no-repeat left center;
-          background-size: 45px auto;
-        }
-        &[data-cat="task"]:before {
-          background: transparent url("/assets/images/icons/task.svg") no-repeat left center;
-          background-size: 45px auto;
-        }
-        &[data-cat="document"]:before {
-          background: transparent url("/assets/images/icons/document.svg") no-repeat left center;
-          background-size: 45px auto;
-        }
-        &[data-cat="sale"]:before {
-          background: transparent url("/assets/images/icons/sale.svg") no-repeat left center;
-          background-size: 45px auto;
-        }
-        &[data-cat="profile"]:before {
-          background: transparent url("/assets/images/icons/profile.svg") no-repeat left center;
-          background-size: 45px auto;
-        }
-        &[data-cat="user"]:before {
-          background: transparent url("/assets/images/icons/user.svg") no-repeat left center;
-          background-size: 45px auto;
-        }
-        h3 {
-          bottom: 50%;
-          transform: translate(0,50%);
-        }
-      }
-    }
-  }
-  .nav {
-    li {
-      margin: 0 !important;
-    }
-  }
-}
-
 .icon-mini {
   height: 15px;
   display: inline;
@@ -191,6 +107,9 @@ img {
 .spt-main {
   background: #fff;
   color: rgba(33,37,41);
+  @media only screen and (max-width: 1199px) {
+    //width: calc(100% - calc(var(--bs-gutter-x) * 0.5) - calc(var(--bs-gutter-x) * 0.5));
+  }
 }
 
 .spt-container {
@@ -238,82 +157,6 @@ img {
   }
 }
 
-.posts .post,
-.tasks-box {
-  border-top: 1px solid #525f66;
-  padding-top: 3px;
-  background: #fff;
-}
-.posts .post,
-.tasks {
-  .card {
-    background: #fafafa;
-    .spt-border {
-      border-left: 1px solid #c1c1c1;
-    }
-  }
-  [data-type="user-tool"]:not(.spt-comments [data-type="user-tool"]) {
-    right: 0;
-    top: 5px;
-    bottom: auto;
-  }
-}
-
-.spt-comments-box {
-  right: 0;
-  bottom: 0;
-}
-.spt-comments {
-  margin: 5px 0 0 200px;
-}
-
-.contacts {
-  .row:not(.card .row) {
-    border-top: 1px solid #2B3A44;
-    padding-bottom: 20px;
-  }
-  .card {
-    background: #f2f2f2;
-    border-top: 2px solid #c1c1c1;
-    margin-top: 20px;
-  }
-  .spt-contact-box {
-    position: relative;
-    .badge {
-      position: absolute;
-      right: 12px;
-      bottom: 0;
-    }
-  }
-  img {
-    object-fit: cover;
-    height: 120px;
-    width: 100%;
-  }
-}
-
-.importance {
-  display: block;
-  width: 50%;
-  max-width: 800px;
-  height: 5px;
-  position: absolute;
-  right: 0;
-  top: 0px;
-
-  &[data-importance="low"] {
-    background: #77bb33;
-  }
-
-  &[data-importance="medium"] {
-    background: #ffee55;
-  }
-
-  &[data-importance="high"] {
-    background: #bb1414;
-  }
-}
-
 .toggle-component {
   .spt-container {
     background: #fafafa;
@@ -387,45 +230,15 @@ img {
   }
 }
 
-.taskCompactModeBox {
-  position: relative;
-  padding-left: 20px;
-  cursor: pointer;
-  &:before {
-    content: "";
-    position: absolute;
-    left: 0;
-    top: 3px;
-    width: 14px;
-    height: 14px;
-    border: 1px solid rgb(33, 37, 41);
-  }
-  &.taskCompactMode {
-    &:after {
-      content: "";
-      position: absolute;
-      left: 3px;
-      top: 6px;
-      width: 8px;
-      height: 8px;
-      background: rgb(33, 37, 41);
-    }
-  }
-}
-.spt-compact {
-  position: relative;
-  padding-top: 4px;
-  &:before {
-    content: "";
-    position: absolute;
-    left: 12px;
-    top: 0;
-    height: 1px;
-    width: calc(100% - 12px);
-    background: #c1c1c1;
-  }
-}
-
 .dropdown-menu {
   border-radius: 0;
 }
+
+.info-box {
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  @media only screen and (max-width: 767px) {
+    display: block;
+  }
+}

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

@@ -0,0 +1,25 @@
+.contacts {
+  .row:not(.card .row) {
+    border-top: 1px solid #2B3A44;
+    padding-bottom: 20px;
+  }
+  .card {
+    background: #f2f2f2;
+    border-top: 2px solid #c1c1c1;
+    margin-top: 20px;
+    height: calc(100% - 20px);
+  }
+  .spt-contact-box {
+    position: relative;
+    .badge {
+      position: absolute;
+      right: 0;
+      bottom: 0;
+    }
+  }
+  img {
+    object-fit: cover;
+    height: 120px;
+    width: 100%;
+  }
+}

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

@@ -0,0 +1,87 @@
+.spt-sidebar {
+  position: relative;
+  padding: 0;
+  @media only screen and (max-width: 1199px) {
+    //margin-left: calc(-100vw / 12 * 2);
+    display: none;
+  }
+  .card {
+    background: transparent;
+    color: #fff;
+    border-bottom: 1px solid #fff;
+    width: 100%;
+    text-decoration: none;
+    .card-body {
+      min-height: 50px;
+      text-transform: uppercase;
+      text-align: right;
+
+      h3 {
+        right: 10px;
+        bottom: 10px;
+      }
+    }
+    &.active {
+      .card-body {
+        min-height: 100px;
+        position: relative;
+        &:before {
+          content: "";
+          position: absolute;
+          left: 20px;
+          top: 50%;
+          transform: translate(0,-50%);
+          width: 65px;
+          height: 100%;
+          filter: brightness(600%);
+          border-right: 1px solid #fff;
+        }
+        &[data-cat="customer"]:before {
+          background: transparent url("/assets/images/icons/customer.svg") no-repeat left center;
+          background-size: 45px auto;
+        }
+        &[data-cat="supplier"]:before {
+          background: transparent url("/assets/images/icons/supplier.svg") no-repeat left center;
+          background-size: 45px auto;
+        }
+        &[data-cat="service"]:before {
+          background: transparent url("/assets/images/icons/service.svg") no-repeat left center;
+          background-size: 45px auto;
+        }
+        &[data-cat="product"]:before {
+          background: transparent url("/assets/images/icons/product.svg") no-repeat left center;
+          background-size: 45px auto;
+        }
+        &[data-cat="task"]:before {
+          background: transparent url("/assets/images/icons/task.svg") no-repeat left center;
+          background-size: 45px auto;
+        }
+        &[data-cat="document"]:before {
+          background: transparent url("/assets/images/icons/document.svg") no-repeat left center;
+          background-size: 45px auto;
+        }
+        &[data-cat="sale"]:before {
+          background: transparent url("/assets/images/icons/sale.svg") no-repeat left center;
+          background-size: 45px auto;
+        }
+        &[data-cat="profile"]:before {
+          background: transparent url("/assets/images/icons/profile.svg") no-repeat left center;
+          background-size: 45px auto;
+        }
+        &[data-cat="user"]:before {
+          background: transparent url("/assets/images/icons/user.svg") no-repeat left center;
+          background-size: 45px auto;
+        }
+        h3 {
+          bottom: 50%;
+          transform: translate(0,50%);
+        }
+      }
+    }
+  }
+  .nav {
+    li {
+      margin: 0 !important;
+    }
+  }
+}

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

@@ -1,3 +1,9 @@
+.table-responsive {
+  display: block;
+  width: 100%;
+  overflow-x: auto;
+}
+
 table {
   width: 100%;
   img {

matsen-tool/src/assets/scss/_tasks-posts.scss

@@ -0,0 +1,98 @@
+.posts .post,
+.tasks-box {
+  border-top: 1px solid #525f66;
+  padding-top: 3px;
+  background: #fff;
+}
+.posts .post,
+.tasks {
+  .card {
+    background: #fafafa;
+    .spt-border {
+      border-left: 1px solid #c1c1c1;
+    }
+  }
+  [data-type="user-tool"]:not(.spt-comments [data-type="user-tool"]) {
+    right: 0;
+    top: 5px;
+    bottom: auto;
+  }
+}
+
+.spt-comments-box {
+  right: 0;
+  bottom: 0;
+}
+.spt-comments {
+  margin: 5px 0 0 200px;
+}
+
+.importance {
+  display: block;
+  width: 50%;
+  max-width: 800px;
+  height: 5px;
+  position: absolute;
+  right: 0;
+  top: 0px;
+
+  &[data-importance="low"] {
+    background: #77bb33;
+  }
+
+  &[data-importance="medium"] {
+    background: #ffee55;
+  }
+
+  &[data-importance="high"] {
+    background: #bb1414;
+  }
+}
+
+.taskCompactModeBox {
+  position: relative;
+  padding-left: 20px;
+  cursor: pointer;
+  &:before {
+    content: "";
+    position: absolute;
+    left: 0;
+    top: 3px;
+    width: 14px;
+    height: 14px;
+    border: 1px solid rgb(33, 37, 41);
+  }
+  &.taskCompactMode {
+    &:after {
+      content: "";
+      position: absolute;
+      left: 3px;
+      top: 6px;
+      width: 8px;
+      height: 8px;
+      background: rgb(33, 37, 41);
+    }
+  }
+}
+.spt-compact {
+  position: relative;
+  padding-top: 4px;
+  &:before {
+    content: "";
+    position: absolute;
+    left: 12px;
+    top: 0;
+    height: 1px;
+    width: calc(100% - 12px);
+    background: #c1c1c1;
+  }
+  //&:after {
+  //  content: "";
+  //  position: absolute;
+  //  left: 0;
+  //  top: 11px;
+  //  bottom: 19px;
+  //  width: 1px;
+  //  background: #c1c1c1;
+  //}
+}

matsen-tool/src/styles.scss

@@ -4,9 +4,12 @@
 @import "assets/scss/mixins";
 @import "assets/scss/basics";
 @import "assets/scss/modal";
+@import "assets/scss/sidebar";
 @import "assets/scss/form";
 @import "assets/scss/table";
 @import "assets/scss/text";
+@import "assets/scss/contacts";
+@import "assets/scss/tasks-posts";
 @import "assets/scss/sales";
 @import "assets/scss/button";
 @import "assets/scss/accordion";