From 83b66d9899d3da1f4442f11d3556980fb029fd62 Mon Sep 17 00:00:00 2001 From: Tykayn Date: Fri, 19 Nov 2021 15:25:54 +0100 Subject: [PATCH] about page and landing content --- src/app/app.component.html | 2 +- .../components/header/header.component.html | 1 + .../components/header/header.component.scss | 1 + .../core/components/home/home.component.html | 446 +++++++----------- .../core/components/home/home.component.scss | 60 ++- .../static-pages/about/about.component.html | 166 +++++++ .../static-pages/about/about.component.scss | 0 .../about/about.component.spec.ts | 24 + .../ui/static-pages/about/about.component.ts | 14 + src/app/routes-framadate.ts | 5 + src/app/shared/shared.module.ts | 5 +- src/assets/i18n/FR.json | 6 +- src/styles/dev-utilities/_helpers.scss | 3 + src/styles/partials/_main.scss | 4 - src/styles/themes/_base.scss | 2 - src/styles/themes/_dark.scss | 3 - src/styles/variables.scss | 1 + 17 files changed, 437 insertions(+), 306 deletions(-) create mode 100644 src/app/features/shared/components/ui/static-pages/about/about.component.html create mode 100644 src/app/features/shared/components/ui/static-pages/about/about.component.scss create mode 100644 src/app/features/shared/components/ui/static-pages/about/about.component.spec.ts create mode 100644 src/app/features/shared/components/ui/static-pages/about/about.component.ts diff --git a/src/app/app.component.html b/src/app/app.component.html index bc54e891..e49f9582 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -6,7 +6,7 @@
-
+
diff --git a/src/app/core/components/header/header.component.html b/src/app/core/components/header/header.component.html index 0e9580ae..9a234736 100644 --- a/src/app/core/components/header/header.component.html +++ b/src/app/core/components/header/header.component.html @@ -130,6 +130,7 @@
diff --git a/src/app/core/components/header/header.component.scss b/src/app/core/components/header/header.component.scss index 1cd23145..e8b84af2 100644 --- a/src/app/core/components/header/header.component.scss +++ b/src/app/core/components/header/header.component.scss @@ -1,4 +1,5 @@ :host { + margin: 0; .demo { margin: 1em; } diff --git a/src/app/core/components/home/home.component.html b/src/app/core/components/home/home.component.html index 58d0a2fc..09be9161 100644 --- a/src/app/core/components/home/home.component.html +++ b/src/app/core/components/home/home.component.html @@ -1,297 +1,169 @@ -
-
-
-
-

- Organisez des évènements ou récoltez l’opinion de vos proches, simplement, librement. -

-

- Grâce à Framadate planifiez, organisez et prenez des décisions rapidement, simplement et sans - inscription. -

-
-
- calendrier icone framadate -
-
- -
-
-
-

- {{ 'home.create_button' | translate }} -

-

- {{ - 'SENTENCES.framadate-is-an-online-service-for-planning-an-appointment-or-making-a-decision-quickly-and-easily' - | translate - }} -

- -
- - {{ 'config.letsgo' | translate }} - -
-
-

- Ce que l'on peut faire sur cette démo: -

-
    -
  • - ☑️ Créer un nouveau sondage -
    • -
  • - ☑️ accéder à un sondage existant en tant que visiteur, ajouter une réponse (StackOfVote) - et un commentaire. -
    • -
  • - ☑️ - lire la documentation -
    • -
-

- Ce qu'on ne peut pas encore faire: -

-
    -
  • - 🚴‍️ mettre à jour son vote à un sondage -
    • -
  • - 🚴‍ modifier un de ses sondages existants par un lien d'administration -
    • -
  • - 🚴‍ recevoir immédiatement les emails. Ceux ci nécessitent un vidage du spool d'emails - du backend sur demande (mesure anti spam). -
    • -
-
-
-
-

- {{ 'home.search_title' | translate }} -

- - batman veut savoir où sont ses sondages -
- -
- -
-
- - - - - -
-
-
- -
-

- {{ 'home.title' | translate }} - {{ environment.appTitle }} -

- - {{ - 'SENTENCES.framadate-is-an-online-service-for-planning-an-appointment-or-making-a-decision-quickly-and-easily' - | translate - }} -
- - image WIP -
-
+
+
+
+
-

- {{ 'home.subtitle' | translate }} +

+ {{ 'config.landing_title' | translate }}

-
-
-
-
-
- sondage date -
-
- sondage classique -
-
- -
-
-
-

- - {{ 'SENTENCES.here-is-how-it-works' | translate }} -

-

- {{ 'SENTENCES.send-the-poll-link-to-your-friends-or-colleagues' | translate }} - - {{ 'SENTENCES.what-you-can-do' | translate }} -

-

- - {{ 'SENTENCES.view-an-example' | translate }} -

-

- - Orange ou citron? +

+ {{ 'config.landing_subtitle' | translate }} +

+
+
+ + {{ 'config.letsgo' | translate }} -

-

- - - {{ 'SENTENCES.framadate-is-licensed-under-the' | translate }} - - - GNU Affero v3 Licence - -

-
- -
-

- - {{ 'SENTENCES.grow-your-own' | translate }} -

-

- {{ - '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 }} -

+
+
+ + {{ 'config.discover' | translate }} + +
-
- -

Statistiques

- -
-
-
-
- - 62 346 -
-

sondages

-
-
-
- - 223 124 -
-

votes

-
- -
-
- - 41 875 -
-

commentaires

-
+
+ calendrier icone framadate
-
-
-
- - 44 985 -
-

sondages de type date

-
- -
-
- - 22 985 -
-

sondages de type classique

-
-
-
- - 123 -
-

consensus parfaits

-
-
-
-
-

Nos Mentions légales

-
+ +
+
+
+ + +
+
+
+
+

+ {{ 'home.search_title' | translate }} +

+
+ {{ 'home.search_subtitle' | translate }} +
+ + + + + +
+
+
+
+ +
+ +
+
+ +
+
+

+ Ce que l'on peut faire sur cette démo: +

+
    +
  • + ☑️ Créer un nouveau sondage +
    • +
  • + ☑️ accéder à un sondage existant en tant que visiteur, ajouter une réponse (StackOfVote) et + un commentaire. +
    • +
  • + ☑️ + lire la documentation +
    • +
+

+ Ce qu'on ne peut pas encore faire: +

+
    +
  • + 🚴‍️ mettre à jour son vote à un sondage +
    • +
  • + 🚴‍ modifier un de ses sondages existants par un lien d'administration +
    • +
  • + 🚴‍ recevoir immédiatement les emails. Ceux ci nécessitent un vidage du spool d'emails du + backend sur demande (mesure anti spam). +
    • +
+
+
+
+ +
+

Nos Mentions légales

+ +
+
diff --git a/src/app/core/components/home/home.component.scss b/src/app/core/components/home/home.component.scss index b76a9e58..0d558d80 100644 --- a/src/app/core/components/home/home.component.scss +++ b/src/app/core/components/home/home.component.scss @@ -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; + } } } diff --git a/src/app/features/shared/components/ui/static-pages/about/about.component.html b/src/app/features/shared/components/ui/static-pages/about/about.component.html new file mode 100644 index 00000000..fd9657b7 --- /dev/null +++ b/src/app/features/shared/components/ui/static-pages/about/about.component.html @@ -0,0 +1,166 @@ +
+
+
+
+

+ À propos +

+

+ ... +

+
+
+
+
+

+ ... +

+

+ Détails de l'à propos +

+
+
+

+ {{ 'home.title' | translate }} + {{ environment.appTitle }} +

+ + {{ + 'SENTENCES.framadate-is-an-online-service-for-planning-an-appointment-or-making-a-decision-quickly-and-easily' + | translate + }} +
+ + image WIP + +
+
+

+ {{ 'home.subtitle' | translate }} +

+
+
+
+
+
+ sondage date +
+
+ sondage classique +
+
+ + +
+
+
+

+ + {{ 'SENTENCES.here-is-how-it-works' | translate }} +

+

+ {{ 'SENTENCES.send-the-poll-link-to-your-friends-or-colleagues' | translate }} + + {{ 'SENTENCES.what-you-can-do' | translate }} +

+

+ + {{ 'SENTENCES.view-an-example' | translate }} +

+

+ + Orange ou citron? + +

+

+ + + {{ 'SENTENCES.framadate-is-licensed-under-the' | translate }} + + + GNU Affero v3 Licence + +

+
+ +
+

+ + {{ 'SENTENCES.grow-your-own' | translate }} +

+

+ {{ + '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 }} +

+
+
+
+ +

Statistiques

+ +
+
+
+
+ + 62 346 +
+

sondages

+
+
+
+ + 223 124 +
+

votes

+
+ +
+
+ + 41 875 +
+

commentaires

+
+
+
+
+
+ + 44 985 +
+

sondages de type date

+
+ +
+
+ + 22 985 +
+

sondages de type classique

+
+
+
+ + 123 +
+

consensus parfaits

+
+
+
+ + +
+
+
+
+
diff --git a/src/app/features/shared/components/ui/static-pages/about/about.component.scss b/src/app/features/shared/components/ui/static-pages/about/about.component.scss new file mode 100644 index 00000000..e69de29b diff --git a/src/app/features/shared/components/ui/static-pages/about/about.component.spec.ts b/src/app/features/shared/components/ui/static-pages/about/about.component.spec.ts new file mode 100644 index 00000000..7c0df361 --- /dev/null +++ b/src/app/features/shared/components/ui/static-pages/about/about.component.spec.ts @@ -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; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [AboutComponent], + }).compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(AboutComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/features/shared/components/ui/static-pages/about/about.component.ts b/src/app/features/shared/components/ui/static-pages/about/about.component.ts new file mode 100644 index 00000000..d81453f5 --- /dev/null +++ b/src/app/features/shared/components/ui/static-pages/about/about.component.ts @@ -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 {} +} diff --git a/src/app/routes-framadate.ts b/src/app/routes-framadate.ts index 51383ddf..779783e4 100644 --- a/src/app/routes-framadate.ts +++ b/src/app/routes-framadate.ts @@ -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' }, ]; diff --git a/src/app/shared/shared.module.ts b/src/app/shared/shared.module.ts index b9e6e287..f52de9ce 100644 --- a/src/app/shared/shared.module.ts +++ b/src/app/shared/shared.module.ts @@ -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], }) diff --git a/src/assets/i18n/FR.json b/src/assets/i18n/FR.json index b2e61b61..d3f8edd5 100644 --- a/src/assets/i18n/FR.json +++ b/src/assets/i18n/FR.json @@ -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", diff --git a/src/styles/dev-utilities/_helpers.scss b/src/styles/dev-utilities/_helpers.scss index 94f1cae7..ed47093c 100644 --- a/src/styles/dev-utilities/_helpers.scss +++ b/src/styles/dev-utilities/_helpers.scss @@ -36,3 +36,6 @@ .marged { margin: 1em; } +.marged-auto { + margin: 0 auto; +} diff --git a/src/styles/partials/_main.scss b/src/styles/partials/_main.scss index fabc860a..2cde9640 100644 --- a/src/styles/partials/_main.scss +++ b/src/styles/partials/_main.scss @@ -8,7 +8,3 @@ main { width: 100%; margin: 0 auto; } - -.search { - @extend main; -} diff --git a/src/styles/themes/_base.scss b/src/styles/themes/_base.scss index 08cd20af..1a3e78f0 100644 --- a/src/styles/themes/_base.scss +++ b/src/styles/themes/_base.scss @@ -7,8 +7,6 @@ background: $white; } .big-header { - margin-bottom: 1em; - .container { padding-bottom: 5em; .column:last-of-type { diff --git a/src/styles/themes/_dark.scss b/src/styles/themes/_dark.scss index fd51d381..98c88e0f 100644 --- a/src/styles/themes/_dark.scss +++ b/src/styles/themes/_dark.scss @@ -60,9 +60,6 @@ $theme-color-tertiary: #ccc; color: $theme-color-secondary !important; } - .big-header { - margin-bottom: 22px; - } label { color: $theme-color-tertiary; } diff --git a/src/styles/variables.scss b/src/styles/variables.scss index c411ffd6..744661e1 100644 --- a/src/styles/variables.scss +++ b/src/styles/variables.scss @@ -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;