uniform titles

This commit is contained in:
Tykayn 2022-03-10 11:06:18 +01:00 committed by tykayn
parent 874b9cdf16
commit 8998ee2d9e
30 changed files with 256 additions and 269 deletions

View File

@ -85,7 +85,7 @@
<div class="top">
<button
id="close_dialog"
class="no-outline cancel-button-reject pull-right has-no-border"
class="no-outline cancel-button-reject pull-right has-no-border is-closing-popup"
(click)="focusOnCancelButton()"
>
{{ 'SENTENCES.Close' | translate }} <img class="icon fa" src="assets/icons/x_blue.svg" />

View File

@ -19,10 +19,6 @@
padding: 6em 0;
color: $primary_color;
min-height: 80vh;
.title {
color: $primary_color !important;
}
}
a .fa {

View File

@ -197,8 +197,8 @@ export class PollService implements Resolve<Poll> {
isMaybeAnswerAvailable: [true, [Validators.required]],
isNoAnswerAvailable: [true, [Validators.required]],
allowComments: [true, [Validators.required]],
maxCountOfAnswers: [300, []],
hasMaxCountOfAnswers: [300, [Validators.required]],
maxCountOfAnswers: [1, []],
hasMaxCountOfAnswers: ['', [Validators.required]],
useVoterUniqueLink: [false, [Validators.required]],
voterEmailList: ['', []],
hasSeveralHours: [true, []],
@ -226,7 +226,7 @@ export class PollService implements Resolve<Poll> {
richTextMode: false,
areResultsPublic: true,
expiresDaysDelay: environment.expiresDaysDelay,
maxCountOfAnswers: 300,
maxCountOfAnswers: 1000,
voterEmailList: '',
password: '',
});

View File

@ -1,6 +1,6 @@
<form [formGroup]="form" class="form-advanced-config">
<div class="rounded-block max_count_of_answers">
<h2 class="title-advanced">
<h2 class="title is-3">
{{ 'advanced.limit_title' | translate }}
</h2>
<div *ngIf="form.value.hasMaxCountOfAnswers">
@ -17,7 +17,7 @@
</div>
</div>
<div class="rounded-block">
<h2 class="title-advanced">
<h2 class="title is-3">
{{ 'advanced.custom_link' | translate }}
</h2>
<label for="custom_url">
@ -39,7 +39,7 @@
</button>
</div>
<div class="rounded-block">
<h2 class="title-advanced">
<h2 class="title is-3">
{{ 'advanced.password_title' | translate }}
</h2>
@ -103,7 +103,7 @@
</div>
</div>
<div class="rounded-block permissions-modification">
<h2 class="title-advanced">
<h2 class="title is-3">
{{ 'advanced.allowances_title' | translate }}
</h2>
<div class="choice">
@ -151,7 +151,7 @@
</div>
</div>
<div class="rounded-block notifications">
<h2 class="title-advanced">
<h2 class="title is-3">
{{ 'advanced.notifications_title' | translate }}
</h2>
<p>
@ -200,7 +200,7 @@
</div>
<div class="rounded-box"></div>
<div class="rounded-box">
<h2 class="title-advanced">
<h2 class="title is-3">
{{ 'advanced.password_title' | translate }}
</h2>
@ -209,7 +209,7 @@
</mat-checkbox>
</div>
<h2 class="title-advanced">
<h2 class="title is-3">
<i class="fa fa-envelope-open"></i>
Notifications
</h2>
@ -220,7 +220,7 @@
Vous recevrez un mail à chaque nouveau commentaire
</mat-checkbox>
<div class="proposed-answers">
<h2 class="title-advanced">
<h2 class="title is-3">
<i class="fa fa-check-square"></i>
Réponses proposées
</h2>
@ -238,7 +238,7 @@
<img class="image is-24x24 pull-right" src="assets/img/icon_voter_NO.svg" />
</mat-checkbox>
</div>
<h2 class="title-advanced">
<h2 class="title is-3">
<i class="fa fa-user-secret"></i>
Restrictions visiteurs
</h2>
@ -256,7 +256,7 @@
</p>
</div>
<h2 class="title is-2">
<h2 class="title is-3">
<i class="fa fa-wikidata"></i>
Fonctionnalités pas encore disponibles:
</h2>
@ -292,7 +292,7 @@
</p>
</fieldset>
<div class="rounded-block propose_expire_input" *ngIf="environment.propose_expire_input">
<h2 class="title-advanced">
<h2 class="title is-3">
Saisissez la date de fin de votre sondage
</h2>
<p>

View File

@ -49,19 +49,13 @@
background: #fff;
margin: 0;
float: left;
width: 59%;
width: 55%;
line-height: 1.5rem;
overflow: hidden;
text-overflow: ellipsis;
border: 0 !important;
}
.title-advanced {
font-size: 20px !important;
line-height: 23px !important;
color: $secondary_color;
margin-bottom: 1rem;
}
.password-box {
label {
margin-left: 0;

View File

@ -3,6 +3,8 @@ import { ChangeDetectorRef, Component, Inject, Input, OnInit } from '@angular/co
import { moveItemInArray, transferArrayItem } from '@angular/cdk/drag-drop';
import { DOCUMENT } from '@angular/common';
import { TimeSlices } from '../../../../../../core/models/dateChoice.model';
import { ToastService } from '../../../../../../core/services/toast.service';
import { TranslateService } from '@ngx-translate/core';
@Component({
selector: 'app-time-list',
@ -15,7 +17,12 @@ export class TimeListComponent implements OnInit {
@Input()
public prefix_choice_id = '';
constructor(@Inject(DOCUMENT) private document: any, private cd: ChangeDetectorRef) {}
constructor(
@Inject(DOCUMENT) private document: any,
private cd: ChangeDetectorRef,
private toastService: ToastService,
private translate: TranslateService
) {}
ngOnInit(): void {}
@ -36,6 +43,10 @@ export class TimeListComponent implements OnInit {
removeTime(id: number) {
this.timeSlices.splice(id, 1);
this.focusOnLastField();
this.translate.get('success.deleted_option').subscribe((resp) => {
console.log('resp', resp);
this.toastService.display(`${resp}`);
});
}
focusOnFieldNumber(fieldId: number) {

View File

@ -1,12 +1,6 @@
@import '../../../../../../styles/variables';
.step-five {
.title-step {
font-weight: bold;
font-size: 32px;
line-height: 37px;
margin-bottom: 1rem !important;
}
.decription {
margin-bottom: 2rem;
}

View File

@ -4,7 +4,7 @@
<app-errors-list [form]="pollService.form"></app-errors-list>
<div class="custom-day-time-slices" *ngIf="1">
<h1 class="title is-2">
<h1 class="title is-1">
{{ 'hours.title' | translate }}
</h1>
<div
@ -23,7 +23,7 @@
<button
[attr.aria-label]="'choices.delete' | translate"
class="has-no-border delete-hour"
(click)="dayChoice.timeSlices.splice(id, 1)"
(click)="removeHour(dayChoice.timeSlices, id)"
>
<!-- {{ 'choices.delete' | translate }}-->
<img src="assets/icons/trash-2.svg" class="icon is-filtered-icon-primary" />
@ -64,7 +64,7 @@
</div>
</div>
</div>
<button id="apply_same_hour" class="has-text-primary button is-fullwidth" (click)="openModal()">
<button id="apply_same_hour" class="is-secondary is-thin button is-fullwidth" (click)="openModal()">
{{ 'hours.apply_same' | translate }}
</button>
</div>
@ -84,7 +84,7 @@
<div class="column is-narrow">
<button
id="close_dialog"
class="button cancel-button-reject pull-right has-text-right has-no-border"
class="button cancel-button-reject pull-right has-text-right has-no-border is-closing-popup"
(click)="closeModalAndFocusOnOpenModalButton()"
>
{{ 'SENTENCES.Close' | translate }} <img class="icon fa" src="assets/icons/x_blue.svg" />

View File

@ -7,6 +7,7 @@ import { DOCUMENT } from '@angular/common';
import { StorageService } from '../../../../../core/services/storage.service';
import { DateChoice, TimeSlices, timeSlicesProposals } from '../../../../../core/models/dateChoice.model';
import { ToastService } from '../../../../../core/services/toast.service';
import { TranslateService } from '@ngx-translate/core';
@Component({
selector: 'app-step-four',
@ -28,6 +29,7 @@ export class StepFourComponent implements OnInit {
private dateUtilitiesService: DateUtilitiesService,
private router: Router,
private toastService: ToastService,
private translate: TranslateService,
private cd: ChangeDetectorRef,
@Inject(DOCUMENT) private document: any,
private storageService: StorageService,
@ -120,4 +122,15 @@ export class StepFourComponent implements OnInit {
buttonClose.focus();
}
}
removeHour(dayChoice, id: number) {
dayChoice.splice(id, 1);
this.cd.detectChanges();
this.focusOnChoice(id - 1 < 0 ? 0 : id - 1);
this.translate.get('success.deleted_option').subscribe((resp) => {
console.log('resp', resp);
this.toastService.display(`${resp}`);
});
}
}

View File

@ -2,7 +2,7 @@
<div class="step min-height">
<div class="min-height">
<form action="#" [formGroup]="pollService.form">
<h1 class="title is-2">
<h1 class="title is-1">
{{ 'owner.title' | translate }}
</h1>
<label for="name">

View File

@ -10,13 +10,19 @@
{{ 'dates.title' | translate }}
</h1>
<!-- sélecteur d'interface-->
<button class="button is-fullwidth date-input-selector is-secondary" (click)="changeDateInputMode()">
<span *ngIf="pollService.mode_calendar">
{{ 'dates.manual_input' | translate }}
</span>
<span *ngIf="!pollService.mode_calendar">
{{ 'dates.datepicker_input' | translate }}
</span>
<button
*ngIf="pollService.mode_calendar"
class="button is-fullwidth date-input-selector is-secondary is-thin text-center"
(click)="changeDateInputMode()"
>
{{ 'dates.manual_input' | translate }}
</button>
<button
*ngIf="!pollService.mode_calendar"
class="button is-fullwidth date-input-selector is-secondary is-thin"
(click)="changeDateInputMode()"
>
{{ 'dates.datepicker_input' | translate }}
</button>
<!-- choix spécialement pour les dates-->

View File

@ -13,16 +13,6 @@
margin-top: 1em;
}
.is-secondary {
border-color: $primary-color;
color: $primary-color;
&:hover {
background: $primary_color;
color: $white;
}
}
.date-input-selector {
padding: 0.25rem 1rem;
}

View File

@ -1,10 +1,5 @@
@import '../../../../../../styles/variables';
.poll-kind {
.title {
margin-bottom: 32px;
font-size: 32px;
line-height: 36.8px;
}
}
.kind-of-poll {
min-height: 30vh;

View File

@ -114,7 +114,7 @@
<div class="top">
<button
id="close_dialog"
class="button cancel-button-reject pull-right img-marged-left has-no-border"
class="button cancel-button-reject pull-right img-marged-left has-no-border is-closing-popup"
(click)="focusOnCancelButton()"
>
{{ 'SENTENCES.Close' | translate }}

View File

@ -99,12 +99,6 @@
#close_stepper {
border-radius: 3em;
.title {
margin-top: 2rem;
font-size: 24px;
color: $d-primary-intense;
}
.description {
color: $font_color;
font-size: 1rem;

View File

@ -6,9 +6,6 @@
}
.poll_loaded {
.title {
margin-bottom: 0;
}
.description {
min-height: 2rem;
}

View File

@ -22,10 +22,6 @@
}
}
.title {
margin-top: 1em;
}
table {
width: 100%;
display: block;

View File

@ -1,7 +1,4 @@
.hero-body {
padding-top: 5rem;
min-height: 50vh;
.title {
color: #222;
}
}

View File

@ -34,7 +34,7 @@
<div class="top">
<button
id="close_dialog{{ idSuffix }}"
class="button cancel-button-reject pull-right img-marged-left has-no-border"
class="button cancel-button-reject pull-right img-marged-left has-no-border is-closing-popup"
lang="{{ currentLang }}"
(click)="closeModalAndFocusOnButtonToOpen()"
>

View File

@ -42,7 +42,7 @@ export const environment = {
frontDomain: 'http://127.0.0.1:4200',
interval_days_default: 7,
description_max_chars: 900,
maxCountOfAnswers: 300,
maxCountOfAnswers: '',
production: false,
showDemoWarning: false,
showStepperShortcuts: false,

View File

@ -108,3 +108,6 @@
background: url('/assets/icons/plus-circle.svg') no-repeat left center;
//background: $d-blue30 url('/assets/img/kind_classic.svg') no-repeat 19px center;
}
.is-block {
display: block;
}

View File

@ -1,11 +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/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';
//@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

@ -24,6 +24,10 @@ a {
box-sizing: border-box;
border-radius: 4px;
cursor: pointer;
&.is-fullwidth {
display: block;
text-align: center;
}
}
.is-white {
@ -101,6 +105,10 @@ a {
color: #3e3882;
}
}
.is-closing-popup {
background: #fff;
color: #6359cf !important;
}
.buttons-demo button {
float: left;
@ -115,11 +123,16 @@ a {
.is-warning {
@extend .is-warning;
}
.is-info {
background-color: #94bae2;
}
.btn--info {
@extend .is-info;
}
.is-danger {
background-color: #e08181;
}
.btn--danger {
@extend .is-danger;
}

View File

@ -10,12 +10,6 @@ p-calendar,
max-width: 90vw;
}
.p-dialog {
.title {
color: $primary_color;
}
}
.p-datepicker {
padding: 0 !important;
margin: 1em auto;

View File

@ -19,7 +19,7 @@ input,
select,
textarea {
display: inline-block;
padding: 1rem;
padding: 0.85rem;
margin-right: 2px;
margin-bottom: 1em;
@ -44,7 +44,7 @@ input,
select,
.select {
font-size: 1rem !important;
line-height: 40px;
line-height: 28px;
border: solid 1px $font-color !important;
border-radius: 4px;
font-family: $default_font;
@ -294,13 +294,6 @@ mat-checkbox {
box-sizing: border-box;
@extend .top-padding-nav;
.title {
color: $d-primary-intense;
margin-bottom: 36px;
font-size: 28px;
line-height: 32px;
}
.columns {
margin: 0;
.column {
@ -338,14 +331,6 @@ mat-checkbox {
margin-left: -1em;
margin-right: -1em;
}
.content {
.title {
&.is-2,
&.is-3 {
color: $secondary_color;
}
}
}
.list-datechoices {
ul {

View File

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

View File

@ -6,34 +6,52 @@ body {
h5,
h6 {
font-family: $title_font;
color: $primary_color;
color: $d-primary-intense;
}
h1 {
font-family: $title_font;
&::after {
background-color: $primary_color;
height: 2px;
.title {
&.is-1 {
color: $d-primary-intense;
font-weight: 700;
font-size: 32px;
line-height: 37px;
margin-bottom: 1rem;
}
&.is-2 {
color: $d-primary-intense;
font-size: 20px;
line-height: 23px;
margin-bottom: 1rem;
}
&.is-3 {
color: $d-primary-intense;
font-family: $title_font;
font-weight: 700;
font-size: 20px;
line-height: 23px;
margin-bottom: 1rem;
}
}
h2 {
font-family: $title_font;
font-size: 1.75rem;
font-weight: 600;
line-height: 2rem;
margin-bottom: 2rem;
}
h3 {
font-family: $title_font;
.is-1 {
color: $d-primary-intense;
font-weight: 700;
font-size: 32px;
line-height: 36.8px;
line-height: 37px;
margin-bottom: 1rem;
}
h4 {
.is-2 {
color: $d-primary-intense;
font-size: 20px;
line-height: 23px;
margin-bottom: 1rem;
}
.is-3 {
color: $d-primary-intense;
font-family: $title_font;
font-weight: 700;
font-size: 20px;
line-height: 23px;
margin-bottom: 1rem;
}
.p-dialog {
@ -50,10 +68,6 @@ body {
.p-dialog-content {
padding: 1rem 2rem;
.title {
color: $secondary_color !important;
}
}
.p-dialog-footer {
@ -73,11 +87,6 @@ body {
text-align: center;
}
.title {
&.is-success {
color: $success_color;
}
}
.icon-success {
fill: $success_color;
}

View File

@ -1,104 +1,104 @@
$theme-color-primary: #1b6d85;
$theme-color-secondary: #1b6d85;
$theme-color-tertiary: #ccc;
#big_container {
&.theme-dark-crystal {
background: #222;
color: $theme-color-tertiary;
main,
.big-header,
.navbar,
footer {
background: #444;
}
.big-header {
color: $white;
a {
color: $white;
}
}
input {
background: #222;
color: $white;
}
h1::after {
background-color: $theme-color-primary;
}
.btn--primary:focus,
.btn--primary:hover,
.btn--primary:active,
.btn--primary {
background-color: $theme-color-secondary;
}
.btn--warning:focus,
.btn--warning:hover,
.btn--warning:active,
.btn--warning {
background-color: $theme-color-secondary;
}
select {
background: $theme-color-tertiary;
border-color: $theme-color-secondary;
&:hover {
color: $theme-color-tertiary;
}
}
.title {
color: $theme-color-tertiary;
}
.lang_icon,
.menu_icon {
fill: $theme-color-secondary !important;
color: $theme-color-secondary !important;
}
label {
color: $theme-color-tertiary;
}
// bulma override
.button.is-primary,
.button.btn--primary,
button.is-primary,
button.btn--primary,
.is-primary.btn,
.btn.btn--primary,
.is-primary.back,
.back.btn--primary {
background-color: $theme-color-primary !important;
color: $theme-color-tertiary !important;
}
.navbar-dropdown a.navbar-item {
color: #444;
}
// material override
.navbar-dropdown a.navbar-item.is-active,
body .ui-steps .ui-steps-item.ui-state-highlight .ui-steps-number,
a.navbar-item:focus,
a.navbar-item:focus-within,
a.navbar-item:hover,
a.navbar-item.is-active,
.navbar-link:focus,
.navbar-link:focus-within,
.navbar-link:hover,
.navbar-link.is-active {
color: $theme-color-primary !important;
}
.navbar-link:not(.is-arrowless)::after {
border-color: $theme-color-primary;
}
body .ui-inputswitch.ui-inputswitch-checked:not(.ui-state-disabled) .ui-inputswitch-slider {
background-color: $theme-color-primary;
}
}
}
//$theme-color-primary: #1b6d85;
//$theme-color-secondary: #1b6d85;
//$theme-color-tertiary: #ccc;
//#big_container {
// &.theme-dark-crystal {
// background: #222;
// color: $theme-color-tertiary;
//
// main,
// .big-header,
// .navbar,
// footer {
// background: #444;
// }
// .big-header {
// color: $white;
// a {
// color: $white;
// }
// }
// input {
// background: #222;
// color: $white;
// }
//
// h1::after {
// background-color: $theme-color-primary;
// }
//
// .btn--primary:focus,
// .btn--primary:hover,
// .btn--primary:active,
// .btn--primary {
// background-color: $theme-color-secondary;
// }
//
// .btn--warning:focus,
// .btn--warning:hover,
// .btn--warning:active,
// .btn--warning {
// background-color: $theme-color-secondary;
// }
//
// select {
// background: $theme-color-tertiary;
// border-color: $theme-color-secondary;
//
// &:hover {
// color: $theme-color-tertiary;
// }
// }
//
// .title {
// color: $theme-color-tertiary;
// }
//
// .lang_icon,
// .menu_icon {
// fill: $theme-color-secondary !important;
// color: $theme-color-secondary !important;
// }
//
// label {
// color: $theme-color-tertiary;
// }
//
// // bulma override
// .button.is-primary,
// .button.btn--primary,
// button.is-primary,
// button.btn--primary,
// .is-primary.btn,
// .btn.btn--primary,
// .is-primary.back,
// .back.btn--primary {
// background-color: $theme-color-primary !important;
// color: $theme-color-tertiary !important;
// }
// .navbar-dropdown a.navbar-item {
// color: #444;
// }
// // material override
// .navbar-dropdown a.navbar-item.is-active,
// body .ui-steps .ui-steps-item.ui-state-highlight .ui-steps-number,
// a.navbar-item:focus,
// a.navbar-item:focus-within,
// a.navbar-item:hover,
// a.navbar-item.is-active,
// .navbar-link:focus,
// .navbar-link:focus-within,
// .navbar-link:hover,
// .navbar-link.is-active {
// color: $theme-color-primary !important;
// }
//
// .navbar-link:not(.is-arrowless)::after {
// border-color: $theme-color-primary;
// }
//
// body .ui-inputswitch.ui-inputswitch-checked:not(.ui-state-disabled) .ui-inputswitch-slider {
// background-color: $theme-color-primary;
// }
// }
//}

View File

@ -1,21 +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;
}
}
}
///**
//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

@ -49,6 +49,7 @@ $d-error-text: #d51b38;
$outline-color: $intense-blue; // #0a76f6
$success_color: $d-success-text;
$primary_color: $d-primary;
$primary-light: mix($d-primary, $white);
$primary: $d-primary;
$secondary_color: $d-primary-intense;
$bg-grey: $d-blue30;
@ -64,11 +65,14 @@ $hover-color: $d-neutral;
$rules: $d-rule;
$border-color: $d-neutral;
$input-border-color: $d-border;
$dark: $d-border;
$grey: $font_color_light;
$grey-dark: $d-primary;
$grey-lighter: $beige-light;
$clicked-color: $d-primary;
$mini-button-color: $d-primary-intense;
$warning: $d-warning;
$warning-dark: mix($d-warning, $dark);
$danger: $d-error;
$success: $d-success;
@ -88,6 +92,9 @@ $stepper-nav-height: 2rem;
$stepper-progress-bar-height: 5px;
$home-nav-height: 2rem;
$home-nav-height-small: 3.5rem;
//$widescreen: 60em;
// datepicker
$cell-size-datepicker-small: 30px;
$cell-size-datepicker-desktop: 42px;