start sliding transition between pages

src/app/app.component.html

@@ -7,8 +7,8 @@
 		<div id="big_container" [class]="themeClass">
 			<div class="container">
 				<app-header [appTitle]="appTitle" [appLogo]="appLogo"></app-header>
-				<main>
-					<router-outlet></router-outlet>
+				<main [@routeAnimations]="prepareRoute(outlet)">
+					<router-outlet #outlet></router-outlet>
 					<div class="padded" *ngIf="devModeEnabled">
 						<br />
 						<mat-slide-toggle (change)="sidenav.toggle()" label="dev menu"> </mat-slide-toggle> menu

src/app/app.component.ts

@@ -6,12 +6,14 @@ import { environment } from '../environments/environment';
 import { Theme } from './core/enums/theme.enum';
 import { LanguageService } from './core/services/language.service';
 import { ThemeService } from './core/services/theme.service';
-import { NavigationEnd, Router } from '@angular/router';
+import { NavigationEnd, Router, RouterOutlet } from '@angular/router';
+import { slideInAnimation } from './shared/animations/main';
 
 @Component({
 	selector: 'app-root',
 	templateUrl: './app.component.html',
 	styleUrls: ['./app.component.scss'],
+	animations: [slideInAnimation],
 })
 export class AppComponent implements OnInit, OnDestroy {
 	public appTitle: string = environment.appTitle;
@@ -69,4 +71,8 @@ export class AppComponent implements OnInit, OnDestroy {
 	public toggleSidebar(status: boolean): void {
 		this.isSidebarOpened = status === true;
 	}
+
+	prepareRoute(outlet: RouterOutlet) {
+		return outlet && outlet.activatedRouteData && outlet.activatedRouteData.animation;
+	}
 }

src/app/core/components/header/header.component.html

@@ -9,17 +9,14 @@
 			</a>
 		</div>
 		<div class="navbar-start">
-			<a
-				class="navbar-item button is-primary"
-				role="button"
-				routerLink="/administration"
-				routerLinkActive="is-active"
-			>
-				<i class="fa fa-plus-circle"></i>
-				<div class="is-hidden-touch">
-					{{ 'config.title' | translate }}
-				</div>
-			</a>
+			<span class="navbar-item">
+				<a class="button is-primary" role="button" routerLink="/administration" routerLinkActive="is-active">
+					<i class="fa fa-plus-circle"></i>
+					<div class="is-hidden-touch">
+						{{ 'config.title' | translate }}
+					</div>
+				</a>
+			</span>
 		</div>
 		<div class="navbar-end">
 			<!-- navbar items -->
@@ -88,13 +85,6 @@
 						aujourdhui-ou-demain
 					</em>
 				</a>
-				<a class="navbar-item" [routerLink]="['/poll/citron/hash/consultation']" routerLinkActive="is-primary">
-					<em>
-						citron
-					</em>
-					sans pass
-				</a>
-
 				<a
 					class="navbar-item"
 					[routerLink]="['/poll/citron/consultation/1c01ed9c94fc640a1be864f197ff808c']"

src/app/core/components/header/header.component.scss

@@ -6,4 +6,9 @@
 		width: 4em;
 		text-align: center;
 	}
+	.navbar-item {
+		.fa {
+			margin-right: 1ch;
+		}
+	}
 }

src/app/features/administration/administration-routing.module.ts

@@ -5,7 +5,7 @@ import { AdministrationComponent } from './administration.component';
 import { NamingComponent } from './naming/naming.component';
 
 const routes: Routes = [
-	{ path: '', component: AdministrationComponent },
+	{ path: '', component: AdministrationComponent, data: { animation: 'AdminPage' } },
 	{ path: 'naming', component: NamingComponent },
 ];
 

src/app/features/administration/administration.component.ts

@@ -4,11 +4,13 @@ import { Subscription } from 'rxjs';
 
 import { Poll } from '../../core/models/poll.model';
 import { DOCUMENT } from '@angular/common';
+import { slideInAnimation } from '../../shared/animations/main';
 
 @Component({
 	selector: 'app-administration',
 	templateUrl: './administration.component.html',
 	styleUrls: ['./administration.component.scss'],
+	animations: [slideInAnimation],
 })
 export class AdministrationComponent implements OnInit, OnDestroy {
 	public poll: Poll;

src/app/routes-framadate.ts

@@ -10,13 +10,14 @@ import { PrivacyComponent } from './features/shared/components/ui/static-pages/p
 import { CipheringComponent } from './features/shared/components/ui/static-pages/ciphering/ciphering.component';
 
 export const routes: Routes = [
-	{ path: '', component: HomeComponent },
+	{ path: '', component: HomeComponent, data: { animation: 'HomePage' } },
 	{
 		path: 'user',
 		loadChildren: () => import('./features/user-profile/user-profile.module').then((m) => m.UserProfileModule),
 	},
 	{
 		path: 'administration',
+		data: { animation: 'AdminPage' },
 		loadChildren: () =>
 			import('./features/administration/administration.module').then((m) => m.AdministrationModule),
 		// resolve: { poll: PollService },

src/app/shared/animations/main.ts

@@ -0,0 +1,40 @@
+import { animate, animateChild, group, query, style, transition, trigger } from '@angular/animations';
+
+export const slideInAnimation = trigger('routeAnimations', [
+	transition('HomePage <=> AdminPage', [
+		style({ position: 'relative' }),
+		query(':enter, :leave', [
+			style({
+				position: 'absolute',
+				top: 0,
+				left: 0,
+				width: '100%',
+			}),
+		]),
+		query(':enter', [style({ left: '-100%' })]),
+		query(':leave', animateChild()),
+		group([
+			query(':leave', [animate('300ms ease-out', style({ left: '100%' }))]),
+			query(':enter', [animate('300ms ease-out', style({ left: '0%' }))]),
+		]),
+		query(':enter', animateChild()),
+	]),
+	transition('* <=> FilterPage', [
+		style({ position: 'relative' }),
+		query(':enter, :leave', [
+			style({
+				position: 'absolute',
+				top: 0,
+				left: 0,
+				width: '100%',
+			}),
+		]),
+		query(':enter', [style({ left: '-100%' })]),
+		query(':leave', animateChild()),
+		group([
+			query(':leave', [animate('200ms ease-out', style({ left: '100%' }))]),
+			query(':enter', [animate('300ms ease-out', style({ left: '0%' }))]),
+		]),
+		query(':enter', animateChild()),
+	]),
+]);

src/app/shared/components/selectors/language-selector/language-selector.component.html

@@ -1,5 +1,5 @@
 <div class="selector">
-	<img src="assets/img/icone-langue.svg" alt="langue" (click)="nextLang()" />
+	<img class="clickable" src="assets/img/icone-langue.svg" alt="langue" (click)="nextLang()" />
 	<div class="buttons has-addons">
 		<label for="lang_selector" class="hidden">{{ 'selector.lang' | translate }}</label>
 		<select class="select is-hidden-touch" id="lang_selector" (change)="setLang()" [(ngModel)]="currentLang">

src/styles/partials/_forms.scss

@@ -4,6 +4,7 @@ label {
 	margin-top: 0.25em;
 	line-height: 2.5em;
 }
+
 input,
 select,
 textarea {
@@ -11,7 +12,7 @@ textarea {
 	padding: 1rem;
 	border: 1px solid $secondary_color;
 	border-bottom: 3px solid $primary_color;
-	width: calc(100% -45px);
+	width: calc(100% - 45px);
 	margin-right: 2px;
 	margin-bottom: 1em;
 
@@ -50,6 +51,7 @@ textarea {
 li {
 	list-style-type: none;
 }
+
 .next {
 	max-width: 200px;
 	margin-bottom: 50px;
@@ -137,6 +139,7 @@ textarea {
 	background: $warning;
 	padding: 1em;
 }
+
 mat-checkbox {
 	display: block;
 }