diff --git a/package-lock.json b/package-lock.json index ae0f559d..dfaf5ed8 100644 --- a/package-lock.json +++ b/package-lock.json @@ -126,9 +126,9 @@ } }, "@angular/animations": { - "version": "8.2.1", - "resolved": "https://registry.npmjs.org/@angular/animations/-/animations-8.2.1.tgz", - "integrity": "sha512-+E2KWj798sgby1hnC2LmK380jCZ7JLcxs5X4pM+kwJzS4T8spPTBecHRqz19C2Ea4AOSou4S1Oxs/4CCmVnj2w==", + "version": "8.2.5", + "resolved": "https://registry.npmjs.org/@angular/animations/-/animations-8.2.5.tgz", + "integrity": "sha512-t4TT11YIRGKSNYz5ngZ7trVPKZMtEql2LaPaVQnAZ6Cefrf+1s431mVh7ndPtGTLxRwr6RPTUe+Tc+5e2ROcmg==", "requires": { "tslib": "^1.9.0" } @@ -183,17 +183,17 @@ } }, "@angular/common": { - "version": "8.2.1", - "resolved": "https://registry.npmjs.org/@angular/common/-/common-8.2.1.tgz", - "integrity": "sha512-CVewkkFswELDQ1qx2G7m2pj0IqDbSIY6O6wZtNvYCDrLXRVDwSXcQsjNP1pSWuD37dHT/nifimchfLiVuisPyg==", + "version": "8.2.5", + "resolved": "https://registry.npmjs.org/@angular/common/-/common-8.2.5.tgz", + "integrity": "sha512-7iSDLVhS+jbVRkECpbTzU9+6IQPS3Wl0CF73EA0sdzPbTC2GKvGfM9WLnIZZIxewkii6Wn1Yb0x0qRdWMT2STA==", "requires": { "tslib": "^1.9.0" } }, "@angular/compiler": { - "version": "8.2.1", - "resolved": "https://registry.npmjs.org/@angular/compiler/-/compiler-8.2.1.tgz", - "integrity": "sha512-kOGNh0K4k7vEIMLlEyG1A+UxPOIMp2b3IT0vBq5isRjXxGzEnahyBYtXwGI7G6ox+OoNKy1OZOPaK473fcO8zg==", + "version": "8.2.5", + "resolved": "https://registry.npmjs.org/@angular/compiler/-/compiler-8.2.5.tgz", + "integrity": "sha512-u3OgSBTupn9DN1uDF+NmXqN7w9m6bbrIalJkwdw+kFXnXt8JpdIeJmeV2jN4wLuGp6A3sWS1ze+6u4kpFHMqTw==", "requires": { "tslib": "^1.9.0" } @@ -955,17 +955,17 @@ } }, "@angular/core": { - "version": "8.2.1", - "resolved": "https://registry.npmjs.org/@angular/core/-/core-8.2.1.tgz", - "integrity": "sha512-BMyLo/iOZ/eRR25CggWT3cexzfOnoey13NPeqYRtsO5dQUeVQPT1RH/bIWZ6yIPFSlBm6zUi/QqE1rjDautK5A==", + "version": "8.2.5", + "resolved": "https://registry.npmjs.org/@angular/core/-/core-8.2.5.tgz", + "integrity": "sha512-cBEiHhLE8VFIdB53seR+nQYNQFlNloKgD7ro26eMazvRF94wBSzO9VrD3+/XmNWdIYibU7PBaXhDCOKTe+ZSHw==", "requires": { "tslib": "^1.9.0" } }, "@angular/forms": { - "version": "8.2.1", - "resolved": "https://registry.npmjs.org/@angular/forms/-/forms-8.2.1.tgz", - "integrity": "sha512-KcB652QBup+VWKDZICtpznr0a+v82oG0BowWetfkMgZAQj655uEMkkEtCTnfWnft4MLYlRr9ZoxQXc575TcZmA==", + "version": "8.2.5", + "resolved": "https://registry.npmjs.org/@angular/forms/-/forms-8.2.5.tgz", + "integrity": "sha512-USJdzopslLC7JVMu7v58SA/g0NWeQeAM16qcR4LHj+wdMbJ+5G64LdZQe9vEHRdgGpgrZU4c2ODAwDEa1MzIDA==", "requires": { "tslib": "^1.9.0" } @@ -977,25 +977,25 @@ "dev": true }, "@angular/platform-browser": { - "version": "8.2.1", - "resolved": "https://registry.npmjs.org/@angular/platform-browser/-/platform-browser-8.2.1.tgz", - "integrity": "sha512-mzaXsHNTN3lBu3+H02GrRRu8Zo5R4GQiAb+MKdqiQMJ8hjnAmKJTYIVEbEnk/dJYbMZWvhxRGLmRIcntpYF38g==", + "version": "8.2.5", + "resolved": "https://registry.npmjs.org/@angular/platform-browser/-/platform-browser-8.2.5.tgz", + "integrity": "sha512-JIm4uOcgQq0oX1oTzRbQpwxFYAEYKiLi/uAPUf2CZeU2lVxMkhScAW0b8+tVFLIJ7IaVx5d2QxZ6HK81r+QSVg==", "requires": { "tslib": "^1.9.0" } }, "@angular/platform-browser-dynamic": { - "version": "8.2.1", - "resolved": "https://registry.npmjs.org/@angular/platform-browser-dynamic/-/platform-browser-dynamic-8.2.1.tgz", - "integrity": "sha512-9tdpvEXFCgbMUeyVvIklyDPyg39cRN6MOrQihObAoBKOkcko9MKJIxDPCv8o/5FBrlBcu0VhREPK56aVD0g6UQ==", + "version": "8.2.5", + "resolved": "https://registry.npmjs.org/@angular/platform-browser-dynamic/-/platform-browser-dynamic-8.2.5.tgz", + "integrity": "sha512-4Ewg8I3T0t6/ClLt5ZFZ6ncDTqvEyI84h0K1cnNTsyoup3QKrY/FnklFbZbNl4ONVioHS6fkEg3R+xt1WthhYQ==", "requires": { "tslib": "^1.9.0" } }, "@angular/router": { - "version": "8.2.1", - "resolved": "https://registry.npmjs.org/@angular/router/-/router-8.2.1.tgz", - "integrity": "sha512-CIhwBmRoVaZmfvGjuUomiyWn7OdHqzKbHq0poI3jlNJZCmzuBicYFctjCeqG6L2BIN0eVuJUJNeQ0OrcicP52w==", + "version": "8.2.5", + "resolved": "https://registry.npmjs.org/@angular/router/-/router-8.2.5.tgz", + "integrity": "sha512-htkxrbB8rbOKIcfd0fV9KcxJGnVg8bAJ6atIMPETeI3dBORq6crzvML0B/yx6R+Ooy5e3Td3yXBsolexMxT0mg==", "requires": { "tslib": "^1.9.0" } diff --git a/src/app/app.module.ts b/src/app/app.module.ts index d2a78ad2..6c6e47fa 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -1,5 +1,5 @@ import {BrowserModule} from '@angular/platform-browser'; -import {NgModule} from '@angular/core'; +import {LOCALE_ID, NgModule} from '@angular/core'; import {AppRoutingModule} from './app-routing.module'; import {AppComponent} from './app.component'; @@ -27,6 +27,7 @@ import {VotingGraphComponent} from './pages/voting-graph/voting-graph.component' import {VotingChoiceComponent} from './pages/voting-choice/voting-choice.component'; import {PasswordComponent} from './pages/password/password.component'; import {HomeComponent} from './pages/home/home.component'; +import {VoteChoiceComponent} from './vote-choice/vote-choice.component'; import {HttpClient, HttpClientModule} from '@angular/common/http'; import { MarkdownModule } from 'ngx-markdown'; import { @@ -72,6 +73,7 @@ export function HttpLoaderFactory(http: HttpClient) { VotingChoiceComponent, PasswordComponent, HomeComponent, + VoteChoiceComponent, ], imports: [ diff --git a/src/app/config/Routes.ts b/src/app/config/Routes.ts index 90a969ce..72ef5a8c 100644 --- a/src/app/config/Routes.ts +++ b/src/app/config/Routes.ts @@ -8,6 +8,7 @@ import {AnswersComponent} from '../pages/answers/answers.component'; import {CreateOrRetrieveComponent} from '../pages/create-or-retrieve/create-or-retrieve.component'; import {BaseComponent} from '../pages/base-page/base.component'; import {HomeComponent} from "../pages/home/home.component"; +import {VoteChoiceComponent} from "../vote-choice/vote-choice.component"; /** * each step in the form is a component @@ -25,5 +26,6 @@ export const Routes = {path: 'step/visibility', component: VisibilityComponent}, {path: 'step/resume', component: ResumeComponent}, {path: 'step/end', component: EndConfirmationComponent}, + {path: 'votechoice', component: VoteChoiceComponent}, ] ; diff --git a/src/app/debugger/debugger.component.html b/src/app/debugger/debugger.component.html index 7c7e5cac..1af1e473 100644 --- a/src/app/debugger/debugger.component.html +++ b/src/app/debugger/debugger.component.html @@ -26,10 +26,43 @@ + + Choix cornélien syncronisé: + + + + + diff --git a/src/app/pages/answers/answers.component.html b/src/app/pages/answers/answers.component.html index 705f358f..9ea5719a 100644 --- a/src/app/pages/answers/answers.component.html +++ b/src/app/pages/answers/answers.component.html @@ -3,29 +3,39 @@ Choisir les propositions -

- vous pouvez utiliser la syntaxe markdown -

+

+ Vous pouvez utiliser la syntaxe markdown +

-
    -
  1. - - -
    2. -
+
    +
  1. + + +
    2. +
- - - Voyons ce que ça donne + +
+ + diff --git a/src/app/pages/create-or-retrieve/create-or-retrieve.component.html b/src/app/pages/create-or-retrieve/create-or-retrieve.component.html index 931416da..50753eca 100644 --- a/src/app/pages/create-or-retrieve/create-or-retrieve.component.html +++ b/src/app/pages/create-or-retrieve/create-or-retrieve.component.html @@ -24,6 +24,7 @@ +

{{"config.find_my_polls"|translate}} diff --git a/src/app/pages/end-confirmation/end-confirmation.component.html b/src/app/pages/end-confirmation/end-confirmation.component.html index 91cf9484..f81a10f0 100644 --- a/src/app/pages/end-confirmation/end-confirmation.component.html +++ b/src/app/pages/end-confirmation/end-confirmation.component.html @@ -3,4 +3,4 @@

{{"resume.admins"|translate}}

{{"resume.users"|translate}}

-

{{"resume.link_mail"|translate}}

+

{{"resume.links_mail"|translate}}

diff --git a/src/app/pages/home/home.component.html b/src/app/pages/home/home.component.html index bf99e18d..cdc4d6c7 100644 --- a/src/app/pages/home/home.component.html +++ b/src/app/pages/home/home.component.html @@ -39,7 +39,7 @@ type="text" id="poll_title" name="poll_title" - placeholder="titre" + placeholder="{{'creation.choose_title_placeholder'|translate}}" [(ngModel)]="config.title" > @@ -52,7 +52,7 @@ type="text" name="my_name" id="my_name" - placeholder="mon nom" + placeholder="{{'creation.name_placeholder'|translate}}" [(ngModel)]="config.myName" > @@ -75,12 +75,19 @@ > - - Continuer + +
diff --git a/src/app/pages/kind/kind.component.html b/src/app/pages/kind/kind.component.html index 3fa1ee3d..28c58b03 100644 --- a/src/app/pages/kind/kind.component.html +++ b/src/app/pages/kind/kind.component.html @@ -1,4 +1,262 @@

page de démo

cette étape est en cours de développement.
S'inspirer de la page de Home pour réaliser d'autres pages

-C'est parfait! +C'est parfait! +

Atoms

+
+
+

Headings

+ +

Ceci est un h1

+

Ceci est un h2

+

Ceci est un h3

+
+ + + +
+

Buttons

+ + + +
+ + + +
+ + + primary - outline - default + + +
+ + + +
+ + + +
+ + + +
+ + + +
+ + + +

+ + + + + + + + + +
+ +
+

Forms element

+ +

Labels

+ + + +

Input text

+
+ + +

Input email

+
+ + +

Input password

+
+ + +

Input date

+
+ + +

Select

+ + +

Textarea

+ +
+ +
+

Paragraphs

+ +

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Magnam perspiciatis minus libero error dolores. + Corrupti repellat vero repellendus reiciendis assumenda minus. Nobis, quaerat ut nihil minima sed animi + delectus beatae!

+
+ +
+

Lists

+ +

Unordered list

+
    +
  • + plop +
    • +
  • + plop +
    • +
  • + plop +
    • +
+ +

Ordered list

+
    +
  1. + plop +
    2. +
  2. + plop +
    3. +
  3. + plop +
    4. +
+
+ +
+

Images

+ +
+
+ +
+

Molecules

+ + + +
+

Label + input text

+ + +
+ +
+

Label + select

+ + +
+ + + +
+

Commentaries

+
+
+ +
+

Components

+ +
+

Images list

+ that +
+ +
+

Calendar

+
+ +
+

Modale

+
+ +
+

Way to vote

+ that +
+ + + +
+

Graphics

+ that +
+
diff --git a/src/app/pages/kind/kind.component.scss b/src/app/pages/kind/kind.component.scss index e69de29b..76e12fed 100644 --- a/src/app/pages/kind/kind.component.scss +++ b/src/app/pages/kind/kind.component.scss @@ -0,0 +1,22 @@ +@charset "UTF-8"; + +section { + &:not(:last-of-type) { + border-bottom: 6px solid #000; + } + + & + & { + margin-top: 3rem; + } +} + +article { + padding: 2rem 0; + border-top: 3px solid #ffb92c; + + h3 { + &:not(:first-of-type) { + margin-top: 2rem; + } + } +} diff --git a/src/app/pages/pictures/pictures.component.html b/src/app/pages/pictures/pictures.component.html index 395a2d4f..07d0b7b2 100644 --- a/src/app/pages/pictures/pictures.component.html +++ b/src/app/pages/pictures/pictures.component.html @@ -2,5 +2,5 @@

Images

-ok +ok diff --git a/src/app/pages/resume/resume.component.html b/src/app/pages/resume/resume.component.html index a2043782..70f6636d 100644 --- a/src/app/pages/resume/resume.component.html +++ b/src/app/pages/resume/resume.component.html @@ -7,4 +7,4 @@
-C'est parfait! + diff --git a/src/app/pages/visibility/visibility.component.html b/src/app/pages/visibility/visibility.component.html index 35bfcf27..b7c58321 100644 --- a/src/app/pages/visibility/visibility.component.html +++ b/src/app/pages/visibility/visibility.component.html @@ -11,4 +11,4 @@

{{"visibility.access"|translate}}

-C'est parfait! +C'est parfait! diff --git a/src/app/vote-choice/vote-choice.component.html b/src/app/vote-choice/vote-choice.component.html new file mode 100644 index 00000000..ab8be8af --- /dev/null +++ b/src/app/vote-choice/vote-choice.component.html @@ -0,0 +1,85 @@ +
+ +
+ + + + + + +
+ {{choice.date | date:'EEE'}} {{choice.date | date:'dd'}} {{choice.date | date:'LLL'}} +
+
+ 08:00 +
+ + +
+ +
+ + + + + +
+ +
+ +
+ Choix ayant reçu le plus de votes +
+
+
\ No newline at end of file diff --git a/src/app/vote-choice/vote-choice.component.scss b/src/app/vote-choice/vote-choice.component.scss new file mode 100644 index 00000000..243bc75a --- /dev/null +++ b/src/app/vote-choice/vote-choice.component.scss @@ -0,0 +1,288 @@ +// --------------------------------------------------------- +// -- VOTE CHOICE COMPONENT +// --------------------------------------------------------- + +// -- IMPORTS +// ---------------------------- + +@import "../../assets/scss/variables"; + + + +// -- VARIABLES +// ---------------------------- + +$box-padding : 2rem; +$box-border-width : .6rem; +$btn-size : 5rem; +$btn-margin-x : 1rem; +$btn-margin-y : 1.5rem; +$btn-wrap-size : calc(2 * #{$btn-size} + 4 * #{$btn-margin-x}); +$img-maxheight : 12rem; +$breakpoint-responsive : 640px; // à définir + + + +// -- GLOBAL +// ---------------------------- + +.choicebox { + position: relative; + min-width: 32rem; + min-height: 16rem; + padding: $box-padding $box-padding $box-padding calc(#{$box-padding} - #{$box-border-width}); + border-left: $box-border-width solid transparent; + background-color: $white; + box-shadow: 0 0 .6rem 0 rgba($black, .2); + &--active { + padding-left: $box-padding; + border-left-color: $primary_color; + } + + @media (min-width: $breakpoint-responsive) { + display: flex; + align-items: center; + justify-content: space-between; + min-height: auto; + } + +} + +.choicebox__subject { + margin-bottom: 3rem; + padding-right: $btn-wrap-size; + @media (min-width: $breakpoint-responsive) { + margin-bottom: 0; + padding-right: 0; + } +} + + + +// -- DATE +// ---------------------------- + +.choicebox__date { + font-size: 1.8rem; + margin-bottom: .5rem; + white-space: nowrap; + text-transform: capitalize; + + @media (min-width: $breakpoint-responsive) { + margin-bottom: 0; + } +} + +.choicebox__day { + font-size: 2.4rem; + font-weight: bold; +} + + + +// -- IMG +// ---------------------------- + +.choicebox__img { + max-width: 100%; + max-height: $img-maxheight; +} + + + +// -- TXT +// ---------------------------- + +.choicebox__txt { + margin: 0; + font-size: 1.8rem; +} + + + +// -- VOTE BTNS +// ---------------------------- + +.choicebox__actions { + position: absolute; + z-index: 1; + display: flex; + max-width: $btn-wrap-size; + top: 50%; + right: $box-padding; + flex-flow: row-reverse wrap; + transform: translateY(-50%); + + @media (min-width: $breakpoint-responsive) { + position: static; + max-width: none; + flex-flow: row nowrap; + transform: none; + margin: 0 1.5rem; + } +} + +.choicebox__btn { + display: flex; + width: $btn-size; + height: $btn-size; + align-items: center; + justify-content: center; + margin: $btn-margin-y $btn-margin-x; + border: .1rem solid $primary_color; + background-color: transparent; + border-radius: 50%; + + @media (min-width: $breakpoint-responsive) { + margin-top: 0; + margin-bottom: 0; + } + + &:focus, + &:hover, + &:active { + border-color: #ccc9c9; + background-color: #f7f7f7; + } + + &--maybe { + position: relative; + top: calc( (#{$btn-size} + 2 * #{$btn-margin-y}) / 2 ); + @media (min-width: $breakpoint-responsive) { + top: auto; + left: auto; + } + } + + &--active { + border-width: .3rem; + border-color: #bf83c2; + } +} + + + +// -- VOTE COUNT +// ---------------------------- + +.choicebox__count { + position: relative; + padding-right: $btn-wrap-size; + @media (min-width: $breakpoint-responsive) { + flex-shrink: 0; + text-align: right; + padding-right: 0; + } +} + +.choicebox__votes { + border: 0; + padding: 0; + line-height: normal; + background-color: transparent; + @media (min-width: $breakpoint-responsive) { + padding: 1.5rem; + &:focus, + &:hover, + &:active { + & .choicebox__tooltip { + display: flex; + } + } + } +} + +.choicebox__vote { + display: inline-block; + vertical-align: middle; + & + .choicebox__vote { + margin-left: 1.5rem; + } +} + +.choicebox__countxt { + display: none; + margin-top: .5rem; + .choicebox--active & { + display: block; + @media (min-width: $breakpoint-responsive) { + display: none; + } + } +} + + + +// -- TOOLTIP +// ---------------------------- + +.choicebox__tooltip { + display: none; + @media (min-width: $breakpoint-responsive) { + position: absolute; + min-width: 18rem; + font-weight: normal; + top: 5rem; + left: 50%; + z-index: 1; + padding: 2rem; + border: .1rem solid rgba($black, .1); + background-color: $white; + text-align: left; + transform: translateX(-50%); + &::after, + &::before { + position: absolute; + width: 0; + height: 0; + bottom: 100%; + left: 50%; + content: " "; + pointer-events: none; + border: solid transparent; + } + &::after { + margin-left: -1.5rem; + border-width: 1.5rem; + border-color: rgba($white, 0); + border-bottom-color: #fff; + } + &::before { + margin-left: -1.6rem; + border-width: 1.6rem; + border-color: rgba($black, 0); + border-bottom-color: rgba($black, .1); + } + ul { + margin: 0; + padding: 0; + list-style: none; + } + } +} + +.choicebox__tooltiplist { + & + .choicebox__tooltiplist { + padding-left: 3rem; + } + ul { + max-height: 11rem; + overflow: auto; + } +} + +.choicebox__tooltipttl { + @media (min-width: $breakpoint-responsive) { + margin-bottom: 1rem; + font-size: 1.6rem; + font-weight: bold; + white-space: nowrap; + img { + margin-right: .5rem; + vertical-align: sub; + } + & ~ .choicebox__tooltipttl { + margin-top: 3rem; + } + } +} diff --git a/src/app/vote-choice/vote-choice.component.spec.ts b/src/app/vote-choice/vote-choice.component.spec.ts new file mode 100644 index 00000000..f24b9070 --- /dev/null +++ b/src/app/vote-choice/vote-choice.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { VoteChoiceComponent } from './vote-choice.component'; + +describe('VoteChoiceComponent', () => { + let component: VoteChoiceComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ VoteChoiceComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(VoteChoiceComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/vote-choice/vote-choice.component.ts b/src/app/vote-choice/vote-choice.component.ts new file mode 100644 index 00000000..ab31a590 --- /dev/null +++ b/src/app/vote-choice/vote-choice.component.ts @@ -0,0 +1,58 @@ +import {Component, Input} from '@angular/core'; + +interface VoteChoice { + votesCount: { + yes: number + no: number + maybe: number + notAnswered: number + }; + text?: string; + date?: Date; + answer: 'yes' | 'no' | 'maybe' | null; + simpleAnswer: boolean; // enable if we display only a togglable "yes" +} + +/** + * each vote choice takes a configuration from the container of all choices. + * this component is used to select a date choice, or a text answer + */ +@Component({ + selector: 'framadate-vote-choice', + templateUrl: './vote-choice.component.html', + styleUrls: ['./vote-choice.component.scss'] +}) +export class VoteChoiceComponent { + + @Input() choice: VoteChoice = { + date: new Date(), + text: 'description ', + votesCount: { + yes: 0, + no: 0, + maybe: 0, + notAnswered: 0 + }, + simpleAnswer: false, + answer: null + }; + + constructor() { + + } + + setAnswserTo(newAnswer: 'yes' | 'no' | 'maybe' | null) { + if (this.choice.simpleAnswer) { + // only toggle yes to no + if (this.choice.answer && this.choice.answer === 'yes') { + this.choice.answer = 'no'; + } else { + this.choice.answer = 'yes'; + } + + } else { + this.choice.answer = newAnswer; + } + } + +} diff --git a/src/assets/i18n/fr.json b/src/assets/i18n/fr.json index 44ba5fac..baf55cd8 100644 --- a/src/assets/i18n/fr.json +++ b/src/assets/i18n/fr.json @@ -10,7 +10,7 @@ "continue": "Continuer", "perfect": "C'est parfait", "title": "Créer un sondage", - "letsgo": "C'est parti'", + "letsgo": "C'est parti !", "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": "Où sont mes sondages ?", "find_helper": "Je cherche les sondages qui correspondent à mon mail", @@ -51,9 +51,9 @@ }, "resume": { "title": "Et c'est tout pour nous !", - "admins": "Coté administrateur-ice-eux", - "users": "Coté sondés", - "links_mail": "recevoir les liens par e-mail" + "admins": "Côté administrateur-ice-eux", + "users": "Côté sondés", + "links_mail": "Recevoir les liens par e-mail" }, "visibility": { "title": "Visibilité des réponses", diff --git a/src/assets/img/.gitkeep b/src/assets/img/.gitkeep new file mode 100644 index 00000000..e69de29b diff --git a/src/assets/img/check-2.svg b/src/assets/img/check-2.svg new file mode 100644 index 00000000..2fd97ed2 --- /dev/null +++ b/src/assets/img/check-2.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/src/assets/img/check.svg b/src/assets/img/check.svg new file mode 100644 index 00000000..52234938 --- /dev/null +++ b/src/assets/img/check.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/img/croix.svg b/src/assets/img/croix.svg new file mode 100644 index 00000000..1c398859 --- /dev/null +++ b/src/assets/img/croix.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/img/fleche_bas.png b/src/assets/img/fleche_bas.png new file mode 100644 index 00000000..097b2302 Binary files /dev/null and b/src/assets/img/fleche_bas.png differ diff --git a/src/assets/img/fleche_bas.svg b/src/assets/img/fleche_bas.svg new file mode 100644 index 00000000..2801334c --- /dev/null +++ b/src/assets/img/fleche_bas.svg @@ -0,0 +1,7 @@ + + + + + + + \ No newline at end of file diff --git a/src/assets/img/votant-pas-sur.svg b/src/assets/img/votant-pas-sur.svg new file mode 100644 index 00000000..f8d8ade1 --- /dev/null +++ b/src/assets/img/votant-pas-sur.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/assets/img/votant-sur.svg b/src/assets/img/votant-sur.svg new file mode 100644 index 00000000..3d97906e --- /dev/null +++ b/src/assets/img/votant-sur.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/assets/scss/atoms/_buttons.scss b/src/assets/scss/atoms/_buttons.scss index 76973c5d..d03435f0 100644 --- a/src/assets/scss/atoms/_buttons.scss +++ b/src/assets/scss/atoms/_buttons.scss @@ -1,68 +1,47 @@ @charset "UTF-8"; -a { - color: $black; - - .icon { - font-size: 1.5em; - &.right{ - float: right; - display: inline-block; - margin: -0.3em 0.4em; - +@mixin btnTheme ($color) { + background-color: $color; + color: $white; + &.btn--outline { + background-color: transparent; + border-color: $color; + color: $font-color; + } + &:focus, + &:hover, + &:active { + background-color: rgba($color, .8); + &.btn--outline { + background-color: rgba($color, .2); + } } - } } -// buttons .btn { - display: inline-block; - padding: 1em; - border-radius: 0.25em; - background: $primary_color; - // color: $light; - border: 0; - margin: 1em; - min-height: 1.5rem; - cursor: pointer; + margin: .5rem 0; + padding: 1rem 1.5rem; + font-size: 1.6rem; + line-height: normal; + border: .2rem solid transparent; + border-radius: .3rem; + font-weight: normal; - &:hover { - background-color: $dusty-orange; - } -} + &--primary { + @include btnTheme($primary_color); + } -.btn-block { - display: block; - font-weight: 600; - font-size: 1.25em; - text-align: center; -} + &--alert { + @include btnTheme($red); + } -.btn-outline { - background: $white; - border: solid 1px $primary_color; -} + &--small { + padding: .75rem 1.25rem; + } -.btn-next { - @extend .striked; - text-align: right; - width: 100%; - padding: 1em 2em; + &--full { + display: block; + min-width: 100%; + } - a { - display: block; - } -} - -.striked { - &::after { - content: ""; - display: block; - width: 12ch; - height: 4px; - margin-top: -0.7em; - margin-right: 0; - margin-left: auto; - background-color: $primary_color; - } -} +} \ No newline at end of file diff --git a/src/assets/scss/atoms/_fonts.scss b/src/assets/scss/atoms/_fonts.scss index 838c4789..52a10675 100644 --- a/src/assets/scss/atoms/_fonts.scss +++ b/src/assets/scss/atoms/_fonts.scss @@ -60,8 +60,4 @@ h4, h5, h6 { font-family: $title_font, "Brie Light", "Arial", "DejaVu Sans Mono"; -} -p{ - font-family: $default_font; - font-size:14px; -} +} \ No newline at end of file diff --git a/src/assets/scss/atoms/_forms.scss b/src/assets/scss/atoms/_forms.scss index 4ffaa1f6..53981723 100644 --- a/src/assets/scss/atoms/_forms.scss +++ b/src/assets/scss/atoms/_forms.scss @@ -1,31 +1,45 @@ @charset "UTF-8"; -// form inputs -.funky-box { - //background: $white; - padding: 1em; - border-radius: 0.25em; +input, +select, +textarea { + padding: 1rem; + border: 1px solid $secondary_color; border-bottom: 3px solid $primary_color; } input, -textarea, -select, - { - @extend .funky-box; - border:none; - border-bottom:2px solid $primary_color; - color:$black; +select { + display: inline-block; + margin-bottom:10px; + margin-left:5px; } -input[type="text"],input[type="email"],input[type="password"]{ -width: 219px; -height: 36px; -} textarea { - margin-top: 1em; - border-left: 3px solid $primary_color; + width: 100%; +} + +select, +option { + // delete default display + -webkit-appearance : none; + -moz-appearance : none; + + background: none; + border-radius: 0; + + background-color: transparent; + background-image: url("./assets/img/fleche_bas.svg"); + padding-right:1.5rem; + + background-repeat: no-repeat; + background-size: 9px 8px; + background-position: right 1rem center; + + background-clip: border-box; + + // TODO -> check what angular can do } label { diff --git a/src/assets/scss/atoms/_headings.scss b/src/assets/scss/atoms/_headings.scss index cbfd3bb3..2a78ef80 100644 --- a/src/assets/scss/atoms/_headings.scss +++ b/src/assets/scss/atoms/_headings.scss @@ -8,4 +8,8 @@ h2 { h1 { font-size: 2rem; font-weight: 600; -} \ No newline at end of file +} +h1::after{ + background-color: $primary_color; + height:2px; +} diff --git a/src/assets/scss/atoms/_links.scss b/src/assets/scss/atoms/_links.scss index 30d7b40c..561103c8 100644 --- a/src/assets/scss/atoms/_links.scss +++ b/src/assets/scss/atoms/_links.scss @@ -21,11 +21,13 @@ a { &.next::before, &.prev::after { position: absolute; - bottom: 0.7rem; + top: 0; + bottom: 0; display: block; width: 100%; height: 0.6rem; - background-color: $primary_color; + margin: auto; + background-color: $secondary_color; z-index: -1; } @@ -52,7 +54,8 @@ a { &:hover { &.next::before, &.prev::after { - background-color: $secondary_color; + background-color: rgba($primary_color,0.7); + } } diff --git a/src/assets/scss/atoms/_main.scss b/src/assets/scss/atoms/_main.scss index cb902305..b6b3032e 100644 --- a/src/assets/scss/atoms/_main.scss +++ b/src/assets/scss/atoms/_main.scss @@ -1,9 +1,11 @@ @charset "UTF-8"; main { - max-width: 500px; // to look like the styleguide, to remove when we will have full width views - width: 100%; - display: block; - margin: 0 auto; - padding: 0 1.2rem; + display: block; + width: 100%; + //max-width: 320px; // to look like the styleguide, to remove when we will have full width views + max-width: 800px; + margin: 0 auto; + padding: 0 2rem; } + diff --git a/src/assets/scss/molecules/_flex-line.scss b/src/assets/scss/molecules/_flex-line.scss new file mode 100644 index 00000000..0bd372f1 --- /dev/null +++ b/src/assets/scss/molecules/_flex-line.scss @@ -0,0 +1,12 @@ +@charset "UTF-8"; + +.flex-line { + display: flex; + align-items: center; + flex-wrap: wrap; + + & > input, + & > select { + flex-grow: 1; + } +} \ No newline at end of file diff --git a/src/assets/scss/useful_classes.scss b/src/assets/scss/useful_classes.scss new file mode 100644 index 00000000..49725305 --- /dev/null +++ b/src/assets/scss/useful_classes.scss @@ -0,0 +1,6 @@ +@charset "UTF_8"; + +.align-right { + display: flex; + justify-content: flex-end; +} \ No newline at end of file diff --git a/src/assets/scss/variables.scss b/src/assets/scss/variables.scss index 13e08f02..9a9eaab7 100644 --- a/src/assets/scss/variables.scss +++ b/src/assets/scss/variables.scss @@ -3,20 +3,27 @@ // colors from styleguide https://app.zeplin.io/project/5d4d83d68866d6522ff2ff10/styleguide/colors?cid=5d502bb032e23e3516af8154 $camo: #839546; $black: #000000; -$sun-yellow: #ffd52c; +$ugly-purple: #b24eb7; +$lavender-pink : #e9bdeb; $white: #ffffff; $dark-lavender: #7d6c99; $dusty-orange: #f18647; -$mango: #ffb92c; $violet: #bd10e0; +$red: #cd0000; +$cool-grey: #aeafb1; +$warm-grey:#807e7e; +$wisteria:#bf83c2; // interpretations in app -$primary_color: $sun-yellow; -$secondary_color: $mango; +$primary_color: $ugly-purple; +$secondary_color: $lavender-pink; $font_color: $black; $logo_color: $dark-lavender; $logo_color_2: $camo; +$choice_select_border_color: $cool-grey; +$hover-color:$warm-grey; +$clicked-color:$wisteria; // FONT $default_font : "pt_sans"; -$title_font: "proza_libre"; \ No newline at end of file +$title_font: "proza_libre"; diff --git a/src/styles.scss b/src/styles.scss index 2705b3d7..8008fc10 100644 --- a/src/styles.scss +++ b/src/styles.scss @@ -1,6 +1,7 @@ /* You can add global styles to this file, and also import other style files */ @import "assets/scss/variables"; @import "assets/scss/default"; +@import "assets/scss/useful_classes"; @import "assets/scss/atoms/main"; @import "assets/scss/atoms/section"; @@ -14,3 +15,4 @@ @import "assets/scss/molecules/logo"; @import "assets/scss/molecules/debug"; +@import "assets/scss/molecules/flex-line";