From c9d7595b263db014f04c43f8be934cccf6a9973d Mon Sep 17 00:00:00 2001
From: amalk <amal.techware@gmail.com>
Date: Fri, 27 Sep 2019 10:34:15 +0530
Subject: [PATCH] 27-09-2019
---
src/app/home/carousel/carousel.scss | 3 ---
src/app/home/destination/destination.component.html | 95 ++++++++++++++++-------------------------------------------------------------------------------
src/app/home/destination/destination.component.scss | 2 ++
src/app/home/destination/destination.component.ts | 12 ++++++++++++
src/app/home/index/index.component.html | 29 ++++++++++++++---------------
src/app/home/mainmenu/mainmenu.component.html | 98 +++++++++++++++++++++++++++++++++++++-------------------------------------------------------------
src/app/home/mainmenu/mainmenu.component.scss | 21 ++++++++++++++++++---
src/app/home/navbar/navbar.component.html | 2 +-
src/app/home/offers/offers.component.html | 16 ++++++++--------
src/styles.scss | 41 +++++++++++++++++++++++++++++++++++------
10 files changed, 143 insertions(+), 176 deletions(-)
diff --git a/src/app/home/carousel/carousel.scss b/src/app/home/carousel/carousel.scss
index b3afb7c..1fa7c28 100644
--- a/src/app/home/carousel/carousel.scss
+++ b/src/app/home/carousel/carousel.scss
@@ -3,9 +3,6 @@
ul {
margin: 0px;
padding: 0px;
- li {
- width: auto;
- }
}
}
diff --git a/src/app/home/destination/destination.component.html b/src/app/home/destination/destination.component.html
index 0b255e1..7e46210 100644
--- a/src/app/home/destination/destination.component.html
+++ b/src/app/home/destination/destination.component.html
@@ -1,82 +1,19 @@
<div class="destination_slider">
- <!-- <ngx-slick class="carousel" #slickModal="slick-modal" [config]="slideConfig" (afterChange)="afterChange($event)">
- <div ngxSlickItem class="slide">
- <div class="inner_slider">
- <div class="inner_overlay">
- <h4>Paris</h4>
- <h6>
- <strong>
- Starting from
- </strong> <br>$ 245
- </h6>
+ <carousel>
+ <ng-container *ngFor="let item of items;">
+ <ng-container *carouselItem>
+ <div class="inner_slider">
+ <div class="inner_overlay">
+ <h4>{{item.place}}</h4>
+ <h6>
+ <strong>
+ Starting from
+ </strong> <br>${{item.price}}
+ </h6>
+ </div>
+ <img src={{item.image}}>
</div>
- <img src="../../../assets/destination/paris.png">
- </div>
- </div>
- <div ngxSlickItem class="slide">
- <div class="inner_slider">
- <div class="inner_overlay">
- <h4>Dubai</h4>
- <h6>
- <strong>
- Starting from
- </strong> <br>$ 375
- </h6>
- </div>
- <img src="../../../assets/destination/dubai.png">
- </div>
- </div>
- <div ngxSlickItem class="slide">
- <div class="inner_slider">
- <div class="inner_overlay">
- <h4>Paris</h4>
- <h6>
- <strong>
- Starting from
- </strong> <br>$ 245
- </h6>
- </div>
- <img src="../../../assets/destination/paris.png">
- </div>
- </div>
- <div ngxSlickItem class="slide">
- <div class="inner_slider">
- <div class="inner_overlay">
- <h4>Dubai</h4>
- <h6>
- <strong>
- Starting from
- </strong> <br>$ 375
- </h6>
- </div>
- <img src="../../../assets/destination/dubai.png">
- </div>
- </div>
- <div ngxSlickItem class="slide">
- <div class="inner_slider">
- <div class="inner_overlay">
- <h4>Paris</h4>
- <h6>
- <strong>
- Starting from
- </strong> <br>$ 245
- </h6>
- </div>
- <img src="../../../assets/destination/paris.png">
- </div>
- </div>
- <div ngxSlickItem class="slide">
- <div class="inner_slider">
- <div class="inner_overlay">
- <h4>Dubai</h4>
- <h6>
- <strong>
- Starting from
- </strong> <br>$ 375
- </h6>
- </div>
- <img src="../../../assets/destination/dubai.png">
- </div>
- </div>
- </ngx-slick> -->
+ </ng-container>
+ </ng-container>
+ </carousel>
</div>
\ No newline at end of file
diff --git a/src/app/home/destination/destination.component.scss b/src/app/home/destination/destination.component.scss
index a3f62e2..22b1c05 100644
--- a/src/app/home/destination/destination.component.scss
+++ b/src/app/home/destination/destination.component.scss
@@ -7,6 +7,8 @@
.inner_slider {
position: relative;
border-radius: 10px;
+ height: 180px;
+ width: 150px;
img {
width: 100%;
height: 100%;
diff --git a/src/app/home/destination/destination.component.ts b/src/app/home/destination/destination.component.ts
index a4b5d14..8e1cb71 100644
--- a/src/app/home/destination/destination.component.ts
+++ b/src/app/home/destination/destination.component.ts
@@ -7,9 +7,21 @@ import { Component, OnInit } from '@angular/core';
})
export class DestinationComponent implements OnInit {
+ items: any;
+
constructor() { }
ngOnInit() {
+ this.items = [
+ { place: 'Paris', price: '213', image:"../../../assets/destination/paris.png"},
+ { place: 'Dubai', price: '521', image: "../../../assets/destination/dubai.png" },
+ { place: 'Dummy one', price: '121', image: "../../../assets/destination/paris.png" },
+ { place: 'Dummy two', price: '75', image: "../../../assets/destination/dubai.png" },
+ { place: 'Dummy three', price: '857', image: "../../../assets/destination/paris.png" },
+ { place: 'Dummy four', price: '263', image: "../../../assets/destination/dubai.png" },
+ { place: 'Dummy five', price: '145', image: "../../../assets/destination/paris.png" },
+ { place: 'Dummy six', price: '1252', image: "../../../assets/destination/dubai.png" },
+ ]
}
diff --git a/src/app/home/index/index.component.html b/src/app/home/index/index.component.html
index e404b68..6f6d456 100644
--- a/src/app/home/index/index.component.html
+++ b/src/app/home/index/index.component.html
@@ -1,21 +1,21 @@
<ati-navbar></ati-navbar>
<div class="ati_main_wrapper">
<ati-mainmenu></ati-mainmenu>
- <h4>
- <div class="width50">
+ <h4 fxLayout="row" fxLayoutAlign="space-between center">
+ <div>
<span class="head">Exclusive Deals</span>
</div>
- <div class="width50 textRight">
+ <div>
<span class="more">All Deals</span>
</div>
</h4>
<offers></offers>
- <h4>
- <div class="width50">
+ <h4 fxLayout="row" fxLayoutAlign="space-between center">
+ <div>
<span class="head">Upcoming Itinerary</span>
</div>
- <div class="width50 textRight">
+ <div>
<span class="more">More</span>
</div>
</h4>
@@ -24,19 +24,18 @@
<h5 class="">Delhi <span><img src="../../../assets/mainmenu/arrow.png"></span> Mumbai</h5>
<h6 class="">in 5 Days</h6>
<div class="clear"></div>
- <h4><span>9 Aug, 2019</span><span>|</span><span>10 Aug, 2019</span><span>|</span><span>Non Stop</span><span>|</span><span>3 Travellers</span></h4>
+ <h4 fxLayout="row" fxLayoutAlign="space-between center"><span>9 Aug, 2019</span><span>|</span><span>10 Aug,
+ 2019</span><span>|</span><span>Non Stop</span><span>|</span><span>3 Travellers</span></h4>
</div>
</div>
- <h4>
- <strong>Trending</strong>
+ <h4 fxLayout="row" fxLayoutAlign="space-between end">
+ <div>
+ <strong>Trending</strong><br>
+ <span class="head">Destinations</span>
+ </div>
<div>
- <div class="width50">
- <span class="head">Destinations</span>
- </div>
- <div class="width50 textRight">
- <span class="more">All Destinations</span>
- </div>
+ <span class="more">All Destinations</span>
</div>
</h4>
diff --git a/src/app/home/mainmenu/mainmenu.component.html b/src/app/home/mainmenu/mainmenu.component.html
index 13488b5..d18e35b 100644
--- a/src/app/home/mainmenu/mainmenu.component.html
+++ b/src/app/home/mainmenu/mainmenu.component.html
@@ -1,78 +1,54 @@
-<!-- <div class="main_menu_wrapper" fxLayout="row" fxLayoutAlign="space-around center" fxLayoutGap="10px" fxFlexAlign="center">
- <div fxflex="25%" style="border: 1px solid #d7d8d9; border-top: none;border-left: none;padding: 10px;">
- <div class="custmenu">
- <img src="./../../../assets/mainmenu/menu_flight.png" />
- </div>
- <p>FLIGHT</p>
- <div class="divison_layer "></div>
- </div>
- <div fxflex="25%" style="border: 1px solid #d7d8d9; border-top: none;border-left: none;padding: 10px;">
- <div class="custmenu">
- <img src="./../../../assets/mainmenu/menu_visa.png" />
- </div>
- <p>VISA</p>
- <div class="divison_layer "></div>
- </div>
- <div fxflex="25%" style="border: 1px solid #d7d8d9; border-top: none;border-left: none;padding: 10px;">
- <div class="custmenu">
- <img src="./../../../assets/mainmenu/menu_holiday.png" />
- </div>
- <p>HOLIDAY</p>
- <div class="divison_layer "></div>
- </div>
- <div fxflex="25%" style="border: 1px solid #d7d8d9; border-top: none;border-left: none;padding: 10px;">
- <div class="custmenu">
- <img src="./../../../assets/mainmenu/menu_hotel.png" />
- </div>
- <p>Hotel</p>
- </div>
-</div> -->
-
-
-<div class="main_menu_wrapper" fxLayout="row" fxLayoutAlign="space-around center" fxLayoutGap="10px" fxFlexAlign="center">
- <ul>
+<section class="main_menu_wrapper">
+ <ul class="borderBottom" fxLayout="row" fxLayoutAlign="center center" cl>
<li>
- <div class="menu_icon flight ">
- </div>
- <p>FLIGHT</p>
- <div class="divison_layer "></div>
+ <a fxLayout="column" fxLayoutAlign="center center">
+ <span class="menu_icon flight"></span>
+ <p>Flight</p>
+ </a>
</li>
<li>
- <div class="menu_icon visa ">
- </div>
- <p>VISA</p>
- <div class="divison_layer "></div>
+ <a fxLayout="column" fxLayoutAlign="center center">
+ <span class="menu_icon visa"></span>
+ <p>Visa</p>
+ </a>
</li>
<li>
- <div class="menu_icon holiday ">
- </div>
- <p>HOLIDAY</p>
- <div class="divison_layer "></div>
+ <a fxLayout="column" fxLayoutAlign="center center">
+ <span class="menu_icon holiday"></span>
+ <p>Holidays</p>
+ </a>
</li>
<li>
- <div class="menu_icon hotel ">
- </div>
- <p>hotel</p>
+ <a fxLayout="column" fxLayoutAlign="center center">
+ <span class="menu_icon hotel"></span>
+ <p>Hotel</p>
+ </a>
</li>
+ </ul>
+ <ul class="mobile-menu padding-top" fxLayout="row" fxLayoutAlign="center center">
<li>
- <div class="menu_icon forex ">
- </div>
- <p>forex</p>
+ <a fxLayout="column" fxLayoutAlign="center center">
+ <span class="menu_icon forex"></span>
+ <p>Forex</p>
+ </a>
</li>
<li>
- <div class="menu_icon bus ">
- </div>
- <p>bus</p>
+ <a fxLayout="column" fxLayoutAlign="center center">
+ <span class="menu_icon bus"></span>
+ <p>Bus</p>
+ </a>
</li>
<li>
- <div class="menu_icon inspire ">
- </div>
- <p>inspire</p>
+ <a fxLayout="column" fxLayoutAlign="center center">
+ <span class="menu_icon inspire"></span>
+ <p>Inspire</p>
+ </a>
</li>
<li>
- <div class="menu_icon more ">
- </div>
- <p>more</p>
+ <a fxLayout="column" fxLayoutAlign="center center">
+ <span class="menu_icon more"></span>
+ <p>More</p>
+ </a>
</li>
</ul>
-</div>
\ No newline at end of file
+</section>
\ No newline at end of file
diff --git a/src/app/home/mainmenu/mainmenu.component.scss b/src/app/home/mainmenu/mainmenu.component.scss
index bec1902..c480339 100644
--- a/src/app/home/mainmenu/mainmenu.component.scss
+++ b/src/app/home/mainmenu/mainmenu.component.scss
@@ -1,4 +1,5 @@
$border_cm_color:#d7d8d9;
+$backgroundWhite:#fff;
.main_menu_wrapper {
.divison_layer {
position: absolute;
@@ -9,10 +10,13 @@ $border_cm_color:#d7d8d9;
right: -10px;
z-index: 9;
}
+ .borderBottom {
+ border-bottom: 1px solid $border_cm_color;
+ }
ul {
- margin: 0px;
- padding: 10px;
- width: 100%;
+ width: calc(100% - 20px);
+ margin: 0 auto;
+ padding: 0px;
li {
list-style: none;
text-align: center;
@@ -22,6 +26,17 @@ $border_cm_color:#d7d8d9;
border-top: none;
border-left: none;
position: relative;
+ &::after {
+ content: '';
+ position: absolute;
+ bottom: -9px;
+ right: -8px;
+ background: $backgroundWhite;
+ z-index: 100;
+ width: 15px;
+ height: 15px;
+ border-radius: 50%;
+ }
.menu_icon {
width: 35px;
height: 35px;
diff --git a/src/app/home/navbar/navbar.component.html b/src/app/home/navbar/navbar.component.html
index e423c12..427645a 100644
--- a/src/app/home/navbar/navbar.component.html
+++ b/src/app/home/navbar/navbar.component.html
@@ -1,4 +1,4 @@
-<div class="nav_header">
+<div class="nav_header" fxLayout="row" fxLayoutAlign="start start">
<div class="nav_btn nav_menu" (click)="menuToggle()"></div>
<div class="nav_title">
<img src="../../../assets/navbar/nav_logo.png">
diff --git a/src/app/home/offers/offers.component.html b/src/app/home/offers/offers.component.html
index a653126..971b9aa 100644
--- a/src/app/home/offers/offers.component.html
+++ b/src/app/home/offers/offers.component.html
@@ -1,7 +1,8 @@
-<carousel>
- <ng-container *ngFor="let item of items;">
- <ng-container *carouselItem>
- <div class="offer_slider">
+<div class="offer_slider">
+ <carousel>
+ <ng-container *ngFor="let item of items;">
+ <ng-container *carouselItem>
+
<div class="slide">
<div class="inner_slider">
<div class="content_inner">
@@ -19,8 +20,7 @@
</div>
<img src="../../../assets/offer/bottom_ribbon.png">
</div>
- </div>
-
+ </ng-container>
</ng-container>
- </ng-container>
-</carousel>
\ No newline at end of file
+ </carousel>
+</div>
\ No newline at end of file
diff --git a/src/styles.scss b/src/styles.scss
index 8568fb0..86146df 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -161,22 +161,18 @@ button {
.width25 {
width: 25% !important;
- display: inline-block;
}
.width50 {
width: 50% !important;
- display: inline-block;
}
.width75 {
width: 75% !important;
- display: inline-block;
}
.widthFull {
width: 100% !important;
- display: inline-block;
}
.widthAuto {
@@ -317,12 +313,10 @@ button {
background-position: center;
background-repeat: no-repeat;
background-size: 30px;
- display: inline-flex;
}
.nav_title {
width: calc(100% - 100px);
- display: inline-flex;
color: rgba(59, 57, 77, 1);
padding: 12px;
padding-left: 5px;
@@ -360,4 +354,39 @@ button {
.nav_menu {
background-image: url("./assets/navbar/nav_menu.png");
+}
+
+.destination_slider {
+ .carousel-wrapper {
+ ul {
+ li {
+ width: auto !important;
+ list-style: none;
+ margin-right: 10px;
+ }
+ }
+ }
+}
+
+.offer_slider {
+ .carousel-wrapper {
+ ul {
+ li {
+ width: auto !important;
+ list-style: none;
+ margin-right: 10px;
+ }
+ }
+ }
+}
+
+@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
+ // .offer_slider {
+ // .slide {
+ // .inner_slider {
+ // height: 230px !important;
+ // width: 75% !important;
+ // }
+ // }
+ // }
}
\ No newline at end of file
--
libgit2 0.27.1