added results drawer to map in desktop mode

kolzchut · Jan 12, 2025 · 759d4b2 · 759d4b2
1 parent 9135551
commit 759d4b2
Show file tree

Hide file tree

Showing 4 changed files with 102 additions and 30 deletions.
diff --git a/projects/srm/src/app/search-results-page/search-results-page.component.html b/projects/srm/src/app/search-results-page/search-results-page.component.html
@@ -15,7 +15,14 @@
             [filtersState]='filtersState'
         />
     </div>
-    <div class='search-results'>
+    <button 
+        [ngClass]="{ 'drawer-controller':true,'open-drawer':isDrawerOpen }"
+        (click)='toggleDrawer()'
+        aria-label="הצג/הסתר מגירת תוצאות"
+    >
+        <img src='../../assets/img/chevron-left-blue-1.svg' [ngClass]="{ 'flip':isDrawerOpen }"/>
+    </button>
+    <div class='search-results' [ngClass]="{ 'open':isDrawerOpen }">
         <app-search-results
             class='full'
             [searchParams]='searchParams'
@@ -28,29 +35,24 @@
             (hoverCard)='hoverCard.emit($event)'
             [areaSearchState]='areaSearchState'
         ></app-search-results>
+
     </div>
     <div class='extra'>
     </div>
-    @if (filtersState.active || areaSearchState.searching_) {
-        <div class='overlay'>
-            @if (filtersState.active) {
-                <div class='modal'>
-                    <app-search-filters 
-                        [searchParams]='searchParams'
-                        [areaSearchState]='areaSearchState'
-                        [filtersState]='filtersState'
-                        [searchState]='searchState'
-                    ></app-search-filters>
-                </div>
-            }
-            @if (areaSearchState.searching_) {
-                <div class='modal' appArrowToTab>
-                    <div class='selection-widget' appArrowToTab>
-                        <app-area-search-selector [state]='areaSearchState'></app-area-search-selector>
-                        <app-area-search-selector-results [state]='areaSearchState'></app-area-search-selector-results>
-                    </div>
-                </div>
-            }
+    <div class='overlay' *ngIf='filtersState.active || areaSearchState.searching_'>
+        <div class='modal' *ngIf='filtersState.active'>
+            <app-search-filters 
+                [searchParams]='searchParams'
+                [areaSearchState]='areaSearchState'
+                [filtersState]='filtersState'
+                [searchState]='searchState'
+            ></app-search-filters>
         </div>
-    }
+        <div class='modal' appArrowToTab *ngIf='areaSearchState.searching_'>
+            <div class='selection-widget' appArrowToTab>
+                <app-area-search-selector [state]='areaSearchState'></app-area-search-selector>
+                <app-area-search-selector-results [state]='areaSearchState'></app-area-search-selector-results>
+            </div>
+        </div>
+    </div>
 </div>
diff --git a/projects/srm/src/app/search-results-page/search-results-page.component.less b/projects/srm/src/app/search-results-page/search-results-page.component.less
@@ -33,6 +33,9 @@
 
         &.map {
             width: fit-content;
+            width: 320px;
+            padding-top: 0;
+            padding-bottom: 0;
         }
 
         .sidebar {
@@ -43,14 +46,30 @@
             justify-content: flex-start;
             align-items: stretch;
             gap: 8px;
+            background-color: @color-blue-8;
+            z-index: 15;
         }
-
+        
         .search-results {
             flex: 1 1 100%;
             overflow: scroll;
             .no-scrollbars;
         }
 
+        .drawer-controller {
+            position: absolute;
+            display: none;
+            width: 24px;
+            height: 40px;
+            background-color: @color-blue-8;
+            box-shadow: -5px 2px 8px 0px #0012F01F;
+            clip-path: inset(-10px 0px -10px -10px);
+            z-index: 20;
+            border-radius: 4px 0px 0px 4px;
+            border: 1px solid @color-blue-8;
+            cursor: pointer;
+        }
+
         .extra {
             flex: 0 0 auto;
             width: 364px;
@@ -59,8 +78,55 @@
             }        
         }
 
+        .open-drawer {
+            right: 624px !important;
+        }
+
+        .flip{
+            transform: scaleX(-1);
+        }
+
         &.map {
-            .search-results, .extra {
+            .sidebar {
+                position: relative;
+                height: 100%;
+                padding-left: 16px; 
+                border-left: 1px solid @color-blue-6;
+            }
+
+            .drawer-controller {
+                display: flex;
+                justify-content: center;
+                align-items: center;
+                right: 338px;
+                top: calc(50vh - 40px);
+                transform: translate(-50% ,-50%);
+                transition: right 0.3s ease-in-out;
+
+                & > img{
+                    transition: transform 0.3s ease-in-out;
+                }
+            }
+
+            .search-results{
+                position: absolute;
+                height: 100%;
+                width: 300px;
+                right: 50px;
+                padding: 0 16px; 
+                background-color: @color-blue-8;
+                box-shadow: -4px 2px 8px 0px #0012F01F;
+                min-height: 100%;
+                z-index: 11;
+                transition: right 0.3s ease-in-out;
+            }
+
+            .open {
+                right: 336px;
+            }
+
+
+            .extra {
                 display: none;
             }
         }
@@ -78,7 +144,7 @@
             width: 100%;
             height: 100%;
             pointer-events: all;
-            z-index: 10;
+            z-index: 20;
 
             .modal {
                 min-width: 400px;

diff --git a/projects/srm/src/app/search-results-page/search-results-page.component.ts b/projects/srm/src/app/search-results-page/search-results-page.component.ts
@@ -10,13 +10,12 @@ import { LayoutService } from '../layout.service';
 @Component({
   selector: 'app-search-results-page',
   templateUrl: './search-results-page.component.html',
-  styleUrl: './search-results-page.component.less'
+  styleUrl: './search-results-page.component.less',
 })
 export class SearchResultsPageComponent {
-
   @Input() searchParams: SearchParams;
   @Input() serachResultsActive = false;
-  @Input() didYouMean: {display: string, link: string} | null = null;
+  @Input() didYouMean: { display: string; link: string } | null = null;
   @Input() searchState: SearchState;
   @Input() filtersState: FiltersState;
   @Input() areaSearchState: AreaSearchState;
@@ -27,6 +26,11 @@ export class SearchResultsPageComponent {
 
   state = new SearchResultsPageState();
 
-  constructor(public layout: LayoutService) { }
+  constructor(public layout: LayoutService) {}
+
+  isDrawerOpen = false;
 
+  toggleDrawer() {
+    this.isDrawerOpen = !this.isDrawerOpen;
+  }
 }
diff --git a/projects/srm/src/app/search-results/search-results.component.html b/projects/srm/src/app/search-results/search-results.component.html
@@ -22,7 +22,7 @@
         <div class='placeholder loading'></div>
     </ng-container>
 </ng-container>
-<div class='more-results' *ngIf='hasMore'>
+<div class='more-results' *ngIf='hasMore && !loading'>
     <a (activated)='fetch()' clickOnReturn>עוד תוצאות...</a>
 </div>
 <div class='trigger' #trigger role="presentation"></div>