Merge branch 'master' of https://gitlab.techware.co.in/tobin/dcarfixers_angular into jensa

angular.json

@@ -29,6 +29,7 @@
                         "styles": [
                             "src/styles.scss",
                             "node_modules/bootstrap/dist/css/bootstrap.min.css",
+                            "node_modules/font-awesome/css/font-awesome.css",
                             "src/assets/css/responsive.scss",
                             "node_modules/malihu-custom-scrollbar-plugin/jquery.mCustomScrollbar.css",
                             "node_modules/ngx-bootstrap/datepicker/bs-datepicker.css"

package.json

@@ -28,14 +28,17 @@
     "angular-wizard-form": "^0.4.1",
     "bootstrap": "^4.1.3",
     "core-js": "^2.5.4",
+    "font-awesome": "^4.7.0",
     "hammerjs": "^2.0.8",
-    "jquery": "^3.3.1",
+    "jquery": "^3.4.0",
     "malihu-custom-scrollbar-plugin": "^3.1.5",
     "mt-latlon": "^0.1.1",
     "ng2-archwizard": "^2.1.0",
     "ng2-file-upload": "^1.3.0",
+    "ng5-slider": "^1.1.14",
     "ngx-bootstrap": "^3.2.0",
     "ngx-carousel": "^1.3.5",
+    "ngx-gallery": "^5.9.1",
     "ngx-google-places-autocomplete": "^2.0.3",
     "ngx-malihu-scrollbar": "^7.0.0",
     "ngx-slick": "^0.2.1",
@@ -47,8 +50,8 @@
     "zone.js": "~0.8.26"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^0.13.6",
-    "@angular/cli": "~7.1.2",
+    "@angular-devkit/build-angular": "^0.13.8",
+    "@angular/cli": "^7.3.8",
     "@angular/compiler-cli": "^7.2.10",
     "@angular/language-service": "~7.1.0",
     "@types/googlemaps": "^3.30.16",

src/app/app.module.ts

@@ -3,7 +3,8 @@ import { NgModule } from '@angular/core';
 import { AppRoutingModule } from './app-routing.module';
 import { HttpClientModule } from '@angular/common/http';
 import { AppComponent } from './app.component';
-import { HomeModule} from './home/home.module';
+import { HomeModule } from './home/home.module';
+import { PurchaseModule } from './purchase/purchase.module';
 import { NavbarComponent } from './navbar/navbar.component';
 import { FooterComponent } from './footer/footer.component';
 import { ReactiveFormsModule } from '@angular/forms';
@@ -22,6 +23,7 @@ import { ForgotComponent } from './forgot/forgot.component';
     BrowserModule,
     AppRoutingModule,
     HomeModule,
+    PurchaseModule,
     ReactiveFormsModule,
     HttpClientModule,
     MalihuScrollbarModule.forRoot()

src/app/footer/footer.component.html

@@ -22,13 +22,13 @@
                         <a>Blog</a>
                     </li>
                     <li>
-                        <a>Privacy Policy</a>
+                        <a (click)="goToPage('privacy')">Privacy Policy</a>
                     </li>
                     <li>
-                        <a>Terms of Use</a>
+                        <a (click)="goToPage('termscondition')">Terms & Conditions</a>
                     </li>
                     <li>
-                        <a>Help</a>
+                        <a (click)="goToPage('termsservice')">Terms of Service</a>
                     </li>
                 </ul>
             </div>

src/app/footer/footer.component.ts

 import { Component, OnInit } from '@angular/core';
+import { Router,ActivatedRoute } from '@angular/router';
 
 @Component({
   selector: 'app-footer',
@@ -7,9 +8,18 @@ import { Component, OnInit } from '@angular/core';
 })
 export class FooterComponent implements OnInit {
 
-  constructor() { }
+  constructor(
+    private router        : Router, 
+    private route         : ActivatedRoute
+  ) { }
 
   ngOnInit() {
   }
 
+
+  goToPage(path,data=null){
+    this.router.navigateByUrl(path,{queryParams:data});
+    document.body.scrollTop = document.documentElement.scrollTop = 0;
+  }
+
 }

src/app/home/home.module.ts

@@ -12,13 +12,19 @@ import { ReactiveFormsModule, FormsModule } from '@angular/forms';
 import { BsDatepickerModule } from 'ngx-bootstrap';
 import { MalihuScrollbarModule } from 'ngx-malihu-scrollbar';
 import { ForgotComponent } from './forgot/forgot.component';
+import { TncComponent } from './tnc/tnc.component';
+import { PrivacyComponent } from './privacy/privacy.component';
+import { TnsComponent } from './tns/tns.component';
 
 
 @NgModule({
   declarations: [
     IndexComponent,
      DashboardComponent,
-     ForgotComponent
+     ForgotComponent,
+     TncComponent,
+     PrivacyComponent,
+     TnsComponent
     ],
   imports: [
     FormsModule,

src/app/home/home.routing.ts

@@ -2,11 +2,19 @@ import { ModuleWithProviders } from '@angular/core';
 import { Routes, RouterModule } from '@angular/router';
 import { IndexComponent } from './index/index.component';
 import { DashboardComponent } from './dashboard/dashboard.component';
+import { TncComponent } from './tnc/tnc.component';
+import { PrivacyComponent } from './privacy/privacy.component';
+import { TnsComponent } from './tns/tns.component';
 
 
 const ModuleRoutes: Routes = [
+    
     { path: 'index', component: IndexComponent},
-    { path: 'dashboard', component: DashboardComponent}
+    { path: 'dashboard', component: DashboardComponent},
+    { path: 'termscondition', component: TncComponent},
+    { path: 'termsservice', component: TnsComponent},
+    { path: 'privacy', component: PrivacyComponent}
+    
 ];
 
 export const moduleRouting: ModuleWithProviders = RouterModule.forChild(ModuleRoutes)

src/app/home/privacy/privacy.component.scss

+.terms_wrapper{
+    width:100%;
+    min-height:550px;
+    padding-top:84px;
+    padding-bottom:100px;
+    .terms_tab_head{
+        
+    }
+    ul{
+        background: rgba(0, 0, 0, 0.9);
+        li{
+            font-size: 25px;
+
+            a{
+                border-radius: 0px;
+                color: #a8a8a8;
+                padding: 20px;
+                border:none;
+                &:hover{
+                    border:none;
+                    outline: none;
+                }
+                &:focus{
+                    border:none;
+                    outline: none;
+                }
+            }
+            .active{
+                background-color: rgba(273, 273, 273, 0.2) !important;
+                color: #fff;
+                border:none;
+            }
+
+        }
+    }
+    .tab-content{
+        padding: 30px;
+        p{
+            text-align: justify;
+        }
+        ol{
+            padding-left: 0px;
+            li{
+                font-size: 20px;
+                font-weight: 500;
+                padding-bottom: 15px;
+                
+            }
+            ol{
+                li{
+                    font-weight: 400;
+                    font-size: 16px;
+                }
+            }
+        }
+        
+    }
+}

src/app/home/privacy/privacy.component.spec.ts

+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { PrivacyComponent } from './privacy.component';
+
+describe('PrivacyComponent', () => {
+  let component: PrivacyComponent;
+  let fixture: ComponentFixture<PrivacyComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ PrivacyComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(PrivacyComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/home/privacy/privacy.component.ts

+import { Component, OnInit } from '@angular/core';
+import { Router,ActivatedRoute } from '@angular/router';
+
+@Component({
+  selector: 'app-privacy',
+  templateUrl: './privacy.component.html',
+  styleUrls: ['./privacy.component.scss']
+})
+export class PrivacyComponent implements OnInit {
+
+  constructor(
+    private router        : Router, 
+    private route         : ActivatedRoute
+  ) { }
+
+  ngOnInit() {
+  }
+
+
+  goToPage(path,data=null){
+    this.router.navigateByUrl(path,{queryParams:data});
+    document.body.scrollTop = document.documentElement.scrollTop = 0;
+  }
+
+}

src/app/home/tnc/tnc.component.scss

+.terms_wrapper{
+    width:100%;
+    min-height:550px;
+    padding-top:84px;
+    padding-bottom:100px;
+    .terms_tab_head{
+        
+    }
+    ul{
+        background: rgba(0, 0, 0, 0.9);
+        li{
+            font-size: 25px;
+
+            a{
+                border-radius: 0px;
+                color: #a8a8a8;
+                padding: 20px;
+                border:none;
+                &:hover{
+                    border:none;
+                    outline: none;
+                }
+                &:focus{
+                    border:none;
+                    outline: none;
+                }
+            }
+            .active{
+                background-color: rgba(273, 273, 273, 0.2) !important;
+                color: #fff;
+                border:none;
+            }
+
+        }
+    }
+    .tab-content{
+        padding: 30px;
+        p{
+            text-align: justify;
+        }
+        ol{
+            padding-left: 0px;
+            li{
+                font-size: 20px;
+                font-weight: 500;
+                padding-bottom: 15px;
+                
+            }
+            ol{
+                li{
+                    font-weight: 400;
+                    font-size: 16px;
+                }
+            }
+        }
+        
+    }
+}

src/app/home/tnc/tnc.component.spec.ts

+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { TncComponent } from './tnc.component';
+
+describe('TncComponent', () => {
+  let component: TncComponent;
+  let fixture: ComponentFixture<TncComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ TncComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(TncComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/home/tnc/tnc.component.ts

+import { Component, OnInit } from '@angular/core';
+import { Router,ActivatedRoute } from '@angular/router';
+
+@Component({
+  selector: 'app-tnc',
+  templateUrl: './tnc.component.html',
+  styleUrls: ['./tnc.component.scss']
+})
+export class TncComponent implements OnInit {
+
+  constructor(
+    private router        : Router, 
+    private route         : ActivatedRoute
+  ) { }
+
+  ngOnInit() {
+  }
+
+  goToPage(path,data=null){
+    this.router.navigateByUrl(path,{queryParams:data});
+    document.body.scrollTop = document.documentElement.scrollTop = 0;
+  }
+
+}

src/app/home/tns/tns.component.scss

+.terms_wrapper{
+    width:100%;
+    min-height:550px;
+    padding-top:84px;
+    padding-bottom:100px;
+    .terms_tab_head{
+        
+    }
+    ul{
+        background: rgba(0, 0, 0, 0.9);
+        li{
+            font-size: 25px;
+
+            a{
+                border-radius: 0px;
+                color: #a8a8a8;
+                padding: 20px;
+                border:none;
+                &:hover{
+                    border:none;
+                    outline: none;
+                }
+                &:focus{
+                    border:none;
+                    outline: none;
+                }
+            }
+            .active{
+                background-color: rgba(273, 273, 273, 0.2) !important;
+                color: #fff;
+                border:none;
+            }
+
+        }
+    }
+    .tab-content{
+        padding: 30px;
+        p{
+            text-align: justify;
+        }
+        ol{
+            padding-left: 0px;
+            li{
+                font-size: 20px;
+                font-weight: 500;
+                padding-bottom: 15px;
+                
+            }
+            ol{
+                li{
+                    font-weight: 400;
+                    font-size: 16px;
+                }
+            }
+        }
+        
+    }
+}

src/app/home/tns/tns.component.spec.ts

+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { TnsComponent } from './tns.component';
+
+describe('TnsComponent', () => {
+  let component: TnsComponent;
+  let fixture: ComponentFixture<TnsComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ TnsComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(TnsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/home/tns/tns.component.ts

+import { Component, OnInit } from '@angular/core';
+import { Router,ActivatedRoute } from '@angular/router';
+
+@Component({
+  selector: 'app-tns',
+  templateUrl: './tns.component.html',
+  styleUrls: ['./tns.component.scss']
+})
+export class TnsComponent implements OnInit {
+
+  constructor(
+    private router        : Router, 
+    private route         : ActivatedRoute
+  ) { }
+
+  ngOnInit() {
+  }
+
+  goToPage(path,data=null){
+    this.router.navigateByUrl(path,{queryParams:data});
+    document.body.scrollTop = document.documentElement.scrollTop = 0;
+  }
+
+}

src/app/navbar/navbar.component.html

@@ -20,6 +20,16 @@
         <div class="collapse navbar-collapse" id="collapsibleNavbar">
             <ul class="navbar-nav ml-auto">
                 <li class="nav-item">
+                    <a class="nav-link" (click)="goToPage('index')">
+                        HOME
+                    </a>
+                </li>
+                <li class="nav-item">
+                        <a class="nav-link" (click)="goToPage('productlist')">
+                            PURCHASE
+                        </a>
+                    </li>
+                <li class="nav-item">
                     <a class="nav-link base_arrow dropdown">
                         <div class="dropdown-toggle" data-toggle="dropdown">
                             CAR OWNERS
@@ -76,8 +86,6 @@
 
 <!-- NAVBAR-ENDS -->
 
-
-
 <!-- SIGNUP-MODAL-STARTS-->
 
 <div class="modal" id="signup" style="z-index: 99999 !important;">

src/app/navbar/navbar.component.scss

@@ -2,6 +2,7 @@
     position: fixed;
     transition-duration: 1s;
     transition-timing-function: ease;
+    background: #2655bf;
     top: 0px;
     left: 0px;
     right: 0px;
@@ -10,7 +11,7 @@
     padding-bottom: 15px;
     z-index: 999;
     .container-fluid {
-        max-width: calc(100% - 15%);
+        max-width: calc(100% - 10%);
         .navbar-brand {
             img {
                 width: 180px;
@@ -35,7 +36,7 @@
                     background:url("../../assets/images/asset_down_white_arrow.png");
                     background-repeat: no-repeat;
                     background-position: right;
-                    background-size: 30px;
+                    background-size: 25px;
                     padding-right: 30px;
                     .dropdown-toggle::after{
                         display: none;

src/app/purchase/productdetails/productdetails.component.spec.ts

+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ProductdetailsComponent } from './productdetails.component';
+
+describe('ProductdetailsComponent', () => {
+  let component: ProductdetailsComponent;
+  let fixture: ComponentFixture<ProductdetailsComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ProductdetailsComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ProductdetailsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/purchase/productdetails/productdetails.component.ts

+import { Component, OnInit } from '@angular/core';
+import { Router,ActivatedRoute } from '@angular/router';
+import { NgxGalleryOptions, NgxGalleryImage, NgxGalleryAnimation } from 'ngx-gallery';
+import * as $ from 'jquery';
+import { NgxCarousel } from 'ngx-carousel';
+
+@Component({
+  selector: 'app-productdetails',
+  templateUrl: './productdetails.component.html',
+  styleUrls: ['./productdetails.component.scss']
+})
+export class ProductdetailsComponent implements OnInit {
+  count:any;
+  public carouselTile: NgxCarousel;
+  constructor(
+    private router        : Router, 
+    private route         : ActivatedRoute
+  ) {
+    this.count = 0;
+   }
+
+
+
+add(){
+  this.count = this.count + 1;
+}
+
+minus(){
+  this.count = this.count - 1;
+  if(this.count < 0){
+    this.count = 0;
+  }
+}
+
+
+ galleryOptions: NgxGalleryOptions[];
+    galleryImages: NgxGalleryImage[];
+
+    ngOnInit(): void {
+      this.carouselTile = {grid: {xs: 1, sm: 2 , md: 4, lg: 8, all: 0},slide: 1, speed: 400,point: { visible: false },load: 2, touch: true, easing: 'ease'}
+      
+        this.galleryOptions = [
+            {
+                width: '100%',
+                height: '570px',
+                thumbnailsColumns: 4,
+                imageAnimation: NgxGalleryAnimation.Slide
+            },
+            // max-width 800
+            {
+                breakpoint: 1440,
+                width: '100%',
+                height: '400px',
+                imagePercent: 80,
+                thumbnailsPercent: 20,
+                thumbnailsMargin: 20,
+                thumbnailMargin: 20
+            },
+            // max-width 400
+            {
+                breakpoint: 400,
+                preview: false
+            }
+        ];
+
+        this.galleryImages = [
+            {
+                small: 'assets/images/tyre_shot1.png',
+                medium: 'assets/images/tyre_shot1.png',
+                big: 'assets/images/tyre_shot1.png'
+            },
+            {
+              small: 'assets/images/tyre_shot2.png',
+              medium: 'assets/images/tyre_shot2.png',
+              big: 'assets/images/tyre_shot2.png'
+          },
+          {
+            small: 'assets/images/tyre_shot3.png',
+            medium: 'assets/images/tyre_shot3.png',
+            big: 'assets/images/tyre_shot3.png'
+        },
+        {
+          small: 'assets/images/tyre_shot4.png',
+          medium: 'assets/images/tyre_shot4.png',
+          big: 'assets/images/tyre_shot4.png'
+      }
+            
+        ];
+    }
+  goToPage(path,data=null){
+    this.router.navigateByUrl(path,{queryParams:data});
+    document.body.scrollTop = document.documentElement.scrollTop = 0;
+  }
+  carouselTileLoad(){ return ''; }
+
+}

src/app/purchase/productlist/productlist.component.spec.ts

+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ProductlistComponent } from './productlist.component';
+
+describe('ProductlistComponent', () => {
+  let component: ProductlistComponent;
+  let fixture: ComponentFixture<ProductlistComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ProductlistComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ProductlistComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/purchase/productlist/productlist.component.ts

+import { Component, OnInit } from '@angular/core';
+import { Router,ActivatedRoute } from '@angular/router';
+import { Options } from 'ng5-slider';
+
+@Component({
+  selector: 'app-productlist',
+  templateUrl: './productlist.component.html',
+  styleUrls: ['./productlist.component.scss']
+})
+export class ProductlistComponent implements OnInit {
+
+  constructor(
+    private router        : Router, 
+    private route         : ActivatedRoute
+  ) { }
+
+  value: number = 40;
+  highValue: number = 60;
+  options: Options = {
+    floor: 0,
+    ceil: 100
+  };
+
+  ngOnInit() {
+  }
+
+  goToPage(path,data=null){
+    this.router.navigateByUrl(path,{queryParams:data});
+    document.body.scrollTop = document.documentElement.scrollTop = 0;
+  }
+
+}

src/app/purchase/purchase.module.ts

+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { ProductlistComponent } from './productlist/productlist.component';
+import { ProductdetailsComponent } from './productdetails/productdetails.component';
+import { moduleRouting } from './purchase.routing';
+import { SearchbarComponent } from './searchbar/searchbar.component';
+import { Ng5SliderModule } from 'ng5-slider';
+import { NgxGalleryModule } from 'ngx-gallery';
+import { NgxCarouselModule } from 'ngx-carousel';
+
+
+@NgModule({
+  declarations: [ProductlistComponent, ProductdetailsComponent, SearchbarComponent],
+  imports: [
+    CommonModule,
+    moduleRouting,
+    Ng5SliderModule,
+    NgxGalleryModule,
+    NgxCarouselModule
+  ]
+})
+export class PurchaseModule { }

src/app/purchase/purchase.routing.ts

+import { ModuleWithProviders } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+import { ProductlistComponent } from './productlist/productlist.component';
+import { ProductdetailsComponent } from './productdetails/productdetails.component';
+
+const ModuleRoutes: Routes = [
+    { path: 'productlist', component: ProductlistComponent},
+    { path: 'productdetails', component: ProductdetailsComponent}
+];
+
+export const moduleRouting: ModuleWithProviders = RouterModule.forChild(ModuleRoutes)
+

src/app/purchase/searchbar/searchbar.component.html

+<div class="purchase_taskbar">
+  <div class="purchase_searchbar">
+    <div class="purchase_inner_search_bar">
+      <input class="" type="text" placeholder="Search here">
+      <button class="search_btn">Search</button>
+      <div class="clear"></div>
+    </div>
+  </div>
+  <div class="purchase_other">
+    <ul>
+      <li>
+          <img src="assets/images/asset_location.png">
+          Orlando, USA
+      </li>
+      <li>
+          <img src="assets/images/asset_cart.png">
+          My Order
+      </li>
+      <li>
+          <img src="assets/images/asset_order.png">
+          My Cart
+      </li>
+    </ul>
+  </div>
+  <div class="clear"></div>
+</div>

src/app/purchase/searchbar/searchbar.component.scss

+.purchase_taskbar{
+    width:100%;
+    padding-top: 30px;
+    padding-bottom: 30px;
+    .purchase_searchbar{
+        width:calc(100% - 35%);
+        float: left;
+        
+        .purchase_inner_search_bar{
+            background: #ffffff;
+            border-radius: 30px;
+
+            input{
+                width: calc(100% - 120px);
+                float: left;
+                height: 45px;
+                border:none;
+                border-radius: 30px;
+                padding-left:30px;
+                font-size: 18px;
+                font-weight: 300;
+                &:focus{
+                    outline: none;
+                }
+                &::placeholder{
+                    color: #cad2db;
+                }
+
+            }
+            .search_btn{
+                width:120px;
+                float: right;
+                height: 45px;
+                border-radius: 30px;
+                background: #2655bf;
+                color: #ffffff;
+                border:none;
+                &:focus{
+                    outline: none;
+                }
+            }
+
+        }
+    }
+    .purchase_other{
+        width: 35%;
+        float: right;
+        padding: 10px;
+        ul
+        {
+            margin:0px;
+            padding:0px;
+            text-align: right;
+            li{
+                padding-left: 10%;
+                display: inline-block;
+                text-align: right;
+                img{
+                    margin-right: 10px;
+                }
+            }
+        }
+    }
+}
\ No newline at end of file

src/app/purchase/searchbar/searchbar.component.spec.ts

+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { SearchbarComponent } from './searchbar.component';
+
+describe('SearchbarComponent', () => {
+  let component: SearchbarComponent;
+  let fixture: ComponentFixture<SearchbarComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ SearchbarComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(SearchbarComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/purchase/searchbar/searchbar.component.ts

+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-searchbar',
+  templateUrl: './searchbar.component.html',
+  styleUrls: ['./searchbar.component.scss']
+})
+export class SearchbarComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

src/assets/css/responsive.scss

@@ -36,6 +36,38 @@
 /* 01. Smartphones (portrait and landscape) ----------- */
 
 @media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
+
+    .purchase_filter_section{
+        width: 100% !important;
+    }
+    .purchase_content_section{
+        width:100% !important;
+        height: auto !important;
+        .search_listing_content{
+            ul{
+                li{
+                    width:100% !important;
+                }
+            }
+        }
+    }
+    .purchase_taskbar{
+        .purchase_searchbar{
+            width:100% !important;
+        }
+        .purchase_other{
+            width:100% !important;
+            ul{
+                li{
+                    width:100% !important;
+                    text-align: left !important;
+                }
+            }
+        }
+    }
+    .purchase_wrapper .container-fluid {
+        max-width: calc(100% - 1%);
+    }
     .navbar {
         padding: 20px;
         background: #2655bf !important;
@@ -214,23 +246,136 @@
 
 /* 07.0 Desktops and laptops ----------- */
 
-@media only screen and (min-width: 1000px) and (max-device-width: 1280px) {
-    .login_modal_content {
-        top: 0px !important;
-    }
-    .how_it_works h4 {
-        height: 70px;
+	/* LOW RESOLUTION ----------- */
+
+    @media only screen and (min-width: 900px) and (max-device-width: 1249px) {
+        .login_modal_content {
+            top: 0px !important;
+        }
+        .how_it_works h4 {
+            height: 70px;
+        }
+        .how_it_works p {
+            height: 100px;
+        }
+        .service_check h4 {
+            height: 70px;
+        }
+        .service_check p {
+            height: 100px;
+        }
+
+        .purchase_wrapper{
+            .purchase_content_wrapper{
+                .purchase_content_section{
+                    .search_listing_content{
+                        ul{
+                            li {
+                                list-style: none;
+                                padding: 10px;
+                                width: calc(100% - 67%);
+                                display: inline-block;
+                            }
+                            
+                        }
+            
+                    } 
+                }  
+            }
+        }
+        .navbar{
+            .container-fluid {
+                max-width: calc(100% - 2%) !important;
+            } 
+        } 
     }
-    .how_it_works p {
-        height: 100px;
+
+    @media only screen and (min-width: 1250px) and (max-device-width: 1359px) {
+        .login_modal_content {
+            top: 0px !important;
+        }
+        .how_it_works h4 {
+            height: 70px;
+        }
+        .how_it_works p {
+            height: 100px;
+        }
+        .service_check h4 {
+            height: 70px;
+        }
+        .service_check p {
+            height: 100px;
+        }
+        .purchase_wrapper{
+            .purchase_content_wrapper{
+                .purchase_content_section{
+                    .search_listing_content{
+                        ul{
+                            li {
+                                list-style: none;
+                                padding: 10px;
+                                width: calc(100% - 67%) !important;
+                                display: inline-block;
+                            }
+                            
+                        }
+            
+                    } 
+                }  
+            }
+        }
+        .navbar{
+            .container-fluid {
+                max-width: calc(100% - 2%) !important;
+            } 
+        } 
     }
-    .service_check h4 {
-        height: 70px;
+    @media only screen and (min-width: 1360px) and (max-device-width: 1399px) {
+        .purchase_wrapper{
+            .purchase_content_wrapper{
+                .purchase_content_section{
+                    .search_listing_content{
+                        ul{
+                            li {
+                                list-style: none;
+                                padding: 10px;
+                                width: calc(100% - 67%) !important;
+                                display: inline-block;
+                            }
+                            
+                        }
+            
+                    } 
+                }  
+            }
+        }
+        .navbar{
+            .container-fluid {
+                max-width: calc(100% - 2%) !important;
+            } 
+        } 
     }
-    .service_check p {
-        height: 100px;
+    @media only screen and (min-width: 1400px) and (max-device-width: 1600px) {
+        .purchase_wrapper{
+            .purchase_content_wrapper{
+                .purchase_content_section{
+                    .search_listing_content{
+                        ul{
+                            li {
+                                list-style: none;
+                                padding: 10px;
+                                width: calc(100% - 75%) !important;
+                                display: inline-block;
+                            }
+                            
+                        }
+            
+                    } 
+                }  
+            }
+        }
     }
-}
+
 
 
 /* 08.0 Large screens ----------- */

src/styles.scss

@@ -31,6 +31,7 @@
 --------------------------------*/
 
 @import url('https://fonts.googleapis.com/css?family=Lato:100,100i,300,300i,400,400i,700,700i,900,900i');
+@import url(//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css);
 * {
     font-family: 'Lato', sans-serif;
     -webkit-font-smoothing: antialiased;
@@ -80,6 +81,13 @@ body {
     font-family: 'Lato', sans-serif !important;
 }
 
+.purchase_wrapper{
+    padding-top:85px;
+    background: #f1f3f6;
+    .container-fluid {
+        max-width: calc(100% - 15%);
+    }
+}
 
 
 .modal-full {
@@ -201,6 +209,10 @@ body {
     background-color: rgba(243, 243, 243, 0.6) !important;
 }
 
+.backgroundNone{
+    background: none !important;
+}
+
 .primary_background {
     background: #D94350;
 }
@@ -706,4 +718,70 @@ bs-datepicker-container{
       }
   }
 
+  .purchase_filter_section{
+    .ng5-slider{
+        .ng5-slider-bar{
+            height:2px !important;
+        }
+        .ng5-slider-selection{
+            background: #2655bf;
+        }
+        .ng5-slider-pointer{
+            width:20px;
+            height:20px;
+            top:-10px;
+            background: #2655bf;
+            &:focus{
+                outline: none;
+            }
+            &:after {
+                content: '';
+                width: 8px;
+                height: 8px;
+                position: absolute;
+                top:9px;
+                left:9px;
+                border-radius: 4px;
+                background: #2655bf !important;
+            }
+        }
+    }
+    span{
+        color: #92a1b1;
+    }
+  }
+
+  .product_gallery_inner{
+    ngx-gallery{
+        ngx-gallery-image{
+            border:1px solid #eeeeee;
+            .ngx-gallery-image-wrapper{
+                .ngx-gallery-image{
+                    background-size: 90% !important;
+                    z-index: 99 !important;
+                }
+            }
+        }
+        ngx-gallery-thumbnails{
+            .ngx-gallery-thumbnails-wrapper{
+                .ngx-gallery-thumbnail{
+                    background-size: 90% !important; 
+                    border:1px solid #eeeeee;
+                }
+                .ngx-gallery-active{
+                    border:1px solid #2655bf !important;
+                }
+            }
+        }
+    }
+  }
+
+
+  .bottom_product_list{
+    ngx-carousel{
+        ngx-tile{
+            width:280px !important;
+        }
+    }
+  }