Skip to content

A
ati
Commit 1490fbe5 by amalk
Options

24-09-2019

parent 0deeaae9
Showing with 168 additions and 71 deletions
package.json
...@@ -12,29 +12,29 @@ ...@@ -12,29 +12,29 @@
"private": true, "private": true,
"dependencies": { "dependencies": {
"@angular/animations": "^7.1.4", "@angular/animations": "^7.1.4",
"@angular/cdk": "^8.2.0",
"@angular/common": "~7.1.0", "@angular/common": "~7.1.0",
"@angular/compiler": "~7.1.0", "@angular/compiler": "~7.1.0",
"@angular/core": "~7.1.0", "@angular/core": "~7.1.0",
"@angular/flex-layout": "^6.0.0-beta.18",
"@angular/forms": "~7.1.0", "@angular/forms": "~7.1.0",
"@angular/platform-browser": "~7.1.0", "@angular/platform-browser": "~7.1.0",
"@angular/platform-browser-dynamic": "~7.1.0", "@angular/platform-browser-dynamic": "~7.1.0",
"@angular/router": "~7.1.0", "@angular/router": "~7.1.0",
"@ngu/carousel": "^1.5.5",
"core-js": "^2.5.4", "core-js": "^2.5.4",
"ngx-slick": "^0.2.1",
"rxjs": "~6.3.3", "rxjs": "~6.3.3",
"tslib": "^1.9.0", "tslib": "^1.9.0",
"zone.js": "~0.8.26" "zone.js": "~0.9.1"
}, },
"devDependencies": { "devDependencies": {
"@angular-devkit/build-angular": "~0.11.0", "@angular-devkit/build-angular": "~0.12.4",
"@angular/cli": "~7.1.3", "@angular/cli": "7.1.0",
"@angular/compiler-cli": "~7.1.0", "@angular/compiler-cli": "~7.1.0",
"@angular/language-service": "~7.1.0", "@angular/language-service": "~7.1.0",
"@types/node": "~8.9.4",
"@types/jasmine": "~2.8.8", "@types/jasmine": "~2.8.8",
"@types/jasminewd2": "~2.0.3", "@types/jasminewd2": "~2.0.3",
"codelyzer": "~4.5.0", "@types/node": "~8.9.4",
"codelyzer": "^5.0.1",
"jasmine-core": "~2.99.1", "jasmine-core": "~2.99.1",
"jasmine-spec-reporter": "~4.2.1", "jasmine-spec-reporter": "~4.2.1",
"karma": "~3.1.1", "karma": "~3.1.1",
......
src/app/home/destination/destination.component.html
<div class="destination_slider"> <div class="destination_slider">
<ngx-slick class="carousel" #slickModal="slick-modal" [config]="slideConfig" (afterChange)="afterChange($event)"> <!-- <ngx-slick class="carousel" #slickModal="slick-modal" [config]="slideConfig" (afterChange)="afterChange($event)">
<div ngxSlickItem class="slide"> <div ngxSlickItem class="slide">
<div class="inner_slider"> <div class="inner_slider">
<div class="inner_overlay"> <div class="inner_overlay">
...@@ -78,5 +78,5 @@ ...@@ -78,5 +78,5 @@
<img src="../../../assets/destination/dubai.png"> <img src="../../../assets/destination/dubai.png">
</div> </div>
</div> </div>
</ngx-slick> </ngx-slick> -->
</div> </div>
\ No newline at end of file
src/app/home/destination/destination.component.ts
...@@ -14,11 +14,5 @@ export class DestinationComponent implements OnInit { ...@@ -14,11 +14,5 @@ export class DestinationComponent implements OnInit {
slideConfig = { "slidesToShow": 2.5, "slidesToScroll": 1, "adaptiveheight": true };
afterChange(e) {
console.log('afterChange');
}
} }
src/app/home/home.module.ts
...@@ -7,8 +7,9 @@ import { OffersComponent } from './offers/offers.component'; ...@@ -7,8 +7,9 @@ import { OffersComponent } from './offers/offers.component';
import { IndexComponent } from './index/index.component'; import { IndexComponent } from './index/index.component';
import { moduleRouting } from './home.routing'; import { moduleRouting } from './home.routing';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { SlickModule } from 'ngx-slick';
import { DestinationComponent } from './destination/destination.component'; import { DestinationComponent } from './destination/destination.component';
import { FlexLayoutModule } from '@angular/flex-layout';
...@@ -17,7 +18,7 @@ import { DestinationComponent } from './destination/destination.component'; ...@@ -17,7 +18,7 @@ import { DestinationComponent } from './destination/destination.component';
imports: [ imports: [
CommonModule, CommonModule,
moduleRouting, moduleRouting,
SlickModule.forRoot(), FlexLayoutModule,
BrowserAnimationsModule BrowserAnimationsModule
] ]
}) })
......
src/app/home/index/index.component.html
...@@ -2,20 +2,26 @@ ...@@ -2,20 +2,26 @@
<div class="ati_main_wrapper"> <div class="ati_main_wrapper">
<ati-mainmenu></ati-mainmenu> <ati-mainmenu></ati-mainmenu>
<h4> <h4>
<span class="floatLeft head">Exclusive Deals</span> <div class="width50">
<span class="floatRight more">All Deals</span> <span class="head">Exclusive Deals</span>
<div class="clear"></div> </div>
<div class="width50 textRight">
<span class="more">All Deals</span>
</div>
</h4> </h4>
<ati-offers></ati-offers> <ati-offers></ati-offers>
<h4> <h4>
<span class="floatLeft head">Upcoming Itinerary</span> <div class="width50">
<span class="floatRight more">More</span> <span class="head">Upcoming Itinerary</span>
<div class="clear"></div> </div>
<div class="width50 textRight">
<span class="more">More</span>
</div>
</h4> </h4>
<div class="upcoming_list"> <div class="upcoming_list">
<div class="itinary_inner"> <div class="itinary_inner">
<h5 class="floatLeft">Delhi <span><img src="../../../assets/mainmenu/arrow.png"></span> Mumbai</h5> <h5 class="">Delhi <span><img src="../../../assets/mainmenu/arrow.png"></span> Mumbai</h5>
<h6 class="floatRight">in 5 Days</h6> <h6 class="">in 5 Days</h6>
<div class="clear"></div> <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><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>
...@@ -24,9 +30,12 @@ ...@@ -24,9 +30,12 @@
<h4> <h4>
<strong>Trending</strong> <strong>Trending</strong>
<div> <div>
<span class="floatLeft head">Destinations</span> <div class="width50">
<span class="floatRight more">All Destinations</span> <span class="head">Destinations</span>
<div class="clear"></div> </div>
<div class="width50 textRight">
<span class="more">All Destinations</span>
</div>
</div> </div>
</h4> </h4>
......
src/app/home/mainmenu/mainmenu.component.html
<div class="main_menu_wrapper"> <div class="main_menu_wrapper">
<ul> <ul>
<li> <li>
<img src="../../../assets/mainmenu/menu_flight.png"> <div class="menu_icon flight">
</div>
<p>FLIGHT</p> <p>FLIGHT</p>
<div class="divison_layer"></div> <div class="divison_layer"></div>
</li> </li>
<li> <li>
<img src="../../../assets/mainmenu/menu_visa.png"> <div class="menu_icon visa">
</div>
<p>VISA</p> <p>VISA</p>
<div class="divison_layer"></div> <div class="divison_layer"></div>
</li> </li>
<li> <li>
<img src="../../../assets/mainmenu/menu_holiday.png"> <div class="menu_icon holiday">
</div>
<p>HOLIDAY</p> <p>HOLIDAY</p>
<div class="divison_layer"></div> <div class="divison_layer"></div>
</li> </li>
<li> <li>
<img src="../../../assets/mainmenu/menu_hotel.png"> <div class="menu_icon hotel">
</div>
<p>hotel</p> <p>hotel</p>
<div class="divison_layer"></div>
</li> </li>
<li> <li>
<img src="../../../assets/mainmenu/menu_forex.png"> <div class="menu_icon forex">
</div>
<p>forex</p> <p>forex</p>
</li> </li>
<li> <li>
<img src="../../../assets/mainmenu/menu_bus.png"> <div class="menu_icon bus">
</div>
<p>bus</p> <p>bus</p>
</li> </li>
<li> <li>
<img src="../../../assets/mainmenu/menu_inspire.png"> <div class="menu_icon inspire">
</div>
<p>inspire</p> <p>inspire</p>
</li> </li>
<li> <li>
<img src="../../../assets/mainmenu/menu_more.png"> <div class="menu_icon more">
</div>
<p>more</p> <p>more</p>
</li> </li>
</ul> </ul>
......
src/app/home/mainmenu/mainmenu.component.scss
$border_cm_color:#d7d8d9;
.main_menu_wrapper { .main_menu_wrapper {
.divison_layer {
position: absolute;
width: 20px;
height: 20px;
background: #fff;
bottom: -10px;
right: -10px;
z-index: 9;
}
ul { ul {
margin: 0px; margin: 0px;
padding: 0px; padding: 10px;
li { li {
list-style: none; list-style: none;
text-align: center; text-align: center;
width: calc(100% - 75.5%); width: calc(100% - 75.5%);
display: inline-block; display: inline-block;
padding-bottom: 15px; border: 1px solid $border_cm_color;
padding-top: 15px;
border: 1px solid #d7d8d9;
border-top: none; border-top: none;
border-left: none; border-left: none;
position: relative; position: relative;
img { .menu_icon {
width: 30px; width: 35px;
height: 35px;
margin: 0 auto;
background-image: url("../../../assets/mainmenu/menu.png");
background-repeat: no-repeat;
}
.flight {
background-position: top 1px left -44px;
}
.visa {
background-position: top -40px left 0px;
}
.holiday {
background-position: top 1px left -115px;
}
.hotel {
background-position: top 1px left -152px;
}
.forex {
background-position: top 1px left -78px;
}
.bus {
background-position: top 1px left -2px;
}
.more {
background-position: top 1px left -240px;
}
.inspire {
background-position: top 1px left -194px;
} }
p { p {
margin: 0px; margin: 0px;
text-align: center; text-align: center;
padding: 0px; padding: 0px;
text-transform: uppercase; text-transform: uppercase;
font-size: 14px; font-size: 12px;
padding-top: 3px; padding-top: 3px;
font-weight: 500; font-weight: 500;
padding-top: 10px;
} }
} }
li:nth-child(4) { li:nth-child(1) {
border-right: none; padding-bottom: 12px;
} }
li:nth-child(8) { li:nth-child(2) {
padding-bottom: 12px;
}
li:nth-child(3) {
padding-bottom: 12px;
}
li:nth-child(4) {
border-right: none; border-right: none;
padding-bottom: 12px;
} }
li:nth-last-child(1) { li:nth-last-child(1) {
border-bottom: none; border-bottom: none;
padding-top: 12px;
border-right: none;
} }
li:nth-last-child(2) { li:nth-last-child(2) {
border-bottom: none; border-bottom: none;
padding-top: 12px;
} }
li:nth-last-child(3) { li:nth-last-child(3) {
border-bottom: none; border-bottom: none;
padding-top: 12px;
} }
li:nth-last-child(4) { li:nth-last-child(4) {
border-bottom: none; border-bottom: none;
padding-top: 12px;
} }
} }
} }
\ No newline at end of file
src/app/home/navbar/navbar.component.html
<div class="nav_header"> <div class="nav_header">
<div class="nav_btn nav_menu floatLeft" (click)="menuToggle()"></div> <div class="nav_btn nav_menu" (click)="menuToggle()"></div>
<div class="nav_title floatLeft"> <div class="nav_title">
<img src="../../../assets/navbar/nav_logo.png"> <img src="../../../assets/navbar/nav_logo.png">
</div> </div>
<div class="clear"></div> <div class="clear"></div>
</div> </div>
<div class="menu_wrapper" *ngIf="menuShow" [@slideInOut]> <div class="menu_wrapper" *ngIf="menuShow" [@slideInOut]>
<div class="menu_main_section"> <div class="menu_main_section">
<div class="nav_btn nav_menu floatLeft" (click)="menuToggle()"></div> <div class="nav_btn nav_menu" (click)="menuToggle()"></div>
<div class="clear"></div> <div class="clear"></div>
<ati-navmenu></ati-navmenu> <ati-navmenu></ati-navmenu>
</div> </div>
......
src/app/home/offers/offers.component.html
<div class="offer_slider"> <div class="offer_slider">
<ngx-slick class="carousel" #slickModal="slick-modal" [config]="slideConfig" (afterChange)="afterChange($event)"> <!-- <ngx-slick class="carousel" #slickModal="slick-modal" [config]="slideConfig" (afterChange)="afterChange($event)">
<div ngxSlickItem class="slide"> <div ngxSlickItem class="slide">
<div class="inner_slider"> <div class="inner_slider">
<div class="content_inner">
<h3>Airfares starting at Rs. 899*</h3>
<p>Flights, 1080 Hotels, 410 Homestays,<br> Holiday Packages get 1080 Hotels, 410 Homestays..</p>
</div>
<div class="coupon_code"> <div class="coupon_code">
<div class="code"> <div class="code">
Code : AT 500 Code : AT 500
...@@ -15,6 +20,10 @@ ...@@ -15,6 +20,10 @@
</div> </div>
<div ngxSlickItem class="slide"> <div ngxSlickItem class="slide">
<div class="inner_slider"> <div class="inner_slider">
<div class="content_inner">
<h3>Airfares starting at Rs. 899*</h3>
<p>Flights, 1080 Hotels, 410 Homestays,<br> Holiday Packages get 1080 Hotels, 410 Homestays..</p>
</div>
<div class="coupon_code"> <div class="coupon_code">
<div class="code"> <div class="code">
Code : AT 500 Code : AT 500
...@@ -27,6 +36,10 @@ ...@@ -27,6 +36,10 @@
</div> </div>
<div ngxSlickItem class="slide"> <div ngxSlickItem class="slide">
<div class="inner_slider"> <div class="inner_slider">
<div class="content_inner">
<h3>Airfares starting at Rs. 899*</h3>
<p>Flights, 1080 Hotels, 410 Homestays,<br> Holiday Packages get 1080 Hotels, 410 Homestays..</p>
</div>
<div class="coupon_code"> <div class="coupon_code">
<div class="code"> <div class="code">
Code : AT 500 Code : AT 500
...@@ -39,6 +52,10 @@ ...@@ -39,6 +52,10 @@
</div> </div>
<div ngxSlickItem class="slide"> <div ngxSlickItem class="slide">
<div class="inner_slider"> <div class="inner_slider">
<div class="content_inner">
<h3>Airfares starting at Rs. 899*</h3>
<p>Flights, 1080 Hotels, 410 Homestays,<br> Holiday Packages get 1080 Hotels, 410 Homestays..</p>
</div>
<div class="coupon_code"> <div class="coupon_code">
<div class="code"> <div class="code">
Code : AT 500 Code : AT 500
...@@ -50,5 +67,5 @@ ...@@ -50,5 +67,5 @@
<img src="../../../assets/offer/bottom_ribbon.png"> <img src="../../../assets/offer/bottom_ribbon.png">
</div> </div>
</ngx-slick> </ngx-slick> -->
</div> </div>
\ No newline at end of file
src/app/home/offers/offers.component.scss
...@@ -10,6 +10,11 @@ ...@@ -10,6 +10,11 @@
.inner_slider { .inner_slider {
height: 160px; height: 160px;
width: 100%; width: 100%;
.content_inner {
position: relative;
top: 10px;
left: 15px;
}
background-image: url("../../../assets/offer/offer_temp.png"); background-image: url("../../../assets/offer/offer_temp.png");
background-position: center; background-position: center;
background-repeat: no-repeat; background-repeat: no-repeat;
...@@ -17,6 +22,22 @@ ...@@ -17,6 +22,22 @@
border-radius: 10px; border-radius: 10px;
border-bottom-right-radius: 0px; border-bottom-right-radius: 0px;
position: relative; position: relative;
.content_inner {
h3 {
margin: 0px;
padding: 0px;
color: #fff;
padding-top: 10px;
padding-bottom: 10px;
}
p {
margin: 0px;
padding: 0px;
color: #fff;
font-size: 13px;
font-weight: 300;
}
}
.coupon_code { .coupon_code {
border: 1px dashed #fff; border: 1px dashed #fff;
background-size: 9px; background-size: 9px;
......
src/app/home/offers/offers.component.ts
...@@ -13,7 +13,6 @@ export class OffersComponent implements OnInit { ...@@ -13,7 +13,6 @@ export class OffersComponent implements OnInit {
} }
slideConfig = { "slidesToShow": 1.1, "slidesToScroll": 1 ,"adaptiveheight":true};
afterChange(e) { afterChange(e) {
......
src/index.html
...@@ -8,11 +8,7 @@ ...@@ -8,11 +8,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico"> <link rel="icon" type="image/x-icon" href="favicon.ico">
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/[email protected]/slick/slick.css" />
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/[email protected]/slick/slick-theme.css" />
<script src="//code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="//unpkg.com/[email protected]/slick/slick.js"></script>
</head> </head>
<body> <body>
......
src/styles.scss
...@@ -161,18 +161,22 @@ button { ...@@ -161,18 +161,22 @@ button {
.width25 { .width25 {
width: 25% !important; width: 25% !important;
display: inline-block;
} }
.width50 { .width50 {
width: 50% !important; width: 50% !important;
display: inline-block;
} }
.width75 { .width75 {
width: 75% !important; width: 75% !important;
display: inline-block;
} }
.widthFull { .widthFull {
width: 100% !important; width: 100% !important;
display: inline-block;
} }
.widthAuto { .widthAuto {
...@@ -278,14 +282,6 @@ button { ...@@ -278,14 +282,6 @@ button {
--------------------------------*/ --------------------------------*/
.floatLeft {
float: left !important;
}
.floatRight {
float: right !important;
}
.textLeft { .textLeft {
text-align: left !important; text-align: left !important;
} }
...@@ -321,10 +317,12 @@ button { ...@@ -321,10 +317,12 @@ button {
background-position: center; background-position: center;
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: 30px; background-size: 30px;
display: inline-flex;
} }
.nav_title { .nav_title {
width: calc(100% - 100px); width: calc(100% - 100px);
display: inline-flex;
color: rgba(59, 57, 77, 1); color: rgba(59, 57, 77, 1);
padding: 12px; padding: 12px;
padding-left: 5px; padding-left: 5px;
...@@ -333,6 +331,7 @@ button { ...@@ -333,6 +331,7 @@ button {
text-align: center; text-align: center;
img { img {
height: 40px; height: 40px;
margin: 0 auto;
} }
h4 { h4 {
margin: 0px; margin: 0px;
......
tsconfig.json
...@@ -2,15 +2,16 @@ ...@@ -2,15 +2,16 @@
"compileOnSave": false, "compileOnSave": false,
"compilerOptions": { "compilerOptions": {
"baseUrl": "./", "baseUrl": "./",
"downlevelIteration": true,
"outDir": "./dist/out-tsc", "outDir": "./dist/out-tsc",
"sourceMap": true, "sourceMap": true,
"declaration": false, "declaration": false,
"module": "es2015", "module": "esnext",
"moduleResolution": "node", "moduleResolution": "node",
"emitDecoratorMetadata": true, "emitDecoratorMetadata": true,
"experimentalDecorators": true, "experimentalDecorators": true,
"importHelpers": true, "importHelpers": true,
"target": "es5", "target": "es2015",
"typeRoots": [ "typeRoots": [
"node_modules/@types" "node_modules/@types"
], ],
......
tslint.json
...@@ -118,12 +118,12 @@ ...@@ -118,12 +118,12 @@
"check-type" "check-type"
], ],
"no-output-on-prefix": true, "no-output-on-prefix": true,
"use-input-property-decorator": true, "no-inputs-metadata-property": true,
"use-output-property-decorator": true, "no-outputs-metadata-property": true,
"use-host-property-decorator": true, "no-host-metadata-property": true,
"no-input-rename": true, "no-input-rename": true,
"no-output-rename": true, "no-output-rename": true,
"use-life-cycle-interface": true, "use-lifecycle-interface": true,
"use-pipe-transform-interface": true, "use-pipe-transform-interface": true,
"component-class-suffix": true, "component-class-suffix": true,
"directive-class-suffix": true "directive-class-suffix": true
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment