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

about page and landing content

Browse Source
This commit is contained in:
Tykayn 2021-11-19 15:25:54 +01:00 committed by tykayn
parent d009f42a56
commit 83b66d9899
17 changed files with 437 additions and 306 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -6,7 +6,7 @@
<mat-sidenav-content>
<div id="big_container" [class]="themeClass">
<app-header [appTitle]="appTitle" [appLogo]="appLogo"></app-header>
<div [class.container]="onHomePage">
<div [class.container]="!onHomePage">
<main [@routeAnimations]="prepareRoute(outlet)">
<router-outlet #outlet></router-outlet>
</main>

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

@ -130,6 +130,7 @@
</div>
</div>
<a
*ngIf="environment.display_routes"
class="has-text-black"
href="/#/administration/key/8Ubcg2YI99f69xz946cn4O64bQAebi11012P70trL5372qJ9JOem1Ks2fz7XD0b09p-8Ubcg2YI99f69xz946cn4O64bQAeb"
>

1
src/app/core/components/header/header.component.scss
View File

@ -1,4 +1,5 @@
:host {
margin: 0;
.demo {
margin: 1em;
}

446
src/app/core/components/home/home.component.html
View File

@ -1,297 +1,169 @@
<section class="hero">
<div class="hero-body">
<div class="columns presentation">
<div class="column">
<h2 class="title is-2">
Organisez des évènements ou récoltez l’opinion de vos proches, simplement, librement.
</h2>
<p>
Grâce à Framadate planifiez, organisez et prenez des décisions rapidement, simplement et sans
inscription.
</p>
</div>
<div class="column">
<img src="assets/img/icone_home.png" alt="calendrier icone framadate" />
</div>
</div>
<div class="container">
<div class="column">
<section class="creation">
<h1 class="title is-1 is-centered">
{{ 'home.create_button' | translate }}
</h1>
<p class="subtitle">
{{
'SENTENCES.framadate-is-an-online-service-for-planning-an-appointment-or-making-a-decision-quickly-and-easily'
| translate
}}
</p>
<div class="container is-max-desktop">
<a role="button" class="button is-fullwidth is-primary is-size-3" routerLink="administration">
{{ 'config.letsgo' | translate }}
</a>
</div>
<div
*ngIf="environment.showDemoWarning"
class="demo demo-warning well has-background-warning-light padded marged"
>
<h3 class="title is-3">
Ce que l'on peut faire sur cette démo:
</h3>
<ul>
<li>
☑️ Créer un nouveau sondage
</li>
<li>
☑️ accéder à un sondage existant en tant que visiteur, ajouter une réponse (StackOfVote)
et un commentaire.
</li>
<li>
☑️
<a
href="https://framagit.org/framasoft/framadate/funky-framadate-front/-/tree/master/docs"
>lire la documentation</a
>
</li>
</ul>
<h3 class="title is-3">
Ce qu'on ne peut pas encore faire:
</h3>
<ul>
<li>
🚴‍️ mettre à jour son vote à un sondage
</li>
<li>
🚴‍ modifier un de ses sondages existants par un lien d'administration
</li>
<li>
🚴‍ recevoir immédiatement les emails. Ceux ci nécessitent un vidage du spool d'emails
du backend sur demande (mesure anti spam).
</li>
</ul>
</div>
</section>
<section class="search">
<h1 class="title is-1 is-centered">
{{ 'home.search_title' | translate }}
</h1>
<img src="assets/img/where-is-it.jpg" alt="batman veut savoir où sont ses sondages" />
<div class="poll-list">
<ul>
<li *ngFor="let p of storageService.userPolls">
<a
class="button is-fullwidth padded"
[routerLink]="'poll/' + p.custom_url + '/consultation'"
>
{{ p.title }}
<i class="fa fa-arrow-right pull-right"></i>
</a>
</li>
</ul>
</div>
<form (ngSubmit)="searchMyPolls()">
<div class="search-others">
<label for="search_email">
{{ 'home.search_subtitle' | translate }}
</label>
<input
type="email"
name="search_email"
id="search_email"
placeholder="moi@example.com"
[ngClass]="{
'has-background-success': email_sent,
'ng-invalid has-background-warning':
nonexistent_email === storageService.vote_stack.owner.email
}"
[(ngModel)]="storageService.vote_stack.owner.email"
/>
<div class="email_sent has-background-success padded" *ngIf="email_sent">
<i class="fa fa-envelope"></i> C'est envoyé! Vérifiez votre boite email, ainsi que votre
dossier de spam.
</div>
<div
class="email_error has-background-warning padded"
*ngIf="nonexistent_email === storageService.vote_stack.owner.email"
>
<i class="fa fa-warning"></i> Aucun sondage enregistré pour cet email.
</div>
<button
type="submit"
role="button"
class="button is-outlined is-fullwidth is-info is-size-3"
[disabled]="
!storageService.vote_stack.owner.email.length ||
nonexistent_email === storageService.vote_stack.owner.email
"
routerLink="user/polls"
>
<i class="fa fa-search"></i>
{{ 'home.search_button' | translate }}
</button>
</div>
</form>
</section>
<blockquote class="notification is-info is-light content is-size-3 has-text-weight-light">
<h1 class="title">
{{ 'home.title' | translate }}
{{ environment.appTitle }}
</h1>
<i class="fa fa-poll"></i>
{{
'SENTENCES.framadate-is-an-online-service-for-planning-an-appointment-or-making-a-decision-quickly-and-easily'
| translate
}}
</blockquote>
<img src="assets/img/undraw_group_selfie_ijc6.svg" alt="image WIP" />
</div>
<div class="columns">
<section>
<div class="landing-box">
<div class="landing container content">
<div class="columns presentation">
<div class="column">
<h2 class="subtitle">
{{ 'home.subtitle' | translate }}
<h2 class="title is-2">
{{ 'config.landing_title' | translate }}
</h2>
</div>
<div class="column"></div>
</div>
<div class="columns">
<div class="column">
<img src="assets/img/kind/date.jpeg" alt="sondage date" />
</div>
<div class="column">
<img src="assets/img/kind/classic.jpeg" alt="sondage classique" />
</div>
</div>
<div class="column">
<div class="columns">
<div class="column">
<h2 class="title is-2">
<i class="fa fa-format-paint"></i>
{{ 'SENTENCES.here-is-how-it-works' | translate }}
</h2>
<p>
{{ 'SENTENCES.send-the-poll-link-to-your-friends-or-colleagues' | translate }}
{{ 'SENTENCES.what-you-can-do' | translate }}
</p>
<h2 class="title is-2">
<i class="fa fa-format-paint"></i>
{{ 'SENTENCES.view-an-example' | translate }}
</h2>
<p>
<a href="/poll/orange-ou-citron/consultation" class="btn btn-info">
<i class="fa fa-biking"></i> Orange ou citron?
<p class="subtitle">
{{ 'config.landing_subtitle' | translate }}
</p>
<div class="columns">
<div class="column">
<a role="button" class="button is-fullwidth is-white" routerLink="administration">
{{ 'config.letsgo' | translate }}
</a>
</p>
<p>
<i class="fa fa-gavel"></i>
{{ 'SENTENCES.framadate-is-licensed-under-the' | translate }}
<span class="licence has-text-weight-medium">
<i class="fa fa-gnu"></i>
GNU Affero v3 Licence
</span>
</p>
</div>
<div class="column">
<h2 class="title is-2">
<i class="fa fa-seeding"></i>
{{ 'SENTENCES.grow-your-own' | translate }}
</h2>
<p>
{{
'SENTENCES.if-you-want-to-install-the-software-for-your-own-use-and-thus-increase-your-independence-we-can-help'
| translate
}}
{{
'SENTENCES.to-participate-in-the-software-development-suggest-improvements-or-simply-download-it-please-visit'
| translate
}}
{{ 'SENTENCES.the-development-site' | translate }}
</p>
</div>
<div class="column">
<a role="button" class="button is-fullwidth is-secondary" routerLink="about">
{{ 'config.discover' | translate }}
</a>
</div>
</div>
</div>
</div>
<!-- statistiques-->
<p class="title">Statistiques</p>
<app-wip-todo></app-wip-todo>
<div class="tile is-ancestor">
<div class="tile is-4 is-vertical is-parent">
<div class="tile is-child box">
<div class="title">
<i class="fa fa-check-circle"></i>
62 346
</div>
<p>sondages</p>
</div>
<div class="tile is-child box">
<div class="title">
<i class="fa fa-tachometer"></i>
223 124
</div>
<p>votes</p>
</div>
<div class="tile is-child box">
<div class="title">
<i class="fa fa-comment-o"></i>
41 875
</div>
<p>commentaires</p>
</div>
<div class="column">
<img src="assets/img/icone_home.png" alt="calendrier icone framadate" />
</div>
<div class="tile is-parent">
<div class="tile is-child box">
<div class="title">
<i class="fa fa-calendar-check-o"></i>
44 985
</div>
<p>sondages de type date</p>
</div>
<div class="tile is-child box">
<div class="title">
<i class="fa fa-file-epub"></i>
22 985
</div>
<p>sondages de type classique</p>
</div>
<div class="tile is-child box">
<div class="title">
<i class="fa fa-check-circle-o"></i>
123
</div>
<p>consensus parfaits</p>
</div>
</div>
</div>
<div class="box">
<h2 class="title">Nos Mentions légales</h2>
<ul>
<li>
<a routerLink="/legal">
mentions légales,
</a>
</li>
<li>
<a routerLink="/cgu">
CGU, CPU,
</a>
</li>
<li>
<a routerLink="/privacy">
politique de confidentialité.
</a>
</li>
</ul>
</div>
</div>
</div>
<div class="container home-content">
<div class="column">
<section class="search">
<!-- <img src="assets/img/where-is-it.jpg" alt="batman veut savoir où sont ses sondages"/>-->
<form (ngSubmit)="searchMyPolls()">
<div class="search-others-box">
<div class="columns">
<div class="search-others column is-three-fifths-desktop marged-auto">
<h2 class="title is-2">
{{ 'home.search_title' | translate }}
</h2>
<div class="search-description">
{{ 'home.search_subtitle' | translate }}
</div>
<label for="search_email">
{{ 'home.search_label' | translate }}
</label>
<input
type="email"
class="is-full input"
name="search_email"
id="search_email"
placeholder="moi@example.com"
[ngClass]="{
'has-background-success': email_sent,
'ng-invalid has-background-warning':
nonexistent_email === storageService.vote_stack.owner.email
}"
[(ngModel)]="storageService.vote_stack.owner.email"
/>
<div class="email_sent has-background-success padded" *ngIf="email_sent">
<i class="fa fa-envelope"></i> C'est envoyé! Vérifiez votre boite email, ainsi que
votre dossier de spam.
</div>
<div
class="email_error has-background-warning padded"
*ngIf="nonexistent_email === storageService.vote_stack.owner.email"
>
<i class="fa fa-warning"></i> Aucun sondage enregistré pour cet email.
</div>
<button
type="submit"
role="button"
class="button is-outlined is-fullwidth is-info button-submit"
[disabled]="
!storageService.vote_stack.owner.email.length ||
nonexistent_email === storageService.vote_stack.owner.email
"
routerLink="user/polls"
>
<i class="fa fa-search"></i>
{{ 'home.search_button' | translate }}
</button>
</div>
</div>
</div>
</form>
<div class="poll-list">
<ul>
<li *ngFor="let p of storageService.userPolls">
<a
class="button is-fullwidth padded"
[routerLink]="'poll/' + p.custom_url + '/consultation'"
>
{{ p.title }}
<i class="fa fa-arrow-right pull-right"></i>
</a>
</li>
</ul>
</div>
</section>
<section class="demo-capabilities">
<div
*ngIf="environment.showDemoWarning"
class="demo demo-warning well has-background-warning-light padded marged"
>
<h3 class="title is-3">
Ce que l'on peut faire sur cette démo:
</h3>
<ul>
<li>
☑️ Créer un nouveau sondage
</li>
<li>
☑️ accéder à un sondage existant en tant que visiteur, ajouter une réponse (StackOfVote) et
un commentaire.
</li>
<li>
☑️
<a href="https://framagit.org/framasoft/framadate/funky-framadate-front/-/tree/master/docs"
>lire la documentation</a
>
</li>
</ul>
<h3 class="title is-3">
Ce qu'on ne peut pas encore faire:
</h3>
<ul>
<li>
🚴‍️ mettre à jour son vote à un sondage
</li>
<li>
🚴‍ modifier un de ses sondages existants par un lien d'administration
</li>
<li>
🚴‍ recevoir immédiatement les emails. Ceux ci nécessitent un vidage du spool d'emails du
backend sur demande (mesure anti spam).
</li>
</ul>
</div>
</section>
</div>
<div class="box">
<h2 class="title">Nos Mentions légales</h2>
<ul>
<li>
<a routerLink="/legal">
mentions légales,
</a>
</li>
<li>
<a routerLink="/cgu">
CGU, CPU,
</a>
</li>
<li>
<a routerLink="/privacy">
politique de confidentialité.
</a>
</li>
</ul>
</div>
</div>
</section>

60
src/app/core/components/home/home.component.scss
View File

@ -1,19 +1,65 @@
@import '../../../../styles/variables';
:host {
text-align: center;
margin-left: -2em;
margin-right: -2em;
a .fa {
margin-right: 1ch;
.landing-box {
background: $secondary_color;
padding: 0 1em 6em;
}
.title {
color: $white;
margin-bottom: 1rem;
text-align: left;
}
.button {
color: $secondary_color !important;
background: $secondary_color;
text-align: center;
&.is-white {
background: $white;
}
&.is-secondary {
color: $white !important;
background: $secondary_color !important;
}
}
.subtitle {
text-align: left;
margin-top: 1rem;
min-height: 4em;
color: $white;
}
.poll-list {
margin: 2em 0;
}
.presentation {
background: $secondary_color;
a .fa {
margin-right: 1ch;
}
.home-content {
.title,
.subtitle {
color: $primary_color;
}
}
.search {
margin-top: 2em;
.search-others {
padding: 1em;
background: $d-grey;
border-radius: 0.25em;
}
#search_email {
background: $white;
}
.button-submit {
background: $d-grey;
color: $secondary_color;
border-color: $secondary_color;
}
}
}

166
src/app/features/shared/components/ui/static-pages/about/about.component.html Normal file
View File

@ -0,0 +1,166 @@
<div class="static-page content">
<article>
<section class="hero is-info">
<div class="hero-body">
<p class="title">
À propos
</p>
<p class="subtitle">
...
</p>
</div>
</section>
<section class="hero is-info">
<div class="hero-body">
<p class="title">
...
</p>
<p class="subtitle">
Détails de l'à propos
</p>
<div class="content">
<blockquote class="notification is-info is-light content is-size-3 has-text-weight-light">
<h1 class="title">
{{ 'home.title' | translate }}
{{ environment.appTitle }}
</h1>
<i class="fa fa-poll"></i>
{{
'SENTENCES.framadate-is-an-online-service-for-planning-an-appointment-or-making-a-decision-quickly-and-easily'
| translate
}}
</blockquote>
<img src="assets/img/undraw_group_selfie_ijc6.svg" alt="image WIP" />
<div class="columns">
<div class="column">
<h2 class="subtitle">
{{ 'home.subtitle' | translate }}
</h2>
</div>
<div class="column"></div>
</div>
<div class="columns">
<div class="column">
<img src="assets/img/kind/date.jpeg" alt="sondage date" />
</div>
<div class="column">
<img src="assets/img/kind/classic.jpeg" alt="sondage classique" />
</div>
</div>
<!-- old text-->
<div class="column">
<div class="columns">
<div class="column">
<h2 class="title is-2">
<i class="fa fa-format-paint"></i>
{{ 'SENTENCES.here-is-how-it-works' | translate }}
</h2>
<p>
{{ 'SENTENCES.send-the-poll-link-to-your-friends-or-colleagues' | translate }}
{{ 'SENTENCES.what-you-can-do' | translate }}
</p>
<h2 class="title is-2">
<i class="fa fa-format-paint"></i>
{{ 'SENTENCES.view-an-example' | translate }}
</h2>
<p>
<a href="/poll/orange-ou-citron/consultation" class="btn btn-info">
<i class="fa fa-biking"></i> Orange ou citron?
</a>
</p>
<p>
<i class="fa fa-gavel"></i>
{{ 'SENTENCES.framadate-is-licensed-under-the' | translate }}
<span class="licence has-text-weight-medium">
<i class="fa fa-gnu"></i>
GNU Affero v3 Licence
</span>
</p>
</div>
<div class="column">
<h2 class="title is-2">
<i class="fa fa-seeding"></i>
{{ 'SENTENCES.grow-your-own' | translate }}
</h2>
<p>
{{
'SENTENCES.if-you-want-to-install-the-software-for-your-own-use-and-thus-increase-your-independence-we-can-help'
| translate
}}
{{
'SENTENCES.to-participate-in-the-software-development-suggest-improvements-or-simply-download-it-please-visit'
| translate
}}
{{ 'SENTENCES.the-development-site' | translate }}
</p>
</div>
</div>
</div>
<!-- statistiques-->
<p class="title">Statistiques</p>
<app-wip-todo></app-wip-todo>
<div class="tile is-ancestor">
<div class="tile is-4 is-vertical is-parent">
<div class="tile is-child box">
<div class="title">
<i class="fa fa-check-circle"></i>
62 346
</div>
<p>sondages</p>
</div>
<div class="tile is-child box">
<div class="title">
<i class="fa fa-tachometer"></i>
223 124
</div>
<p>votes</p>
</div>
<div class="tile is-child box">
<div class="title">
<i class="fa fa-comment-o"></i>
41 875
</div>
<p>commentaires</p>
</div>
</div>
<div class="tile is-parent">
<div class="tile is-child box">
<div class="title">
<i class="fa fa-calendar-check-o"></i>
44 985
</div>
<p>sondages de type date</p>
</div>
<div class="tile is-child box">
<div class="title">
<i class="fa fa-file-epub"></i>
22 985
</div>
<p>sondages de type classique</p>
</div>
<div class="tile is-child box">
<div class="title">
<i class="fa fa-check-circle-o"></i>
123
</div>
<p>consensus parfaits</p>
</div>
</div>
</div>
<button class="button is-primary" [routerLink]="['']">
Retour
</button>
</div>
</div>
</section>
</article>
</div>

0
src/app/features/shared/components/ui/static-pages/about/about.component.scss Normal file
View File

24
src/app/features/shared/components/ui/static-pages/about/about.component.spec.ts Normal file
View File

@ -0,0 +1,24 @@
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { AboutComponent } from './about.component';
describe('AboutComponent', () => {
let component: AboutComponent;
let fixture: ComponentFixture<AboutComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [AboutComponent],
}).compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(AboutComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

14
src/app/features/shared/components/ui/static-pages/about/about.component.ts Normal file
View File

@ -0,0 +1,14 @@
import { Component, OnInit } from '@angular/core';
import { environment } from 'src/environments/environment';
@Component({
selector: 'app-about',
templateUrl: './about.component.html',
styleUrls: ['./about.component.scss'],
})
export class AboutComponent implements OnInit {
public environment = environment;
constructor() {}
ngOnInit(): void {}
}

5
src/app/routes-framadate.ts
View File

@ -8,6 +8,7 @@ import { CguComponent } from './features/shared/components/ui/static-pages/cgu/c
import { LegalComponent } from './features/shared/components/ui/static-pages/legal/legal.component';
import { PrivacyComponent } from './features/shared/components/ui/static-pages/privacy/privacy.component';
import { CipheringComponent } from './features/shared/components/ui/static-pages/ciphering/ciphering.component';
import { AboutComponent } from './features/shared/components/ui/static-pages/about/about.component';
export const routes: Routes = [
{ path: '', component: HomeComponent, data: { animation: 'HomePage' } },
@ -49,6 +50,10 @@ export const routes: Routes = [
path: 'ciphering',
component: CipheringComponent,
},
{
path: 'about',
component: AboutComponent,
},
{ path: 'page-not-found', component: PageNotFoundComponent },
{ path: '**', redirectTo: 'page-not-found', pathMatch: 'full' },
];

5
src/app/shared/shared.module.ts
View File

@ -30,8 +30,11 @@ import { ErrorsListComponent } from '../features/shared/components/ui/form/error
import { ShortcutsHelpComponent } from '../features/shared/components/ui/shortcuts-help/shortcuts-help.component';
import { ConfirmDialogModule } from 'primeng/confirmdialog';
import { ConfirmationService } from 'primeng/api';
import { AboutComponent } from '../features/shared/components/ui/static-pages/about/about.component';
import { RouterModule } from '@angular/router';
const COMPONENTS = [
AboutComponent,
ChoiceDetailsComponent,
CommentsComponent,
FeedbackComponent,
@ -65,7 +68,7 @@ const MATERIAL_MODULES = [
@NgModule({
declarations: COMPONENTS,
imports: [...ANGULAR_MODULES, ...MATERIAL_MODULES, ConfirmDialogModule],
imports: [...ANGULAR_MODULES, ...MATERIAL_MODULES, ConfirmDialogModule, RouterModule],
exports: [...ANGULAR_MODULES, ...MATERIAL_MODULES, ...COMPONENTS],
providers: [ConfirmationService],
})

6
src/assets/i18n/FR.json
View File

@ -7,6 +7,7 @@
"subtitle": "Se consulter simplement pour s’organiser collectivement.",
"search_title": "Vous avez déjà créé un sondage et vous souhaitez y accéder ?",
"search_subtitle": "Saisissez votre adresse e-mail et nous vous enverrons le lien vers votre sondage. ",
"search_label": "Votre adresse e-mail",
"create_button": "Créer un nouveau sondage ",
"search_button": "Rechercher"
},
@ -20,7 +21,10 @@
"continue": "Continuer",
"perfect": "C'est parfait",
"title": "Créer un sondage",
"letsgo": "C'est parti !",
"landing_title": "Organisez des évènements ou récoltez l’opinion de vos proches, simplement, librement.",
"landing_subtitle": "Grâce à Framadate planifiez, organisez et prenez des décisions rapidement, simplement et sans inscription.",
"letsgo": "Créer un nouveau sondage",
"discover": "Découvrir Framadate",
"description": "Planifiez des rendez-vous avec vos amis ou votre famille ou créez un sondage avec du texte, des images ou des liens… un sondage quoi !",
"find_my_polls": "Mes sondages",
"find_helper": "Je cherche d'autres sondages qui correspondent à mon mail",

3
src/styles/dev-utilities/_helpers.scss
View File

@ -36,3 +36,6 @@
.marged {
margin: 1em;
}
.marged-auto {
margin: 0 auto;
}

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

@ -8,7 +8,3 @@ main {
width: 100%;
margin: 0 auto;
}
.search {
@extend main;
}

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

@ -7,8 +7,6 @@
background: $white;
}
.big-header {
margin-bottom: 1em;
.container {
padding-bottom: 5em;
.column:last-of-type {

3
src/styles/themes/_dark.scss
View File

@ -60,9 +60,6 @@ $theme-color-tertiary: #ccc;
color: $theme-color-secondary !important;
}
.big-header {
margin-bottom: 22px;
}
label {
color: $theme-color-tertiary;
}

1
src/styles/variables.scss
View File

@ -26,6 +26,7 @@ $beige-lighter: #eff0eb;
$d-primary: #3e3882; // bleu 800
$d-primary-intense: #6359cf; // bleu 600
$d-grey: #f6f5fd; // bleu 300
$d-blue30: #f6f5fd; // bleu 300
$d-rule: #e2e0fa; // bleu 100
$d-neutral: #767486;
$d-alt: #a9607f;