Mise à jour graphique
This commit is contained in:
Rampeur
@@ -90,14 +90,4 @@
|
||||
</svg>
|
||||
-->
|
||||
</div>
|
||||
<!--
|
||||
<mat-card>
|
||||
<mat-card-header>
|
||||
<mat-card-title>Card title</mat-card-title>
|
||||
</mat-card-header>
|
||||
<mat-card-content class="text-center mt-4">
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
-->
|
||||
|
||||
</div>
|
||||
@@ -1,6 +1,26 @@
|
||||
/* Home */
|
||||
//@use 'variable' as var;
|
||||
|
||||
.icon-xxsmall {
|
||||
transform: scale(0.25);
|
||||
}
|
||||
.icon-xsmall {
|
||||
font-size: 16px;
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
}
|
||||
.icon-small {
|
||||
font-size: 18px;
|
||||
height: 18px;
|
||||
width: 18px;
|
||||
}
|
||||
.icon-medium {
|
||||
font-size: 20px;
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
}
|
||||
.hstack .value {
|
||||
min-width: 56px;
|
||||
}
|
||||
|
||||
/*
|
||||
#FF41F8
|
||||
|
||||
@@ -4,17 +4,18 @@ import { trigger, state, style, animate, transition } from '@angular/animations'
|
||||
import { Component, DestroyRef, inject, OnInit } from '@angular/core';
|
||||
import { MatCardModule } from '@angular/material/card';
|
||||
import { MatDividerModule } from '@angular/material/divider';
|
||||
import { MatIconModule } from '@angular/material/icon';
|
||||
|
||||
import { ListErrorsComponent, } from 'src/app/components/shared';
|
||||
import { ListErrorsComponent } from 'src/app/components/shared';
|
||||
import { Errors } from 'src/app/core/models';
|
||||
//import { UtilitiesService } from 'src/app/core/services';
|
||||
//import { UserService } from 'src/app/core/services';
|
||||
|
||||
@Component({
|
||||
selector: 'app-home',
|
||||
standalone: true,
|
||||
imports: [
|
||||
DatePipe,
|
||||
MatCardModule, MatDividerModule,
|
||||
MatCardModule, MatDividerModule, MatIconModule,
|
||||
ListErrorsComponent
|
||||
],
|
||||
templateUrl: './home.component.html',
|
||||
@@ -41,11 +42,33 @@ export class HomeComponent implements OnInit {
|
||||
public now = new Date();
|
||||
|
||||
constructor(
|
||||
private titleService: Title
|
||||
private _titleService: Title,
|
||||
//private _utilitiesService: UtilitiesService
|
||||
//private _userService: UserService
|
||||
) { }
|
||||
|
||||
ngOnInit() {
|
||||
this.titleService.setTitle(this.title);
|
||||
|
||||
this._titleService.setTitle(this.title);
|
||||
/*
|
||||
type CreateArrayWithLengthX<
|
||||
LENGTH extends number,
|
||||
ACC extends unknown[] = [],
|
||||
> = ACC['length'] extends LENGTH
|
||||
? ACC
|
||||
: CreateArrayWithLengthX<LENGTH, [...ACC, 1]>;
|
||||
|
||||
type NumericRange<
|
||||
START_ARR extends number[],
|
||||
END extends number,
|
||||
ACC extends number = never>
|
||||
= START_ARR['length'] extends END
|
||||
? ACC | END
|
||||
: NumericRange<[...START_ARR, 1], END, ACC | START_ARR['length']>;
|
||||
|
||||
//type TWENTY_TO_FORTY = NumericRange<CreateArrayWithLengthX<7>, 13, 7>;
|
||||
//type TWENTY_TO_FORTY = NumericRange<CreateArrayWithLengthX<13>, 19>;
|
||||
type TWENTY_TO_FORTY = NumericRange<CreateArrayWithLengthX<1>, 10>;
|
||||
*/
|
||||
}
|
||||
}
|
||||
|
||||
@@ -3,7 +3,9 @@ export * from './aeronefs/aeronefs.component';
|
||||
export * from './calculator/calculator.component';
|
||||
export * from './canopies/canopies.component';
|
||||
export * from './dashboard/dashboard.component';
|
||||
export * from './demo/demo.component';
|
||||
export * from './dropzones/dropzones.component';
|
||||
export * from './herowars/herowars.component';
|
||||
export * from './home/home.component';
|
||||
export * from './jump/jump.component';
|
||||
export * from './jumps/jumps.component';
|
||||
|
||||
@@ -89,7 +89,7 @@
|
||||
</div>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
<mat-card class="banner">
|
||||
<mat-card class="bannercard">
|
||||
<mat-card-header>
|
||||
<mat-card-title>Types de sauts</mat-card-title>
|
||||
</mat-card-header>
|
||||
|
||||
@@ -3,7 +3,7 @@ element.style {
|
||||
padding: 0.9rem 1.1rem;
|
||||
border-radius: 0;
|
||||
}
|
||||
.banner {
|
||||
.bannercard {
|
||||
background-color: #202020;
|
||||
color: #ffffff;
|
||||
margin: 1.5rem -1.5rem -1.5rem -1.5rem;
|
||||
|
||||
@@ -1 +1,28 @@
|
||||
<p>product works!</p>
|
||||
<div @flyInOut>
|
||||
<div class="d-flex">
|
||||
<div class="flex-fill">
|
||||
<h1 class="mb-1">{{ product.name }}<small>- Sachet {{ product.weightNet | number : '1.0' }} g</small></h1>
|
||||
<h2 class="mb-1">{{ (product.priceRetail! * (1 + (product.priceTaxe! / 100))) | number : '1.2-2' }} € TTC</h2>
|
||||
</div>
|
||||
<span class="flex-spacer"></span>
|
||||
<div class="align-self-center me-2 text-end">
|
||||
<span class="fs-5 text-primary">{{ product.createdAt | date: 'dd/MM/yyyy' }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<mat-divider class="my-3"></mat-divider>
|
||||
<app-list-errors [errors]="errors"></app-list-errors>
|
||||
<div class="d-flex">
|
||||
{{ product.description }}
|
||||
</div>
|
||||
@if (product.tags) {
|
||||
<mat-divider class="my-3"></mat-divider>
|
||||
<div class="d-flex">
|
||||
@for (tag of getProductTags(); track tag) {
|
||||
<span class="badge rounded-pill bg-accent mb-2 me-1 pe-3 py-1 fw-normal text-dark">
|
||||
<mat-icon class="align-middle me-1" fontIcon="tag"></mat-icon>
|
||||
{{ tag.name }}
|
||||
</span>
|
||||
}
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
@@ -1,12 +1,70 @@
|
||||
import { Component } from '@angular/core';
|
||||
import { Title } from '@angular/platform-browser';
|
||||
import { trigger, state, style, animate, transition } from '@angular/animations';
|
||||
import { Component, DestroyRef, inject, OnInit, OnDestroy } from '@angular/core';
|
||||
import { takeUntilDestroyed } from "@angular/core/rxjs-interop";
|
||||
import { DatePipe, DecimalPipe } from '@angular/common';
|
||||
import { ActivatedRoute, RouterLink } from '@angular/router';
|
||||
import { MatCardModule } from '@angular/material/card';
|
||||
import { MatDividerModule } from '@angular/material/divider';
|
||||
import { MatIconModule } from '@angular/material/icon';
|
||||
import { Observable, Subscription } from 'rxjs';
|
||||
|
||||
import { ListErrorsComponent, } from 'src/app/components/shared';
|
||||
import { Errors, Product, ProductPageData } from 'src/app/core/models';
|
||||
|
||||
@Component({
|
||||
selector: 'app-product',
|
||||
standalone: true,
|
||||
imports: [],
|
||||
templateUrl: './product.component.html',
|
||||
styleUrl: './product.component.scss'
|
||||
selector: 'app-product',
|
||||
standalone: true,
|
||||
imports: [
|
||||
DatePipe, DecimalPipe, RouterLink,
|
||||
MatCardModule, MatDividerModule, MatIconModule,
|
||||
ListErrorsComponent
|
||||
],
|
||||
templateUrl: './product.component.html',
|
||||
styleUrl: './product.component.scss',
|
||||
animations: [
|
||||
trigger('flyInOut', [
|
||||
state('in', style({ transform: 'translateY(0)' })),
|
||||
transition('void => *', [
|
||||
style({ transform: 'translateY(-100%)' }),
|
||||
animate(200)
|
||||
]),
|
||||
transition('* => void', [
|
||||
style({ transform: 'translateY(100%)' }),
|
||||
animate(200)
|
||||
])
|
||||
])
|
||||
]
|
||||
})
|
||||
export class ProductComponent {
|
||||
export class ProductComponent implements OnInit, OnDestroy {
|
||||
private _data: Subscription = new Subscription();
|
||||
public title = 'Ad Astra - Produit';
|
||||
public description = 'Encore un peu de patience, notre shop sera mis en ligne d\'ici peu.';
|
||||
public errors: Errors = { errors: {} };
|
||||
public destroyRef = inject(DestroyRef);
|
||||
public product: Product = {} as Product;
|
||||
|
||||
constructor(
|
||||
private route: ActivatedRoute,
|
||||
private titleService: Title
|
||||
) { }
|
||||
|
||||
ngOnInit() {
|
||||
const data$: Observable<{ pageData: ProductPageData }> = this.route.data as Observable<{ pageData: ProductPageData }>;
|
||||
this._data = data$.pipe(takeUntilDestroyed(this.destroyRef)).subscribe((data: { pageData: ProductPageData }) => {
|
||||
this.product = data.pageData.product;
|
||||
this.title = this.product.name;
|
||||
this.description = this.product.description;
|
||||
this.titleService.setTitle(this.product.name);
|
||||
console.log(this.product);
|
||||
});
|
||||
}
|
||||
|
||||
ngOnDestroy() {
|
||||
this._data.unsubscribe();
|
||||
}
|
||||
|
||||
getProductTags() {
|
||||
return this.product.tags;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1 +1,50 @@
|
||||
<p>products works!</p>
|
||||
<div @flyInOut>
|
||||
<div class="d-flex">
|
||||
<div class="flex-fill">
|
||||
<h1 class="mb-1">{{ title }} <span class="ms-1 fs-3 text-muted">({{ productsCount }})</span></h1>
|
||||
</div>
|
||||
<span class="flex-spacer"></span>
|
||||
<div class="align-self-center me-2 text-end">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<mat-divider class="my-3"></mat-divider>
|
||||
<app-list-errors [errors]="errors"></app-list-errors>
|
||||
<div class="d-flex">
|
||||
<div class="fs-4" [innerHtml]="description"></div>
|
||||
</div>
|
||||
<mat-divider class="my-3"></mat-divider>
|
||||
<div class="row">
|
||||
@for (product of products; track product) {
|
||||
<div class="col-xs-12 col-sm-6 col-md-4 col-xl-3">
|
||||
<mat-card class="mb-3">
|
||||
<mat-card-header class="d-flex rounded-top py-2 px-4">
|
||||
<div class="flex-fill">
|
||||
<mat-card-title>
|
||||
{{ product.name }}
|
||||
</mat-card-title>
|
||||
</div>
|
||||
<span class="flex-spacer"></span>
|
||||
<div class="align-self-center me-2 text-end">
|
||||
<span class="fs-4">Sachet {{ product.weightNet | number : '1.0' }} g</span>
|
||||
</div>
|
||||
</mat-card-header>
|
||||
<mat-card-content>
|
||||
<p class="card-text">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sodales ultrices dolor, ullamcorper cursus mauris.<br />
|
||||
Nam risus metus, porttitor eget lacinia nec, mollis ac augue. In hac habitasse platea dictumst.<br />
|
||||
Aliquam vel volutpat diam. Integer sed nulla posuere, commodo augue ac, tincidunt.
|
||||
</p>
|
||||
<mat-card-subtitle>
|
||||
{{ product.productCategories[0].name }} {{ product.brand.name }}
|
||||
</mat-card-subtitle>
|
||||
<div class="align-self-center me-2 text-end">
|
||||
<span class="fs-4 fw-medium text-primary">{{ (product.priceRetail! * (1 + (product.priceTaxe! / 100))) | number : '1.2-2' }} € TTC</span>
|
||||
<button mat-flat-button class="ms-2" color="teal" type="button">Ajouter au panier</button>
|
||||
</div>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,12 +1,72 @@
|
||||
import { Component } from '@angular/core';
|
||||
import { Title } from '@angular/platform-browser';
|
||||
import { trigger, state, style, animate, transition } from '@angular/animations';
|
||||
import { Component, DestroyRef, inject, OnInit, OnDestroy } from '@angular/core';
|
||||
import { takeUntilDestroyed } from "@angular/core/rxjs-interop";
|
||||
import { DatePipe, DecimalPipe } from '@angular/common';
|
||||
import { ActivatedRoute, RouterLink } from '@angular/router';
|
||||
import { MatButtonModule } from '@angular/material/button';
|
||||
import { MatCardModule } from '@angular/material/card';
|
||||
import { MatDividerModule } from '@angular/material/divider';
|
||||
import { MatIconModule } from '@angular/material/icon';
|
||||
import { Observable, Subscription } from 'rxjs';
|
||||
|
||||
import { ListErrorsComponent, } from 'src/app/components/shared';
|
||||
import { Errors, Product, ProductsPageData } from 'src/app/core/models';
|
||||
|
||||
@Component({
|
||||
selector: 'app-products',
|
||||
standalone: true,
|
||||
imports: [],
|
||||
templateUrl: './products.component.html',
|
||||
styleUrl: './products.component.scss'
|
||||
selector: 'app-products',
|
||||
standalone: true,
|
||||
imports: [
|
||||
DatePipe, DecimalPipe, RouterLink,
|
||||
MatButtonModule, MatCardModule, MatDividerModule, MatIconModule,
|
||||
ListErrorsComponent
|
||||
],
|
||||
templateUrl: './products.component.html',
|
||||
styleUrl: './products.component.scss',
|
||||
animations: [
|
||||
trigger('flyInOut', [
|
||||
state('in', style({ transform: 'translateY(0)' })),
|
||||
transition('void => *', [
|
||||
style({ transform: 'translateY(-100%)' }),
|
||||
animate(200)
|
||||
]),
|
||||
transition('* => void', [
|
||||
style({ transform: 'translateY(100%)' }),
|
||||
animate(200)
|
||||
])
|
||||
])
|
||||
]
|
||||
})
|
||||
export class ProductsComponent {
|
||||
export class ProductsComponent implements OnInit, OnDestroy {
|
||||
private _data: Subscription = new Subscription();
|
||||
public title = 'Ad Astra - Produit';
|
||||
public description = 'Encore un peu de patience, notre shop sera mis en ligne d\'ici peu.';
|
||||
public errors: Errors = { errors: {} };
|
||||
public destroyRef = inject(DestroyRef);
|
||||
public products: Array<Product> = [];
|
||||
public productsCount = 0;
|
||||
|
||||
constructor(
|
||||
private route: ActivatedRoute,
|
||||
private titleService: Title
|
||||
) { }
|
||||
|
||||
ngOnInit() {
|
||||
const data$: Observable<{ pageData: ProductsPageData }> = this.route.data as Observable<{ pageData: ProductsPageData }>;
|
||||
this._data = data$.pipe(takeUntilDestroyed(this.destroyRef)).subscribe((data: { pageData: ProductsPageData }) => {
|
||||
this.products = data.pageData.products;
|
||||
this.productsCount = data.pageData.count;
|
||||
//this.title = 'Fleurs CBD';
|
||||
this.title = data.pageData.products[0].productCategories[0]!.name;
|
||||
this.description = data.pageData.products[0].productCategories[0]!.description;
|
||||
this.titleService.setTitle(this.title);
|
||||
console.log(data.pageData);
|
||||
console.log(this.products);
|
||||
});
|
||||
}
|
||||
|
||||
ngOnDestroy() {
|
||||
this._data.unsubscribe();
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<div class="banner bg-accent mat-elevation-z2">
|
||||
<div class="d-flex mx-2 mx-md-3 mx-lg-4">
|
||||
<div class="banner mat-elevation-z2">
|
||||
<div class="banner-content d-flex text-bg-accent bg-opacity-50">
|
||||
<img [src]="user.image" class="user-img me-3" [alt]="user.username" />
|
||||
<div class="flex-spacer">
|
||||
<h3 class="mb-0">{{bannerTitle}}</h3>
|
||||
@@ -45,7 +45,7 @@
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
<mat-card>
|
||||
<mat-card-header class="bg-primary text-bg-primary rounded-top py-2 px-4">
|
||||
<mat-card-header class="text-bg-primary rounded-top py-2 px-4">
|
||||
<div class="flex-fill">
|
||||
<mat-card-title>
|
||||
Mes commandes
|
||||
@@ -156,687 +156,3 @@
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
</div>
|
||||
<mat-divider class="my-4"></mat-divider>
|
||||
<!--
|
||||
turquoise
|
||||
cyan
|
||||
navy
|
||||
purple
|
||||
raspberry
|
||||
orange
|
||||
yellow
|
||||
-->
|
||||
<div class="content">
|
||||
<mat-card>
|
||||
<mat-card-header class="bg-primary text-bg-primary rounded-top py-3 px-4">
|
||||
<div class="flex-fill">
|
||||
<mat-card-title>
|
||||
Buttons variants
|
||||
</mat-card-title>
|
||||
<mat-card-subtitle class="fw-normal text-white">
|
||||
turquoise / cyan / navy / purple / raspberry / orange / yellow / megna / magenta / pink
|
||||
</mat-card-subtitle>
|
||||
</div>
|
||||
<span class="flex-spacer"></span>
|
||||
<div class="flex-fill"></div>
|
||||
</mat-card-header>
|
||||
<mat-card-content>
|
||||
<section class="mt-4">
|
||||
<div class="mb-2">Links</div>
|
||||
<div class="p-2">
|
||||
<a href="#" class="me-2 text-muted">Muted</a>
|
||||
<a href="#" class="me-2 text-primary">Primary</a>
|
||||
<a href="#" class="me-2 text-accent">Accent</a>
|
||||
<a href="#" class="me-2 text-warn">Warn</a>
|
||||
<a href="#" class="me-2 text-danger">Danger</a>
|
||||
<a href="#" class="me-2 text-info">Info</a>
|
||||
<a href="#" class="me-2 text-success">Success</a>
|
||||
<a href="#" class="me-2 text-turquoise">Turquoise</a>
|
||||
<a href="#" class="me-2 text-cyan">Cyan</a>
|
||||
<a href="#" class="me-2 text-navy">Navy</a>
|
||||
<a href="#" class="me-2 text-navy-light">Navy light</a>
|
||||
<a href="#" class="me-2 text-purple">Purple</a>
|
||||
<a href="#" class="me-2 text-purple-light">Purple light</a>
|
||||
<a href="#" class="me-2 text-raspberry">Raspberry</a>
|
||||
<a href="#" class="me-2 text-orange">Orange</a>
|
||||
<a href="#" class="me-2 text-yellow">Yellow</a>
|
||||
<a href="#" class="me-2 text-teal">Teal</a>
|
||||
<a href="#" class="me-2 text-megna">Megna</a>
|
||||
<a href="#" class="me-2 text-magenta">Magenta</a>
|
||||
<a href="#" class="me-2 text-pink">Pink</a>
|
||||
</div>
|
||||
<div class="p-2">
|
||||
<span class="me-2 text-muted">Muted</span>
|
||||
<span class="me-2 text-primary">Primary</span>
|
||||
<span class="me-2 text-accent">Accent</span>
|
||||
<span class="me-2 text-warn">Warn</span>
|
||||
<span class="me-2 text-danger">Danger</span>
|
||||
<span class="me-2 text-info">Info</span>
|
||||
<span class="me-2 text-success">Success</span>
|
||||
<span class="me-2 text-turquoise">Turquoise</span>
|
||||
<span class="me-2 text-cyan">Cyan</span>
|
||||
<span class="me-2 text-navy">Navy</span>
|
||||
<span class="me-2 text-navy-light">Navy light</span>
|
||||
<span class="me-2 text-purple">Purple</span>
|
||||
<span class="me-2 text-purple-light">Purple light</span>
|
||||
<span class="me-2 text-raspberry">Raspberry</span>
|
||||
<span class="me-2 text-orange">Orange</span>
|
||||
<span class="me-2 text-yellow">Yellow</span>
|
||||
<span class="me-2 text-teal">Teal</span>
|
||||
<span class="me-2 text-megna">Megna</span>
|
||||
<span class="me-2 text-magenta">Magenta</span>
|
||||
<span class="me-2 text-pink">Pink</span>
|
||||
</div>
|
||||
</section>
|
||||
<mat-divider class="my-4"></mat-divider>
|
||||
<section>
|
||||
<div class="mb-2">Basic</div>
|
||||
<div class="p-2">
|
||||
<button mat-button class="me-2">Basic</button>
|
||||
<button mat-button class="me-2" color="primary">Primary</button>
|
||||
<button mat-button class="me-2" color="accent">Accent</button>
|
||||
<button mat-button class="me-2" color="warn">Warn</button>
|
||||
<button mat-button class="me-2" color="danger">Danger</button>
|
||||
<button mat-button class="me-2" color="info">Info</button>
|
||||
<button mat-button class="me-2" color="success">Success</button>
|
||||
<button mat-button class="me-2" color="turquoise">Turquoise</button>
|
||||
<button mat-button class="me-2" color="cyan">Cyan</button>
|
||||
<button mat-button class="me-2" color="navy">Navy</button>
|
||||
<button mat-button class="me-2" color="navy-light">Navy light</button>
|
||||
<button mat-button class="me-2" color="purple">Purple</button>
|
||||
<button mat-button class="me-2" color="purple-light">Purple light</button>
|
||||
<button mat-button class="me-2" color="raspberry">Raspberry</button>
|
||||
<button mat-button class="me-2" color="orange">Orange</button>
|
||||
<button mat-button class="me-2" color="yellow">Yellow</button>
|
||||
<button mat-button class="me-2" color="teal">Teal</button>
|
||||
<button mat-button class="me-2" color="megna">Megna</button>
|
||||
<button mat-button class="me-2" color="magenta">Magenta</button>
|
||||
<button mat-button class="me-2" color="pink">Pink</button>
|
||||
<button mat-button class="me-2" disabled>Disabled</button>
|
||||
<a mat-button href="https://www.google.com/" target="_blank">Link</a>
|
||||
</div>
|
||||
</section>
|
||||
<mat-divider class="my-4"></mat-divider>
|
||||
<section>
|
||||
<div class="mb-2">Stroked</div>
|
||||
<div class="p-2">
|
||||
<button mat-stroked-button class="me-2">Basic</button>
|
||||
<button mat-stroked-button class="me-2" color="primary">Primary</button>
|
||||
<button mat-stroked-button class="me-2" color="accent">Accent</button>
|
||||
<button mat-stroked-button class="me-2" color="warn">Warn</button>
|
||||
<button mat-stroked-button class="me-2" color="danger">Danger</button>
|
||||
<button mat-stroked-button class="me-2" color="info">Info</button>
|
||||
<button mat-stroked-button class="me-2" color="success">Success</button>
|
||||
<button mat-stroked-button class="me-2" color="turquoise">Turquoise</button>
|
||||
<button mat-stroked-button class="me-2" color="cyan">Cyan</button>
|
||||
<button mat-stroked-button class="me-2" color="navy">Navy</button>
|
||||
<button mat-stroked-button class="me-2" color="navy-light">Navy light</button>
|
||||
<button mat-stroked-button class="me-2" color="purple">Purple</button>
|
||||
<button mat-stroked-button class="me-2" color="purple-light">Purple light</button>
|
||||
<button mat-stroked-button class="me-2" color="raspberry">Raspberry</button>
|
||||
<button mat-stroked-button class="me-2" color="orange">Orange</button>
|
||||
<button mat-stroked-button class="me-2" color="yellow">Yellow</button>
|
||||
<button mat-stroked-button class="me-2" color="teal">Teal</button>
|
||||
<button mat-stroked-button class="me-2" color="megna">Megna</button>
|
||||
<button mat-stroked-button class="me-2" color="magenta">Magenta</button>
|
||||
<button mat-stroked-button class="me-2" color="pink">Pink</button>
|
||||
<button mat-stroked-button class="me-2" disabled>Disabled</button>
|
||||
<a mat-stroked-button href="https://www.google.com/" target="_blank">Link</a>
|
||||
</div>
|
||||
</section>
|
||||
<mat-divider class="my-4"></mat-divider>
|
||||
<section>
|
||||
<div class="mb-2">Flat</div>
|
||||
<div class="p-2">
|
||||
<button mat-flat-button class="me-2">Basic</button>
|
||||
<button mat-flat-button class="me-2" color="primary">Primary</button>
|
||||
<button mat-flat-button class="me-2" color="accent">Accent</button>
|
||||
<button mat-flat-button class="me-2" color="warn">Warn</button>
|
||||
<button mat-flat-button class="me-2" color="danger">Danger</button>
|
||||
<button mat-flat-button class="me-2" color="info">Info</button>
|
||||
<button mat-flat-button class="me-2" color="success">Success</button>
|
||||
<button mat-flat-button class="me-2" color="turquoise">Turquoise</button>
|
||||
<button mat-flat-button class="me-2" color="cyan">Cyan</button>
|
||||
<button mat-flat-button class="me-2" color="navy">Navy</button>
|
||||
<button mat-flat-button class="me-2" color="navy-light">Navy light</button>
|
||||
<button mat-flat-button class="me-2" color="purple">Purple</button>
|
||||
<button mat-flat-button class="me-2" color="purple-light">Purple light</button>
|
||||
<button mat-flat-button class="me-2" color="raspberry">Raspberry</button>
|
||||
<button mat-flat-button class="me-2" color="orange">Orange</button>
|
||||
<button mat-flat-button class="me-2" color="yellow">Yellow</button>
|
||||
<button mat-flat-button class="me-2" color="teal">Teal</button>
|
||||
<button mat-flat-button class="me-2" color="megna">Megna</button>
|
||||
<button mat-flat-button class="me-2" color="magenta">Magenta</button>
|
||||
<button mat-flat-button class="me-2" color="pink">Pink</button>
|
||||
<button mat-flat-button class="me-2" disabled>Disabled</button>
|
||||
<a mat-flat-button href="https://www.google.com/" target="_blank">Link</a>
|
||||
</div>
|
||||
</section>
|
||||
<mat-divider class="my-4"></mat-divider>
|
||||
<section>
|
||||
<div class="mb-2">Raised</div>
|
||||
<div class="p-2">
|
||||
<button mat-raised-button class="me-2">Basic</button>
|
||||
<button mat-raised-button class="me-2" color="primary">Primary</button>
|
||||
<button mat-raised-button class="me-2" color="accent">Accent</button>
|
||||
<button mat-raised-button class="me-2" color="warn">Warn</button>
|
||||
<button mat-raised-button class="me-2" color="danger">Danger</button>
|
||||
<button mat-raised-button class="me-2" color="info">Info</button>
|
||||
<button mat-raised-button class="me-2" color="success">Success</button>
|
||||
<button mat-raised-button class="me-2" color="turquoise">Turquoise</button>
|
||||
<button mat-raised-button class="me-2" color="cyan">Cyan</button>
|
||||
<button mat-raised-button class="me-2" color="navy">Navy</button>
|
||||
<button mat-raised-button class="me-2" color="navy-light">Navy light</button>
|
||||
<button mat-raised-button class="me-2" color="purple">Purple</button>
|
||||
<button mat-raised-button class="me-2" color="purple-light">Purple light</button>
|
||||
<button mat-raised-button class="me-2" color="raspberry">Raspberry</button>
|
||||
<button mat-raised-button class="me-2" color="orange">Orange</button>
|
||||
<button mat-raised-button class="me-2" color="yellow">Yellow</button>
|
||||
<button mat-raised-button class="me-2" color="teal">Teal</button>
|
||||
<button mat-raised-button class="me-2" color="megna">Megna</button>
|
||||
<button mat-raised-button class="me-2" color="magenta">Magenta</button>
|
||||
<button mat-raised-button class="me-2" color="pink">Pink</button>
|
||||
<button mat-raised-button class="me-2" disabled>Disabled</button>
|
||||
<a mat-raised-button href="https://www.google.com/" target="_blank">Link</a>
|
||||
</div>
|
||||
</section>
|
||||
<mat-divider class="my-4"></mat-divider>
|
||||
<section>
|
||||
<div class="mb-2">FAB</div>
|
||||
<div class="p-2">
|
||||
<div class="demo-flex-container">
|
||||
<button mat-fab class="me-2" color="primary" aria-label="Example icon button with a delete icon">
|
||||
<mat-icon>delete</mat-icon>
|
||||
</button>
|
||||
<button mat-fab class="me-2" color="accent" aria-label="Example icon button with a bookmark icon">
|
||||
<mat-icon>bookmark</mat-icon>
|
||||
</button>
|
||||
<button mat-fab class="me-2" color="warn" aria-label="Example icon button with a home icon">
|
||||
<mat-icon>home</mat-icon>
|
||||
</button>
|
||||
<button mat-fab class="me-2" color="danger" aria-label="Example icon button with a heart icon">
|
||||
<mat-icon>favorite</mat-icon>
|
||||
</button>
|
||||
<button mat-fab class="me-2" color="info" aria-label="Example icon button with a heart icon">
|
||||
<mat-icon>favorite</mat-icon>
|
||||
</button>
|
||||
<button mat-fab class="me-2" color="success" aria-label="Example icon button with a heart icon">
|
||||
<mat-icon>favorite</mat-icon>
|
||||
</button>
|
||||
<button mat-fab class="me-2" color="turquoise" aria-label="Example icon button with a heart icon">
|
||||
<mat-icon>favorite</mat-icon>
|
||||
</button>
|
||||
<button mat-fab class="me-2" color="cyan" aria-label="Example icon button with a heart icon">
|
||||
<mat-icon>favorite</mat-icon>
|
||||
</button>
|
||||
<button mat-fab class="me-2" color="navy" aria-label="Example icon button with a heart icon">
|
||||
<mat-icon>favorite</mat-icon>
|
||||
</button>
|
||||
<button mat-fab class="me-2" color="navy-light" aria-label="Example icon button with a heart icon">
|
||||
<mat-icon>favorite</mat-icon>
|
||||
</button>
|
||||
<button mat-fab class="me-2" color="purple" aria-label="Example icon button with a heart icon">
|
||||
<mat-icon>favorite</mat-icon>
|
||||
</button>
|
||||
<button mat-fab class="me-2" color="purple-light" aria-label="Example icon button with a heart icon">
|
||||
<mat-icon>favorite</mat-icon>
|
||||
</button>
|
||||
<button mat-fab class="me-2" color="raspberry" aria-label="Example icon button with a heart icon">
|
||||
<mat-icon>favorite</mat-icon>
|
||||
</button>
|
||||
<button mat-fab class="me-2" color="orange" aria-label="Example icon button with a heart icon">
|
||||
<mat-icon>favorite</mat-icon>
|
||||
</button>
|
||||
<button mat-fab class="me-2" color="yellow" aria-label="Example icon button with a heart icon">
|
||||
<mat-icon>favorite</mat-icon>
|
||||
</button>
|
||||
<button mat-fab class="me-2" color="teal" aria-label="Example icon button with a heart icon">
|
||||
<mat-icon>favorite</mat-icon>
|
||||
</button>
|
||||
<button mat-fab class="me-2" color="megna" aria-label="Example icon button with a heart icon">
|
||||
<mat-icon>favorite</mat-icon>
|
||||
</button>
|
||||
<button mat-fab class="me-2" color="magenta" aria-label="Example icon button with a heart icon">
|
||||
<mat-icon>favorite</mat-icon>
|
||||
</button>
|
||||
<button mat-fab class="me-2" color="pink" aria-label="Example icon button with a heart icon">
|
||||
<mat-icon>favorite</mat-icon>
|
||||
</button>
|
||||
<button mat-fab class="me-2" disabled aria-label="Example icon button with a heart icon">
|
||||
<mat-icon>favorite</mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<mat-divider class="my-4"></mat-divider>
|
||||
<section>
|
||||
<div class="mb-2">Mini FAB</div>
|
||||
<div class="p-2">
|
||||
<div class="demo-flex-container">
|
||||
<button mat-mini-fab class="me-2" color="primary" aria-label="Example icon button with a menu icon">
|
||||
<mat-icon>menu</mat-icon>
|
||||
</button>
|
||||
<button mat-mini-fab class="me-2" color="accent" aria-label="Example icon button with a plus one icon">
|
||||
<mat-icon>plus_one</mat-icon>
|
||||
</button>
|
||||
<button mat-mini-fab class="me-2" color="warn" aria-label="Example icon button with a filter list icon">
|
||||
<mat-icon>filter_list</mat-icon>
|
||||
</button>
|
||||
<button mat-mini-fab class="me-2" color="danger" aria-label="Example icon button with a heart icon">
|
||||
<mat-icon>favorite</mat-icon>
|
||||
</button>
|
||||
<button mat-mini-fab class="me-2" color="info" aria-label="Example icon button with a heart icon">
|
||||
<mat-icon>favorite</mat-icon>
|
||||
</button>
|
||||
<button mat-mini-fab class="me-2" color="success" aria-label="Example icon button with a heart icon">
|
||||
<mat-icon>favorite</mat-icon>
|
||||
</button>
|
||||
<button mat-mini-fab class="me-2" color="turquoise" aria-label="Example icon button with a heart icon">
|
||||
<mat-icon>favorite</mat-icon>
|
||||
</button>
|
||||
<button mat-mini-fab class="me-2" color="cyan" aria-label="Example icon button with a heart icon">
|
||||
<mat-icon>favorite</mat-icon>
|
||||
</button>
|
||||
<button mat-mini-fab class="me-2" color="navy" aria-label="Example icon button with a heart icon">
|
||||
<mat-icon>favorite</mat-icon>
|
||||
</button>
|
||||
<button mat-mini-fab class="me-2" color="navy-light" aria-label="Example icon button with a heart icon">
|
||||
<mat-icon>favorite</mat-icon>
|
||||
</button>
|
||||
<button mat-mini-fab class="me-2" color="purple" aria-label="Example icon button with a heart icon">
|
||||
<mat-icon>favorite</mat-icon>
|
||||
</button>
|
||||
<button mat-mini-fab class="me-2" color="purple-light" aria-label="Example icon button with a heart icon">
|
||||
<mat-icon>favorite</mat-icon>
|
||||
</button>
|
||||
<button mat-mini-fab class="me-2" color="raspberry" aria-label="Example icon button with a heart icon">
|
||||
<mat-icon>favorite</mat-icon>
|
||||
</button>
|
||||
<button mat-mini-fab class="me-2" color="orange" aria-label="Example icon button with a heart icon">
|
||||
<mat-icon>favorite</mat-icon>
|
||||
</button>
|
||||
<button mat-mini-fab class="me-2" color="yellow" aria-label="Example icon button with a heart icon">
|
||||
<mat-icon>favorite</mat-icon>
|
||||
</button>
|
||||
<button mat-mini-fab class="me-2" color="teal" aria-label="Example icon button with a heart icon">
|
||||
<mat-icon>favorite</mat-icon>
|
||||
</button>
|
||||
<button mat-mini-fab class="me-2" color="megna" aria-label="Example icon button with a heart icon">
|
||||
<mat-icon>favorite</mat-icon>
|
||||
</button>
|
||||
<button mat-mini-fab class="me-2" color="magenta" aria-label="Example icon button with a heart icon">
|
||||
<mat-icon>favorite</mat-icon>
|
||||
</button>
|
||||
<button mat-mini-fab class="me-2" color="pink" aria-label="Example icon button with a heart icon">
|
||||
<mat-icon>favorite</mat-icon>
|
||||
</button>
|
||||
<button mat-mini-fab class="me-2" disabled aria-label="Example icon button with a home icon">
|
||||
<mat-icon>home</mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<mat-divider class="my-4"></mat-divider>
|
||||
<section>
|
||||
<div class="mb-2">Icon</div>
|
||||
<div class="p-2">
|
||||
<div class="demo-flex-container">
|
||||
<button mat-icon-button class="me-2" aria-label="Example icon button with a vertical three dot icon">
|
||||
<mat-icon>more_vert</mat-icon>
|
||||
</button>
|
||||
<button mat-icon-button class="me-2" color="primary" aria-label="Example icon button with a home icon">
|
||||
<mat-icon>home</mat-icon>
|
||||
</button>
|
||||
<button mat-icon-button class="me-2" color="accent" aria-label="Example icon button with a menu icon">
|
||||
<mat-icon>menu</mat-icon>
|
||||
</button>
|
||||
<button mat-icon-button class="me-2" color="warn" aria-label="Example icon button with a heart icon">
|
||||
<mat-icon>favorite</mat-icon>
|
||||
</button>
|
||||
<button mat-icon-button class="me-2" color="danger" aria-label="Example icon button with a heart icon">
|
||||
<mat-icon>favorite</mat-icon>
|
||||
</button>
|
||||
<button mat-icon-button class="me-2" color="info" aria-label="Example icon button with a heart icon">
|
||||
<mat-icon>favorite</mat-icon>
|
||||
</button>
|
||||
<button mat-icon-button class="me-2" color="success" aria-label="Example icon button with a heart icon">
|
||||
<mat-icon>favorite</mat-icon>
|
||||
</button>
|
||||
<button mat-icon-button class="me-2" color="turquoise" aria-label="Example icon button with a heart icon">
|
||||
<mat-icon>favorite</mat-icon>
|
||||
</button>
|
||||
<button mat-icon-button class="me-2" color="cyan" aria-label="Example icon button with a heart icon">
|
||||
<mat-icon>favorite</mat-icon>
|
||||
</button>
|
||||
<button mat-icon-button class="me-2" color="navy" aria-label="Example icon button with a heart icon">
|
||||
<mat-icon>favorite</mat-icon>
|
||||
</button>
|
||||
<button mat-icon-button class="me-2" color="navy-light" aria-label="Example icon button with a heart icon">
|
||||
<mat-icon>favorite</mat-icon>
|
||||
</button>
|
||||
<button mat-icon-button class="me-2" color="purple" aria-label="Example icon button with a heart icon">
|
||||
<mat-icon>favorite</mat-icon>
|
||||
</button>
|
||||
<button mat-icon-button class="me-2" color="purple-light" aria-label="Example icon button with a heart icon">
|
||||
<mat-icon>favorite</mat-icon>
|
||||
</button>
|
||||
<button mat-icon-button class="me-2" color="raspberry" aria-label="Example icon button with a heart icon">
|
||||
<mat-icon>favorite</mat-icon>
|
||||
</button>
|
||||
<button mat-icon-button class="me-2" color="orange" aria-label="Example icon button with a heart icon">
|
||||
<mat-icon>favorite</mat-icon>
|
||||
</button>
|
||||
<button mat-icon-button class="me-2" color="yellow" aria-label="Example icon button with a heart icon">
|
||||
<mat-icon>favorite</mat-icon>
|
||||
</button>
|
||||
<button mat-icon-button class="me-2" color="teal" aria-label="Example icon button with a heart icon">
|
||||
<mat-icon>favorite</mat-icon>
|
||||
</button>
|
||||
<button mat-icon-button class="me-2" color="megna" aria-label="Example icon button with a heart icon">
|
||||
<mat-icon>favorite</mat-icon>
|
||||
</button>
|
||||
<button mat-icon-button class="me-2" color="magenta" aria-label="Example icon button with a heart icon">
|
||||
<mat-icon>favorite</mat-icon>
|
||||
</button>
|
||||
<button mat-icon-button class="me-2" color="pink" aria-label="Example icon button with a heart icon">
|
||||
<mat-icon>favorite</mat-icon>
|
||||
</button>
|
||||
<button mat-icon-button class="me-2" disabled aria-label="Example icon button with a open in new tab icon">
|
||||
<mat-icon>open_in_new</mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<mat-divider class="my-4"></mat-divider>
|
||||
<section>
|
||||
<div class="mb-2">Demo</div>
|
||||
<div class="d-flex my-2">
|
||||
<button mat-button color="primary" class="me-2 align-self-center">Texte</button>
|
||||
<button mat-stroked-button color="primary" class="me-2 align-self-center">Texte Stroked</button>
|
||||
<button mat-flat-button color="primary" class="me-2 align-self-center">Texte Flat</button>
|
||||
<button mat-raised-button color="primary" class="me-2 align-self-center">Texte Raised</button>
|
||||
<button mat-fab color="primary" class="me-2 align-self-center">
|
||||
<mat-icon>check_circle</mat-icon>
|
||||
</button>
|
||||
<button mat-mini-fab color="primary" class="me-2 align-self-center">
|
||||
<mat-icon>check_circle</mat-icon>
|
||||
</button>
|
||||
<button mat-icon-button color="primary" class="me-2 align-self-center">
|
||||
<mat-icon>check_circle</mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
<div class="d-flex my-2">
|
||||
<button mat-button color="accent" class="me-2 align-self-center">Texte</button>
|
||||
<button mat-stroked-button color="accent" class="me-2 align-self-center">Texte Stroked</button>
|
||||
<button mat-flat-button color="accent" class="me-2 align-self-center">Texte Flat</button>
|
||||
<button mat-raised-button color="accent" class="me-2 align-self-center">Texte Raised</button>
|
||||
<button mat-fab color="accent" class="me-2 align-self-center">
|
||||
<mat-icon>check_circle</mat-icon>
|
||||
</button>
|
||||
<button mat-mini-fab color="accent" class="me-2 align-self-center">
|
||||
<mat-icon>check_circle</mat-icon>
|
||||
</button>
|
||||
<button mat-icon-button color="accent" class="me-2 align-self-center">
|
||||
<mat-icon>check_circle</mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
<div class="d-flex my-2">
|
||||
<button mat-button color="warn" class="me-2 align-self-center">Texte</button>
|
||||
<button mat-stroked-button color="warn" class="me-2 align-self-center">Texte Stroked</button>
|
||||
<button mat-flat-button color="warn" class="me-2 align-self-center">Texte Flat</button>
|
||||
<button mat-raised-button color="warn" class="me-2 align-self-center">Texte Raised</button>
|
||||
<button mat-fab color="warn" class="me-2 align-self-center">
|
||||
<mat-icon>check_circle</mat-icon>
|
||||
</button>
|
||||
<button mat-mini-fab color="warn" class="me-2 align-self-center">
|
||||
<mat-icon>check_circle</mat-icon>
|
||||
</button>
|
||||
<button mat-icon-button color="warn" class="me-2 align-self-center">
|
||||
<mat-icon>check_circle</mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
<div class="d-flex my-2">
|
||||
<button mat-button color="danger" class="me-2 align-self-center">Texte</button>
|
||||
<button mat-stroked-button color="danger" class="me-2 align-self-center">Texte Stroked</button>
|
||||
<button mat-flat-button color="danger" class="me-2 align-self-center">Texte Flat</button>
|
||||
<button mat-raised-button color="danger" class="me-2 align-self-center">Texte Raised</button>
|
||||
<button mat-fab color="danger" class="me-2 align-self-center">
|
||||
<mat-icon>check_circle</mat-icon>
|
||||
</button>
|
||||
<button mat-mini-fab color="danger" class="me-2 align-self-center">
|
||||
<mat-icon>check_circle</mat-icon>
|
||||
</button>
|
||||
<button mat-icon-button color="danger" class="me-2 align-self-center">
|
||||
<mat-icon>check_circle</mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
<div class="d-flex my-2">
|
||||
<button mat-button color="info" class="me-2 align-self-center">Texte</button>
|
||||
<button mat-stroked-button color="info" class="me-2 align-self-center">Texte Stroked</button>
|
||||
<button mat-flat-button color="info" class="me-2 align-self-center">Texte Flat</button>
|
||||
<button mat-raised-button color="info" class="me-2 align-self-center">Texte Raised</button>
|
||||
<button mat-fab color="info" class="me-2 align-self-center">
|
||||
<mat-icon>info</mat-icon>
|
||||
</button>
|
||||
<button mat-mini-fab color="info" class="me-2 align-self-center">
|
||||
<mat-icon>info</mat-icon>
|
||||
</button>
|
||||
<button mat-icon-button color="info" class="me-2 align-self-center">
|
||||
<mat-icon>info</mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
<div class="d-flex my-2">
|
||||
<button mat-button color="success" class="me-2 align-self-center">Texte</button>
|
||||
<button mat-stroked-button color="success" class="me-2 align-self-center">Texte Stroked</button>
|
||||
<button mat-flat-button color="success" class="me-2 align-self-center">Texte Flat</button>
|
||||
<button mat-raised-button color="success" class="me-2 align-self-center">Texte Raised</button>
|
||||
<button mat-fab color="success" class="me-2 align-self-center">
|
||||
<mat-icon>check_circle</mat-icon>
|
||||
</button>
|
||||
<button mat-mini-fab color="success" class="me-2 align-self-center">
|
||||
<mat-icon>check_circle</mat-icon>
|
||||
</button>
|
||||
<button mat-icon-button color="success" class="me-2 align-self-center">
|
||||
<mat-icon>check_circle</mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
<div class="d-flex my-2">
|
||||
<button mat-button color="turquoise" class="me-2 align-self-center">Texte</button>
|
||||
<button mat-stroked-button color="turquoise" class="me-2 align-self-center">Texte Stroked</button>
|
||||
<button mat-flat-button color="turquoise" class="me-2 align-self-center">Texte Flat</button>
|
||||
<button mat-raised-button color="turquoise" class="me-2 align-self-center">Texte Raised</button>
|
||||
<button mat-fab color="turquoise" class="me-2 align-self-center">
|
||||
<mat-icon>check_circle</mat-icon>
|
||||
</button>
|
||||
<button mat-mini-fab color="turquoise" class="me-2 align-self-center">
|
||||
<mat-icon>check_circle</mat-icon>
|
||||
</button>
|
||||
<button mat-icon-button color="turquoise" class="me-2 align-self-center">
|
||||
<mat-icon>check_circle</mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
<div class="d-flex my-2">
|
||||
<button mat-button color="cyan" class="me-2 align-self-center">Texte</button>
|
||||
<button mat-stroked-button color="cyan" class="me-2 align-self-center">Texte Stroked</button>
|
||||
<button mat-flat-button color="cyan" class="me-2 align-self-center">Texte Flat</button>
|
||||
<button mat-raised-button color="cyan" class="me-2 align-self-center">Texte Raised</button>
|
||||
<button mat-fab color="cyan" class="me-2 align-self-center">
|
||||
<mat-icon>check_circle</mat-icon>
|
||||
</button>
|
||||
<button mat-mini-fab color="cyan" class="me-2 align-self-center">
|
||||
<mat-icon>check_circle</mat-icon>
|
||||
</button>
|
||||
<button mat-icon-button color="cyan" class="me-2 align-self-center">
|
||||
<mat-icon>check_circle</mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
<div class="d-flex my-2">
|
||||
<button mat-button color="navy" class="me-2 align-self-center">Texte</button>
|
||||
<button mat-stroked-button color="navy" class="me-2 align-self-center">Texte Stroked</button>
|
||||
<button mat-flat-button color="navy" class="me-2 align-self-center">Texte Flat</button>
|
||||
<button mat-raised-button color="navy" class="me-2 align-self-center">Texte Raised</button>
|
||||
<button mat-fab color="navy" class="me-2 align-self-center">
|
||||
<mat-icon>check_circle</mat-icon>
|
||||
</button>
|
||||
<button mat-mini-fab color="navy" class="me-2 align-self-center">
|
||||
<mat-icon>check_circle</mat-icon>
|
||||
</button>
|
||||
<button mat-icon-button color="navy" class="me-2 align-self-center">
|
||||
<mat-icon>check_circle</mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
<div class="d-flex my-2">
|
||||
<button mat-button color="navy-light" class="me-2 align-self-center">Texte</button>
|
||||
<button mat-stroked-button color="navy-light" class="me-2 align-self-center">Texte Stroked</button>
|
||||
<button mat-flat-button color="navy-light" class="me-2 align-self-center">Texte Flat</button>
|
||||
<button mat-raised-button color="navy-light" class="me-2 align-self-center">Texte Raised</button>
|
||||
<button mat-fab color="navy-light" class="me-2 align-self-center">
|
||||
<mat-icon>check_circle</mat-icon>
|
||||
</button>
|
||||
<button mat-mini-fab color="navy-light" class="me-2 align-self-center">
|
||||
<mat-icon>check_circle</mat-icon>
|
||||
</button>
|
||||
<button mat-icon-button color="navy-light" class="me-2 align-self-center">
|
||||
<mat-icon>check_circle</mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
<div class="d-flex my-2">
|
||||
<button mat-button color="purple" class="me-2 align-self-center">Texte</button>
|
||||
<button mat-stroked-button color="purple" class="me-2 align-self-center">Texte Stroked</button>
|
||||
<button mat-flat-button color="purple" class="me-2 align-self-center">Texte Flat</button>
|
||||
<button mat-raised-button color="purple" class="me-2 align-self-center">Texte Raised</button>
|
||||
<button mat-fab color="purple" class="me-2 align-self-center">
|
||||
<mat-icon>check_circle</mat-icon>
|
||||
</button>
|
||||
<button mat-mini-fab color="purple" class="me-2 align-self-center">
|
||||
<mat-icon>check_circle</mat-icon>
|
||||
</button>
|
||||
<button mat-icon-button color="purple" class="me-2 align-self-center">
|
||||
<mat-icon>check_circle</mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
<div class="d-flex my-2">
|
||||
<button mat-button color="purple-light" class="me-2 align-self-center">Texte</button>
|
||||
<button mat-stroked-button color="purple-light" class="me-2 align-self-center">Texte Stroked</button>
|
||||
<button mat-flat-button color="purple-light" class="me-2 align-self-center">Texte Flat</button>
|
||||
<button mat-raised-button color="purple-light" class="me-2 align-self-center">Texte Raised</button>
|
||||
<button mat-fab color="purple-light" class="me-2 align-self-center">
|
||||
<mat-icon>check_circle</mat-icon>
|
||||
</button>
|
||||
<button mat-mini-fab color="purple-light" class="me-2 align-self-center">
|
||||
<mat-icon>check_circle</mat-icon>
|
||||
</button>
|
||||
<button mat-icon-button color="purple-light" class="me-2 align-self-center">
|
||||
<mat-icon>check_circle</mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
<div class="d-flex my-2">
|
||||
<button mat-button color="raspberry" class="me-2 align-self-center">Texte</button>
|
||||
<button mat-stroked-button color="raspberry" class="me-2 align-self-center">Texte Stroked</button>
|
||||
<button mat-flat-button color="raspberry" class="me-2 align-self-center">Texte Flat</button>
|
||||
<button mat-raised-button color="raspberry" class="me-2 align-self-center">Texte Raised</button>
|
||||
<button mat-fab color="raspberry" class="me-2 align-self-center">
|
||||
<mat-icon>check_circle</mat-icon>
|
||||
</button>
|
||||
<button mat-mini-fab color="raspberry" class="me-2 align-self-center">
|
||||
<mat-icon>check_circle</mat-icon>
|
||||
</button>
|
||||
<button mat-icon-button color="raspberry" class="me-2 align-self-center">
|
||||
<mat-icon>check_circle</mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
<div class="d-flex my-2">
|
||||
<button mat-button color="orange" class="me-2 align-self-center">Texte</button>
|
||||
<button mat-stroked-button color="orange" class="me-2 align-self-center">Texte Stroked</button>
|
||||
<button mat-flat-button color="orange" class="me-2 align-self-center">Texte Flat</button>
|
||||
<button mat-raised-button color="orange" class="me-2 align-self-center">Texte Raised</button>
|
||||
<button mat-fab color="orange" class="me-2 align-self-center">
|
||||
<mat-icon>check_circle</mat-icon>
|
||||
</button>
|
||||
<button mat-mini-fab color="orange" class="me-2 align-self-center">
|
||||
<mat-icon>check_circle</mat-icon>
|
||||
</button>
|
||||
<button mat-icon-button color="orange" class="me-2 align-self-center">
|
||||
<mat-icon>check_circle</mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
<div class="d-flex my-2">
|
||||
<button mat-button color="yellow" class="me-2 align-self-center">Texte</button>
|
||||
<button mat-stroked-button color="yellow" class="me-2 align-self-center">Texte Stroked</button>
|
||||
<button mat-flat-button color="yellow" class="me-2 align-self-center">Texte Flat</button>
|
||||
<button mat-raised-button color="yellow" class="me-2 align-self-center">Texte Raised</button>
|
||||
<button mat-fab color="yellow" class="me-2 align-self-center">
|
||||
<mat-icon>check_circle</mat-icon>
|
||||
</button>
|
||||
<button mat-mini-fab color="yellow" class="me-2 align-self-center">
|
||||
<mat-icon>check_circle</mat-icon>
|
||||
</button>
|
||||
<button mat-icon-button color="yellow" class="me-2 align-self-center">
|
||||
<mat-icon>check_circle</mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
<div class="d-flex my-2">
|
||||
<button mat-button color="teal" class="me-2 align-self-center">Texte</button>
|
||||
<button mat-stroked-button color="teal" class="me-2 align-self-center">Texte Stroked</button>
|
||||
<button mat-flat-button color="teal" class="me-2 align-self-center">Texte Flat</button>
|
||||
<button mat-raised-button color="teal" class="me-2 align-self-center">Texte Raised</button>
|
||||
<button mat-fab color="teal" class="me-2 align-self-center">
|
||||
<mat-icon>check_circle</mat-icon>
|
||||
</button>
|
||||
<button mat-mini-fab color="teal" class="me-2 align-self-center">
|
||||
<mat-icon>check_circle</mat-icon>
|
||||
</button>
|
||||
<button mat-icon-button color="teal" class="me-2 align-self-center">
|
||||
<mat-icon>check_circle</mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
<div class="d-flex my-2">
|
||||
<button mat-button color="megna" class="me-2 align-self-center">Texte</button>
|
||||
<button mat-stroked-button color="megna" class="me-2 align-self-center">Texte Stroked</button>
|
||||
<button mat-flat-button color="megna" class="me-2 align-self-center">Texte Flat</button>
|
||||
<button mat-raised-button color="megna" class="me-2 align-self-center">Texte Raised</button>
|
||||
<button mat-fab color="megna" class="me-2 align-self-center">
|
||||
<mat-icon>check_circle</mat-icon>
|
||||
</button>
|
||||
<button mat-mini-fab color="megna" class="me-2 align-self-center">
|
||||
<mat-icon>check_circle</mat-icon>
|
||||
</button>
|
||||
<button mat-icon-button color="megna" class="me-2 align-self-center">
|
||||
<mat-icon>check_circle</mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
<div class="d-flex my-2">
|
||||
<button mat-button color="magenta" class="me-2 align-self-center">Texte</button>
|
||||
<button mat-stroked-button color="magenta" class="me-2 align-self-center">Texte Stroked</button>
|
||||
<button mat-flat-button color="magenta" class="me-2 align-self-center">Texte Flat</button>
|
||||
<button mat-raised-button color="magenta" class="me-2 align-self-center">Texte Raised</button>
|
||||
<button mat-fab color="magenta" class="me-2 align-self-center">
|
||||
<mat-icon>check_circle</mat-icon>
|
||||
</button>
|
||||
<button mat-mini-fab color="magenta" class="me-2 align-self-center">
|
||||
<mat-icon>check_circle</mat-icon>
|
||||
</button>
|
||||
<button mat-icon-button color="magenta" class="me-2 align-self-center">
|
||||
<mat-icon>check_circle</mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
<div class="d-flex my-2">
|
||||
<button mat-button color="pink" class="me-2 align-self-center">Texte</button>
|
||||
<button mat-stroked-button color="pink" class="me-2 align-self-center">Texte Stroked</button>
|
||||
<button mat-flat-button color="pink" class="me-2 align-self-center">Texte Flat</button>
|
||||
<button mat-raised-button color="pink" class="me-2 align-self-center">Texte Raised</button>
|
||||
<button mat-fab color="pink" class="me-2 align-self-center">
|
||||
<mat-icon>check_circle</mat-icon>
|
||||
</button>
|
||||
<button mat-mini-fab color="pink" class="me-2 align-self-center">
|
||||
<mat-icon>check_circle</mat-icon>
|
||||
</button>
|
||||
<button mat-icon-button color="pink" class="me-2 align-self-center">
|
||||
<mat-icon>check_circle</mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
<mat-divider class="my-4"></mat-divider>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
</div>
|
||||
@@ -1,26 +1,7 @@
|
||||
/* Profile */
|
||||
@use 'variable' as var;
|
||||
//@use 'variable' as var;
|
||||
// --> background-color: var.$sidebar-footer;
|
||||
|
||||
.banner {
|
||||
background-color: var.$sidebar-footer;
|
||||
padding: 1.3rem 0 1.1rem 0;
|
||||
margin: -1.5rem -1.5rem 1.5rem -1.5rem;
|
||||
.user-img {
|
||||
width: var.$user-img-size;
|
||||
height: var.$user-img-size;
|
||||
border-radius: var.$user-img-size;
|
||||
}
|
||||
h4 {
|
||||
font-weight: 500;
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
p {
|
||||
margin: 0 auto .5rem;
|
||||
color: var.$muted;
|
||||
max-width: 450px;
|
||||
font-weight: 300;
|
||||
}
|
||||
}
|
||||
.mat-mdc-card + .mat-mdc-card {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
@@ -6,9 +6,9 @@ ol.squareItems {
|
||||
margin: 1rem 0;
|
||||
li {
|
||||
color: var.$primary;
|
||||
background-color: var.$sidenav-content; //var.$dark;
|
||||
background-color: var.$sidenav-content;
|
||||
background-image: none;
|
||||
border: 1px solid var.$dark; //var.$extra-muted;
|
||||
border: 1px solid var.$dark;
|
||||
cursor: pointer;
|
||||
float: left;
|
||||
list-style-type: none;
|
||||
|
||||
@@ -1,12 +1,12 @@
|
||||
<div class="banner bg-accent mat-elevation-z2">
|
||||
<div class="d-flex mx-2 mx-md-3 mx-lg-4">
|
||||
<div class="banner mat-elevation-z2">
|
||||
<div class="banner-content d-flex text-bg-accent bg-opacity-50">
|
||||
<img [src]="user.image" class="user-img me-3" [alt]="user.username" />
|
||||
<div class="flex-spacer">
|
||||
<h3 class="mb-0">{{bannerTitle}}</h3>
|
||||
<span class="fs-6">{{user.firstname}} {{user.lastname}}</span>
|
||||
</div>
|
||||
<div class="align-self-center text-end">
|
||||
<button mat-raised-button color="cyan" [routerLink]="['/profile', user.username]">
|
||||
<button mat-raised-button color="megna" [routerLink]="['/profile', user.username]">
|
||||
<mat-icon aria-label="Voir le compte" fontIcon="person"></mat-icon> Mon compte
|
||||
</button>
|
||||
<button mat-raised-button color="warn" routerLink="/settings" class="ms-2">
|
||||
|
||||
@@ -1,26 +1,7 @@
|
||||
/* Credentials */
|
||||
@use 'variable' as var;
|
||||
//@use 'variable' as var;
|
||||
// --> background-color: var.$sidebar-footer;
|
||||
|
||||
.banner {
|
||||
background-color: var.$sidebar-footer;
|
||||
padding: 1.3rem 0 1.1rem 0;
|
||||
margin: -1.5rem -1.5rem 1.5rem -1.5rem;
|
||||
.user-img {
|
||||
width: var.$user-img-size;
|
||||
height: var.$user-img-size;
|
||||
border-radius: var.$user-img-size;
|
||||
}
|
||||
h4 {
|
||||
font-weight: 500;
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
p {
|
||||
margin: 0 auto .5rem;
|
||||
color: var.$muted;
|
||||
max-width: 450px;
|
||||
font-weight: 300;
|
||||
}
|
||||
}
|
||||
/* Chrome, Safari, Edge, Opera */
|
||||
input::-webkit-outer-spin-button,
|
||||
input::-webkit-inner-spin-button {
|
||||
|
||||
@@ -1,12 +1,12 @@
|
||||
<div class="banner bg-accent mat-elevation-z2">
|
||||
<div class="d-flex mx-2 mx-md-3 mx-lg-4">
|
||||
<div class="banner mat-elevation-z2">
|
||||
<div class="banner-content d-flex text-bg-accent bg-opacity-50">
|
||||
<img [src]="user.image" class="user-img me-3" [alt]="user.username" />
|
||||
<div class="flex-spacer">
|
||||
<h3 class="mb-0">{{bannerTitle}}</h3>
|
||||
<span class="fs-6">{{user.firstname}} {{user.lastname}}</span>
|
||||
</div>
|
||||
<div class="align-self-center text-end">
|
||||
<button mat-raised-button color="cyan" [routerLink]="['/profile', user.username]">
|
||||
<button mat-raised-button color="megna" [routerLink]="['/profile', user.username]">
|
||||
<mat-icon aria-label="Voir le compte" fontIcon="person"></mat-icon> Mon compte
|
||||
</button>
|
||||
</div>
|
||||
|
||||
@@ -1,38 +1,6 @@
|
||||
/* Settings */
|
||||
@use 'variable' as var;
|
||||
|
||||
.banner {
|
||||
background-color: var.$sidebar-footer;
|
||||
padding: 1.3rem 0 1.1rem 0;
|
||||
margin: -1.5rem -1.5rem 1.5rem -1.5rem;
|
||||
/*
|
||||
background-color: mat.get-color-from-palette(var.$md-custom-warn, 700);
|
||||
margin-bottom: 1rem;
|
||||
&.light {
|
||||
background-color: mat.get-color-from-palette(var.$md-custom-accent, 700);
|
||||
color: #555;
|
||||
button {
|
||||
color: #555;
|
||||
border-color: #555;
|
||||
}
|
||||
}
|
||||
*/
|
||||
.user-img {
|
||||
width: var.$user-img-size;
|
||||
height: var.$user-img-size;
|
||||
border-radius: var.$user-img-size;
|
||||
}
|
||||
h4 {
|
||||
font-weight: 500;
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
p {
|
||||
margin: 0 auto .5rem;
|
||||
color: var.$muted;
|
||||
max-width: 450px;
|
||||
font-weight: 300;
|
||||
}
|
||||
}
|
||||
//@use 'variable' as var;
|
||||
// --> background-color: var.$sidebar-footer;
|
||||
|
||||
.settings-page > .container {
|
||||
margin-top: 2.4rem;
|
||||
|
||||
@@ -1,7 +1,9 @@
|
||||
export * from './accordion';
|
||||
export * from './dashboard-components';
|
||||
export * from './fortification-card-content/fortification-card-content.component';
|
||||
export * from './helpers-chart';
|
||||
export * from './helpers-jump';
|
||||
export * from './herowars-components';
|
||||
//export * from './layout';
|
||||
export * from './layout/footer.component';
|
||||
export * from './layout/full.component';
|
||||
@@ -9,6 +11,7 @@ export * from './layout/header.component';
|
||||
export * from './list-errors/list-errors.component';
|
||||
export * from './spinner/spinner.component';
|
||||
export * from './confirmed.validator';
|
||||
export * from './floor.pipe';
|
||||
export * from './french-paginator.component';
|
||||
export * from './menu-items';
|
||||
export * from './show-authed.directive';
|
||||
|
||||
@@ -59,6 +59,9 @@
|
||||
<button mat-menu-item routerLink="/settings" routerLinkActive="active">
|
||||
<mat-icon fontIcon="settings" color="primary"></mat-icon> Paramètres
|
||||
</button>
|
||||
<button mat-menu-item routerLink="/demo" routerLinkActive="active">
|
||||
<mat-icon fontIcon="color_lens" color="primary"></mat-icon> Demo UI
|
||||
</button>
|
||||
<button mat-menu-item (click)="goToGitHub()">
|
||||
<mat-icon fontIcon="code" color="primary"></mat-icon> GitHub
|
||||
</button>
|
||||
|
||||
@@ -47,7 +47,8 @@ export class FullComponent implements OnInit, OnDestroy {
|
||||
siteLink = 'https://www.adastra-cbd.com';
|
||||
author = 'Ad Astra';
|
||||
links: Menu[] = [];
|
||||
visibleMenu: string[] = ['products', 'page'];
|
||||
visibleMenu: string[] = [];
|
||||
//visibleMenu: string[] = ['products', 'page'];
|
||||
//visibleMenu: string[] = ['products'];
|
||||
|
||||
constructor(
|
||||
|
||||
@@ -52,7 +52,8 @@ const MENUITEMS: Menu[] = [
|
||||
{ state: 'page', type: 'menu', name: 'Documentation', icon: 'books', desc: '' },
|
||||
{ parent: 'page', state: 'les-fleurs', type: 'link', name: 'Fleurs', icon: 'marijuana', desc: '' },
|
||||
{ parent: 'page', state: 'les-resines', type: 'link', name: 'Résines', icon: 'butter', desc: '' },
|
||||
{ parent: 'page', state: 'les-molecules', type: 'link', name: 'Molécules', icon: 'molecule', desc: '' }
|
||||
{ parent: 'page', state: 'les-molecules', type: 'link', name: 'Molécules', icon: 'molecule', desc: '' },
|
||||
{ state: 'herowars', type: 'link', name: 'Hero Wars', icon: 'military_tech', icontype: 'mat', desc: '' }
|
||||
];
|
||||
|
||||
const MENUPJUMP: Menu[] = [
|
||||
|
||||
@@ -13,6 +13,7 @@ export * from './category.model';
|
||||
export * from './chart.model';
|
||||
export * from './dropzone.model';
|
||||
export * from './errors.model';
|
||||
export * from './hw.model';
|
||||
export * from './jump.model';
|
||||
export * from './jump-list.model';
|
||||
export * from './jump-list-config.model';
|
||||
|
||||
@@ -67,6 +67,15 @@ export class UtilitiesService {
|
||||
getCurrentDateFr(): string {
|
||||
return new Date().toLocaleDateString('fr');
|
||||
}
|
||||
|
||||
secondsToDuration(seconds: number, delimiter: string = ':'): string {
|
||||
return [
|
||||
Math.floor(seconds / 60 / 60),
|
||||
Math.floor(seconds / 60 % 60),
|
||||
Math.floor(seconds % 60)
|
||||
].join(delimiter)
|
||||
.replace(/\b(\d)\b/g, "0$1")//.replace(/^00\:/, '')
|
||||
}
|
||||
|
||||
getSeriesColors(opacity: number, palette: string = 'all', offset: number = 0): string[] {
|
||||
let colors: string[] = [];
|
||||
|
||||
@@ -2,7 +2,7 @@ import { Routes } from '@angular/router';
|
||||
|
||||
import {
|
||||
AeronefsComponent, CalculatorComponent, CanopiesComponent, CredentialsComponent,
|
||||
DashboardComponent, DropzonesComponent, JumpComponent, JumpsComponent,
|
||||
DashboardComponent, DemoComponent, DropzonesComponent, HerowarsComponent, JumpComponent, JumpsComponent,
|
||||
LogbookComponent, PageComponent, PagesComponent, ProductComponent, ProductsComponent, ProfileComponent, QcmComponent, SettingsComponent
|
||||
} from 'src/app/components';
|
||||
import { authGuard, adminGuard } from 'src/app/core/guards';
|
||||
@@ -44,6 +44,11 @@ export const AUTH_ROUTES: Routes = [
|
||||
isAuthenticated: authResolver
|
||||
}
|
||||
},
|
||||
{
|
||||
path: 'demo',
|
||||
component: DemoComponent,
|
||||
canActivate: [ authGuard ]
|
||||
},
|
||||
{
|
||||
path: 'dropzones',
|
||||
component: DropzonesComponent,
|
||||
@@ -52,6 +57,11 @@ export const AUTH_ROUTES: Routes = [
|
||||
dropZonesPageData: dropZonesPageResolver
|
||||
}
|
||||
},
|
||||
{
|
||||
path: 'herowars',
|
||||
component: HerowarsComponent,
|
||||
canActivate: [ authGuard ]
|
||||
},
|
||||
{
|
||||
path: 'jumps',
|
||||
component: JumpsComponent,
|
||||
@@ -94,27 +104,27 @@ export const AUTH_ROUTES: Routes = [
|
||||
}
|
||||
},
|
||||
{
|
||||
path: 'products',
|
||||
component: ProductsComponent,
|
||||
canActivate: [ authGuard, adminGuard ],
|
||||
path: 'product/:slug',
|
||||
component: ProductComponent,
|
||||
canActivate: [ authGuard ],
|
||||
resolve: {
|
||||
pageData: productsResolver
|
||||
pageData: productResolver
|
||||
}
|
||||
},
|
||||
{
|
||||
path: 'products/:category',
|
||||
component: ProductsComponent,
|
||||
canActivate: [ authGuard, adminGuard ],
|
||||
canActivate: [ authGuard ],
|
||||
resolve: {
|
||||
pageData: productsResolver
|
||||
}
|
||||
},
|
||||
{
|
||||
path: 'product/:slug',
|
||||
component: ProductComponent,
|
||||
canActivate: [ authGuard, adminGuard ],
|
||||
path: 'products',
|
||||
component: ProductsComponent,
|
||||
canActivate: [ authGuard ],
|
||||
resolve: {
|
||||
pageData: productResolver
|
||||
pageData: productsResolver
|
||||
}
|
||||
},
|
||||
{
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
import { Routes } from '@angular/router';
|
||||
|
||||
import { AuthComponent, HomeComponent, PageComponent, PagesComponent } from 'src/app/components';
|
||||
import { AuthComponent, HomeComponent, PageComponent, PagesComponent, ProductComponent } from 'src/app/components';
|
||||
import { noauthGuard } from 'src/app/core/guards';
|
||||
import { articleResolver, articlesResolver } from 'src/app/core/resolvers';
|
||||
import { articleResolver, articlesResolver, productResolver } from 'src/app/core/resolvers';
|
||||
|
||||
export const NOAUTH_ROUTES: Routes = [
|
||||
{
|
||||
@@ -35,6 +35,14 @@ export const NOAUTH_ROUTES: Routes = [
|
||||
pageData: articleResolver
|
||||
}
|
||||
},
|
||||
{
|
||||
path: 'product/:slug',
|
||||
component: ProductComponent,
|
||||
canActivate: [ noauthGuard ],
|
||||
resolve: {
|
||||
pageData: productResolver
|
||||
}
|
||||
},
|
||||
{
|
||||
path: '',
|
||||
redirectTo: 'home',
|
||||
|
||||
Reference in New Issue
Block a user