Skip to content
Projects
Groups
Snippets
Help
This project
Loading...
Sign in / Register
Toggle navigation
A
ati
Project
Overview
Details
Activity
Cycle Analytics
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Charts
Issues
0
Issues
0
List
Board
Labels
Milestones
Merge Requests
0
Merge Requests
0
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Charts
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Charts
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
amal
ati
Commits
2d227b51
Commit
2d227b51
authored
5 years ago
by
inspirations
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
25-09-2015
parent
55dbaf38
Show whitespace changes
Inline
Side-by-side
Showing
12 changed files
with
114 additions
and
240 deletions
+114
-240
.angulardoc.json
.angulardoc.json
+5
-0
package-lock.json
package-lock.json
+30
-11
carousel.component.ts
src/app/home/carousel/carousel.component.ts
+2
-93
carousel.html
src/app/home/carousel/carousel.html
+12
-0
carousel.scss
src/app/home/carousel/carousel.scss
+11
-0
home.module.ts
src/app/home/home.module.ts
+12
-2
index.component.html
src/app/home/index/index.component.html
+1
-32
index.component.ts
src/app/home/index/index.component.ts
+1
-5
mainmenu.component.html
src/app/home/mainmenu/mainmenu.component.html
+3
-3
mainmenu.component.scss
src/app/home/mainmenu/mainmenu.component.scss
+1
-0
offers.component.html
src/app/home/offers/offers.component.html
+27
-0
offers.component.ts
src/app/home/offers/offers.component.ts
+9
-94
No files found.
.angulardoc.json
0 → 100644
View file @
2d227b51
{
"repoId"
:
"063f3cfe-6b38-4dd7-b3ce-70f163b8291e"
,
"lastSync"
:
0
}
\ No newline at end of file
This diff is collapsed.
Click to expand it.
package-lock.json
View file @
2d227b51
...
...
@@ -3931,7 +3931,8 @@
"ansi-regex"
:
{
"version"
:
"2.1.1"
,
"bundled"
:
true
,
"dev"
:
true
"dev"
:
true
,
"optional"
:
true
},
"aproba"
:
{
"version"
:
"1.2.0"
,
...
...
@@ -3952,12 +3953,14 @@
"balanced-match"
:
{
"version"
:
"1.0.0"
,
"bundled"
:
true
,
"dev"
:
true
"dev"
:
true
,
"optional"
:
true
},
"brace-expansion"
:
{
"version"
:
"1.1.11"
,
"bundled"
:
true
,
"dev"
:
true
,
"optional"
:
true
,
"requires"
:
{
"balanced-match"
:
"^1.0.0"
,
"concat-map"
:
"0.0.1"
...
...
@@ -3972,17 +3975,20 @@
"code-point-at"
:
{
"version"
:
"1.1.0"
,
"bundled"
:
true
,
"dev"
:
true
"dev"
:
true
,
"optional"
:
true
},
"concat-map"
:
{
"version"
:
"0.0.1"
,
"bundled"
:
true
,
"dev"
:
true
"dev"
:
true
,
"optional"
:
true
},
"console-control-strings"
:
{
"version"
:
"1.1.0"
,
"bundled"
:
true
,
"dev"
:
true
"dev"
:
true
,
"optional"
:
true
},
"core-util-is"
:
{
"version"
:
"1.0.2"
,
...
...
@@ -4099,7 +4105,8 @@
"inherits"
:
{
"version"
:
"2.0.3"
,
"bundled"
:
true
,
"dev"
:
true
"dev"
:
true
,
"optional"
:
true
},
"ini"
:
{
"version"
:
"1.3.5"
,
...
...
@@ -4111,6 +4118,7 @@
"version"
:
"1.0.0"
,
"bundled"
:
true
,
"dev"
:
true
,
"optional"
:
true
,
"requires"
:
{
"number-is-nan"
:
"^1.0.0"
}
...
...
@@ -4125,6 +4133,7 @@
"version"
:
"3.0.4"
,
"bundled"
:
true
,
"dev"
:
true
,
"optional"
:
true
,
"requires"
:
{
"brace-expansion"
:
"^1.1.7"
}
...
...
@@ -4132,12 +4141,14 @@
"minimist"
:
{
"version"
:
"0.0.8"
,
"bundled"
:
true
,
"dev"
:
true
"dev"
:
true
,
"optional"
:
true
},
"minipass"
:
{
"version"
:
"2.3.5"
,
"bundled"
:
true
,
"dev"
:
true
,
"optional"
:
true
,
"requires"
:
{
"safe-buffer"
:
"^5.1.2"
,
"yallist"
:
"^3.0.0"
...
...
@@ -4156,6 +4167,7 @@
"version"
:
"0.5.1"
,
"bundled"
:
true
,
"dev"
:
true
,
"optional"
:
true
,
"requires"
:
{
"minimist"
:
"0.0.8"
}
...
...
@@ -4236,7 +4248,8 @@
"number-is-nan"
:
{
"version"
:
"1.0.1"
,
"bundled"
:
true
,
"dev"
:
true
"dev"
:
true
,
"optional"
:
true
},
"object-assign"
:
{
"version"
:
"4.1.1"
,
...
...
@@ -4248,6 +4261,7 @@
"version"
:
"1.4.0"
,
"bundled"
:
true
,
"dev"
:
true
,
"optional"
:
true
,
"requires"
:
{
"wrappy"
:
"1"
}
...
...
@@ -4333,7 +4347,8 @@
"safe-buffer"
:
{
"version"
:
"5.1.2"
,
"bundled"
:
true
,
"dev"
:
true
"dev"
:
true
,
"optional"
:
true
},
"safer-buffer"
:
{
"version"
:
"2.1.2"
,
...
...
@@ -4369,6 +4384,7 @@
"version"
:
"1.0.2"
,
"bundled"
:
true
,
"dev"
:
true
,
"optional"
:
true
,
"requires"
:
{
"code-point-at"
:
"^1.0.0"
,
"is-fullwidth-code-point"
:
"^1.0.0"
,
...
...
@@ -4388,6 +4404,7 @@
"version"
:
"3.0.1"
,
"bundled"
:
true
,
"dev"
:
true
,
"optional"
:
true
,
"requires"
:
{
"ansi-regex"
:
"^2.0.0"
}
...
...
@@ -4431,12 +4448,14 @@
"wrappy"
:
{
"version"
:
"1.0.2"
,
"bundled"
:
true
,
"dev"
:
true
"dev"
:
true
,
"optional"
:
true
},
"yallist"
:
{
"version"
:
"3.0.3"
,
"bundled"
:
true
,
"dev"
:
true
"dev"
:
true
,
"optional"
:
true
}
}
},
...
...
This diff is collapsed.
Click to expand it.
src/app/home/car
i
usel/carousel.component.ts
→
src/app/home/car
o
usel/carousel.component.ts
View file @
2d227b51
...
...
@@ -11,99 +11,8 @@ export class CarouselItemElement {
@
Component
({
selector
:
'carousel'
,
exportAs
:
'carousel'
,
template
:
`
<section class="carousel-wrapper" [ngStyle]="carouselWrapperStyle">
<ul class="carousel-inner" #carousel>
<li *ngFor="let item of items;" class="carousel-item">
<ng-container [ngTemplateOutlet]="item.tpl"></ng-container>
</li>
</ul>
</section>
<div *ngIf="showControls" style="margin-top: 1em">
<button (click)="next()" class="btn btn-default">Next</button>
<button (click)="prev()" class="btn btn-default">Prev</button>
</div>
`
,
styles
:
[
`
.offer_slider {
padding: 10px;
padding-top: 0px;
.slick-slide {
margin: 0 5px;
}
.slide {
position: relative;
padding-bottom: 10px;
.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;
background-size: cover;
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;
position: absolute;
bottom: 10px;
right: 10px;
border-radius: 3px;
background-image: url("../../../assets/offer/copy.png");
background-position: right 10px top 10px;
background-repeat: no-repeat;
padding-right: 30px;
font-size: 11px;
.code {
color: #fff;
padding: 8px;
border-right: 1px dashed #fff;
}
.copy {}
}
}
img {
position: absolute;
bottom: 7px;
right: 0px;
left: 55px;
width: calc(100% - 55px);
}
}
}
.carousel-wrapper {
overflow: hidden;
}
.carousel-inner {
display: flex;
}
`
]
templateUrl
:
'./carousel.html'
,
styleUrls
:
[
'./carousel.scss'
]
})
export
class
CarouselComponent
implements
AfterViewInit
{
@
ContentChildren
(
CarouselDirective
)
items
:
QueryList
<
CarouselDirective
>
;
...
...
This diff is collapsed.
Click to expand it.
src/app/home/carousel/carousel.html
0 → 100644
View file @
2d227b51
<section
class=
"carousel-wrapper"
[
ngStyle
]="
carouselWrapperStyle
"
>
<ul
class=
"carousel-inner"
#
carousel
>
<li
*
ngFor=
"let item of items;"
class=
"carousel-item"
>
<ng-container
[
ngTemplateOutlet
]="
item
.
tpl
"
></ng-container>
</li>
</ul>
</section>
<div
*
ngIf=
"showControls"
style=
"margin-top: 1em"
>
<button
(
click
)="
next
()"
class=
"btn btn-default"
>
Next
</button>
<button
(
click
)="
prev
()"
class=
"btn btn-default"
>
Prev
</button>
</div>
\ No newline at end of file
This diff is collapsed.
Click to expand it.
src/app/home/carousel/carousel.scss
0 → 100644
View file @
2d227b51
.carousel-wrapper
{
min-width
:
100%
;
ul
{
margin
:
0px
;
padding
:
0px
;
li
{
width
:
auto
;
}
}
}
\ No newline at end of file
This diff is collapsed.
Click to expand it.
src/app/home/home.module.ts
View file @
2d227b51
...
...
@@ -10,11 +10,21 @@ import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import
{
DestinationComponent
}
from
'./destination/destination.component'
;
import
{
FlexLayoutModule
}
from
'@angular/flex-layout'
;
import
{
CarouselDirective
}
from
'./../directives/carousel.directive'
;
import
{
CarouselComponent
,
CarouselItemElement
}
from
'./car
i
usel/carousel.component'
;
import
{
CarouselComponent
,
CarouselItemElement
}
from
'./car
o
usel/carousel.component'
;
@
NgModule
({
declarations
:
[
NavbarComponent
,
NavmenuComponent
,
MainmenuComponent
,
OffersComponent
,
IndexComponent
,
DestinationComponent
,
CarouselDirective
,
CarouselItemElement
,
CarouselComponent
],
declarations
:
[
NavbarComponent
,
NavmenuComponent
,
MainmenuComponent
,
OffersComponent
,
IndexComponent
,
DestinationComponent
,
CarouselDirective
,
CarouselItemElement
,
CarouselComponent
],
imports
:
[
CommonModule
,
moduleRouting
,
...
...
This diff is collapsed.
Click to expand it.
src/app/home/index/index.component.html
View file @
2d227b51
...
...
@@ -9,39 +9,8 @@
<span
class=
"more"
>
All Deals
</span>
</div>
</h4>
<!-- <ati-offers>
<ng-container *ngFor="let item of items;">
<ng-container *carouselItem>
<div class="item">{{item.title}}</div>
</ng-container>
</ng-container>
</ati-offers> -->
<carousel>
<ng-container
*
ngFor=
"let item of items;"
>
<ng-container
*
carouselItem
>
<div
class=
"offer_slider"
>
<div
class=
"slide"
>
<div
class=
"inner_slider"
>
<div
class=
"content_inner"
>
<h3>
{{item.title}}
</h3>
<p
[
innerHTML
]="
item
.
desc
"
></p>
</div>
<div
class=
"coupon_code"
>
<div
class=
"code"
>
Code : {{item.code}}
</div>
<div
class=
"copy"
>
</div>
</div>
</div>
<img
src=
"../../../assets/offer/bottom_ribbon.png"
>
</div>
</div>
</ng-container>
</ng-container>
</carousel>
<offers></offers>
<h4>
<div
class=
"width50"
>
<span
class=
"head"
>
Upcoming Itinerary
</span>
...
...
This diff is collapsed.
Click to expand it.
src/app/home/index/index.component.ts
View file @
2d227b51
...
...
@@ -7,11 +7,7 @@ import { Component, OnInit } from '@angular/core';
styleUrls
:
[
'./index.component.scss'
]
})
export
class
IndexComponent
implements
OnInit
{
items
=
[
{
title
:
'Airfares starting at Rs. 899*'
,
desc
:
'Flights, 1080 Hotels, 410 Homestays,<br> Holiday Packages get 1080 Hotels, 410 Homestays..'
,
code
:
'AT 500'
},
{
title
:
'Airfares starting at Rs. 899*'
,
desc
:
'Flights, 1080 Hotels, 410 Homestays,<br> Holiday Packages get 1080 Hotels, 410 Homestays..'
,
code
:
'AT 500'
},
{
title
:
'Airfares starting at Rs. 899*'
,
desc
:
'Flights, 1080 Hotels, 410 Homestays,<br> Holiday Packages get 1080 Hotels, 410 Homestays..'
,
code
:
'AT 500'
},
]
constructor
()
{
}
...
...
This diff is collapsed.
Click to expand it.
src/app/home/mainmenu/mainmenu.component.html
View file @
2d227b51
<div
class=
"main_menu_wrapper"
fxLayout=
"row"
fxLayoutAlign=
"space-around center"
fxLayoutGap=
"10px"
fxFlexAlign=
"center"
>
<
!-- <
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" />
...
...
@@ -26,10 +26,10 @@
</div>
<p>Hotel</p>
</div>
</div>
</div>
-->
<div
class=
"main_menu_wrapper"
>
<div
class=
"main_menu_wrapper"
fxLayout=
"row"
fxLayoutAlign=
"space-around center"
fxLayoutGap=
"10px"
fxFlexAlign=
"center"
>
<ul>
<li>
<div
class=
"menu_icon flight "
>
...
...
This diff is collapsed.
Click to expand it.
src/app/home/mainmenu/mainmenu.component.scss
View file @
2d227b51
...
...
@@ -12,6 +12,7 @@ $border_cm_color:#d7d8d9;
ul
{
margin
:
0px
;
padding
:
10px
;
width
:
100%
;
li
{
list-style
:
none
;
text-align
:
center
;
...
...
This diff is collapsed.
Click to expand it.
src/app/home/offers/offers.component.html
View file @
2d227b51
<carousel>
<ng-container
*
ngFor=
"let item of items;"
>
<ng-container
*
carouselItem
>
<div
class=
"offer_slider"
>
<div
class=
"slide"
>
<div
class=
"inner_slider"
>
<div
class=
"content_inner"
>
<h3>
{{item.title}}
</h3>
<p
[
innerHTML
]="
item
.
desc
"
></p>
</div>
<div
class=
"coupon_code"
>
<div
class=
"code"
>
Code : {{item.code}}
</div>
<div
class=
"copy"
>
</div>
</div>
</div>
<img
src=
"../../../assets/offer/bottom_ribbon.png"
>
</div>
</div>
</ng-container>
</ng-container>
</carousel>
\ No newline at end of file
This diff is collapsed.
Click to expand it.
src/app/home/offers/offers.component.ts
View file @
2d227b51
import
{
AfterViewInit
,
Component
,
ContentChildren
,
Directive
,
ElementRef
,
Input
,
OnInit
,
QueryList
,
TemplateRef
,
ViewChild
,
ViewChildren
}
from
'@angular/core'
;
import
{
CarouselDirective
}
from
'./../../directives/carousel.directive'
;
import
{
animate
,
AnimationBuilder
,
AnimationFactory
,
AnimationPlayer
,
style
}
from
'@angular/animations'
;
@
Directive
({
selector
:
'.carousel-item'
})
export
class
CarouselItemElement
{
}
import
{
Component
,
OnInit
}
from
'@angular/core'
;
@
Component
({
selector
:
'ati-offers'
,
template
:
`
<section class="carousel-wrapper" [ngStyle]="carouselWrapperStyle">
<ul class="carousel-inner" #carousel>
<li *ngFor="let item of items;" class="carousel-item">
<ng-container [ngTemplateOutlet]="item.tpl"></ng-container>
</li>
</ul>
</section>
<div *ngIf="showControls" style="margin-top: 1em">
<button (click)="next()" class="btn btn-default">Next</button>
<button (click)="prev()" class="btn btn-default">Prev</button>
</div>
`
,
styles
:
[
`
ul {
list-style: none;
margin: 0;
padding: 0;
width: 6000px;
}
.carousel-wrapper {
overflow: hidden;
}
.carousel-inner {
display: flex;
}
`
]
selector
:
'offers'
,
templateUrl
:
'./offers.component.html'
,
styleUrls
:
[
'./offers.component.scss'
]
})
export
class
OffersComponent
{
@
ContentChildren
(
CarouselDirective
)
items
:
QueryList
<
CarouselDirective
>
;
@
ViewChildren
(
OffersComponent
,
{
read
:
ElementRef
})
private
itemsElements
:
QueryList
<
ElementRef
>
;
@
ViewChild
(
'carousel'
,
{
static
:
false
})
private
carousel
:
ElementRef
;
@
Input
()
timing
=
'250ms ease-in'
;
@
Input
()
showControls
=
true
;
private
player
:
AnimationPlayer
;
private
itemWidth
:
number
;
private
currentSlide
=
0
;
carouselWrapperStyle
=
{}
constructor
(
private
builder
:
AnimationBuilder
)
{
}
items
=
[
{
title
:
'Airfares starting at Rs. 899*'
,
desc
:
'Flights, 1080 Hotels, 410 Homestays,<br> Holiday Packages get 1080 Hotels, 410 Homestays..'
,
code
:
'AT 500'
},
{
title
:
'Airfares starting at Rs. 899*'
,
desc
:
'Flights, 1080 Hotels, 410 Homestays,<br> Holiday Packages get 1080 Hotels, 410 Homestays..'
,
code
:
'AT 500'
},
{
title
:
'Airfares starting at Rs. 899*'
,
desc
:
'Flights, 1080 Hotels, 410 Homestays,<br> Holiday Packages get 1080 Hotels, 410 Homestays..'
,
code
:
'AT 500'
},
]
ngOnInit
()
{
}
next
()
{
if
(
this
.
currentSlide
+
1
===
this
.
items
.
length
)
return
;
this
.
currentSlide
=
(
this
.
currentSlide
+
1
)
%
this
.
items
.
length
;
const
offset
=
this
.
currentSlide
*
this
.
itemWidth
;
const
myAnimation
:
AnimationFactory
=
this
.
buildAnimation
(
offset
);
this
.
player
=
myAnimation
.
create
(
this
.
carousel
.
nativeElement
);
this
.
player
.
play
();
}
private
buildAnimation
(
offset
)
{
return
this
.
builder
.
build
([
animate
(
this
.
timing
,
style
({
transform
:
`translateX(-
${
offset
}
px)`
}))
]);
}
prev
()
{
if
(
this
.
currentSlide
===
0
)
return
;
this
.
currentSlide
=
((
this
.
currentSlide
-
1
)
+
this
.
items
.
length
)
%
this
.
items
.
length
;
const
offset
=
this
.
currentSlide
*
this
.
itemWidth
;
const
myAnimation
:
AnimationFactory
=
this
.
buildAnimation
(
offset
);
this
.
player
=
myAnimation
.
create
(
this
.
carousel
.
nativeElement
);
this
.
player
.
play
();
}
ngAfterViewInit
()
{
// For some reason only here I need to add setTimeout, in my local env it's working without this.
console
.
log
(
this
.
itemsElements
);
setTimeout
(()
=>
{
this
.
itemWidth
=
this
.
itemsElements
.
first
.
nativeElement
.
getBoundingClientRect
().
width
;
this
.
carouselWrapperStyle
=
{
width
:
`
${
this
.
itemWidth
}
px`
}
});
}
afterChange
(
e
)
{
console
.
log
(
'afterChange'
);
}
}
This diff is collapsed.
Click to expand it.
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment