Styling

matsen-tool/src/app/_views/account/login.component.html

@@ -1,5 +1,5 @@
-<div class="card">
-    <h4 class="card-header">Login</h4>
+<div class="card login-form">
+    <h1 class="card-header">Login</h1>
     <div class="card-body">
         <form [formGroup]="form" (ngSubmit)="onSubmit()">
             <div class="mb-3">

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

@@ -19,7 +19,7 @@
                     <div class="col-6">
                         <ul *ngFor="let contactPartnerProduct of contactPartnerProducts">
 <!--                            TODO: contactPartnerProduct.productName ist falsch, hier muss die ID rein -->
-                            <li><a href="/products/{{this.appHelperService.extractId(contactPartnerProduct.productName)}}">{{contactPartnerProduct.productName}}</a></li>
+                            <li><a href="/product/{{this.appHelperService.extractId(contactPartnerProduct.productName)}}">{{contactPartnerProduct.productName}}</a></li>
                         </ul>
                     </div>
                 </div>

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

@@ -33,7 +33,7 @@
             </div>
         </div>
 
-        <div class="container mb-5">
+        <div class="container">
             <div class="row pt-4 pb-4 d-flex">
                 <div class="col d-flex">
                     <a class="card" routerLink="/product" routerLinkActive="active">
@@ -58,5 +58,31 @@
                 </div>
             </div>
         </div>
+
+        <div class="container">
+            <div class="row pt-4 pb-4 d-flex">
+                <div class="col 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">
+                    <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">
+                    <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>
+                        </div>
+                    </a>
+                </div>
+            </div>
+        </div>
     </div>
 </div>

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

@@ -7,8 +7,6 @@
   .card {
     width: 100%;
     text-decoration: none;
-    border-radius: 0;
-    border: none;
     border-top: 3px solid #c1c1c1;
   }
   .card-body {

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

@@ -22,7 +22,7 @@
                     {{ 'overview.logo' | translate }}
                 </th>
                 <td mat-cell *matCellDef="let element">
-                    <img role="button"  src="{{ element.logoUrl }}" (click)="navigateToPartnerDetails(element)" width="40"
+                    <img src="{{ element.logoUrl }}" width="40"
                          height="40"  />
                 </td>
             </ng-container>
@@ -33,7 +33,7 @@
                     {{ partnerColumnHeadline }}
                 </th>
                 <td mat-cell *matCellDef="let element">
-                    <span role="button" (click)="navigateToPartnerDetails(element)">{{ element.name }}</span>
+                    {{ element.name }}
                 </td>
             </ng-container>
 
@@ -58,6 +58,16 @@
                 </td>
             </ng-container>
 
+            <ng-container matColumnDef="details">
+                <th mat-header-cell *matHeaderCellDef>
+                    {{ 'overview.details' | translate }}
+                </th>
+                <td mat-cell *matCellDef="let element">
+                        <span class="btn btn-primary bi bi-zoom-in p-2-4"
+                              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>

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

@@ -52,7 +52,7 @@ export class PartnerListComponent implements OnInit, AfterViewInit {
         private translateService: TranslateService,
         protected appHelperService: AppHelperService,
     ) {
-        this.displayedColumns = ['pos', 'image', 'name', 'address', 'website'];
+        this.displayedColumns = ['pos', 'image', 'name', 'address', 'website', 'details'];
         this.sort = new MatSort();
         this.partnersSub = new Subscription();
         this.partners = [];

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

@@ -24,7 +24,7 @@
                     {{ 'overview.image' | translate }}
                 </th>
                 <td mat-cell *matCellDef="let element">
-                    <img role="button" src="{{element.imageUrl}}" (click)="navigateToProductDetails(element)" width="40" height="40"/>
+                    <img src="{{element.imageUrl}}" width="40" height="40"/>
                 </td>
             </ng-container>
 
@@ -34,7 +34,7 @@
                     {{ 'overview.productname' | translate }}
                 </th>
                 <td mat-cell *matCellDef="let element">
-                    <span role="button" (click)="navigateToProductDetails(element)">{{ element.name }}</span>
+                    {{ element.name }}
                 </td>
             </ng-container>
 
@@ -56,6 +56,16 @@
                 </td>
             </ng-container>
 
+            <ng-container matColumnDef="details">
+                <th mat-header-cell *matHeaderCellDef>
+                    {{ 'overview.details' | translate }}
+                </th>
+                <td mat-cell *matCellDef="let element">
+                        <span class="btn btn-primary bi bi-zoom-in p-2-4"
+                              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>

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

@@ -47,7 +47,7 @@ export class ProductListComponent implements OnInit, AfterViewInit {
         protected appHelperService: AppHelperService,
     ) {
         this.sort = new MatSort();
-        this.displayedColumns = ['pos', 'image', 'name', 'storage', 'number'];
+        this.displayedColumns = ['pos', 'image', 'name', 'storage', 'number', 'details'];
 
         this.productsSub = new Subscription();
         this.products = [];

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

@@ -44,7 +44,7 @@
                     {{ 'overview.productname' | translate }}
                 </th>
                 <td mat-cell *matCellDef="let element">
-                    <a [routerLink]="['/products', appHelperService.extractId(element.product)]">{{ element.productName }}</a>
+                    <a [routerLink]="['/product', appHelperService.extractId(element.product)]">{{ element.productName }}</a>
                 </td>
             </ng-container>
 

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

@@ -32,14 +32,14 @@
     </app-toggle>
 
     <app-toggle #toggleSales [headline]="(isCurrentUser ? (('user.my' | translate) + ' ') : '') + ('basic.sales' | translate)">
-        <app-sale-summary *ngIf="toggleSales.isOpened" #saleSummaryComponent
-            [user]="user"
-        >
-        </app-sale-summary>
         <app-sale-list *ngIf="toggleSales.isOpened" #saleListComponent
             [user]="user"
         >
         </app-sale-list>
+        <app-sale-summary *ngIf="toggleSales.isOpened" #saleSummaryComponent
+                          [user]="user"
+        >
+        </app-sale-summary>
     </app-toggle>
 
     <app-toggle #toggleProducts [headline]="(isCurrentUser ? (('user.my' | translate) + ' ') : '') + ('basic.products' | translate)">

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

@@ -89,15 +89,21 @@ img {
   background: #f6f6f6;
 }
 
+.card {
+  border-radius: 0;
+  border: none;
+  .card-header:first-child {
+    border-radius: 0;
+  }
+}
+
 .spt-sidebar {
   //background: #2b3a44;
   padding: 0;
   .card {
     background: transparent;
     color: #fff;
-    border: none;
     border-bottom: 1px solid #fff;
-    border-radius: 0;
     width: 100%;
     text-decoration: none;
     .card-body {
@@ -241,8 +247,6 @@ img {
 .posts .post,
 .tasks {
   .card {
-    border: none;
-    border-radius: 0;
     background: #fafafa;
     .spt-border {
       border-left: 1px solid #c1c1c1;
@@ -269,8 +273,6 @@ img {
     padding-bottom: 20px;
   }
   .card {
-    border: none;
-    border-radius: 0;
     background: #f2f2f2;
     border-top: 2px solid #c1c1c1;
     margin-top: 20px;

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

@@ -7,9 +7,11 @@
 .btn-primary {
   background-color: $color-matsen;
   border-color: $color-matsen;
-  &:hover {
-    background-color: #b71e18;
-    border-color: #b71e18;
+  &:hover,
+  &:focus,
+  &:active {
+    background-color: $color-matsen-dark !important;
+    border-color: $color-matsen-dark !important;
   }
 }
 

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

@@ -1,3 +1,7 @@
+.form-control {
+  border-radius: 0;
+}
+
 .spt-form {
   .delete-image {
     display: flex;

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

@@ -45,6 +45,7 @@ strong {
   font-family: "Montserrat", "Helvetica Neue", sans-serif !important;
 }
 
+.login-form h1,
 .home-container .mat-h1,
 .home-container .mat-headline-5,
 .home-container .mat-typography .mat-h1,
@@ -88,7 +89,14 @@ dl,
     color: $color-matsen;
     @include transition();
     &:hover {
-      color: #b71e18;
+      color: $color-matsen-dark;
     }
   }
+}
+.btn-link {
+  color: $color-matsen;
+  @include transition();
+  &:hover {
+    color: $color-matsen-dark;
+  }
 }

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

@@ -1 +1,2 @@
-$color-matsen: rgba(229,38,30,1);
+$color-matsen: rgba(229,38,30,1);
+$color-matsen-dark: rgba(160,27,21,1);