mirror of
https://framagit.org/framasoft/framadate/funky-framadate-front.git
synced 2023-08-25 13:53:14 +02:00
Merge branch 'styles' into 'dev'
Styles See merge request framasoft/framadate/funky-framadate-front!11
This commit is contained in:
ty kayn
commit
5083306384
48
package-lock.json
generated
48
package-lock.json
generated
@ -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"
|
||||
}
|
||||
|
||||
@ -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: [
|
||||
|
||||
@ -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},
|
||||
]
|
||||
;
|
||||
|
||||
@ -26,8 +26,41 @@
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<span i18n>
|
||||
Choix cornélien syncronisé:
|
||||
</span>
|
||||
<!-- todo: factoriser les boutons-->
|
||||
<button
|
||||
class="btn"
|
||||
(click)="config.set('pollType' , 'classic')"
|
||||
[class.active]="config.pollType == 'classic'"
|
||||
[disabled]="!formIsValid"
|
||||
class="btn btn--primary next"
|
||||
>
|
||||
<span i18n>
|
||||
sondage classique
|
||||
</span>
|
||||
<span *ngIf="config.pollType == 'classic'">
|
||||
[x]
|
||||
</span>
|
||||
|
||||
</button>
|
||||
<button
|
||||
(click)="selectOption('pollType' ,'dates')"
|
||||
[class.active]="config.pollType == 'dates'"
|
||||
[disabled]="!formIsValid"
|
||||
class="btn btn--primary next"
|
||||
>
|
||||
<span i18n>
|
||||
sondage spécial date
|
||||
</span>
|
||||
<span *ngIf="config.pollType == 'dates'">
|
||||
[x]
|
||||
</span>
|
||||
|
||||
</button>
|
||||
|
||||
<button
|
||||
class="btn btn--primary"
|
||||
i18n
|
||||
(click)="config.sendForm()"
|
||||
>
|
||||
|
||||
@ -4,28 +4,38 @@
|
||||
</h1>
|
||||
|
||||
<p class="subtitle" i18n>
|
||||
vous pouvez utiliser la syntaxe markdown
|
||||
Vous pouvez utiliser la syntaxe markdown
|
||||
</p>
|
||||
|
||||
<ol>
|
||||
<li #answers *ngFor="let answer of config.answers; index as i;trackBy trackFunction"
|
||||
class="answer-item">
|
||||
<input
|
||||
[(ngModel)]="answer.text"
|
||||
class="answer"
|
||||
placeholder="réponse"
|
||||
type="text"
|
||||
class="answer"
|
||||
[(ngModel)]="answer.text"
|
||||
placeholder="réponse"
|
||||
>
|
||||
<button (click)="config.answers.splice(i,1)">X</button>
|
||||
</li>
|
||||
</ol>
|
||||
|
||||
<button
|
||||
class="btn btn--primary btn--outline"
|
||||
(click)="addAnswer()"
|
||||
class="btn-outline btn-block"
|
||||
i18n>
|
||||
Ajouter
|
||||
i18n
|
||||
>
|
||||
Ajouter une proposition
|
||||
</button>
|
||||
|
||||
<a [routerLink]="'/step/resume'" class="btn btn-block" i18n>Voyons ce que ça donne</a>
|
||||
<br>
|
||||
<button
|
||||
[routerLink]="'/step/resume'"
|
||||
class="btn btn--primary"
|
||||
i18n
|
||||
>
|
||||
Voyons ce que ça donne
|
||||
</button>
|
||||
<a class="prev" i18n>
|
||||
Retour
|
||||
</a>
|
||||
</div>
|
||||
|
||||
@ -24,6 +24,7 @@
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="recuperation">
|
||||
<h1>
|
||||
{{"config.find_my_polls"|translate}}
|
||||
|
||||
@ -3,4 +3,4 @@
|
||||
</h1>
|
||||
<h2 i18n>{{"resume.admins"|translate}}</h2>
|
||||
<h2 i18n>{{"resume.users"|translate}}</h2>
|
||||
<h2 i18n>{{"resume.link_mail"|translate}}</h2>
|
||||
<h2 i18n>{{"resume.links_mail"|translate}}</h2>
|
||||
|
||||
@ -39,7 +39,7 @@
|
||||
type="text"
|
||||
id="poll_title"
|
||||
name="poll_title"
|
||||
placeholder="titre"
|
||||
placeholder="{{'creation.choose_title_placeholder'|translate}}"
|
||||
[(ngModel)]="config.title"
|
||||
>
|
||||
</div>
|
||||
@ -52,7 +52,7 @@
|
||||
type="text"
|
||||
name="my_name"
|
||||
id="my_name"
|
||||
placeholder="mon nom"
|
||||
placeholder="{{'creation.name_placeholder'|translate}}"
|
||||
[(ngModel)]="config.myName"
|
||||
>
|
||||
</div>
|
||||
@ -75,12 +75,19 @@
|
||||
></textarea>
|
||||
</div>
|
||||
|
||||
<a
|
||||
<button
|
||||
[routerLink]="'/step/answers'"
|
||||
class="btn btn-block"
|
||||
i18n
|
||||
>
|
||||
Continuer
|
||||
</button>
|
||||
<a
|
||||
[routerLink]="'/step/answers'"
|
||||
class="prev"
|
||||
i18n
|
||||
>
|
||||
Retour
|
||||
</a>
|
||||
<hr>
|
||||
</div>
|
||||
|
||||
@ -1,4 +1,262 @@
|
||||
<h1>page de démo</h1>
|
||||
<p>cette étape est en cours de développement. <br> S'inspirer de la page de Home pour réaliser d'autres pages
|
||||
</p>
|
||||
<a [routerLink]="'/step/end'" class="btn btn-block" i18n="@@confirm">C'est parfait!</a>
|
||||
<a [routerLink]="'/step/end'" class="btn btn--primary" i18n="@@confirm">C'est parfait!</a>
|
||||
<h1>Atoms</h1>
|
||||
<section>
|
||||
<article>
|
||||
<h2>Headings</h2>
|
||||
|
||||
<h1>Ceci est un h1</h1>
|
||||
<h2>Ceci est un h2</h2>
|
||||
<h3>Ceci est un h3</h3>
|
||||
</article>
|
||||
|
||||
<article>
|
||||
<h2>Links</h2>
|
||||
<div>
|
||||
<a [routerLink]="'/home'" class="next">
|
||||
<span class="text" i18n>
|
||||
C'est parti !
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
<div>
|
||||
<a [routerLink]="'/home'" class="prev">
|
||||
<span class="text" i18n>
|
||||
C'est parti !
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article>
|
||||
<h2>Buttons</h2>
|
||||
|
||||
<button type="submit" class="btn btn--primary">
|
||||
primary - default
|
||||
</button>
|
||||
|
||||
<br>
|
||||
|
||||
<button type="submit" class="btn btn--primary btn--small">
|
||||
primary - small
|
||||
</button>
|
||||
|
||||
<br>
|
||||
|
||||
<a href="#" class="btn btn--primary btn--outline">
|
||||
primary - outline - default
|
||||
</a>
|
||||
|
||||
<br>
|
||||
|
||||
<button type="submit" class="btn btn--primary btn--outline btn--small">
|
||||
primary - outline - small
|
||||
</button>
|
||||
|
||||
<br>
|
||||
|
||||
<input type="submit" class="btn btn--alert" value="alert - default">
|
||||
|
||||
<br>
|
||||
|
||||
<button type="submit" class="btn btn--alert btn--small">
|
||||
alert - small
|
||||
</button>
|
||||
|
||||
<br>
|
||||
|
||||
<button type="submit" class="btn btn--alert btn--outline">
|
||||
alert - outline - default
|
||||
</button>
|
||||
|
||||
<br>
|
||||
|
||||
<button type="submit" class="btn btn--alert btn--outline btn--small">
|
||||
alert - outline - small
|
||||
</button>
|
||||
|
||||
<br><br>
|
||||
|
||||
<button type="submit" class="btn btn--primary btn--full">
|
||||
primary - full
|
||||
</button>
|
||||
|
||||
<button type="submit" class="btn btn--primary btn--outline btn--full">
|
||||
primary - outline - full
|
||||
</button>
|
||||
|
||||
<button type="submit" class="btn btn--alert btn--full">
|
||||
alert - full
|
||||
</button>
|
||||
|
||||
<button type="submit" class="btn btn--alert btn--outline btn--full">
|
||||
alert - outline - full
|
||||
</button>
|
||||
|
||||
</article>
|
||||
|
||||
<article>
|
||||
<h2>Forms element</h2>
|
||||
|
||||
<h3>Labels</h3>
|
||||
|
||||
<label for="">Un label pour les labelliser tous</label>
|
||||
|
||||
<h3>Input text</h3>
|
||||
<input type="text" name="" id=""><br>
|
||||
<input type="text" name="" id="" value="texte">
|
||||
|
||||
<h3>Input email</h3>
|
||||
<input type="email" name="" id=""><br>
|
||||
<input type="email" name="" id="" value="adresse@email.com">
|
||||
|
||||
<h3>Input password</h3>
|
||||
<input type="password" name="" id=""><br>
|
||||
<input type="password" name="" id="" value="password">
|
||||
|
||||
<h3>Input date</h3>
|
||||
<input type="date" name="" id=""><br>
|
||||
<input type="date" name="" id="" value="1985-11-23">
|
||||
|
||||
<h3>Select</h3>
|
||||
<select name="" id="">
|
||||
<option value="">
|
||||
1
|
||||
</option>
|
||||
<option value="">
|
||||
2
|
||||
</option>
|
||||
<option value="">
|
||||
3
|
||||
</option>
|
||||
</select>
|
||||
|
||||
<h3>Textarea</h3>
|
||||
<textarea name="" id="" cols="30" rows="10"></textarea>
|
||||
</article>
|
||||
|
||||
<article>
|
||||
<h2>Paragraphs</h2>
|
||||
|
||||
<p>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!</p>
|
||||
</article>
|
||||
|
||||
<article>
|
||||
<h2>Lists</h2>
|
||||
|
||||
<h3>Unordered list</h3>
|
||||
<ul>
|
||||
<li>
|
||||
plop
|
||||
</li>
|
||||
<li>
|
||||
plop
|
||||
</li>
|
||||
<li>
|
||||
plop
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<h3>Ordered list</h3>
|
||||
<ol>
|
||||
<li>
|
||||
plop
|
||||
</li>
|
||||
<li>
|
||||
plop
|
||||
</li>
|
||||
<li>
|
||||
plop
|
||||
</li>
|
||||
</ol>
|
||||
</article>
|
||||
|
||||
<article>
|
||||
<h2>Images</h2>
|
||||
<img src="http://placekitten.com/200/300" alt="">
|
||||
</article>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h1>Molecules</h1>
|
||||
<framadate-vote-choice></framadate-vote-choice>
|
||||
<article>
|
||||
<h2>Useful classes</h2>
|
||||
|
||||
<h3>Align right</h3>
|
||||
<div class="align-right">
|
||||
<a [routerLink]="'/home'" class="next">
|
||||
<span class="text" i18n>
|
||||
C'est parti !
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article>
|
||||
<h2>Label + input text</h2>
|
||||
<label for="test-text">Ceci est un label un peu long mais pas trop</label>
|
||||
<input type="text" name="test-text" id="test-text">
|
||||
</article>
|
||||
|
||||
<article>
|
||||
<h2>Label + select</h2>
|
||||
<label for="test-select">Ceci est un label un peu long mais pas trop</label>
|
||||
<select name="test-select" id="test-select">
|
||||
<option value="">
|
||||
1
|
||||
</option>
|
||||
<option value="">
|
||||
2
|
||||
</option>
|
||||
<option value="">
|
||||
3
|
||||
</option>
|
||||
</select>
|
||||
</article>
|
||||
|
||||
<article>
|
||||
<h2>Input text with info</h2>
|
||||
<a href="https://sketch.cloud/s/00A80/a/MAl5q7">like here</a>
|
||||
</article>
|
||||
|
||||
<article>
|
||||
<h2>Commentaries</h2>
|
||||
</article>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h1>Components</h1>
|
||||
|
||||
<article>
|
||||
<h2>Images list</h2>
|
||||
<a href="https://sketch.cloud/s/00A80/a/bQA9wj">that</a>
|
||||
</article>
|
||||
|
||||
<article>
|
||||
<h2>Calendar</h2>
|
||||
</article>
|
||||
|
||||
<article>
|
||||
<h2>Modale</h2>
|
||||
</article>
|
||||
|
||||
<article>
|
||||
<h2>Way to vote</h2>
|
||||
<a href="https://sketch.cloud/s/00A80/a/Ol0598">that</a>
|
||||
</article>
|
||||
|
||||
<article>
|
||||
<h2>Voted</h2>
|
||||
<a href="https://sketch.cloud/s/00A80/a/OlJZo2">that</a>
|
||||
</article>
|
||||
|
||||
<article>
|
||||
<h2>Graphics</h2>
|
||||
<a href="https://sketch.cloud/s/00A80/a/megprw">that</a>
|
||||
</article>
|
||||
</section>
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -2,5 +2,5 @@
|
||||
<h1 i18n>
|
||||
Images
|
||||
</h1>
|
||||
<a [routerLink]="'/step/visibility'" class="btn btn-block">ok</a>
|
||||
<a [routerLink]="'/step/visibility'" class="btn btn--primary">ok</a>
|
||||
|
||||
|
||||
@ -7,4 +7,4 @@
|
||||
</div>
|
||||
<button [routerLink]="'/step/answers'" class="btn btn-info">Retour</button>
|
||||
</section>
|
||||
<a [routerLink]="'/step/end'" class="btn btn-block" i18n="@@confirm">C'est parfait!</a>
|
||||
<button [routerLink]="'/step/end'" class="btn btn--primary" i18n="@@confirm">C'est parfait!</button>
|
||||
|
||||
@ -11,4 +11,4 @@
|
||||
<h1 i18n>
|
||||
{{"visibility.access"|translate}}
|
||||
</h1>
|
||||
<a [routerLink]="'/step/end'" class="btn btn-block" i18n="@@confirm">C'est parfait!</a>
|
||||
<a [routerLink]="'/step/end'" class="btn btn--primary" i18n="@@confirm">C'est parfait!</a>
|
||||
|
||||
85
src/app/vote-choice/vote-choice.component.html
Normal file
85
src/app/vote-choice/vote-choice.component.html
Normal file
@ -0,0 +1,85 @@
|
||||
<div class="choicebox"><!-- add .choicebox--active to most voted -->
|
||||
|
||||
<div class="choicebox__subject">
|
||||
|
||||
<!-- TEXT CASE --><!--
|
||||
<p class="choicebox__txt">
|
||||
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nulla nobis nam culpa !
|
||||
</p>
|
||||
--><!-- TEXT CASE -->
|
||||
|
||||
<!-- IMG CASE --><!--
|
||||
<img class="choicebox__img" src="https://picsum.photos/200" alt="">
|
||||
--><!-- IMG CASE -->
|
||||
|
||||
<!-- DATE CASE -->
|
||||
<div class="choicebox__date" *ngIf="choice.date">
|
||||
{{choice.date | date:'EEE'}} <span class="choicebox__day">{{choice.date | date:'dd'}}</span> {{choice.date | date:'LLL'}}
|
||||
</div>
|
||||
<div class="choicebox__hour">
|
||||
08:00
|
||||
</div>
|
||||
<!-- DATE CASE -->
|
||||
|
||||
</div>
|
||||
|
||||
<div class="choicebox__actions">
|
||||
<!-- show only the yes check if the config is set to simpleAnswer -->
|
||||
<!-- add .choicebox__btn--active to selected <button> -->
|
||||
<button class="choicebox__btn choicebox__btn--yes" type="button">
|
||||
<img src="../../assets/img/check.svg" (click)="setAnswserTo('yes')" alt="">
|
||||
</button>
|
||||
<button class="choicebox__btn choicebox__btn--maybe" type="button">
|
||||
<img src="../../assets/img/check-2.svg" (click)="setAnswserTo('maybe')" alt="" *ngIf="!choice.simpleAnswer">
|
||||
</button>
|
||||
<button class="choicebox__btn choicebox__btn--no" type="button">
|
||||
<img src="../../assets/img/croix.svg" (click)="setAnswserTo('no')" alt="" *ngIf="!choice.simpleAnswer">
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="choicebox__count">
|
||||
<button type="button" aria-describedby="choicebox-tooltip" class="choicebox__votes">
|
||||
<div class="choicebox__vote">
|
||||
{{choice.votesCount.yes}}
|
||||
<img width="20px" height="21px" src="../../assets/img/votant-sur.svg" alt="">
|
||||
</div>
|
||||
<div class="choicebox__vote">
|
||||
{{choice.votesCount.maybe}}
|
||||
<img width="22px" height="24px" src="../../assets/img/votant-pas-sur.svg" alt="">
|
||||
</div>
|
||||
<div class="choicebox__tooltip" id="choicebox-tooltip">
|
||||
<div class="choicebox__tooltiplist">
|
||||
<div class="choicebox__tooltipttl">
|
||||
<img width="20px" height="21px" src="../../assets/img/votant-sur.svg" alt="">
|
||||
{{choice.votesCount.yes}} "Oui"
|
||||
</div>
|
||||
<ul>
|
||||
<li>Lorem</li>
|
||||
<li>Ipsum dolor</li>
|
||||
<li>Sit amet</li>
|
||||
<li>Consectetur</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="choicebox__tooltiplist">
|
||||
<div class="choicebox__tooltipttl">
|
||||
<img width="22px" height="24px" src="../../assets/img/votant-pas-sur.svg" alt="">
|
||||
{{choice.votesCount.maybe}} "Peut-être"
|
||||
</div>
|
||||
<ul>
|
||||
<li>Lorem</li>
|
||||
<li>Ipsum dolor</li>
|
||||
<li>Sit amet</li>
|
||||
<li>Consectetur</li>
|
||||
<li>Lorem</li>
|
||||
<li>Ipsum dolor</li>
|
||||
<li>Sit amet</li>
|
||||
<li>Consectetur</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</button>
|
||||
<div class="choicebox__countxt">
|
||||
Choix ayant reçu le plus de votes
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
288
src/app/vote-choice/vote-choice.component.scss
Normal file
288
src/app/vote-choice/vote-choice.component.scss
Normal file
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
25
src/app/vote-choice/vote-choice.component.spec.ts
Normal file
25
src/app/vote-choice/vote-choice.component.spec.ts
Normal file
@ -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<VoteChoiceComponent>;
|
||||
|
||||
beforeEach(async(() => {
|
||||
TestBed.configureTestingModule({
|
||||
declarations: [ VoteChoiceComponent ]
|
||||
})
|
||||
.compileComponents();
|
||||
}));
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(VoteChoiceComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
58
src/app/vote-choice/vote-choice.component.ts
Normal file
58
src/app/vote-choice/vote-choice.component.ts
Normal file
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
@ -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",
|
||||
|
||||
0
src/assets/img/.gitkeep
Normal file
0
src/assets/img/.gitkeep
Normal file
6
src/assets/img/check-2.svg
Normal file
6
src/assets/img/check-2.svg
Normal file
@ -0,0 +1,6 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="19" height="15" viewBox="0 0 19 15">
|
||||
<g fill="#F5A623" fill-rule="evenodd">
|
||||
<path d="M13.412 0C16.749 1.504 19 4.347 19 7.607c0 3.11-2.051 5.843-5.14 7.393l-.053-1.766c2.095-1.366 3.353-3.41 3.353-5.627 0-2.34-1.402-4.484-3.696-5.841L13.412 0zM5.588 0C2.251 1.504 0 4.347 0 7.607 0 10.717 2.051 13.45 5.14 15l.053-1.766C3.098 11.868 1.84 9.824 1.84 7.607c0-2.34 1.402-4.484 3.696-5.841L5.588 0z"/>
|
||||
<path d="M8.326 12.692L4.648 8.588a.891.891 0 0 1 .038-1.114.681.681 0 0 1 .999-.043l2.641 2.947 4.989-5.565a.681.681 0 0 1 .999.043.891.891 0 0 1 .038 1.114l-6.026 6.722z"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 656 B |
3
src/assets/img/check.svg
Normal file
3
src/assets/img/check.svg
Normal file
@ -0,0 +1,3 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="12" viewBox="0 0 16 12">
|
||||
<path fill="#429A00" fill-rule="evenodd" d="M6.133 12L.281 5.903a1.257 1.257 0 0 1 .062-1.656 1.136 1.136 0 0 1 1.589-.064l4.201 4.378L14.068.293a1.136 1.136 0 0 1 1.59.064c.432.45.458 1.172.06 1.656L6.134 12z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 308 B |
3
src/assets/img/croix.svg
Normal file
3
src/assets/img/croix.svg
Normal file
@ -0,0 +1,3 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12">
|
||||
<path fill="#CD0000" fill-rule="evenodd" d="M7.314 6.05l4.465-4.461A.918.918 0 0 0 10.484.294L6.018 4.71 1.525.22A.92.92 0 0 0 .229 1.516l4.484 4.536-4.392 4.333a.918.918 0 1 0 1.296 1.295L6 7.299l4.355 4.353a.92.92 0 0 0 1.295-1.295L7.314 6.05z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 344 B |
BIN
src/assets/img/fleche_bas.png
Normal file
BIN
src/assets/img/fleche_bas.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 158 B |
7
src/assets/img/fleche_bas.svg
Normal file
7
src/assets/img/fleche_bas.svg
Normal file
@ -0,0 +1,7 @@
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
|
||||
<svg version="1.0" xmlns="http://www.w3.org/2000/svg" width="9px" height="8px" viewBox="0 0 90 80" preserveAspectRatio="xMidYMid meet">
|
||||
<g id="layer101" fill="#000000" stroke="none">
|
||||
<path d="M20 48 c-11 -18 -20 -36 -20 -40 0 -5 20 -8 45 -8 25 0 45 3 45 8 0 10 -39 72 -45 72 -3 0 -14 -15 -25 -32z"/>
|
||||
</g>
|
||||
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 426 B |
10
src/assets/img/votant-pas-sur.svg
Normal file
10
src/assets/img/votant-pas-sur.svg
Normal file
@ -0,0 +1,10 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="22" height="24" viewBox="0 0 22 24">
|
||||
<g fill="none" fill-rule="evenodd">
|
||||
<path fill="#4A4A4A" fill-rule="nonzero" d="M16.556 13.749a10.963 10.963 0 0 0-16.112 0 .965.965 0 0 0-.25.639v3.833a.958.958 0 0 0 .959.946h14.694c.53 0 .959-.43.959-.959v-3.833a.965.965 0 0 0-.25-.626z"/>
|
||||
<circle cx="8.5" cy="4.472" r="4.472" fill="#4A4A4A" fill-rule="nonzero"/>
|
||||
<path fill="#FFF" fill-rule="nonzero" stroke="#FFF" stroke-width="4" d="M14.067 20.083l-2.926-3.048a.629.629 0 0 1 .03-.828.568.568 0 0 1 .795-.032l2.1 2.189 3.968-4.134a.568.568 0 0 1 .795.032c.216.225.23.586.03.828l-4.792 4.993z"/>
|
||||
<path fill="#F5A623" fill-rule="nonzero" d="M14.067 20.083l-2.926-3.048a.629.629 0 0 1 .03-.828.568.568 0 0 1 .795-.032l2.1 2.189 3.968-4.134a.568.568 0 0 1 .795.032c.216.225.23.586.03.828l-4.792 4.993zM19 12.083c1.792.903 3 2.609 3 4.564 0 1.867-1.101 3.506-2.76 4.436l-.028-1.06c1.125-.819 1.8-2.046 1.8-3.376 0-1.403-.753-2.69-1.984-3.504L19 12.083z"/>
|
||||
<path fill="#FFF" fill-rule="nonzero" stroke="#FFF" stroke-width="3" d="M10 12.083c-1.792.903-3 2.609-3 4.564 0 1.867 1.101 3.506 2.76 4.436l.028-1.06c-1.125-.819-1.8-2.046-1.8-3.376 0-1.403.753-2.69 1.984-3.504l.028-1.06z"/>
|
||||
<path fill="#F5A623" fill-rule="nonzero" d="M10 12.083c-1.792.903-3 2.609-3 4.564 0 1.867 1.101 3.506 2.76 4.436l.028-1.06c-1.125-.819-1.8-2.046-1.8-3.376 0-1.403.753-2.69 1.984-3.504l.028-1.06z"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.4 KiB |
9
src/assets/img/votant-sur.svg
Normal file
9
src/assets/img/votant-sur.svg
Normal file
@ -0,0 +1,9 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="20" height="21" viewBox="0 0 20 21">
|
||||
<defs>
|
||||
<path id="a" d="M8.667 10.205c2.13-.029 4.221.541 6.03 1.638l.336.212-4.56 5.008L7.9 14.338a1.887 1.887 0 0 0-2.017-.472 1.84 1.84 0 0 0-1.216 1.653c-.024.44.114.873.385 1.22l.108.126 2.047 2.165H1.493a1.325 1.325 0 0 1-1.286-1.18L.2 17.718v-3.537a.65.65 0 0 1 .133-.4 10.822 10.822 0 0 1 7.655-3.573l.339-.007zm8.466 5.046v2.468c0 .71-.572 1.291-1.293 1.312h-2.127l3.42-3.78zM8.66.361c2.507 0 4.54 2 4.54 4.469 0 2.468-2.033 4.47-4.54 4.47S4.12 7.297 4.12 4.83 6.153.36 8.66.36z"/>
|
||||
</defs>
|
||||
<g fill="none" fill-rule="nonzero">
|
||||
<use fill="#4A4A4A" xlink:href="#a"/>
|
||||
<path fill="#429A00" d="M19.18 10.25a.673.673 0 0 0-.947.053l-7.746 8.531-3.467-3.668a.67.67 0 0 0-.94-.072.651.651 0 0 0 0 .932l4.453 4.725 8.694-9.595a.649.649 0 0 0-.047-.905z"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 933 B |
@ -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 {
|
||||
&--alert {
|
||||
@include btnTheme($red);
|
||||
}
|
||||
|
||||
&--small {
|
||||
padding: .75rem 1.25rem;
|
||||
}
|
||||
|
||||
&--full {
|
||||
display: block;
|
||||
font-weight: 600;
|
||||
font-size: 1.25em;
|
||||
text-align: center;
|
||||
min-width: 100%;
|
||||
}
|
||||
|
||||
.btn-outline {
|
||||
background: $white;
|
||||
border: solid 1px $primary_color;
|
||||
}
|
||||
|
||||
.btn-next {
|
||||
@extend .striked;
|
||||
text-align: right;
|
||||
width: 100%;
|
||||
padding: 1em 2em;
|
||||
|
||||
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;
|
||||
}
|
||||
}
|
||||
@ -61,7 +61,3 @@ h5,
|
||||
h6 {
|
||||
font-family: $title_font, "Brie Light", "Arial", "DejaVu Sans Mono";
|
||||
}
|
||||
p{
|
||||
font-family: $default_font;
|
||||
font-size:14px;
|
||||
}
|
||||
|
||||
@ -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 {
|
||||
|
||||
@ -9,3 +9,7 @@ h1 {
|
||||
font-size: 2rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
h1::after{
|
||||
background-color: $primary_color;
|
||||
height:2px;
|
||||
}
|
||||
|
||||
@ -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);
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -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;
|
||||
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 1.2rem;
|
||||
padding: 0 2rem;
|
||||
}
|
||||
|
||||
|
||||
12
src/assets/scss/molecules/_flex-line.scss
Normal file
12
src/assets/scss/molecules/_flex-line.scss
Normal file
@ -0,0 +1,12 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
.flex-line {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
|
||||
& > input,
|
||||
& > select {
|
||||
flex-grow: 1;
|
||||
}
|
||||
}
|
||||
6
src/assets/scss/useful_classes.scss
Normal file
6
src/assets/scss/useful_classes.scss
Normal file
@ -0,0 +1,6 @@
|
||||
@charset "UTF_8";
|
||||
|
||||
.align-right {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
@ -3,19 +3,26 @@
|
||||
// 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";
|
||||
|
||||
@ -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";
|
||||
|
||||
Loading…
Reference in New Issue
Block a user