mirror of
https://dev.azure.com/hugendubel/ISA/_git/ISA-Frontend
synced 2025-12-28 22:42:11 +01:00
[HIMA-270] Recommendations animation update
- Updated animation to work as it must
This commit is contained in:
Milos Jovanov
@@ -13,7 +13,7 @@
|
||||
.description {
|
||||
font-size: 22px;
|
||||
width: 303px;
|
||||
padding-top: 15px;
|
||||
padding-top: 35px;
|
||||
text-align: center;
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
|
||||
@@ -13,7 +13,7 @@
|
||||
.description {
|
||||
font-size: 22px;
|
||||
width: 303px;
|
||||
padding-top: 15px;
|
||||
padding-top: 35px;
|
||||
text-align: center;
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
|
||||
@@ -1,7 +1,5 @@
|
||||
<div class="billing-dashboard" [@shrinkMainCard]="expanded">
|
||||
<h1 class="tabtitle" [@shrinkTitle]="expanded" (click)="expand()">
|
||||
Rechnungsadresse
|
||||
</h1>
|
||||
<span [@shrinkTitle]="expanded" (click)="expand()">Rechnungsadresse</span>
|
||||
<div class="placeholder">
|
||||
<app-billing-address-dashboard *ngIf="expanded"></app-billing-address-dashboard>
|
||||
</div>
|
||||
|
||||
@@ -5,26 +5,13 @@
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
background-color: #fff;
|
||||
// height: calc(100% - 120px);
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.tabtitle {
|
||||
// position: relative;
|
||||
// width: 100%;
|
||||
// font-family: 'Open Sans';
|
||||
// font-size: 20px;
|
||||
// font-weight: bold;
|
||||
// color: rgba(90, 114, 138, 1);
|
||||
// line-height: 21px;
|
||||
// margin: 0;
|
||||
}
|
||||
|
||||
.newsletter {
|
||||
padding: 22px 25px;
|
||||
position: fixed;
|
||||
background-color: #fff;
|
||||
height: calc(100% - 355px);
|
||||
height: calc(100% - 400px);
|
||||
border-radius: 4px;
|
||||
box-shadow: 0px -2px 18px 0px #dce2e9;
|
||||
}
|
||||
@@ -36,7 +23,7 @@
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
padding: 30px 0;
|
||||
padding: 25px 0;
|
||||
border-radius: 4px;
|
||||
overflow-y: scroll;
|
||||
scroll-behavior: smooth;
|
||||
|
||||
@@ -1,13 +1,13 @@
|
||||
import { Store } from '@ngxs/store';
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
import { shrinkTitleAnimation, shrinkSecondaryAnimation, shrinkMainCard } from '../../../../shared/animations/shrink.animation';
|
||||
import { shrinkSecondaryAnimation, shrinkMainCard, shrinkTitleAnimation } from '../../../../shared/animations/shrink.animation';
|
||||
import { UpdateCurrentBreadcrumbName } from '../../../../core/store/actions/breadcrumb.actions';
|
||||
|
||||
@Component({
|
||||
selector: 'app-billing-address',
|
||||
templateUrl: 'customer-billing-address.component.html',
|
||||
styleUrls: ['customer-billing-address.component.scss'],
|
||||
animations: [shrinkTitleAnimation, shrinkSecondaryAnimation, shrinkMainCard],
|
||||
animations: [shrinkTitleAnimation, shrinkSecondaryAnimation, shrinkMainCard, shrinkTitleAnimation],
|
||||
})
|
||||
export class CustomerBillingAddressComponent implements OnInit {
|
||||
expanded = true;
|
||||
|
||||
@@ -1,7 +1,5 @@
|
||||
<div class="delivery-dashboard" [@shrinkMainCard]="expanded">
|
||||
<h1 class="tabtitle" [@shrinkTitle]="expanded" (click)="expand()">
|
||||
Lieferadresse
|
||||
</h1>
|
||||
<span [@shrinkTitle]="expanded" (click)="expand()">Lieferadresse</span>
|
||||
<div class="placeholder" *ngIf="expanded">
|
||||
<app-delivery-address-dashboard></app-delivery-address-dashboard>
|
||||
</div>
|
||||
|
||||
@@ -6,23 +6,12 @@
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.tabtitle {
|
||||
// position: relative;
|
||||
// width: 100%;
|
||||
// font-family: 'Open Sans';
|
||||
// font-size: 20px;
|
||||
// font-weight: bold;
|
||||
// color: rgba(90, 114, 138, 1);
|
||||
// line-height: 21px;
|
||||
// margin: 0;
|
||||
}
|
||||
|
||||
.newsletter {
|
||||
box-shadow: 0px -2px 24px 0px #dce2e9;
|
||||
padding: 22px 25px;
|
||||
position: fixed;
|
||||
background-color: #fff;
|
||||
height: calc(100% - 415px);
|
||||
height: calc(100% - 400px);
|
||||
border-radius: 4px;
|
||||
box-shadow: 0px -2px 18px 0px #dce2e9;
|
||||
}
|
||||
@@ -34,7 +23,7 @@
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
padding: 30px 0;
|
||||
padding: 25px 0;
|
||||
border-radius: 4px;
|
||||
overflow-y: scroll;
|
||||
scroll-behavior: smooth;
|
||||
|
||||
@@ -1,18 +1,24 @@
|
||||
import { Store } from '@ngxs/store';
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
import { shrinkTitleAnimation, shrinkSecondaryAnimation, shrinkMainCard } from '../../../../shared/animations/shrink.animation';
|
||||
import { shrinkSecondaryAnimation, shrinkMainCard, shrinkTitleAnimation } from '../../../../shared/animations/shrink.animation';
|
||||
import { UpdateCurrentBreadcrumbName } from '../../../../core/store/actions/breadcrumb.actions';
|
||||
|
||||
@Component({
|
||||
selector: 'app-delivery-address',
|
||||
templateUrl: 'customer-delivery-address.component.html',
|
||||
styleUrls: ['customer-delivery-address.component.scss'],
|
||||
animations: [shrinkTitleAnimation, shrinkSecondaryAnimation, shrinkMainCard],
|
||||
animations: [shrinkTitleAnimation, shrinkSecondaryAnimation, shrinkMainCard, shrinkTitleAnimation],
|
||||
})
|
||||
export class CustomerDeliveryAddressComponent implements OnInit {
|
||||
expanded = true;
|
||||
constructor(private store: Store) {}
|
||||
ngOnInit(): void {}
|
||||
screenWidth: any;
|
||||
|
||||
ngOnInit(): void {
|
||||
this.screenWidth = window.innerWidth;
|
||||
console.log(this.screenWidth);
|
||||
console.log(event);
|
||||
}
|
||||
|
||||
expand() {
|
||||
this.expanded = !this.expanded;
|
||||
|
||||
@@ -1,62 +1,121 @@
|
||||
import { trigger, style, transition, animate, query, state, keyframes } from '@angular/animations';
|
||||
import { trigger, style, transition, animate, query, state, animateChild, group } from '@angular/animations';
|
||||
|
||||
export const shrinkTitleAnimation = trigger('shrinkTitle', [
|
||||
state(
|
||||
'false',
|
||||
style({
|
||||
position: 'absolute',
|
||||
left: 'calc(0% + 25px)',
|
||||
width: '100%',
|
||||
'font-family': 'Open Sans',
|
||||
'font-size': '20px',
|
||||
'font-weight': 'bold',
|
||||
fontSize: '20px',
|
||||
fontWeight: 'bold',
|
||||
color: 'rgba(90, 114, 138, 1)',
|
||||
'line-height': '21px',
|
||||
margin: 0,
|
||||
lineHeight: '21px',
|
||||
margin: '0 auto 0 0',
|
||||
display: 'block',
|
||||
paddingLeft: '25px',
|
||||
height: '20px',
|
||||
position: 'absolute',
|
||||
left: '0',
|
||||
zIndex: '30',
|
||||
width: '100%',
|
||||
})
|
||||
),
|
||||
state(
|
||||
'true',
|
||||
style({
|
||||
'font-family': 'Open Sans',
|
||||
'font-size': '20px',
|
||||
'font-weight': 'bold',
|
||||
fontSize: '20px',
|
||||
fontWeight: 'bold',
|
||||
color: 'rgba(0, 0, 0, 1)',
|
||||
'line-height': '21px',
|
||||
margin: 0,
|
||||
lineHeight: '21px',
|
||||
transform: 'scale(1.3)',
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
height: '20px',
|
||||
position: 'absolute',
|
||||
margin: 'auto',
|
||||
zIndex: '30',
|
||||
})
|
||||
),
|
||||
transition('true => false', [
|
||||
style({
|
||||
color: 'rgba(90, 114, 138, 1)',
|
||||
transform: 'scale(1.3)',
|
||||
fontSize: '20px',
|
||||
fontWeight: 'bold',
|
||||
lineHeight: '21px',
|
||||
left: '33%',
|
||||
}),
|
||||
animate(
|
||||
'300ms',
|
||||
style({
|
||||
fontSize: '20px',
|
||||
fontWeight: 'bold',
|
||||
color: 'rgba(90, 114, 138, 1)',
|
||||
lineHeight: '21px',
|
||||
left: '50px',
|
||||
transform: 'scale(1)',
|
||||
})
|
||||
),
|
||||
]),
|
||||
transition('false => true', [
|
||||
style({
|
||||
fontSize: '20px',
|
||||
fontWeight: 'bold',
|
||||
color: 'rgba(90, 114, 138, 1)',
|
||||
lineHeight: '21px',
|
||||
transform: 'scale(1)',
|
||||
}),
|
||||
animate('300ms', style({ left: '43%', transform: 'scale(1.3)', color: 'rgba(0, 0, 0, 1)' })),
|
||||
]),
|
||||
]);
|
||||
|
||||
export const shrinkMainCard = trigger('shrinkMainCard', [
|
||||
state(
|
||||
'true',
|
||||
style({
|
||||
padding: '30px 0px',
|
||||
height: '100%',
|
||||
height: 'calc(100% - 120px)',
|
||||
backgroundColor: '#fff',
|
||||
display: 'flex',
|
||||
justifyContent: 'flex-start',
|
||||
flexDirection: 'column',
|
||||
alignItems: 'center',
|
||||
})
|
||||
),
|
||||
state(
|
||||
'false',
|
||||
style({
|
||||
height: '16px',
|
||||
padding: '30px 0px',
|
||||
height: '20px',
|
||||
borderRadius: '4px 4px 0 0',
|
||||
backgroundColor: '#fff',
|
||||
})
|
||||
),
|
||||
transition('false => true', [
|
||||
animate(
|
||||
'300ms ease-out',
|
||||
style({
|
||||
height: '100%',
|
||||
backgroundColor: '#fff',
|
||||
padding: '30px 0px',
|
||||
})
|
||||
),
|
||||
style({ justifyContent: 'flex-start', flexDirection: 'column', alignItems: 'center', height: '20px' }),
|
||||
group([
|
||||
animate(
|
||||
'300ms',
|
||||
style({
|
||||
height: 'calc(100% - 120px)',
|
||||
backgroundColor: '#fff',
|
||||
})
|
||||
),
|
||||
query('@shrinkTitle', [animateChild()]),
|
||||
]),
|
||||
]),
|
||||
transition('true => false', [
|
||||
group([
|
||||
animate(
|
||||
'300ms',
|
||||
style({
|
||||
position: 'relative',
|
||||
justifyContent: 'flex-start',
|
||||
flexDirection: 'column',
|
||||
alignItems: 'center',
|
||||
})
|
||||
),
|
||||
query('@shrinkTitle', [animateChild()]),
|
||||
]),
|
||||
]),
|
||||
transition('true => false', [animate('300ms ease-out')]),
|
||||
]);
|
||||
|
||||
export const shrinkSecondaryAnimation = trigger('shrinkSecondary', [
|
||||
@@ -64,6 +123,7 @@ export const shrinkSecondaryAnimation = trigger('shrinkSecondary', [
|
||||
'true',
|
||||
style({
|
||||
backgroundColor: '#fff',
|
||||
bottom: '100px',
|
||||
})
|
||||
),
|
||||
state(
|
||||
@@ -76,7 +136,7 @@ export const shrinkSecondaryAnimation = trigger('shrinkSecondary', [
|
||||
backgroundColor: '#fff',
|
||||
})
|
||||
),
|
||||
transition('false => true', [animate('300ms ease-out')]),
|
||||
transition('false => true', [animate('300ms')]),
|
||||
transition('true => false', [
|
||||
style({
|
||||
visibility: 'visible',
|
||||
@@ -84,6 +144,6 @@ export const shrinkSecondaryAnimation = trigger('shrinkSecondary', [
|
||||
bottom: '80px',
|
||||
height: '*',
|
||||
}),
|
||||
animate('300ms ease-out'),
|
||||
animate('300ms'),
|
||||
]),
|
||||
]);
|
||||
|
||||
@@ -48,7 +48,7 @@
|
||||
* Only required if AnimationBuilder is used within the application and using IE/Edge or Safari.
|
||||
* Standard animation support in Angular DOES NOT require any polyfills (as of Angular 6.0).
|
||||
*/
|
||||
// import 'web-animations-js'; // Run `npm install --save web-animations-js`.
|
||||
import 'web-animations-js'; // Run `npm install --save web-animations-js`.
|
||||
|
||||
/**
|
||||
* By default, zone.js will patch all possible macroTask and DomEvents
|
||||
@@ -77,8 +77,7 @@
|
||||
/***************************************************************************************************
|
||||
* Zone JS is required by default for Angular itself.
|
||||
*/
|
||||
import 'zone.js/dist/zone'; // Included with Angular CLI.
|
||||
|
||||
import 'zone.js/dist/zone'; // Included with Angular CLI.
|
||||
|
||||
/***************************************************************************************************
|
||||
* APPLICATION IMPORTS
|
||||
|
||||
@@ -42,6 +42,7 @@
|
||||
"socket.io": "^2.2.0",
|
||||
"tslib": "^1.9.0",
|
||||
"uglify-js": "^3.4.9",
|
||||
"web-animations-js": "^2.3.1",
|
||||
"zone.js": "~0.8.29"
|
||||
},
|
||||
"devDependencies": {
|
||||
@@ -64,12 +65,12 @@
|
||||
"karma-jasmine": "~1.1.2",
|
||||
"karma-jasmine-html-reporter": "^0.2.2",
|
||||
"ng-packagr": "^4.7.1",
|
||||
"ng-swagger-gen": "^1.5.0",
|
||||
"protractor": "~5.4.0",
|
||||
"ts-node": "~7.0.0",
|
||||
"tsickle": "^0.34.3",
|
||||
"tslib": "^1.9.0",
|
||||
"tslint": "~5.11.0",
|
||||
"typescript": "~3.2.4",
|
||||
"ng-swagger-gen": "^1.5.0"
|
||||
"typescript": "~3.2.4"
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user