From 60a53c2e1ac7654d18d655718cc436be618bd461 Mon Sep 17 00:00:00 2001
From: Max <133934232+Kleostro@users.noreply.github.com>
Date: Thu, 29 Aug 2024 14:18:40 +0300
Subject: [PATCH] fix: adaptive on the search page

---
 .../routes-list/routes-list.component.scss    |  1 +
 .../components/filter/filter.component.scss   |  2 --
 .../result-item/result-item.component.scss    | 19 +++++++++++++++++--
 .../trip-timeline.component.html              |  2 +-
 .../trip-timeline.component.scss              | 16 +++++++++++++++-
 .../trip-timeline/trip-timeline.component.ts  | 10 +++++++++-
 6 files changed, 43 insertions(+), 7 deletions(-)

diff --git a/src/app/admin/components/routes-list/routes-list.component.scss b/src/app/admin/components/routes-list/routes-list.component.scss
index a010972..dd98b41 100644
--- a/src/app/admin/components/routes-list/routes-list.component.scss
+++ b/src/app/admin/components/routes-list/routes-list.component.scss
@@ -5,6 +5,7 @@
   display: flex;
   flex-direction: column;
   gap: 1rem;
+  width: 100%;
 }
 
 .deleteRouteWrapper {
diff --git a/src/app/home/components/filter/filter.component.scss b/src/app/home/components/filter/filter.component.scss
index c1444ea..3da119b 100644
--- a/src/app/home/components/filter/filter.component.scss
+++ b/src/app/home/components/filter/filter.component.scss
@@ -2,8 +2,6 @@
 
 .filter-container {
   width: 100%;
-  max-width: 90%;
-  margin: $offset-xs auto 0 auto;
 }
 
 .from-to-title {
diff --git a/src/app/home/components/result-list/components/result-item/result-item.component.scss b/src/app/home/components/result-list/components/result-item/result-item.component.scss
index 1f415ab..f9258b1 100644
--- a/src/app/home/components/result-list/components/result-item/result-item.component.scss
+++ b/src/app/home/components/result-list/components/result-item/result-item.component.scss
@@ -13,10 +13,18 @@
   background: $gray-100;
   border: $three solid $gray-400;
   border-radius: $border-radius-s;
+
+  @media (width <=1024px) {
+    flex-direction: column;
+  }
 }
 
 .item {
   width: 50%;
+
+  @media (width <=1024px) {
+    width: 100%;
+  }
 }
 
 .carriages-info {
@@ -26,6 +34,13 @@
   justify-content: flex-end;
 
   padding: $offset-xxs;
+
+  @media (width <=1024px) {
+    overflow-x: scroll;
+    flex-flow: unset;
+    justify-content: start;
+    width: 100%;
+  }
 }
 
 .carriage-info {
@@ -61,13 +76,13 @@
 }
 
 .carriage-free-seats {
-  font-size: $font-size-s;
+  font-size: 1rem;
   font-style: italic;
   color: $gray-700;
 }
 
 .carriage-price {
-  font-size: $font-size-m;
+  font-size: 1.2rem;
   font-weight: bold;
   color: $main-color;
 }
diff --git a/src/app/home/components/trip-timeline/trip-timeline.component.html b/src/app/home/components/trip-timeline/trip-timeline.component.html
index 294ed4c..cfc50eb 100644
--- a/src/app/home/components/trip-timeline/trip-timeline.component.html
+++ b/src/app/home/components/trip-timeline/trip-timeline.component.html
@@ -1,4 +1,4 @@
-<p-timeline [value]="events" layout="horizontal" align="top" class="timeline">
+<p-timeline [value]="events" [layout]="windowWidth <= 768 ? 'vertical' : 'horizontal'" align="top" class="timeline">
   <ng-template pTemplate="marker" let-event>
     <span class="marker" [class]="event.duration ? 'custom-marker' : 'time-marker'">{{
       event.duration ? event.duration : (event.date | date: 'HH:mm')
diff --git a/src/app/home/components/trip-timeline/trip-timeline.component.scss b/src/app/home/components/trip-timeline/trip-timeline.component.scss
index cb7ffc8..1122f27 100644
--- a/src/app/home/components/trip-timeline/trip-timeline.component.scss
+++ b/src/app/home/components/trip-timeline/trip-timeline.component.scss
@@ -1,7 +1,21 @@
 @import 'variables';
 
 ::ng-deep .p-timeline {
-  align-items: flex-start;
+  @media (width <=768px) {
+    align-items: flex-start;
+    align-self: center;
+
+    width: max-content;
+    margin-right: auto;
+    margin-bottom: 1rem;
+  }
+}
+
+::ng-deep .p-timeline-event-opposite,
+.p-timeline-event-content {
+  @media (width <=768px) {
+    display: none;
+  }
 }
 
 .marker {
diff --git a/src/app/home/components/trip-timeline/trip-timeline.component.ts b/src/app/home/components/trip-timeline/trip-timeline.component.ts
index 374f94d..f0de350 100644
--- a/src/app/home/components/trip-timeline/trip-timeline.component.ts
+++ b/src/app/home/components/trip-timeline/trip-timeline.component.ts
@@ -1,5 +1,5 @@
 import { DatePipe } from '@angular/common';
-import { ChangeDetectionStrategy, Component, Input, OnInit } from '@angular/core';
+import { ChangeDetectionStrategy, Component, HostListener, Input, OnInit } from '@angular/core';
 
 import { TimelineModule } from 'primeng/timeline';
 
@@ -21,6 +21,14 @@ export class TripTimelineComponent implements OnInit {
   @Input() public startStation = '';
   @Input() public endStation = '';
   @Input() public dateFormat = 'dd-MMM-yyyy';
+  public windowWidth = window.innerWidth;
+
+  @HostListener('window:resize', ['$event'])
+  public onResize(event: Event): void {
+    if (event.target instanceof Window) {
+      this.windowWidth = event.target.innerWidth;
+    }
+  }
 
   public events: TimelineEvent[] = [];