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 @@
"private": true,
"dependencies": {
"@angular/animations": "^7.1.4",
"@angular/cdk": "^8.2.0",
"@angular/common": "~7.1.0",
"@angular/compiler": "~7.1.0",
"@angular/core": "~7.1.0",
"@angular/flex-layout": "^6.0.0-beta.18",
"@angular/forms": "~7.1.0",
"@angular/platform-browser": "~7.1.0",
"@angular/platform-browser-dynamic": "~7.1.0",
"@angular/router": "~7.1.0",
"@ngu/carousel": "^1.5.5",
"core-js": "^2.5.4",
"ngx-slick": "^0.2.1",
"rxjs": "~6.3.3",
"tslib": "^1.9.0",
"zone.js": "~0.8.26"
"zone.js": "~0.9.1"
},
"devDependencies": {
"@angular-devkit/build-angular": "~0.11.0",
"@angular/cli": "~7.1.3",
"@angular-devkit/build-angular": "~0.12.4",
"@angular/cli": "7.1.0",
"@angular/compiler-cli": "~7.1.0",
"@angular/language-service": "~7.1.0",
"@types/node": "~8.9.4",
"@types/jasmine": "~2.8.8",
"@types/jasminewd2": "~2.0.3",
"codelyzer": "~4.5.0",
"@types/node": "~8.9.4",
"codelyzer": "^5.0.1",
"jasmine-core": "~2.99.1",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~3.1.1",
......
src/app/home/destination/destination.component.html
<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 class="inner_slider">
<div class="inner_overlay">
......@@ -78,5 +78,5 @@
<img src="../../../assets/destination/dubai.png">
</div>
</div>
</ngx-slick>
</ngx-slick> -->
</div>
\ No newline at end of file
src/app/home/destination/destination.component.ts
......@@ -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';
import { IndexComponent } from './index/index.component';
import { moduleRouting } from './home.routing';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { SlickModule } from 'ngx-slick';
import { DestinationComponent } from './destination/destination.component';
import { FlexLayoutModule } from '@angular/flex-layout';
......@@ -17,7 +18,7 @@ import { DestinationComponent } from './destination/destination.component';
imports: [
CommonModule,
moduleRouting,
SlickModule.forRoot(),
FlexLayoutModule,
BrowserAnimationsModule
]
})
......
src/app/home/index/index.component.html
......@@ -2,20 +2,26 @@
<div class="ati_main_wrapper">
<ati-mainmenu></ati-mainmenu>
<h4>
<span class="floatLeft head">Exclusive Deals</span>
<span class="floatRight more">All Deals</span>
<div class="clear"></div>
<div class="width50">
<span class="head">Exclusive Deals</span>
</div>
<div class="width50 textRight">
<span class="more">All Deals</span>
</div>
</h4>
<ati-offers></ati-offers>
<h4>
<span class="floatLeft head">Upcoming Itinerary</span>
<span class="floatRight more">More</span>
<div class="clear"></div>
<div class="width50">
<span class="head">Upcoming Itinerary</span>
</div>
<div class="width50 textRight">
<span class="more">More</span>
</div>
</h4>
<div class="upcoming_list">
<div class="itinary_inner">
<h5 class="floatLeft">Delhi <span><img src="../../../assets/mainmenu/arrow.png"></span> Mumbai</h5>
<h6 class="floatRight">in 5 Days</h6>
<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>
</div>
......@@ -24,9 +30,12 @@
<h4>
<strong>Trending</strong>
<div>
<span class="floatLeft head">Destinations</span>
<span class="floatRight more">All Destinations</span>
<div class="clear"></div>
<div class="width50">
<span class="head">Destinations</span>
</div>
<div class="width50 textRight">
<span class="more">All Destinations</span>
</div>
</div>
</h4>
......
src/app/home/mainmenu/mainmenu.component.html
<div class="main_menu_wrapper">
<ul>
<li>
<img src="../../../assets/mainmenu/menu_flight.png">
<div class="menu_icon flight">
</div>
<p>FLIGHT</p>
<div class="divison_layer"></div>
</li>
<li>
<img src="../../../assets/mainmenu/menu_visa.png">
<div class="menu_icon visa">
</div>
<p>VISA</p>
<div class="divison_layer"></div>
</li>
<li>
<img src="../../../assets/mainmenu/menu_holiday.png">
<div class="menu_icon holiday">
</div>
<p>HOLIDAY</p>
<div class="divison_layer"></div>
</li>
<li>
<img src="../../../assets/mainmenu/menu_hotel.png">
<div class="menu_icon hotel">
</div>
<p>hotel</p>
<div class="divison_layer"></div>
</li>
<li>
<img src="../../../assets/mainmenu/menu_forex.png">
<div class="menu_icon forex">
</div>
<p>forex</p>
</li>
<li>
<img src="../../../assets/mainmenu/menu_bus.png">
<div class="menu_icon bus">
</div>
<p>bus</p>
</li>
<li>
<img src="../../../assets/mainmenu/menu_inspire.png">
<div class="menu_icon inspire">
</div>
<p>inspire</p>
</li>
<li>
<img src="../../../assets/mainmenu/menu_more.png">
<div class="menu_icon more">
</div>
<p>more</p>
</li>
</ul>
......
src/app/home/mainmenu/mainmenu.component.scss
$border_cm_color:#d7d8d9;
.main_menu_wrapper {
.divison_layer {
position: absolute;
width: 20px;
height: 20px;
background: #fff;
bottom: -10px;
right: -10px;
z-index: 9;
}
ul {
margin: 0px;
padding: 0px;
padding: 10px;
li {
list-style: none;
text-align: center;
width: calc(100% - 75.5%);
display: inline-block;
padding-bottom: 15px;
padding-top: 15px;
border: 1px solid #d7d8d9;
border: 1px solid $border_cm_color;
border-top: none;
border-left: none;
position: relative;
img {
width: 30px;
.menu_icon {
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 {
margin: 0px;
text-align: center;
padding: 0px;
text-transform: uppercase;
font-size: 14px;
font-size: 12px;
padding-top: 3px;
font-weight: 500;
padding-top: 10px;
}
}
li:nth-child(4) {
border-right: none;
li:nth-child(1) {
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;
padding-bottom: 12px;
}
li:nth-last-child(1) {
border-bottom: none;
padding-top: 12px;
border-right: none;
}
li:nth-last-child(2) {
border-bottom: none;
padding-top: 12px;
}
li:nth-last-child(3) {
border-bottom: none;
padding-top: 12px;
}
li:nth-last-child(4) {
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_btn nav_menu floatLeft" (click)="menuToggle()"></div>
<div class="nav_title floatLeft">
<div class="nav_btn nav_menu" (click)="menuToggle()"></div>
<div class="nav_title">
<img src="../../../assets/navbar/nav_logo.png">
</div>
<div class="clear"></div>
</div>
<div class="menu_wrapper" *ngIf="menuShow" [@slideInOut]>
<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>
<ati-navmenu></ati-navmenu>
</div>
......
src/app/home/offers/offers.component.html
<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 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="code">
Code : AT 500
......@@ -15,6 +20,10 @@
</div>
<div ngxSlickItem class="slide">
<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="code">
Code : AT 500
......@@ -27,6 +36,10 @@
</div>
<div ngxSlickItem class="slide">
<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="code">
Code : AT 500
......@@ -39,6 +52,10 @@
</div>
<div ngxSlickItem class="slide">
<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="code">
Code : AT 500
......@@ -50,5 +67,5 @@
<img src="../../../assets/offer/bottom_ribbon.png">
</div>
</ngx-slick>
</ngx-slick> -->
</div>
\ No newline at end of file
src/app/home/offers/offers.component.scss
......@@ -10,6 +10,11 @@
.inner_slider {
height: 160px;
width: 100%;
.content_inner {
position: relative;
top: 10px;
left: 15px;
}
background-image: url("../../../assets/offer/offer_temp.png");
background-position: center;
background-repeat: no-repeat;
......@@ -17,6 +22,22 @@
border-radius: 10px;
border-bottom-right-radius: 0px;
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 {
border: 1px dashed #fff;
background-size: 9px;
......
src/app/home/offers/offers.component.ts
......@@ -13,7 +13,6 @@ export class OffersComponent implements OnInit {
}
slideConfig = { "slidesToShow": 1.1, "slidesToScroll": 1 ,"adaptiveheight":true};
afterChange(e) {
......
src/index.html
......@@ -8,11 +8,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1">
<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>
<body>
......
src/styles.scss
......@@ -161,18 +161,22 @@ 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 {
......@@ -278,14 +282,6 @@ button {
--------------------------------*/
.floatLeft {
float: left !important;
}
.floatRight {
float: right !important;
}
.textLeft {
text-align: left !important;
}
......@@ -321,10 +317,12 @@ 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;
......@@ -333,6 +331,7 @@ button {
text-align: center;
img {
height: 40px;
margin: 0 auto;
}
h4 {
margin: 0px;
......
tsconfig.json
......@@ -2,15 +2,16 @@
"compileOnSave": false,
"compilerOptions": {
"baseUrl": "./",
"downlevelIteration": true,
"outDir": "./dist/out-tsc",
"sourceMap": true,
"declaration": false,
"module": "es2015",
"module": "esnext",
"moduleResolution": "node",
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"importHelpers": true,
"target": "es5",
"target": "es2015",
"typeRoots": [
"node_modules/@types"
],
......
tslint.json
......@@ -118,12 +118,12 @@
"check-type"
],
"no-output-on-prefix": true,
"use-input-property-decorator": true,
"use-output-property-decorator": true,
"use-host-property-decorator": true,
"no-inputs-metadata-property": true,
"no-outputs-metadata-property": true,
"no-host-metadata-property": true,
"no-input-rename": true,
"no-output-rename": true,
"use-life-cycle-interface": true,
"use-lifecycle-interface": true,
"use-pipe-transform-interface": true,
"component-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