Merge pull request #170 from Kleostro/fix/tu-02-50/adaptive

fix(tu-02-50): adaptive on the search page

src/app/admin/components/routes-list/routes-list.component.scss

@@ -5,6 +5,7 @@
   display: flex;
   flex-direction: column;
   gap: 1rem;
+  width: 100%;
 }
 
 .deleteRouteWrapper {

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 {

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;
 }

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')

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 {

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[] = [];