mirror of
https://framagit.org/framasoft/framadate/funky-framadate-front.git
synced 2023-08-25 13:53:14 +02:00
detect homepage to add container
This commit is contained in:
tykayn
parent
34632957fb
commit
d009f42a56
@ -5,8 +5,8 @@
|
|||||||
|
|
||||||
<mat-sidenav-content>
|
<mat-sidenav-content>
|
||||||
<div id="big_container" [class]="themeClass">
|
<div id="big_container" [class]="themeClass">
|
||||||
<div class="container">
|
<app-header [appTitle]="appTitle" [appLogo]="appLogo"></app-header>
|
||||||
<app-header [appTitle]="appTitle" [appLogo]="appLogo"></app-header>
|
<div [class.container]="onHomePage">
|
||||||
<main [@routeAnimations]="prepareRoute(outlet)">
|
<main [@routeAnimations]="prepareRoute(outlet)">
|
||||||
<router-outlet #outlet></router-outlet>
|
<router-outlet #outlet></router-outlet>
|
||||||
</main>
|
</main>
|
||||||
|
|||||||
@ -35,6 +35,7 @@ export class AppComponent implements OnInit, OnDestroy, AfterViewInit {
|
|||||||
private themeSubscription: Subscription;
|
private themeSubscription: Subscription;
|
||||||
|
|
||||||
public environment = environment;
|
public environment = environment;
|
||||||
|
public onHomePage = false;
|
||||||
|
|
||||||
constructor(
|
constructor(
|
||||||
private router: Router,
|
private router: Router,
|
||||||
@ -67,6 +68,9 @@ export class AppComponent implements OnInit, OnDestroy, AfterViewInit {
|
|||||||
if (!(evt instanceof NavigationEnd)) {
|
if (!(evt instanceof NavigationEnd)) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
console.log('evt', evt);
|
||||||
|
|
||||||
|
this.onHomePage = evt.url === '/';
|
||||||
|
|
||||||
let mainelem = this.document.querySelector('#big_container main');
|
let mainelem = this.document.querySelector('#big_container main');
|
||||||
console.log('mainelem', mainelem);
|
console.log('mainelem', mainelem);
|
||||||
|
|||||||
@ -1,132 +1,139 @@
|
|||||||
<header class="big-header">
|
<header class="big-header">
|
||||||
<nav class="navbar" role="navigation" aria-label="main navigation">
|
<div class="container">
|
||||||
<div class="navbar-brand">
|
<nav class="navbar" role="navigation" aria-label="main navigation">
|
||||||
<a class="navbar-item" routerLink="/">
|
<div class="navbar-brand">
|
||||||
<img class="app-logo logo" *ngIf="appLogo" src="{{ appLogo }}" alt="{{ appTitle }}" />
|
<a class="navbar-item" routerLink="/">
|
||||||
</a>
|
<img class="app-logo logo" *ngIf="appLogo" src="{{ appLogo }}" alt="{{ appTitle }}" />
|
||||||
<a class="navbar-item title is-size-1-fullhd is-size-4-touch has-text-black" routerLink="/">
|
|
||||||
{{ appTitle }}
|
|
||||||
<sub>
|
|
||||||
{{ environment.appVersion }}
|
|
||||||
</sub>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
<div class="navbar-start">
|
|
||||||
<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>
|
</a>
|
||||||
</span>
|
<a class="navbar-item title is-size-1-fullhd is-size-4-touch has-text-black" routerLink="/">
|
||||||
</div>
|
{{ appTitle }}
|
||||||
<div class="navbar-end">
|
<sub>
|
||||||
<!-- navbar items -->
|
{{ environment.appVersion }}
|
||||||
|
</sub>
|
||||||
<span class="navbar-item">
|
|
||||||
<app-language-selector></app-language-selector>
|
|
||||||
</span>
|
|
||||||
<a
|
|
||||||
role="button"
|
|
||||||
class="navbar-item burger-button-menu-custom"
|
|
||||||
aria-label="menu"
|
|
||||||
aria-expanded="false"
|
|
||||||
data-target="navbarBasicExample"
|
|
||||||
[ngClass]="{ 'has-background-primary': mobileMenuVisible }"
|
|
||||||
(click)="mobileMenuVisible = !mobileMenuVisible"
|
|
||||||
>
|
|
||||||
<i class="fa fa-bars" *ngIf="!mobileMenuVisible"></i>
|
|
||||||
<i class="fa fa-times" *ngIf="mobileMenuVisible"></i>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
<!-- navbar items -->
|
|
||||||
<div class="mobile-menu" *ngIf="mobileMenuVisible">
|
|
||||||
<!-- menu mobile-->
|
|
||||||
<app-navigation [appTitle]="appTitle" [appLogo]="appLogo"></app-navigation>
|
|
||||||
</div>
|
|
||||||
</nav>
|
|
||||||
|
|
||||||
<div
|
|
||||||
*ngIf="environment.showDemoWarning"
|
|
||||||
class="demo demo-warning well debug has-text-white-bis has-background-warning-dark padded marged"
|
|
||||||
>
|
|
||||||
<!-- infos locales storage-->
|
|
||||||
<i class="fa fa-info"></i>
|
|
||||||
Ce site est un espace de démonstration, les informations que vous y mettrez seront régulièrement supprimées.
|
|
||||||
N'en faites pas une utilisation réelle.
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="demo padded box has-background-info-light" *ngIf="environment.display_routes">
|
|
||||||
voici des liens de démonstration issus des fixtures Doctrine de date-poll-api.
|
|
||||||
<div class="padded">
|
|
||||||
<div class="">
|
|
||||||
<a class="navbar-item" [routerLink]="['/poll/demo/consultation']" routerLinkActive="is-primary">
|
|
||||||
<i class="fa fa-file-epub"></i>
|
|
||||||
<em>
|
|
||||||
demo
|
|
||||||
</em> </a
|
|
||||||
><a
|
|
||||||
class="navbar-item"
|
|
||||||
[routerLink]="['/poll/dessin-anime/consultation']"
|
|
||||||
routerLinkActive="is-primary"
|
|
||||||
>
|
|
||||||
<i class="fa fa-picture-o"></i>
|
|
||||||
<em>
|
|
||||||
dessin-anime
|
|
||||||
</em>
|
|
||||||
</a>
|
|
||||||
<a
|
|
||||||
class="navbar-item"
|
|
||||||
[routerLink]="['/poll/aujourdhui-ou-demain/consultation']"
|
|
||||||
routerLinkActive="is-primary"
|
|
||||||
>
|
|
||||||
<i class="fa fa-clock-o"></i>
|
|
||||||
<em>
|
|
||||||
aujourdhui-ou-demain
|
|
||||||
</em>
|
|
||||||
</a>
|
|
||||||
<a
|
|
||||||
class="navbar-item"
|
|
||||||
[routerLink]="[
|
|
||||||
'/admin/9S75b70ECXI5J5xDc058d3H40H9r2CHfO0Kj8T02EK2U8rY8fYTn-eS659j2Dhp794Oa6R1b9V70e3WGaE30iD9h45zwdm76C85SWB4LcUCrc7e0Ncc0'
|
|
||||||
]"
|
|
||||||
routerLinkActive="is-primary"
|
|
||||||
>
|
|
||||||
<i class="fa fa-gears"></i> administrer le sondage
|
|
||||||
<em>
|
|
||||||
aujourdhui-ou-demain
|
|
||||||
</em>
|
|
||||||
</a>
|
|
||||||
<a
|
|
||||||
class="navbar-item"
|
|
||||||
[routerLink]="['/poll/citron/consultation/prompt']"
|
|
||||||
routerLinkActive="is-primary"
|
|
||||||
>
|
|
||||||
<i class="fa fa-key"></i>
|
|
||||||
<em>
|
|
||||||
citron
|
|
||||||
</em>
|
|
||||||
écran de saisie de mot de passe
|
|
||||||
</a>
|
|
||||||
<a
|
|
||||||
class="navbar-item"
|
|
||||||
[routerLink]="['/poll/citron/consultation/secure/1c01ed9c94fc640a1be864f197ff808c']"
|
|
||||||
routerLinkActive="is-primary"
|
|
||||||
>
|
|
||||||
<i class="fa fa-key-modern"></i>
|
|
||||||
<em>
|
|
||||||
citron
|
|
||||||
</em>
|
|
||||||
+ pass intégré sans saisie
|
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="navbar-start">
|
||||||
|
<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 -->
|
||||||
|
|
||||||
|
<span class="navbar-item">
|
||||||
|
<app-language-selector></app-language-selector>
|
||||||
|
</span>
|
||||||
|
<a
|
||||||
|
role="button"
|
||||||
|
class="navbar-item burger-button-menu-custom"
|
||||||
|
aria-label="menu"
|
||||||
|
aria-expanded="false"
|
||||||
|
data-target="navbarBasicExample"
|
||||||
|
[ngClass]="{ 'has-background-primary': mobileMenuVisible }"
|
||||||
|
(click)="mobileMenuVisible = !mobileMenuVisible"
|
||||||
|
>
|
||||||
|
<i class="fa fa-bars" *ngIf="!mobileMenuVisible"></i>
|
||||||
|
<i class="fa fa-times" *ngIf="mobileMenuVisible"></i>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<!-- navbar items -->
|
||||||
|
<div class="mobile-menu" *ngIf="mobileMenuVisible">
|
||||||
|
<!-- menu mobile-->
|
||||||
|
<app-navigation [appTitle]="appTitle" [appLogo]="appLogo"></app-navigation>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<div
|
||||||
|
*ngIf="environment.showDemoWarning"
|
||||||
|
class="demo demo-warning well debug has-text-white-bis has-background-warning-dark padded marged"
|
||||||
|
>
|
||||||
|
<!-- infos locales storage-->
|
||||||
|
<i class="fa fa-info"></i>
|
||||||
|
Ce site est un espace de démonstration, les informations que vous y mettrez seront régulièrement supprimées.
|
||||||
|
N'en faites pas une utilisation réelle.
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div class="demo padded box has-background-info-light" *ngIf="environment.display_routes">
|
||||||
|
voici des liens de démonstration issus des fixtures Doctrine de date-poll-api.
|
||||||
|
<div class="padded">
|
||||||
|
<div class="">
|
||||||
|
<a class="navbar-item" [routerLink]="['/poll/demo/consultation']" routerLinkActive="is-primary">
|
||||||
|
<i class="fa fa-file-epub"></i>
|
||||||
|
<em>
|
||||||
|
demo
|
||||||
|
</em> </a
|
||||||
|
><a
|
||||||
|
class="navbar-item"
|
||||||
|
[routerLink]="['/poll/dessin-anime/consultation']"
|
||||||
|
routerLinkActive="is-primary"
|
||||||
|
>
|
||||||
|
<i class="fa fa-picture-o"></i>
|
||||||
|
<em>
|
||||||
|
dessin-anime
|
||||||
|
</em>
|
||||||
|
</a>
|
||||||
|
<a
|
||||||
|
class="navbar-item"
|
||||||
|
[routerLink]="['/poll/aujourdhui-ou-demain/consultation']"
|
||||||
|
routerLinkActive="is-primary"
|
||||||
|
>
|
||||||
|
<i class="fa fa-clock-o"></i>
|
||||||
|
<em>
|
||||||
|
aujourdhui-ou-demain
|
||||||
|
</em>
|
||||||
|
</a>
|
||||||
|
<a
|
||||||
|
class="navbar-item"
|
||||||
|
[routerLink]="[
|
||||||
|
'/admin/9S75b70ECXI5J5xDc058d3H40H9r2CHfO0Kj8T02EK2U8rY8fYTn-eS659j2Dhp794Oa6R1b9V70e3WGaE30iD9h45zwdm76C85SWB4LcUCrc7e0Ncc0'
|
||||||
|
]"
|
||||||
|
routerLinkActive="is-primary"
|
||||||
|
>
|
||||||
|
<i class="fa fa-gears"></i> administrer le sondage
|
||||||
|
<em>
|
||||||
|
aujourdhui-ou-demain
|
||||||
|
</em>
|
||||||
|
</a>
|
||||||
|
<a
|
||||||
|
class="navbar-item"
|
||||||
|
[routerLink]="['/poll/citron/consultation/prompt']"
|
||||||
|
routerLinkActive="is-primary"
|
||||||
|
>
|
||||||
|
<i class="fa fa-key"></i>
|
||||||
|
<em>
|
||||||
|
citron
|
||||||
|
</em>
|
||||||
|
écran de saisie de mot de passe
|
||||||
|
</a>
|
||||||
|
<a
|
||||||
|
class="navbar-item"
|
||||||
|
[routerLink]="['/poll/citron/consultation/secure/1c01ed9c94fc640a1be864f197ff808c']"
|
||||||
|
routerLinkActive="is-primary"
|
||||||
|
>
|
||||||
|
<i class="fa fa-key-modern"></i>
|
||||||
|
<em>
|
||||||
|
citron
|
||||||
|
</em>
|
||||||
|
+ pass intégré sans saisie
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<a
|
||||||
|
class="has-text-black"
|
||||||
|
href="/#/administration/key/8Ubcg2YI99f69xz946cn4O64bQAebi11012P70trL5372qJ9JOem1Ks2fz7XD0b09p-8Ubcg2YI99f69xz946cn4O64bQAeb"
|
||||||
|
>
|
||||||
|
<i class="fa fa-hand-paper-o"></i> test admin link to edit poll
|
||||||
|
</a>
|
||||||
</div>
|
</div>
|
||||||
<a
|
|
||||||
class="has-text-black"
|
|
||||||
href="/#/administration/key/8Ubcg2YI99f69xz946cn4O64bQAebi11012P70trL5372qJ9JOem1Ks2fz7XD0b09p-8Ubcg2YI99f69xz946cn4O64bQAeb"
|
|
||||||
>
|
|
||||||
<i class="fa fa-hand-paper-o"></i> test admin link to edit poll
|
|
||||||
</a>
|
|
||||||
</header>
|
</header>
|
||||||
|
|||||||
@ -1,12 +1,14 @@
|
|||||||
@charset "UTF-8";
|
@charset "UTF-8";
|
||||||
|
body,
|
||||||
|
html {
|
||||||
|
background: $white;
|
||||||
|
}
|
||||||
main {
|
main {
|
||||||
display: block;
|
display: block;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
.creation,
|
|
||||||
.search {
|
.search {
|
||||||
@extend main;
|
@extend main;
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,6 +1,28 @@
|
|||||||
|
app-header {
|
||||||
|
background: $primary_color;
|
||||||
|
color: $white;
|
||||||
|
}
|
||||||
|
.big-header {
|
||||||
|
background: $secondary-color;
|
||||||
|
color: $white;
|
||||||
|
.container {
|
||||||
|
background: $secondary-color;
|
||||||
|
color: $white;
|
||||||
|
box-shadow: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// material override
|
||||||
|
.navbar {
|
||||||
|
margin-bottom: 0;
|
||||||
|
background: $secondary-color;
|
||||||
|
color: $white;
|
||||||
|
}
|
||||||
|
|
||||||
nav {
|
nav {
|
||||||
|
background: $primary-color;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
border-bottom: 2px solid $primary;
|
border-bottom: 2px solid $primary-color;
|
||||||
|
|
||||||
a {
|
a {
|
||||||
&::before {
|
&::before {
|
||||||
@ -81,10 +103,6 @@ a {
|
|||||||
padding-left: 1rem;
|
padding-left: 1rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
// material override
|
|
||||||
.navbar {
|
|
||||||
margin-bottom: 0;
|
|
||||||
}
|
|
||||||
a span.ui-steps-number {
|
a span.ui-steps-number {
|
||||||
padding: 0;
|
padding: 0;
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,5 +1,5 @@
|
|||||||
#big_container {
|
#big_container {
|
||||||
background: $primary;
|
background: $white;
|
||||||
|
|
||||||
main {
|
main {
|
||||||
margin-bottom: 2em;
|
margin-bottom: 2em;
|
||||||
@ -11,9 +11,6 @@
|
|||||||
|
|
||||||
.container {
|
.container {
|
||||||
padding-bottom: 5em;
|
padding-bottom: 5em;
|
||||||
|
|
||||||
@extend .boxed-shadow;
|
|
||||||
|
|
||||||
.column:last-of-type {
|
.column:last-of-type {
|
||||||
text-align: right;
|
text-align: right;
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,6 +1,4 @@
|
|||||||
#big_container {
|
#big_container {
|
||||||
background: $primary;
|
|
||||||
|
|
||||||
&.theme-light-watermelon {
|
&.theme-light-watermelon {
|
||||||
.big-header {
|
.big-header {
|
||||||
.container {
|
.container {
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user