Liness/framadate-responsive
5
0
Fork 0
forked from tykayn/funky-framadate-front
Code Pull Requests Activity

detect homepage to add container

Browse Source
This commit is contained in:
Tykayn 2021-11-18 14:57:07 +01:00 committed by tykayn
parent 34632957fb
commit d009f42a56
7 changed files with 166 additions and 140 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/app/app.component.html
View File

@ -5,8 +5,8 @@
<mat-sidenav-content>
<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)">
<router-outlet #outlet></router-outlet>
</main>

4
src/app/app.component.ts
View File

@ -35,6 +35,7 @@ export class AppComponent implements OnInit, OnDestroy, AfterViewInit {
private themeSubscription: Subscription;
public environment = environment;
public onHomePage = false;
constructor(
private router: Router,
@ -67,6 +68,9 @@ export class AppComponent implements OnInit, OnDestroy, AfterViewInit {
if (!(evt instanceof NavigationEnd)) {
return;
}
console.log('evt', evt);
this.onHomePage = evt.url === '/';
let mainelem = this.document.querySelector('#big_container main');
console.log('mainelem', mainelem);

257
src/app/core/components/header/header.component.html
View File

@ -1,132 +1,139 @@
<header class="big-header">
<nav class="navbar" role="navigation" aria-label="main navigation">
<div class="navbar-brand">
<a class="navbar-item" routerLink="/">
<img class="app-logo logo" *ngIf="appLogo" src="{{ appLogo }}" alt="{{ appTitle }}" />
</a>
<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>
<div class="container">
<nav class="navbar" role="navigation" aria-label="main navigation">
<div class="navbar-brand">
<a class="navbar-item" routerLink="/">
<img class="app-logo logo" *ngIf="appLogo" src="{{ appLogo }}" alt="{{ appTitle }}" />
</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 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 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>
</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 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>
<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>

6
src/styles/partials/_main.scss
View File

@ -1,12 +1,14 @@
@charset "UTF-8";
body,
html {
background: $white;
}
main {
display: block;
width: 100%;
margin: 0 auto;
}
.creation,
.search {
@extend main;
}

28
src/styles/partials/_navigation.scss
View File

@ -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 {
background: $primary-color;
text-align: center;
border-bottom: 2px solid $primary;
border-bottom: 2px solid $primary-color;
a {
&::before {
@ -81,10 +103,6 @@ a {
padding-left: 1rem;
}
}
// material override
.navbar {
margin-bottom: 0;
}
a span.ui-steps-number {
padding: 0;
}

5
src/styles/themes/_base.scss
View File

@ -1,5 +1,5 @@
#big_container {
background: $primary;
background: $white;
main {
margin-bottom: 2em;
@ -11,9 +11,6 @@
.container {
padding-bottom: 5em;
@extend .boxed-shadow;
.column:last-of-type {
text-align: right;
}

2
src/styles/themes/_light.scss
View File

@ -1,6 +1,4 @@
#big_container {
background: $primary;
&.theme-light-watermelon {
.big-header {
.container {