Feature/simplify scss

This commit is contained in:
ty kayn 2020-04-21 10:50:26 +02:00
parent 88fec2c0c6
commit ba7a24708d
183 changed files with 7788 additions and 7778 deletions

File diff suppressed because one or more lines are too long

View File

@ -2,7 +2,7 @@ image: weboaks/node-karma-protractor-chrome
stages: stages:
- test - test
- e2e # - e2e
cache: cache:
paths: paths:
@ -13,17 +13,17 @@ test:
script: script:
- npm i - npm i
- pkill Xvfb - pkill Xvfb
- npm run test - npm run test:ci
artifacts: artifacts:
paths: paths:
- coverage/ - coverage/
e2e: #e2e:
stage: e2e # stage: e2e
script: # script:
- npm i # - npm i
- pkill Xvfb # - pkill Xvfb
- npm run e2e # - npm run e2e
pages: pages:
stage: .post stage: .post

View File

@ -32,7 +32,7 @@
"node_modules/font-awesome/css/font-awesome.css", "node_modules/font-awesome/css/font-awesome.css",
"node_modules/primeng/resources/themes/nova-light/theme.css", "node_modules/primeng/resources/themes/nova-light/theme.css",
"node_modules/primeng/resources/primeng.min.css", "node_modules/primeng/resources/primeng.min.css",
"src/styles.scss" "src/assets/scss/styles.scss"
], ],
"scripts": [ "scripts": [
"node_modules/marked/lib/marked.js", "node_modules/marked/lib/marked.js",

File diff suppressed because one or more lines are too long

View File

@ -1,7 +1,11 @@
import 'jest-preset-angular';
// const { defaults } = require('jest-config'); // const { defaults } = require('jest-config');
// //
// module.exports = { // module.exports = {
// verbose: true, // verbose: true,
// collectCoverage: true, // collectCoverage: true,
// collectCoverageFrom: ['src/**/*.ts'], // // collectCoverageFrom: ['src/**/*.ts'],
// collectCoverageFrom: ['src/app/pages/admin/*.ts'],
// }; // };
Error.stackTraceLimit = 2;

View File

@ -11,7 +11,9 @@
"bld:pkg": "npm run build && npm run package", "bld:pkg": "npm run build && npm run package",
"build:demo": "ng build --crossOrigin=anonymous --extractCss=true --progress=true --prod && npm run package", "build:demo": "ng build --crossOrigin=anonymous --extractCss=true --progress=true --prod && npm run package",
"build:demobliss": "ng build --crossOrigin=anonymous --extractCss=true --baseHref=https://framadate-api.cipherbliss.com --progress=true --prod && npm run package", "build:demobliss": "ng build --crossOrigin=anonymous --extractCss=true --baseHref=https://framadate-api.cipherbliss.com --progress=true --prod && npm run package",
"test": "ng test --watch=false", "test": "jest",
"test:watch": "jest --watch",
"test:ci": "jest --runInBand",
"lint": "ng lint", "lint": "ng lint",
"e2e": "ng e2e", "e2e": "ng e2e",
"format:check": "prettier --list-different \"src/{app,environments,assets}/**/*{.ts,.js,.json,.css,.scss}\"", "format:check": "prettier --list-different \"src/{app,environments,assets}/**/*{.ts,.js,.json,.css,.scss}\"",
@ -40,6 +42,7 @@
"bulma": "^0.8.2", "bulma": "^0.8.2",
"chart.js": "^2.8.0", "chart.js": "^2.8.0",
"font-awesome": "^4.7.0", "font-awesome": "^4.7.0",
"jest-preset-angular": "^8.1.3",
"karma-coverage": "^2.0.1", "karma-coverage": "^2.0.1",
"karma-firefox-launcher": "^1.3.0", "karma-firefox-launcher": "^1.3.0",
"karma-phantomjs-launcher": "^1.0.4", "karma-phantomjs-launcher": "^1.0.4",
@ -66,7 +69,6 @@
"@storybook/addon-notes": "^5.3.18", "@storybook/addon-notes": "^5.3.18",
"@storybook/addons": "^5.3.18", "@storybook/addons": "^5.3.18",
"@storybook/angular": "^5.3.18", "@storybook/angular": "^5.3.18",
"@types/jasmine": "^3.5.10",
"@types/jasminewd2": "~2.0.8", "@types/jasminewd2": "~2.0.8",
"@types/jest": "^25.2.1", "@types/jest": "^25.2.1",
"@types/node": "^13.11.1", "@types/node": "^13.11.1",
@ -96,7 +98,10 @@
"src/{app,environments,assets}/**/*.{js,jsx,ts,tsx,md,html,css,scss}": [ "src/{app,environments,assets}/**/*.{js,jsx,ts,tsx,md,html,css,scss}": [
"prettier --write", "prettier --write",
"git add" "git add"
], ]
"*.js": "eslint --cache --fix" },
"jest": {
"preset": "jest-preset-angular",
"setupFilesAfterEnv": "./jest.config.js"
} }
} }

View File

@ -15,12 +15,11 @@
<main> <main>
<div class="container"> <div class="container">
<div class="columns"> <div class="columns">
<div class="column is-one-quarter"> <div class="column is-one-quarter togglable-menu" *ngIf="config.menuVisible">
<framadate-theme-selector></framadate-theme-selector> <framadate-theme-selector></framadate-theme-selector>
<framadate-navigation *ngIf="config.menuVisible" [step]="step"></framadate-navigation> <framadate-navigation [step]="step"></framadate-navigation>
<framadate-debugger *ngIf="isDevelopmentEnv"></framadate-debugger> <framadate-debugger *ngIf="isDevelopmentEnv"></framadate-debugger>
<p-toast position="top-right"></p-toast>
</div> </div>
<div class="column"> <div class="column">
<router-outlet></router-outlet> <router-outlet></router-outlet>
@ -28,4 +27,5 @@
</div> </div>
</div> </div>
</main> </main>
<p-toast position="top-right"></p-toast>
</div> </div>

View File

@ -40,7 +40,7 @@ export class DateUtilities {
* @param d1 * @param d1
* @param d2 * @param d2
*/ */
dayDiff(d1: Date, d2: Date): Number { dayDiff(d1: Date, d2: Date): number {
return Number(d2.getTime() - d1.getTime() / 31536000000); return Number(d2.getTime() - d1.getTime() / 31536000000);
} }

View File

@ -34,7 +34,7 @@ export class PollConfig {
description: string = environment.production ? '' : 'ma description'; description: string = environment.production ? '' : 'ma description';
myName: string = environment.production ? '' : 'mon pseudo'; myName: string = environment.production ? '' : 'mon pseudo';
myComment: string = environment.production ? '' : 'wouah trop bien framadate!'; myComment: string = environment.production ? '' : 'wouah trop bien framadate!';
isAdmin: boolean = !environment.production; isAdmin = !environment.production;
myVoteStack: any; myVoteStack: any;
myTempVoteStack = 0; myTempVoteStack = 0;
myEmail: string = environment.production ? '' : 'tktest@tktest.com'; myEmail: string = environment.production ? '' : 'tktest@tktest.com';

View File

@ -12,7 +12,7 @@ export class PollUtilities {
*/ */
makeUuid() { makeUuid() {
return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) { return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
var r = (Math.random() * 16) | 0, const r = (Math.random() * 16) | 0,
v = c == 'x' ? r : (r & 0x3) | 0x8; v = c == 'x' ? r : (r & 0x3) | 0x8;
return v.toString(16); return v.toString(16);
}); });
@ -38,9 +38,9 @@ export class PollUtilities {
str = str.toLowerCase(); str = str.toLowerCase();
// remove accents, swap ñ for n, etc // remove accents, swap ñ for n, etc
var from = 'àáäâèéëêìíïîòóöôùúüûñç·/_,:;'; const from = 'àáäâèéëêìíïîòóöôùúüûñç·/_,:;';
var to = 'aaaaeeeeiiiioooouuuunc------'; const to = 'aaaaeeeeiiiioooouuuunc------';
for (var i = 0, l = from.length; i < l; i++) { for (let i = 0, l = from.length; i < l; i++) {
str = str.replace(new RegExp(from.charAt(i), 'g'), to.charAt(i)); str = str.replace(new RegExp(from.charAt(i), 'g'), to.charAt(i));
} }

View File

@ -1,30 +1,30 @@
<div class="well debug"> <!--<div class="well debug">-->
<strong> <!-- <strong>-->
<h2 i18n> <!-- <h2 i18n>-->
infos de debug - environement de Dev <!-- infos de debug - environement de Dev-->
</h2> <!-- </h2>-->
<span class="demo"> <!-- <span class="demo">-->
{{ 'config.demo' | translate }} <!-- {{ 'config.demo' | translate }}-->
</span> <!-- </span>-->
</strong> <!-- </strong>-->
<ul> <!-- <ul>-->
<li>étape actuelle {{ config.step }} / {{ config.stepMax }}</li> <!-- <li>étape actuelle {{ config.step }} / {{ config.stepMax }}</li>-->
<li>formulaire valide : {{ formIsValid }}</li> <!-- <li>formulaire valide : {{ formIsValid }}</li>-->
<li>type de formulaire: {{ config.pollType }}</li> <!-- <li>type de formulaire: {{ config.pollType }}</li>-->
</ul> <!-- </ul>-->
<button class="btn btn--primary" i18n (click)="config.createPoll()"> <!-- <button class="btn btn&#45;&#45;primary" i18n (click)="config.createPoll()">-->
Envoyer le formulaire <!-- Envoyer le formulaire-->
</button> <!-- </button>-->
<button class="btn btn--primary" i18n (click)="config.getPollById('1', 'example password')"> <!-- <button class="btn btn&#45;&#45;primary" i18n (click)="config.getPollById('1', 'example password')">-->
get poll 1 <!-- get poll 1-->
</button> <!-- </button>-->
<button class="btn btn--primary" i18n (click)="config.getMyPolls('tktest@tktest.com')"> <!-- <button class="btn btn&#45;&#45;primary" i18n (click)="config.getMyPolls('tktest@tktest.com')">-->
get my polls <!-- get my polls-->
</button> <!-- </button>-->
<button class="btn btn--success" (click)="launchToast()"> <!-- <button class="btn btn&#45;&#45;success" (click)="launchToast()">-->
launch success toast <!-- launch success toast-->
</button> <!-- </button>-->
<a [routerLink]="'/vote/poll/id/3'" class="btn btn--success"> <!-- <a [routerLink]="'/vote/poll/id/3'" class="btn btn&#45;&#45;success">-->
See example of vote page <!-- See example of vote page-->
</a> <!-- </a>-->
</div> <!--</div>-->

View File

@ -2,7 +2,7 @@ import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { AdminComponent } from './admin.component'; import { AdminComponent } from './admin.component';
describe('AdminComponent', () => { fdescribe('AdminComponent', () => {
let component: AdminComponent; let component: AdminComponent;
let fixture: ComponentFixture<AdminComponent>; let fixture: ComponentFixture<AdminComponent>;

View File

@ -8,7 +8,7 @@ import { ConfigService } from '../../services/config.service';
styleUrls: ['./create-or-retrieve.component.scss'], styleUrls: ['./create-or-retrieve.component.scss'],
}) })
export class CreateOrRetrieveComponent extends BaseComponent implements OnInit { export class CreateOrRetrieveComponent extends BaseComponent implements OnInit {
loadedMyPolls: boolean = false; loadedMyPolls = false;
constructor(public config: ConfigService) { constructor(public config: ConfigService) {
super(config); super(config);

View File

@ -1,3 +1,4 @@
:host {
.several-times { .several-times {
padding-left: 1em; padding-left: 1em;
} }
@ -7,15 +8,36 @@
margin-bottom: 1em; margin-bottom: 1em;
} }
.dates-list {
.btn--primary {
float: right;
}
}
.date-choice {
input {
width: 70%;
}
}
.title { .title {
font-size: 1.5rem; font-size: 1.5rem;
} }
:host {
input, input,
button { button {
+ button { + button {
margin-left: 1em; margin-left: 1em;
} }
} }
.columns {
margin-top: 1em;
}
.identical-dates {
label {
width: 3ch;
}
}
} }

View File

@ -12,10 +12,10 @@ import { DateUtilities } from '../../config/DateUtilities';
styleUrls: ['./dates.component.scss'], styleUrls: ['./dates.component.scss'],
}) })
export class DatesComponent extends BaseComponent implements OnInit { export class DatesComponent extends BaseComponent implements OnInit {
showDateInterval: boolean = false; showDateInterval = false;
startDateInterval: any; startDateInterval: any;
intervalDays: any; intervalDays: any;
intervalDaysDefault: number = 7; intervalDaysDefault = 7;
endDateInterval: any; endDateInterval: any;
constructor( constructor(
@ -39,7 +39,7 @@ export class DatesComponent extends BaseComponent implements OnInit {
* set the interval options * set the interval options
*/ */
ngOnInit() { ngOnInit() {
let dateCurrent = new Date(); const dateCurrent = new Date();
const dateJson = dateCurrent.toISOString(); const dateJson = dateCurrent.toISOString();
this.startDateInterval = dateJson.substring(0, 10); this.startDateInterval = dateJson.substring(0, 10);
this.endDateInterval = this.dateUtilities this.endDateInterval = this.dateUtilities
@ -54,7 +54,7 @@ export class DatesComponent extends BaseComponent implements OnInit {
date_object: new Date(), date_object: new Date(),
timeList: [], timeList: [],
}); });
let selector = '[ng-reflect-name="dateChoices_' + (this.config.dateList.length - 1) + '"]'; const selector = '[ng-reflect-name="dateChoices_' + (this.config.dateList.length - 1) + '"]';
this.cd.detectChanges(); this.cd.detectChanges();
const elem = this.document.querySelector(selector); const elem = this.document.querySelector(selector);
if (elem) { if (elem) {
@ -89,7 +89,7 @@ export class DatesComponent extends BaseComponent implements OnInit {
*/ */
addTimeToDate(config: any, id: number) { addTimeToDate(config: any, id: number) {
config.timeList.push({ literal: '' }); config.timeList.push({ literal: '' });
let selector = '[ng-reflect-name="dateTime_' + id + '_Choices_' + (config.timeList.length - 1) + '"]'; const selector = '[ng-reflect-name="dateTime_' + id + '_Choices_' + (config.timeList.length - 1) + '"]';
this.cd.detectChanges(); this.cd.detectChanges();
const elem = this.document.querySelector(selector); const elem = this.document.querySelector(selector);
if (elem) { if (elem) {
@ -115,7 +115,7 @@ export class DatesComponent extends BaseComponent implements OnInit {
* add all the dates between the start and end dates in the interval section * add all the dates between the start and end dates in the interval section
*/ */
addIntervalOfDates() { addIntervalOfDates() {
let newIntervalArray = this.dateUtilities.getDatesInRange(this.startDateInterval, this.endDateInterval, 1); const newIntervalArray = this.dateUtilities.getDatesInRange(this.startDateInterval, this.endDateInterval, 1);
const converted = []; const converted = [];
newIntervalArray.forEach((element) => { newIntervalArray.forEach((element) => {

View File

@ -42,20 +42,12 @@
<h3 class="margin-top-x6 margin-btm-x3"> <h3 class="margin-top-x6 margin-btm-x3">
Exporter/Imprimer Exporter/Imprimer
</h3> </h3>
<input <button class="export export-csv" (click)="config.exportCSV()">
type="submit" Exporter en .csv
name="export" </button>
class="margin-btm-x3 btn btn--primary btn--outline" <button class="export export-print" (click)="config.print()">
value="Exporter en .csv" Imprimer le sondage
(click)="config.exportCSV()" </button>
/>
<input
type="submit"
name="copy-link"
class="btn btn--primary btn--outline"
value="Imprimer le sondage"
(click)="config.print()"
/>
</div> </div>
</div> </div>
</div> </div>

View File

@ -8,6 +8,8 @@
></framadate-voting-choice> ></framadate-voting-choice>
</div> </div>
</div> </div>
<div class="bar-votestack">
<button <button
class="btn btn-block submit-votestack" class="btn btn-block submit-votestack"
(click)="config.addVote()" (click)="config.addVote()"
@ -24,3 +26,4 @@
> >
<i class="fa fa-pencil"></i> Mettre à jour <i class="fa fa-pencil"></i> Mettre à jour
</button> </button>
</div>

View File

@ -1,5 +0,0 @@
.submit-votestack {
position: fixed;
bottom: 5px;
right: 5px;
}

View File

@ -9,7 +9,7 @@ import { ConfirmationService, MessageService } from 'primeng';
import { Router } from '@angular/router'; import { Router } from '@angular/router';
import { ConfigService } from '../../../services/config.service'; import { ConfigService } from '../../../services/config.service';
const routerSpy = jasmine.createSpyObj('Router', ['navigateByUrl']); const routerSpy = jest.fn({ navigateByUrl: jest.fn() });
describe('CommentsListComponent', () => { describe('CommentsListComponent', () => {
let component: CommentsListComponent; let component: CommentsListComponent;

View File

@ -2,7 +2,7 @@
<!-- add .choicebox--active to most voted --> <!-- add .choicebox--active to most voted -->
<button <button
*ngIf="showChangeChoicebutton" *ngIf="showChangeChoicebutton"
class="btn btn--primary" class="btn btn--primary manage"
(click)="choice.simpleAnswer = !choice.simpleAnswer" (click)="choice.simpleAnswer = !choice.simpleAnswer"
> >
<i class="fa fa-gears"></i> <i class="fa fa-gears"></i>

View File

@ -24,8 +24,7 @@ $breakpoint-responsive: 640px; // à définir
.choicebox { .choicebox {
position: relative; position: relative;
min-width: 32rem; min-height: 10rem;
min-height: 16rem;
display: block; display: block;
padding: $box-padding $box-padding $box-padding calc(#{$box-padding} - #{$box-border-width}); padding: $box-padding $box-padding $box-padding calc(#{$box-padding} - #{$box-border-width});
border-left: $box-border-width solid transparent; border-left: $box-border-width solid transparent;

View File

@ -10,7 +10,7 @@ import { VotingChoiceComponent } from './voting-choice.component';
import { mockChoice } from '../../../config/mocks/choice'; import { mockChoice } from '../../../config/mocks/choice';
import { mockPoll3 } from '../../../config/mocks/mock-poll3'; import { mockPoll3 } from '../../../config/mocks/mock-poll3';
const routerSpy = jasmine.createSpyObj('Router', ['navigateByUrl']); const routerSpy = jest.fn({ navigateByUrl: jest.fn() });
describe('VotingChoiceComponent', () => { describe('VotingChoiceComponent', () => {
let component: VotingChoiceComponent; let component: VotingChoiceComponent;

View File

@ -30,8 +30,8 @@ export class VotingChoiceComponent {
@Input() public choices_count: any; @Input() public choices_count: any;
@Input() public choice_id: any; @Input() public choice_id: any;
@Input() public poll: any; @Input() public poll: any;
@Input() public simpleAnswer: boolean = true; @Input() public simpleAnswer = true;
@Input() public pollIsSpecialDate: boolean = false; @Input() public pollIsSpecialDate = false;
constructor(private el: ElementRef, private config: ConfigService) { constructor(private el: ElementRef, private config: ConfigService) {
if (this.poll && this.poll.allowedAnswers) { if (this.poll && this.poll.allowedAnswers) {

View File

@ -32,6 +32,7 @@
{{ preferred }} {{ preferred }}
</span> </span>
</div> </div>
<div class="table-container">
<table class="table is-striped is-bordered is-hoverable"> <table class="table is-striped is-bordered is-hoverable">
<thead> <thead>
<tr *ngIf="config.currentPoll.choices && config.currentPoll.choices_count"> <tr *ngIf="config.currentPoll.choices && config.currentPoll.choices_count">
@ -107,6 +108,8 @@
<!-- bottom line shows each answer details--> <!-- bottom line shows each answer details-->
</tbody> </tbody>
</table> </table>
</div>
<button <button
*ngIf="config.isAdmin" *ngIf="config.isAdmin"
type="button" type="button"

View File

@ -8,8 +8,8 @@ import { mockPoll3 } from '../../../config/mocks/mock-poll3';
styleUrls: ['./voting-summary.component.scss'], styleUrls: ['./voting-summary.component.scss'],
}) })
export class VotingSummaryComponent implements OnInit { export class VotingSummaryComponent implements OnInit {
preferred: string = 'rien'; preferred = 'rien';
severalPreferred: boolean = false; severalPreferred = false;
@Input() pollconfig = mockPoll3; @Input() pollconfig = mockPoll3;
@ -27,10 +27,10 @@ export class VotingSummaryComponent implements OnInit {
* find the most "yes" * find the most "yes"
*/ */
computePreferred() { computePreferred() {
let keys = Object.keys(this.pollconfig.choices_count.counts); const keys = Object.keys(this.pollconfig.choices_count.counts);
this.preferred = ''; this.preferred = '';
this.severalPreferred = false; this.severalPreferred = false;
let maxScore = this.pollconfig.choices_count.maxScore; const maxScore = this.pollconfig.choices_count.maxScore;
keys.forEach((item) => { keys.forEach((item) => {
if (maxScore === this.pollconfig.choices_count.counts[item].score) { if (maxScore === this.pollconfig.choices_count.counts[item].score) {

View File

@ -12,14 +12,14 @@ import { mockPoll3 } from '../config/mocks/mock-poll3';
styleUrls: ['./poll-graphic.component.scss'], styleUrls: ['./poll-graphic.component.scss'],
}) })
export class PollGraphicComponent implements OnInit { export class PollGraphicComponent implements OnInit {
isColorblind: boolean = false; isColorblind = false;
pollConfigRetrieved: any = mockPoll3; pollConfigRetrieved: any = mockPoll3;
graphicConfig: any = mockGraphConfig; graphicConfig: any = mockGraphConfig;
preferred: any = 'rien'; preferred: any = 'rien';
yesList: number[] = []; yesList: number[] = [];
maybeList: number[] = []; maybeList: number[] = [];
noList: number[] = []; noList: number[] = [];
nbPoll: number = 0; nbPoll = 0;
dateList: string[] = []; dateList: string[] = [];
constructor(@Inject(DOCUMENT) private document: any, private config: ConfigService) {} constructor(@Inject(DOCUMENT) private document: any, private config: ConfigService) {}

View File

@ -138,7 +138,7 @@ export class ConfigService extends PollConfig {
return jsonConfig; return jsonConfig;
} }
checkIfSlugIsUniqueInDatabase(slug: string = '') { checkIfSlugIsUniqueInDatabase(slug = '') {
this.customUrlIsUnique = null; this.customUrlIsUnique = null;
if (!slug) { if (!slug) {
slug = this.utils.makeSlug(this); slug = this.utils.makeSlug(this);
@ -645,7 +645,7 @@ export class ConfigService extends PollConfig {
} }
download(filename, text) { download(filename, text) {
var element = document.createElement('a'); const element = document.createElement('a');
element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text)); element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text));
element.setAttribute('download', filename); element.setAttribute('download', filename);

View File

@ -1,12 +1,14 @@
<a [routerLink]="'home'" class="home_link" aria-roledescription="home"> <div class="home_link">
<a [routerLink]="'home'" aria-roledescription="home">
<h1> <h1>
<span class="logo_first">Frama</span> <span class="logo_first">Frama</span>
<span class="logo_second">date</span> <span class="logo_second">date</span>
(démo) (démo)
</h1> </h1>
</a>
<div class="legend"> <div class="legend">
proposé par proposé par
<span class="legend_first">Frama</span> <span class="legend_first">Frama</span>
<span class="legend_second">soft</span> <span class="legend_second">soft</span>
</div> </div>
</a> </div>

View File

@ -1,50 +1,44 @@
<nav class="choices"> <nav class="choices">
<a [routerLink]="'home'" [ngClass]="{ active: step === 'home' }" i18n> <a [routerLink]="'home'" [ngClass]="{ active: step === 'home' }"> <i class="fa fa-home"></i> Accueil </a>
<i class="fa fa-home"></i> <a [routerLink]="'/step/creation'" [ngClass]="{ active: step == 'creation' }">
</a>
<a [routerLink]="'/step/creation'" [ngClass]="{ active: step == 'creation' }" i18n>
Création Création
</a> </a>
<a [routerLink]="'/step/date'" [ngClass]="{ active: step == 'date' }" i18n> <a [routerLink]="'/step/date'" [ngClass]="{ active: step == 'date' }">
Les Dates Les Dates
</a> </a>
<a [routerLink]="'/step/answers'" [ngClass]="{ active: step == 'answers' }" i18> <a [routerLink]="'/step/answers'" [ngClass]="{ active: step == 'answers' }">
Réponses Réponses
</a> </a>
<a [routerLink]="'/step/visibility'" [ngClass]="{ active: step == 'visibility' }" i18n> <a [routerLink]="'/step/visibility'" [ngClass]="{ active: step == 'visibility' }">
Visibilité Visibilité
</a> </a>
<a [routerLink]="'/step/base'" [ngClass]="{ active: step == 'base' }" i18n> <a [routerLink]="'/step/resume'" [ngClass]="{ active: step == 'resume' }">
Base
</a>
<a [routerLink]="'/step/pictures'" [ngClass]="{ active: step == 'pictures' }" i18n>
Images
</a>
<a [routerLink]="'/step/resume'" [ngClass]="{ active: step == 'resume' }" i18n>
Résumé Résumé
</a> </a>
<a [routerLink]="'/step/end'" [ngClass]="{ active: step == 'end' }" i18n> <a [routerLink]="'/step/end'" [ngClass]="{ active: step == 'end' }">
Confirmation Confirmation
</a> </a>
<a [routerLink]="'/step/kind'" [ngClass]="{ active: step == 'kind' }" i18n> <a [routerLink]="'/step/admin'">
Page démo
</a>
<a [routerLink]="['vote/poll/id/', 3]" i18n>
Sondage dessins animés
</a>
<a [routerLink]="['vote/poll/id/', 4]" i18n>
Sondage 4
</a>
<a [routerLink]="'/vote/poll/id/5'" i18n>
Sondage 5
</a>
<a [routerLink]="'/graphic/toto'" [ngClass]="{ active: step == 'graphic' }" i18n>
Graphique
</a>
<a [routerLink]="'/step/admin'" i18n>
Administration Administration
</a> </a>
<a [routerLink]="'/home'" i18n> <hr />
Accueil
<a [routerLink]="'/step/kind'" [ngClass]="{ active: step == 'kind' }">
Page démo
</a>
<a [routerLink]="['vote/poll/id/', 3]">
Sondage dessins animés
</a>
<a [routerLink]="['vote/poll/id/', 1]">
Sondage 1
</a>
<a [routerLink]="['vote/poll/id/', 2]">
Sondage 2
</a>
<a [routerLink]="['vote/poll/id/', 3]">
Sondage 3
</a>
<a [routerLink]="'/graphic/toto'" [ngClass]="{ active: step == 'graphic' }">
Graphique
</a> </a>
</nav> </nav>

View File

@ -1,32 +1 @@
@charset "UTF-8"; @charset "UTF-8";
nav {
text-align: center;
margin-bottom: 3.2rem;
padding-top: 1.6rem;
padding-bottom: 1.6rem;
border-top: 2px solid #ffd52c;
border-bottom: 2px solid #ffd52c;
a {
&::before {
display: inline-block;
position: relative;
width: auto;
background: none;
}
&::after {
display: none;
}
&:not(:first-of-type)::before {
content: ' | ';
}
&.active {
color: white;
background: black;
}
}
}

View File

@ -1,12 +1,13 @@
<div id="translate_example"> <div id="translate_example">
<div class="wrapper"> <div class="columns">
<div class="column">
<img <img
src="assets/img/icone-langue.svg" src="assets/img/icone-langue.svg"
alt="location icon" alt="location icon"
(click)="changeLanguage()" (click)="changeLanguage()"
class="lang_icon clickable" class="lang_icon clickable"
/> />
<img (click)="toggleMenu()" alt="menu icon" class="menu_icon clickable" src="assets/img/icone-menu.svg" />
<select <select
name="language" name="language"
class="language-selector" class="language-selector"
@ -17,6 +18,11 @@
<option value="en">English</option> <option value="en">English</option>
<option value="fr">Français</option> <option value="fr">Français</option>
</select> </select>
</div>
<div class="column">
<img (click)="toggleMenu()" alt="menu icon" class="menu_icon clickable" src="assets/img/icone-menu.svg" />
<br />
<span (click)="toggleMenu()" class="menu_label">Menu</span> <span (click)="toggleMenu()" class="menu_label">Menu</span>
</div> </div>
</div> </div>
</div>

View File

@ -1,78 +0,0 @@
@charset "UTF-8";
@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, 0.8);
&.btn--outline {
background-color: rgba($color, 0.2);
}
}
}
.clickable {
cursor: pointer;
}
.btn {
margin: 0.5rem 0;
padding: 1rem 1.5rem;
font-size: 1.6rem;
line-height: normal;
border: 0.2rem solid transparent;
border-radius: 0.3rem;
font-weight: normal;
&--primary {
@include btnTheme($primary_color);
}
&--semi-bold {
font-weight: 600;
}
&--black-text {
color: black;
}
&--purple {
background-color: $pale-purple;
}
&--warning {
@include btnTheme($dusty-orange);
}
&--alert,
&--danger {
@include btnTheme($red);
}
&--small {
padding: 0.75rem 1.25rem;
}
&--full {
display: block;
min-width: 100%;
}
&--mini {
background-color: $mini-button-color;
}
&--link {
min-width: 219.3px;
margin: 0 auto;
display: block;
}
}

View File

@ -1,66 +0,0 @@
@charset "UTF-8";
@font-face {
font-family: 'pt_sans';
src: url('assets/fonts/pt_sans/pt_sans_regular-webfont.woff2') format('woff2'),
url('assets/fonts/pt_sans/pt_sans_regular-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'pt_sans';
src: url('assets/fonts/pt_sans/pt_sans_bold-webfont.woff2') format('woff2'),
url('assets/fonts/pt_sans/pt_sans_bold-webfont.woff') format('woff');
font-weight: bold;
font-style: normal;
}
@font-face {
font-family: 'proza_libre';
src: url('assets/fonts/proza_libre/prozalibre-regular-webfont.woff2') format('woff2'),
url('assets/fonts/proza_libre/prozalibre-regular-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'proza_libre';
src: url('assets/fonts/proza_libre/prozalibre-medium-webfont.woff2') format('woff2'),
url('assets/fonts/proza_libre/prozalibre-medium-webfont.woff') format('woff');
font-weight: 500;
font-style: normal;
}
@font-face {
font-family: 'proza_libre';
src: url('assets/fonts/proza_libre/prozalibre-semibold-webfont.woff2') format('woff2'),
url('assets/fonts/proza_libre/prozalibre-semibold-webfont.woff') format('woff');
font-weight: 600;
font-style: normal;
}
@font-face {
font-family: 'proza_libre';
src: url('assets/fonts/proza_libre/prozalibre-bold-webfont.woff2') format('woff2'),
url('assets/fonts/proza_libre/prozalibre-bold-webfont.woff') format('woff');
font-weight: bold;
font-style: normal;
}
body {
font-family: $default_font, Arial, Helvetica, sans-serif;
font-size: 1.4rem;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: $title_font, 'Brie Light', 'Arial', 'DejaVu Sans Mono';
}
.nobold {
font-weight: normal;
}

View File

@ -1,165 +0,0 @@
@charset "UTF-8";
.input-lg {
display: block;
width: 100%;
}
select {
margin-right: 1ch;
}
input {
margin-right: 1ch;
&[type='date']::after {
content: 'au format JJ/MM/AAAA';
display: inline-block;
position: relative;
}
}
input,
select,
textarea {
padding: 1rem;
border: 1px solid $secondary_color;
border-bottom: 3px solid $primary_color;
}
input,
select {
display: inline-block;
margin-bottom: 10px;
margin-left: 5px;
}
textarea {
width: 100%;
border-left: 3px solid $primary_color;
}
select,
option {
// delete default display
-webkit-appearance: none;
-moz-appearance: none;
border-radius: 0;
background-color: transparent;
background-image: url('./assets/img/fleche_bas.svg');
padding-right: 2.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 {
&[for] {
cursor: pointer;
}
&:not([for]) {
color: $dusty-orange;
&:before {
content: "ce label n'a pas d'attribut for, c'est mal.";
color: $violet;
}
}
}
input {
&:not([id]) {
color: $dusty-orange;
&:before {
content: "cet input n'a pas d'attribut id, c'est mal.";
color: $violet;
display: block;
padding: 1em;
background: yellow;
position: relative;
top: -1em;
z-index: 2;
margin-right: 0.5em;
right: 0;
border: solid red 2px;
box-shadow: 0 0 10px orange;
}
}
}
.comment {
border-left: 6px solid $ugly-purple;
margin-top: 25px;
margin-bottom: 25px;
flex-wrap: wrap;
padding-left: 17px;
}
.cname {
font-weight: bold;
}
.btn {
max-width: 300px;
}
.next {
max-width: 200px;
}
input[type='text'],
textarea {
max-width: 350px;
}
li {
list-style-type: none;
}
h2 {
}
.next {
align-self: flex-end;
margin-bottom: 50px;
}
textarea {
height: 213px;
margin-bottom: 20px;
}
.nobold {
font-weight: normal;
}
select,
input,
textarea {
@extend .clickable;
&:active,
&:focus,
&:hover {
color: $primary_color;
}
}
.btn-block {
display: block;
width: 100%;
}
.btn,
a {
cursor: pointer;
}

View File

@ -1,16 +0,0 @@
@charset "UTF-8";
h1,
h2 {
font-family: $title_font;
}
h1 {
font-size: 2.5rem;
font-weight: 600;
}
h1::after {
background-color: $primary_color;
height: 2px;
}

View File

@ -1,7 +0,0 @@
@charset "UTF-8";
.img-thumbnail {
width: 5em;
height: 5em;
margin: 1ch 0;
display: inline-block;
}

View File

@ -1,65 +0,0 @@
@charset "UTF-8";
a {
display: inline-block;
position: relative;
font-family: $default_font;
font-weight: 600;
font-size: 1.6rem;
color: $font_color !important;
&,
&:hover {
text-decoration: none;
}
&::before,
&::after {
content: '';
}
&.next::before,
&.prev::after {
position: absolute;
top: 0;
bottom: 0;
display: block;
width: 100%;
height: 0.6rem;
margin: auto;
background-color: $secondary_color;
z-index: -1;
}
&.next::after,
&.prev::before {
display: inline-block;
width: 1rem;
height: 1rem;
border-bottom: 2px solid #000;
}
&.next::after {
margin-right: 1rem;
border-right: 2px solid #000;
transform: rotate(-45deg);
}
&.prev::before {
margin-left: 1rem;
border-left: 2px solid #000;
transform: rotate(45deg);
}
&:hover {
&.next::before,
&.prev::after {
background-color: rgba($primary_color, 0.7);
}
}
span {
padding-right: 1rem;
padding-left: 1rem;
}
}

View File

@ -1 +0,0 @@
@charset "UTF-8";

View File

@ -1,9 +0,0 @@
@charset "UTF-8";
main {
display: block;
width: 100%;
//max-width: 320px; // to look like the styleguide, to remove when we will have full width views
margin: 0 auto;
padding: 0 2rem;
}

View File

@ -1 +0,0 @@
@charset "UTF-8";

View File

@ -1,28 +0,0 @@
@charset "UTF-8";
html {
font-size: 62.5%; /* 10px */
font-size: calc(1em * 0.625); /* fix */
color: $font_color;
}
.text-right {
text-align: right;
}
.Language- {
padding-right: 2em;
font-family: SourceSansPro;
font-size: 11px;
font-weight: normal;
font-stretch: normal;
font-style: normal;
line-height: normal;
letter-spacing: normal;
color: var(--black);
border: none;
}
.select_language {
display: none;
}

View File

@ -0,0 +1,51 @@
.debug {
font-size: 1rem;
background: $grey-dark;
margin: 0.5em;
padding: 0.5em;
ul {
list-style-type: none;
}
pre {
font-size: 1rem;
padding: 0.5em;
}
}
label {
&[for] {
cursor: pointer;
}
&:not([for]) {
color: $dusty-orange;
&:before {
content: "### debug: ce label n'a pas d'attribut for, c'est mal. ### ";
color: $violet;
}
}
}
input {
&:not([id]) {
color: $dusty-orange;
&:before {
content: "### debug: cet input n'a pas d'attribut id, c'est mal. ###";
color: $violet;
display: block;
padding: 1em;
background: yellow;
position: relative;
top: -1em;
z-index: 2;
margin-right: 0.5em;
right: 0;
border: solid red 2px;
box-shadow: 0 0 10px orange;
}
}
}

View File

@ -0,0 +1,20 @@
.text-ellipsis {
text-overflow: ellipsis;
max-width: 100%;
word-break: break-all;
overflow: hidden;
display: inline-block;
}
.clickable {
cursor: pointer;
}
.boxed-shadow {
background: $white;
box-shadow: $dark-lavender 0 0 10px;
}
.nobold {
font-weight: normal;
}

View File

@ -0,0 +1,18 @@
@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, 0.8);
&.btn--outline {
background-color: rgba($color, 0.2);
}
}
}

View File

@ -0,0 +1,11 @@
@import '../../../node_modules/bulma/bulma.sass';
// Import only what you need from Bulma
@import '../../../node_modules/bulma/sass/utilities/_all.sass';
@import '../../../node_modules/bulma/sass/base/_all.sass';
@import '../../../node_modules/bulma/sass/elements/button.sass';
@import '../../../node_modules/bulma/sass/elements/container.sass';
@import '../../../node_modules/bulma/sass/elements/title.sass';
@import '../../../node_modules/bulma/sass/form/_all.sass';
@import '../../../node_modules/bulma/sass/components/navbar.sass';
@import '../../../node_modules/bulma/sass/layout/hero.sass';
@import '../../../node_modules/bulma/sass/layout/section.sass';

View File

@ -0,0 +1,13 @@
// Update Bulma's global variables
$family-sans-serif: 'Nunito', sans-serif;
$primary: $dark-lavender;
$link: $wisteria;
$widescreen-enabled: false;
$fullhd-enabled: false;
// Update some of Bulma's component variables
$body-background-color: $black;
$control-border-width: 2px;
$input-border-color: transparent;
$input-shadow: none;

View File

@ -1,15 +0,0 @@
.debug {
font-size: 1rem;
background: $dark-lavender;
margin: 2em;
padding: 2em;
ul {
list-style-type: none;
}
pre {
font-size: 1rem;
padding: 0.5em;
}
}

View File

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

View File

@ -1,71 +0,0 @@
.logo_first,
.logo_second {
padding-left: 0;
padding-right: 0;
}
.logo_first {
color: $logo_color;
}
.logo_second {
color: $logo_color_2;
}
.wrapper {
display: grid;
margin-left: auto;
margin-right: auto;
width: 20em;
margin-top: 1rem;
select {
float: right;
}
}
.lang_icon {
grid-column: 1;
grid-row: 1;
margin-left: auto;
margin-right: auto;
margin-bottom: 1ch;
}
.menu_icon {
grid-column: 2;
grid-row: 1;
margin-left: auto;
margin-right: auto;
}
.lang_label {
grid-column: 1;
grid-row: 2;
}
.menu_label {
grid-column: 2;
grid-row: 2;
font-family: SourceSansPro;
font-size: 11px;
padding-top: 10px;
margin-left: auto;
margin-right: auto;
}
.legend_first {
color: $legend_color;
padding-right: 0rem;
padding-left: 0rem;
}
.legend_second {
color: $legend_color_2;
padding-right: 0rem;
padding-left: 0rem;
}
.legend {
font-size: 10px;
}

View File

@ -0,0 +1,33 @@
button,
.btn,
.back {
@extend .button;
}
.btn--full {
@extend .is-block;
}
.btn--primary {
@extend .is-primary;
color: $white !important;
}
.btn--warning {
@extend .is-warning;
}
.btn--info {
@extend .is-info;
}
.btn--danger {
@extend .is-danger;
}
main {
[ng-reflect-router-link] {
min-width: 50%;
margin: 0.5em;
}
}

View File

@ -0,0 +1,49 @@
@charset "UTF-8";
@font-face {
font-family: 'pt_sans';
src: url('assets/fonts/pt_sans/pt_sans_regular-webfont.woff2') format('woff2'),
url('assets/fonts/pt_sans/pt_sans_regular-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'pt_sans';
src: url('assets/fonts/pt_sans/pt_sans_bold-webfont.woff2') format('woff2'),
url('assets/fonts/pt_sans/pt_sans_bold-webfont.woff') format('woff');
font-weight: bold;
font-style: normal;
}
@font-face {
font-family: 'proza_libre';
src: url('assets/fonts/proza_libre/prozalibre-regular-webfont.woff2') format('woff2'),
url('assets/fonts/proza_libre/prozalibre-regular-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'proza_libre';
src: url('assets/fonts/proza_libre/prozalibre-medium-webfont.woff2') format('woff2'),
url('assets/fonts/proza_libre/prozalibre-medium-webfont.woff') format('woff');
font-weight: 500;
font-style: normal;
}
@font-face {
font-family: 'proza_libre';
src: url('assets/fonts/proza_libre/prozalibre-semibold-webfont.woff2') format('woff2'),
url('assets/fonts/proza_libre/prozalibre-semibold-webfont.woff') format('woff');
font-weight: 600;
font-style: normal;
}
@font-face {
font-family: 'proza_libre';
src: url('assets/fonts/proza_libre/prozalibre-bold-webfont.woff2') format('woff2'),
url('assets/fonts/proza_libre/prozalibre-bold-webfont.woff') format('woff');
font-weight: bold;
font-style: normal;
}

View File

@ -0,0 +1,66 @@
input,
select,
textarea {
@extend .clickable;
margin-bottom: 0.25rem;
border-bottom: 2px solid $primary_color;
padding: 0.5rem;
&:active,
&:focus,
&:hover {
color: $primary_color;
}
}
select,
option {
-webkit-appearance: none;
-moz-appearance: none;
border-radius: 0;
background-color: transparent;
background-image: url('/assets/img/fleche_bas.svg');
padding-right: 2.5rem;
background-repeat: no-repeat;
background-size: 9px 8px;
background-position: right 1rem center;
background-clip: border-box;
min-width: 10rem;
}
select {
@extend .select, .input;
}
#multi_hours select {
min-width: 300px !important;
}
input {
@extend .input, .text-ellipsis;
}
label {
margin-top: 0.5rem;
}
textarea {
width: 100%;
max-width: 100%;
min-height: 213px;
padding: 0.5em 1em;
margin-bottom: 1em;
border-left: 3px solid $primary_color;
}
.comment {
border-left: 6px solid $primary_color;
margin-top: 25px;
margin-bottom: 25px;
flex-wrap: wrap;
padding-left: 17px;
}
.cname {
font-weight: bold;
}

View File

@ -0,0 +1,61 @@
@charset "UTF-8";
.input-lg {
display: block;
width: 100%;
}
select {
margin-right: 1ch;
}
input {
margin-right: 1ch;
&[type='date']::after {
content: 'au format JJ/MM/AAAA';
display: inline-block;
position: relative;
}
}
input,
select,
textarea {
padding: 1rem;
border: 1px solid $secondary_color;
border-bottom: 3px solid $primary_color;
}
input,
select {
display: inline-block;
margin-bottom: 10px;
margin-left: 5px;
}
.next {
max-width: 200px;
}
input[type='text'],
textarea {
max-width: 350px;
}
li {
list-style-type: none;
}
.next {
margin-bottom: 50px;
}
.nobold {
font-weight: normal;
}
.btn-block {
display: block;
width: 100%;
}

View File

@ -0,0 +1,6 @@
.img-thumbnail {
width: 5em;
height: 5em;
margin: 1ch 0;
display: inline-block;
}

View File

@ -0,0 +1,42 @@
@charset "UTF-8";
a {
color: $primary !important;
@extend .button, .is-hoverable;
&:hover,
&:focus {
color: $dark !important;
background: $pale-purple;
}
&.active {
color: $dark !important;
&:hover,
&:focus {
color: $white !important;
background: $pale-purple;
}
}
}
.list-my-polls {
a {
@extend .is-block;
}
sub {
margin-left: 2em;
}
}
.preview-url {
a {
overflow: hidden;
@extend .text-ellipsis;
}
framadate-copy-text {
float: right;
}
}

View File

@ -0,0 +1,70 @@
.home_link {
border: none;
h1 {
font-size: 1.5rem;
margin: 0;
margin-bottom: 0.25em;
}
.logo_first,
.logo_second {
padding-left: 0;
padding-right: 0;
}
.logo_first {
color: $dark;
}
.logo_second {
color: $logo_color_2;
}
.lang_label {
grid-column: 1;
grid-row: 2;
}
.lang_icon {
grid-column: 1;
grid-row: 1;
margin-left: auto;
margin-right: auto;
margin-bottom: 1ch;
}
.menu_icon {
grid-column: 2;
grid-row: 1;
margin-left: auto;
margin-right: auto;
}
.menu_label {
grid-column: 2;
grid-row: 2;
font-size: 11px;
padding-top: 10px;
margin-left: auto;
margin-right: auto;
}
.legend {
font-size: 14px;
margin-left: 14px;
color: $dark-lavender;
}
.legend_first {
color: $legend_color;
padding-right: 0;
padding-left: 0;
}
.legend_second {
color: $legend_color_2;
padding-right: 0;
padding-left: 0;
}
}

View File

@ -0,0 +1,8 @@
@charset "UTF-8";
main {
display: block;
width: 100%;
margin: 0 auto;
padding: 0 2rem;
}

View File

@ -0,0 +1,83 @@
nav {
text-align: center;
margin-bottom: 3.2rem;
padding-top: 1.6rem;
padding-bottom: 1.6rem;
border-top: 2px solid $primary;
border-bottom: 2px solid $primary;
a {
&::before {
display: inline-block;
position: relative;
width: auto;
background: none;
}
&::after {
display: none;
}
&.active {
color: $white;
background: $primary;
}
}
}
a {
&,
&:hover {
text-decoration: none;
}
&::before,
&::after {
content: '';
}
&.next::before,
&.prev::after {
position: absolute;
top: 0;
bottom: 0;
display: block;
width: 100%;
height: 0.6rem;
margin: auto;
background-color: $secondary_color;
z-index: -1;
}
&.next::after,
&.prev::before {
display: inline-block;
width: 1rem;
height: 1rem;
border-bottom: 2px solid #000;
}
&.next::after {
margin-right: 1rem;
border-right: 2px solid #000;
transform: rotate(-45deg);
}
&.prev::before {
margin-left: 1rem;
border-left: 2px solid #000;
transform: rotate(45deg);
}
&:hover {
&.next::before,
&.prev::after {
background-color: rgba($primary_color, 0.7);
}
}
span {
padding-right: 1rem;
padding-left: 1rem;
}
}

View File

@ -0,0 +1,21 @@
@media (min-width: $widescreen) {
select,
input,
label + select,
label {
width: 45%;
}
.date-choice > input:first-of-type {
width: 80%;
}
.date-choice .btn--primary,
.several-times {
margin-left: 1rem;
display: inline-block;
}
.time-choice {
input {
width: 70%;
}
}
}

View File

@ -0,0 +1,7 @@
table {
@extend .table, .is-striped, .is-hoverable;
}
framadate-voting-summary {
@extend .table-container;
}

View File

@ -0,0 +1,34 @@
h1,
h2,
h3,
h4,
h5,
h6 {
@extend .title;
}
h1 {
@extend .is-1;
&::after {
background-color: $primary_color;
height: 2px;
}
}
h2 {
@extend .is-2;
}
h3 {
@extend .is-3;
}
h4 {
@extend .is-4;
}
// icons font awesome
.fa {
margin: 0.25rem;
}

View File

@ -0,0 +1,9 @@
@charset "UTF-8";
html {
font-size: 1rem; /* 10px */
color: $font_color;
}
main {
min-height: 90vh;
}

View File

@ -0,0 +1,35 @@
@charset "utf-8";
/*
You can add global.scss styles to this file, and also import other style files
==================================================
all styles should be imported in an order from top:
most global scope, to bottom: the most specific scope of qualification.
==================================================
*/
// configuration
@import 'variables';
@import 'dev-utilities/mixins';
@import 'dev-utilities/helpers';
@import 'dev-utilities/debug';
@import 'libraries/frameworks';
@import 'libraries/overrides';
// typography
//@import 'partials/font-families';
@import 'partials/typo';
// themes
@import 'themes/all';
// most general dom elements
@import 'partials/global';
@import 'partials/logo';
@import 'partials/navigation';
// main content elements
@import 'partials/main';
@import 'partials/tables';
@import 'partials/buttons';
@import 'partials/links';
@import 'partials/forms';
@import 'partials/form-controls';
@import 'partials/images';
// responsive, mobile first goal
@import 'partials/responsive';

View File

@ -1,3 +1,4 @@
@import 'base';
@import 'light'; @import 'light';
@import 'dark'; @import 'dark';
@import 'red'; @import 'red';

View File

@ -0,0 +1,39 @@
#big_container {
background: $primary;
.container {
padding: 1em;
}
.big-header {
margin-bottom: 22px;
.container {
@extend .boxed-shadow;
.column:last-of-type {
text-align: right;
}
}
main {
@extend .boxed-shadow;
}
}
.bar-votestack {
background: $white;
border-top: 2px solid $primary_color;
z-index: 2;
position: fixed;
bottom: 0;
right: 0;
width: 100%;
text-align: right;
padding: 0.5rem;
}
.ui-toast-message-content {
background: $white;
}
}

View File

@ -1,47 +1,58 @@
$theme-color-primary: #1b6d85;
$theme-color-secondary: #1b6d85;
$theme-color-tertiary: #ccc;
#big_container { #big_container {
&.theme-dark-crystal { &.theme-dark-crystal {
background: #222; background: #222;
color: #ddd; color: #ddd;
.container {
padding: 1em;
}
main { main {
background: #444; background: #444;
} }
h1::after { h1::after {
background-color: #1b6d85; background-color: $theme-color-primary;
} }
.btn--primary:focus, .btn--primary:focus,
.btn--primary:hover, .btn--primary:hover,
.btn--primary:active, .btn--primary:active,
.btn--primary { .btn--primary {
background-color: #1b6d85; background-color: $theme-color-secondary;
} }
.btn--warning:focus, .btn--warning:focus,
.btn--warning:hover, .btn--warning:hover,
.btn--warning:active, .btn--warning:active,
.btn--warning { .btn--warning {
background-color: #554685; background-color: $theme-color-secondary;
} }
select { select {
background: #1b6d85; background: $theme-color-secondary;
border-color: #1b6d85; border-color: $theme-color-secondary;
&:hover { &:hover {
color: #ccc; color: $theme-color-tertiary;
} }
} }
.title { .title {
color: #ccc; color: $theme-color-tertiary;
} }
.lang_icon, .lang_icon,
.menu_icon { .menu_icon {
fill: #1b6d85 !important; fill: $theme-color-secondary !important;
color: #1b6d85 !important; color: $theme-color-secondary !important;
}
.big-header {
margin-bottom: 22px;
} }
} }
} }

View File

@ -0,0 +1,21 @@
/**
aimed for visual impaired people
*/
$main-theme-color: #00003b;
#big_container {
&.theme-high-contrast {
background: #465f66;
color: $main-theme-color;
h1::after {
background-color: $main-theme-color;
}
.btn--primary:focus,
.btn--primary:hover,
.btn--primary:active,
.btn--primary {
background-color: $main-theme-color !important;
}
}
}

View File

@ -1,5 +1,20 @@
#big_container { #big_container {
background: $primary;
&.theme-light-watermelon { &.theme-light-watermelon {
.big-header {
.container {
.column:last-of-type {
text-align: right;
}
}
}
main {
.container {
background: #fff; background: #fff;
padding-bottom: 10em;
}
}
} }
} }

View File

@ -1,167 +0,0 @@
@charset "UTF_8";
.align-right {
display: flex;
justify-content: flex-end;
}
.pull-right {
float: right;
}
/*Btm paddings*/
.padding-btm-x1 {
padding-bottom: 10px;
}
.padding-btm-x2 {
padding-bottom: 20px;
}
.padding-btm-x3 {
padding-bottom: 30px;
}
.padding-btm-x4 {
padding-bottom: 40px;
}
.padding-btm-x5 {
padding-bottom: 50px;
}
.padding-btm-x6 {
padding-bottom: 60px;
}
.padding-btm-x7 {
padding-bottom: 70px;
}
.padding-btm-x8 {
padding-bottom: 80px;
}
/*Btm margins*/
.margin-btm-x1 {
margin-bottom: 10px;
}
.margin-btm-x2 {
margin-bottom: 20px;
}
.margin-btm-x3 {
margin-bottom: 30px;
}
.margin-btm-x4 {
margin-bottom: 40px;
}
.margin-btm-x5 {
margin-bottom: 50px;
}
.margin-btm-x6 {
margin-bottom: 60px;
}
.margin-btm-x7 {
margin-bottom: 70px;
}
.margin-btm-x8 {
margin-bottom: 80px;
}
/*Top paddings*/
.padding-top-x1 {
padding-top: 10px;
}
.padding-top-x2 {
padding-top: 20px;
}
.padding-top-x3 {
padding-top: 30px;
}
.padding-top-x4 {
padding-top: 40px;
}
.padding-top-x5 {
padding-top: 50px;
}
.padding-top-x6 {
padding-top: 60px;
}
.padding-top-x7 {
padding-top: 70px;
}
.padding-top-x8 {
padding-top: 80px;
}
/*Top margins*/
.margin-top-x1 {
margin-top: 10px;
}
.margin-top-x2 {
margin-top: 20px;
}
.margin-top-x3 {
margin-top: 30px;
}
.margin-top-x4 {
margin-top: 40px;
}
.margin-top-x5 {
margin-top: 50px;
}
.margin-top-x6 {
margin-top: 60px;
}
.margin-top-x7 {
margin-top: 70px;
}
.margin-top-x8 {
margin-top: 80px;
}
.margin-right-x2 {
margin-bottom: 20px;
}
.text-14 {
font-size: 14px;
}
/*Pour masquer la page lors de l'apparition d'une popup*/
.rgba-black {
position: fixed;
inset: 0px;
width: 100vw;
height: 100vh;
border: medium none;
z-index: 2147483647;
background-color: rgba(216, 216, 216, 0.4);
}
.text-ellipsis {
text-overflow: ellipsis;
max-width: auto;
word-break: break-all;
}

View File

@ -14,8 +14,16 @@ $cool-grey: #aeafb1;
$warm-grey: #807e7e; $warm-grey: #807e7e;
$wisteria: #bf83c2; $wisteria: #bf83c2;
$pale-purple: #d198d4; $pale-purple: #d198d4;
$purple: #8a4d76;
$pink: #fa7c91;
$brown: #757763;
$beige-light: #d0d1cd;
$beige-lighter: #eff0eb;
// interpretations in app // interpretations in app
$primary_color: $ugly-purple; $primary_color: $ugly-purple;
$primary: $ugly-purple;
$secondary_color: $lavender-pink; $secondary_color: $lavender-pink;
$font_color: $black; $font_color: $black;
$logo_color: $dark-lavender; $logo_color: $dark-lavender;
@ -24,8 +32,13 @@ $legend_color: $dark-lavender;
$legend_color_2: $dusty-orange; $legend_color_2: $dusty-orange;
$choice_select_border_color: $cool-grey; $choice_select_border_color: $cool-grey;
$hover-color: $warm-grey; $hover-color: $warm-grey;
$grey-dark: $warm-grey;
$grey-light: $beige-light;
$clicked-color: $wisteria; $clicked-color: $wisteria;
$mini-button-color: $pale-purple; $mini-button-color: $pale-purple;
$warning: $dusty-orange;
$danger: $red;
// FONT // FONT
$default_font: 'pt_sans'; $default_font: 'pt_sans';
$title_font: 'proza_libre'; $title_font: 'proza_libre', 'Brie Light', 'Arial', 'DejaVu Sans Mono';

View File

@ -1,20 +0,0 @@
/* You can add global styles to this file, and also import other style files */
@import '~bulma/bulma';
@import 'assets/scss/variables';
@import 'assets/scss/default';
@import 'assets/scss/themes/all';
@import 'assets/scss/useful_classes';
@import 'assets/scss/atoms/main';
@import 'assets/scss/atoms/section';
@import 'assets/scss/atoms/fonts';
@import 'assets/scss/atoms/headings';
@import 'assets/scss/atoms/buttons';
@import 'assets/scss/atoms/links';
@import 'assets/scss/atoms/forms';
@import 'assets/scss/atoms/lists';
@import 'assets/scss/atoms/images';
@import 'assets/scss/molecules/logo';
@import 'assets/scss/molecules/debug';
@import 'assets/scss/molecules/flex-line';

View File

@ -11,7 +11,7 @@
"moduleResolution": "node", "moduleResolution": "node",
"importHelpers": true, "importHelpers": true,
"target": "es2015", "target": "es2015",
"types": ["node"], "types": ["node","jest"],
"typeRoots": ["node_modules/@types"], "typeRoots": ["node_modules/@types"],
"lib": ["es2018", "dom"] "lib": ["es2018", "dom"]
}, },

View File

@ -8139,7 +8139,7 @@ jest-pnp-resolver@^1.2.1:
resolved "https://registry.yarnpkg.com/jest-pnp-resolver/-/jest-pnp-resolver-1.2.1.tgz#ecdae604c077a7fbc70defb6d517c3c1c898923a" resolved "https://registry.yarnpkg.com/jest-pnp-resolver/-/jest-pnp-resolver-1.2.1.tgz#ecdae604c077a7fbc70defb6d517c3c1c898923a"
integrity sha512-pgFw2tm54fzgYvc/OHrnysABEObZCUNFnhjoRjaVOCN8NYc032/gVjPaHD4Aq6ApkSieWtfKAFQtmDKAmhupnQ== integrity sha512-pgFw2tm54fzgYvc/OHrnysABEObZCUNFnhjoRjaVOCN8NYc032/gVjPaHD4Aq6ApkSieWtfKAFQtmDKAmhupnQ==
jest-preset-angular@^8.1.2: jest-preset-angular@^8.1.2, jest-preset-angular@^8.1.3:
version "8.1.3" version "8.1.3"
resolved "https://registry.yarnpkg.com/jest-preset-angular/-/jest-preset-angular-8.1.3.tgz#99951afe34ffa5a3d2fd879936515d3235e3567a" resolved "https://registry.yarnpkg.com/jest-preset-angular/-/jest-preset-angular-8.1.3.tgz#99951afe34ffa5a3d2fd879936515d3235e3567a"
integrity sha512-T53bmWG4mNynumYcWqvhKGslQCJCTFpcL3SMrggrI65hI2G0ErYZ6WtdJqPDsFFk+KRN+iNLwNBG1idHO9k2uQ== integrity sha512-T53bmWG4mNynumYcWqvhKGslQCJCTFpcL3SMrggrI65hI2G0ErYZ6WtdJqPDsFFk+KRN+iNLwNBG1idHO9k2uQ==