Fix cover size (#1001)

* cover image style fix

* fix

* Update workshop-card.component.html

* Update child-card.component.scss

Co-authored-by: Dmytro Minochkin <dmytro.minochkin@gmail.com>

src/app/shared/components/category-card/category-card.component.scss

@@ -11,8 +11,7 @@
     cursor: pointer;
   }
   .icon {
-    height: 68px;
-    width: 68px;
+    height: 100px;
   }
   .title {
     text-align: center;

src/app/shared/components/child-card/child-card.component.scss

@@ -1,5 +1,7 @@
 @import "src/app/shared/styles/cards.scss";
-
+.card {
+  height: 410px;
+}
 .mat-icon {
   color: #fff;
 }

src/app/shared/components/workshop-card/workshop-card.component.html

@@ -6,14 +6,15 @@
     <div [ngClass]="isHorizontalView ? 'horizontal-card': 'card'">
       <div [ngClass]="isCreateApplicationView ? 'card-img card-img-full card-img-mobile': 'card-img card-img-full'"
         fxLayout="row" fxLayoutAlign="center">
-        <img mat-card-image [src]="coverImageUrl" alt="{{workshop?.title}}">
+        <img mat-card-image [src]="coverImageUrl" alt="{{workshop?.title}}"
+          [ngClass]="{'card-img-mobile': workshop.coverImageId}">
       </div>
       <div [ngClass]="isMainPage && isHorizontalView ? 'wrap-for-details wrap-for-details-map': 'wrap-for-details'">
         <mat-card-header>
           <mat-card-title [matTooltip]="workshop?.title" showTooltipIfTruncated matTooltipClass="tooltip"
             [matTooltipPosition]="below" class="card-title">{{workshop?.title}}</mat-card-title>
-            <img mat-card-image [src]="categoryIcons[workshop?.directionId]"
-            [ngClass]="isCreateApplicationView ? 'card-img-mobile': ''" >
+          <img mat-card-image [src]="categoryIcons[workshop?.directionId]"
+            [ngClass]="{'card-img-mobile':isCreateApplicationView}">
         </mat-card-header>
 
         <mat-card-content fxLayout="column" fxLayoutAlign="space-between">

src/app/shared/components/workshop-card/workshop-card.component.scss

@@ -1,6 +1,7 @@
 @import "src/app/shared/styles/cards.scss";
 .card-img-full{
   width: 100%;
+  max-height: 185px;
 }
 .card-img-mobile{
   width: 100%;

src/app/shared/components/workshop-card/workshop-card.component.ts

@@ -60,14 +60,13 @@ export class WorkshopCardComponent implements OnInit, OnDestroy {
   favoriteWorkshops$: Observable<Favorite[]>;
   @Select(RegistrationState.role)
   role$: Observable<string>;
-  @Select(UserState.selectedWorkshop) 
+  @Select(UserState.selectedWorkshop)
   workshop$: Observable<WorkshopCard>;
   role: string;
   destroy$: Subject<boolean> = new Subject<boolean>();
 
   authServer: string = environment.serverUrl;
   imgUrl = `/api/v1/PublicImage/`;
-  coverImageId: string = '';
   coverImageUrl: string = '';
 
   constructor(

src/app/shared/styles/cards.scss

@@ -1,6 +1,6 @@
 .card {
   width: 300px;
-  height: 410px;
+  min-height: 410px;
   display: flex;
   justify-content: flex-start;
   flex-direction: column;
@@ -15,10 +15,6 @@
     line-height: 20px;
   }
 
-  &-image {
-    max-width: 50%;
-  }
-
   &_category {
     width: 30px;
     height: 30px;
@@ -197,9 +193,12 @@
   margin: 0!important;
 }
 .mat-card-image {
-  width: 100%;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  width: 60%;
   margin: 0;
-  height: 187px;
   object-fit: cover;
   object-position: top;
 }