[Result Page - Map View] Fix position Workshops cards #687 (#693)

ita-social-projects · Nov 30, 2021 · 4416bf3 · 4416bf3
1 parent 84b7a5f
commit 4416bf3
Show file tree

Hide file tree

Showing 4 changed files with 40 additions and 14 deletions.
diff --git a/src/app/shell/result/result.component.html b/src/app/shell/result/result.component.html
@@ -1,6 +1,6 @@
-<div class="view-control-panel">
+<div class="view-control-panel" [class.mobile-map-view]="currentView === viewType.map">
   <div class="workshops-count" fxFlex="1 1" fxLayout="row" fxLayoutAlign="space-between center">
-    <h3>Знайдено {{(filteredWorkshops$ | async)?.totalAmount || 0}} гуртків</h3>
+    <h3 [class.mobile-map-view]="currentView === viewType.map">Знайдено {{(filteredWorkshops$ | async)?.totalAmount || 0}} гуртків</h3>
     <ng-template [ngTemplateOutlet]="filterButton"></ng-template>
   </div>
   <div class="workshops-search" fxFlex fxLayout.lt-lg="row wrap" fxLayout="row" fxLayoutAlign.lt-lg="center center"
@@ -14,7 +14,7 @@ <h3>Знайдено {{(filteredWorkshops$ | async)?.totalAmount || 0}} гурт
   <mat-drawer mode="side" [(opened)]="isFiltersVisible">
     <app-filters-list [filtersList]="filtersList"></app-filters-list>
   </mat-drawer>
-  <mat-drawer-content [style.marginLeft]="isFiltersVisible ? '326px' : '0'">
+  <mat-drawer-content [style.marginLeft]="isFiltersVisible ? '326px' : '0'" [style.marginTop]="currentView === viewType.map ? '0' : '2rem'">
     <div *ngIf="currentView === viewType.map; else ShowData;" fxLayout='row wrap' fxLayoutAlign='start'>
       <app-workshop-map-view-list [role]="role$ | async" [filteredWorkshops$]="filteredWorkshops$"
         [currentPage]="currentPage"></app-workshop-map-view-list>

diff --git a/src/app/shell/result/result.component.scss b/src/app/shell/result/result.component.scss
@@ -154,15 +154,26 @@
 }
 
 @media(max-width: 750px) {
+
   .view-control-panel {
     position: relative;
     z-index: 2;
     width: 90vw;
     margin-left: 5vw;
 
+    &.mobile-map-view {
+      position: absolute;
+    }
+
     .search-block-wrapper {
       display: none;
+    }
+  }
+
 
+  .workshops-count {
+    .mobile-map-view {
+      display: none;
     }
   }
 

diff --git a/src/app/shell/result/workshop-map-view-list/workshop-map-view-list.component.html b/src/app/shell/result/workshop-map-view-list/workshop-map-view-list.component.html
@@ -1,6 +1,6 @@
 <div class="wrapper" fxLayout="row" fxLayoutAlign="space-evenly">
-  <div fxLayout="column" fxLayoutAlign="space-evenly">
-    <div fxLayout="row" fxLayoutAlign="start center" class="workshop-list card-wrapper">
+  <div fxLayout="column" fxLayoutAlign="space-evenly" class="wrapper-workshop-list">
+    <div class="workshop-list card-wrapper">
       <app-workshop-card class="card" [userRoleView]="Role.unauthorized" *ngFor="let workshop of selectedWorkshops"
         [workshop]="workshop" [isMainPage]="true" #WorkshopsWrap>
       </app-workshop-card>
@@ -44,4 +44,4 @@
       <div class="mock"></div>
     </div>
   </ng-template>
-</div>
+</div>
diff --git a/src/app/shell/result/workshop-map-view-list/workshop-map-view-list.component.scss b/src/app/shell/result/workshop-map-view-list/workshop-map-view-list.component.scss
@@ -28,12 +28,29 @@ $links-color: #3849F9;
   display: none;
 }
 
+@media (max-width: 1070px) {
+  .card-wrapper > .card {
+    margin: 0 2rem 2rem 0;
+  }
+}
+
 @media (max-width: 750px) {
+  .card-wrapper {
+    padding: 0;
+    .card {
+      margin: 0;
+    }
+  }
+
+  .wrapper-workshop-list {
+     display: none !important;
+  }
+
   .workshop-counter-wrapper {
     position: absolute;
     left: 0;
     right: 0;
-    bottom: 60px;
+    bottom: 16px;
     display: flex;
     justify-content: center;
     align-items: center;
@@ -54,29 +71,29 @@ $links-color: #3849F9;
   }
   .wrapper{
     max-height: none !important;
-    height: 100vh;
     width: 100vw;
     position: relative;
   }
 
   app-map {
-    height: calc(100vh - 62px) !important;
-    margin-top: 30px;
+    height: calc(100vh - 81px) !important;
     position: relative;
 
     ::ng-deep {
       #map {
         position: absolute;
         height: 100% !important;
       }
+      .leaflet-control-zoom.leaflet-bar.leaflet-control {
+        top: 120px !important;
+      }
     }
   }
 
   .workshop-details-cards {
-
     position: absolute;
     left: 0;
-    bottom: 100px;
+    bottom: 60px;
     z-index: 400;
     overflow: scroll;
     // padding: 15px 10px;
@@ -100,6 +117,4 @@ $links-color: #3849F9;
       display: inline-block;
     }
   }
-
-
 }