Merge branch 'styles' into 'dev'

Styles

See merge request framasoft/framadate/funky-framadate-front!11
This commit is contained in:
ty kayn 2019-11-13 11:44:50 +01:00
commit 5083306384
36 changed files with 1016 additions and 162 deletions

48
package-lock.json generated
View File

@ -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"
}

View File

@ -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: [

View File

@ -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},
]
;

View File

@ -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()"
>

View File

@ -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>

View File

@ -24,6 +24,7 @@
</a>
</div>
</section>
<section class="recuperation">
<h1>
{{"config.find_my_polls"|translate}}

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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;
}
}
}

View File

@ -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>

View File

@ -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>

View File

@ -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>

View 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>

View 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;
}
}
}

View 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();
});
});

View 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;
}
}
}

View File

@ -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
View File

View 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
View 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
View 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

Binary file not shown.

After

Width:  |  Height:  |  Size: 158 B

View 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

View 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

View 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

View File

@ -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;
}
}

View File

@ -61,7 +61,3 @@ h5,
h6 {
font-family: $title_font, "Brie Light", "Arial", "DejaVu Sans Mono";
}
p{
font-family: $default_font;
font-size:14px;
}

View File

@ -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 {

View File

@ -9,3 +9,7 @@ h1 {
font-size: 2rem;
font-weight: 600;
}
h1::after{
background-color: $primary_color;
height:2px;
}

View File

@ -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);
}
}

View File

@ -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;
}

View File

@ -0,0 +1,12 @@
@charset "UTF-8";
.flex-line {
display: flex;
align-items: center;
flex-wrap: wrap;
& > input,
& > select {
flex-grow: 1;
}
}

View File

@ -0,0 +1,6 @@
@charset "UTF_8";
.align-right {
display: flex;
justify-content: flex-end;
}

View File

@ -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";

View File

@ -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";