Liness/framadate-responsive
5
0
Fork 0
forked from tykayn/funky-framadate-front
Code Pull Requests Activity

set min height for each step

Browse Source
This commit is contained in:
Tykayn 2021-10-19 12:53:19 +02:00 committed by tykayn
parent 303457afd6
commit dfb3e98159
10 changed files with 180 additions and 187 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/app/core/services/poll.service.ts
View File

@ -165,7 +165,6 @@ export class PollService implements Resolve<Poll> {
} }
public async loadPollBySlug(slug: string): Promise<void> { public async loadPollBySlug(slug: string): Promise<void> {
console.log('slug', slug);
if (slug) { if (slug) {
const poll: Poll | undefined = await this.apiService.getPollBySlug(slug); const poll: Poll | undefined = await this.apiService.getPollBySlug(slug);
console.log({ loadPollBySlugResponse: poll }); console.log({ loadPollBySlugResponse: poll });
@ -213,14 +212,11 @@ export class PollService implements Resolve<Poll> {
keyOnChoice($event: KeyboardEvent, choice_number: number): void { keyOnChoice($event: KeyboardEvent, choice_number: number): void {
$event.preventDefault(); $event.preventDefault();
console.log('this.choices.length', this.choices.length);
console.log('choice_number', choice_number);
const lastChoice = this.choices.length - 1 === choice_number; const lastChoice = this.choices.length - 1 === choice_number;
// reset field with Ctrl + D // reset field with Ctrl + D
// add a field with Ctrl + N // add a field with Ctrl + N
// go to previous choice with arrow up // go to previous choice with arrow up
// go to next choice with arrow down // go to next choice with arrow down
console.log('$event', $event);
if ($event.key == 'ArrowUp' && choice_number > 0) { if ($event.key == 'ArrowUp' && choice_number > 0) {
this.focusOnChoice(choice_number - 1); this.focusOnChoice(choice_number - 1);

15
src/app/features/administration/form/form.component.html
View File

@ -5,22 +5,9 @@
</h2> </h2>
<app-stepper [step_current]="pollService.step_current" [step_max]="pollService.step_max"></app-stepper> <app-stepper [step_current]="pollService.step_current" [step_max]="pollService.step_max"></app-stepper>
</header> </header>
<section class="step-container"> <section class="step-container min-height">
<router-outlet> <router-outlet>
<app-step-one [form]="form"></app-step-one> <app-step-one [form]="form"></app-step-one>
</router-outlet> </router-outlet>
</section> </section>
<footer>
<div class="columns">
<div class="column"></div>
<div class="column">
<!-- [disabled]="form.invalid"-->
<button class="button is-primary is-fullwidth" [routerLink]="['administration/step/2']">
suivant
</button>
</div>
</div>
</footer>
<hr />
</div> </div>

2
src/app/features/administration/form/step-five/step-five.component.html
View File

@ -1,4 +1,4 @@
<app-stepper [step_current]="5" [step_max]="step_max"></app-stepper> <app-stepper [step_current]="5" [step_max]="5"></app-stepper>
<div class="columns"> <div class="columns">
<div class="column"></div> <div class="column"></div>
<div class="column"> <div class="column">

2
src/app/features/administration/form/step-four/step-four.component.html
View File

@ -1,4 +1,4 @@
<app-stepper [step_current]="4" [step_max]="step_max"></app-stepper> <app-stepper [step_current]="4" [step_max]="5"></app-stepper>
<div class="creator-infos"> <div class="creator-infos">
<label class="" for="creatorEmail"> <label class="" for="creatorEmail">

13
src/app/features/administration/form/step-one/step-one.component.html
View File

@ -1,5 +1,6 @@
<div class="step"> <div class="step">
<form [formGroup]="pollService.form"> <form class="min-height" [formGroup]="pollService.form">
<app-stepper [step_current]="1" [step_max]="5"></app-stepper>
<section class="poll-title"> <section class="poll-title">
<h2 class="title is-2"> <h2 class="title is-2">
{{ 'creation.choose_title' | translate }} {{ 'creation.choose_title' | translate }}
@ -62,7 +63,7 @@
300 caractères maximum 300 caractères maximum
</div> </div>
</div> </div>
<div class="column"> <div class="column is-narrow">
<button <button
mat-button mat-button
*ngIf="description.value" *ngIf="description.value"
@ -79,14 +80,10 @@
slug: {{ pollService.form.value.custom_url }} slug: {{ pollService.form.value.custom_url }}
</form> </form>
<div class="columns"> <div class="columns">
<div class="column"> <div class="column"></div>
<button class="button is-secondary is-fullwidth" [routerLink]="['/administration/step/1']">
précédent
</button>
</div>
<div class="column"> <div class="column">
<!-- [disabled]="form.invalid"--> <!-- [disabled]="form.invalid"-->
<button class="button is-primary is-fullwidth" [routerLink]="['/administration/step/3']"> <button class="button is-primary is-fullwidth" [routerLink]="['/administration/step/2']">
suivant suivant
</button> </button>
</div> </div>

268
src/app/features/administration/form/step-three/step-three.component.html
View File

@ -1,145 +1,151 @@
<app-stepper [step_current]="3" [step_max]="5"></app-stepper> <div class="min-height">
<app-stepper [step_current]="3" [step_max]="5"></app-stepper>
<!-- choix spécialement pour les dates--> <!-- choix spécialement pour les dates-->
<div class="dates-list"> <div class="dates-list">
<div class="title"> <div class="title">
<span class="count-dates"> <span class="count-dates">
{{ pollService.timeList.length }} {{ pollService.timeList.length }}
</span> </span>
<span class="count-dates-txt"> <span class="count-dates-txt">
{{ 'dates.count_time' | translate }} {{ 'dates.count_time' | translate }}
(pour chaque jour) (pour chaque jour)
</span> </span>
</div> </div>
<div class="actions"> <div class="actions">
<button <button
(click)="pollService.addTime()" (click)="pollService.addTime()"
*ngIf="'false' === pollService.allowSeveralHours" *ngIf="'false' === pollService.allowSeveralHours"
class="btn btn--primary" class="btn btn--primary"
id="add_time_button" id="add_time_button"
> >
<i class="fa fa-plus" aria-hidden="true"></i> <i class="fa fa-plus" aria-hidden="true"></i>
{{ 'dates.add_time' | translate }} {{ 'dates.add_time' | translate }}
</button> </button>
<button <button
(click)="pollService.removeAllTimes()" (click)="pollService.removeAllTimes()"
*ngIf="'false' === pollService.allowSeveralHours" *ngIf="'false' === pollService.allowSeveralHours"
class="btn btn--warning" class="btn btn--warning"
id="remove_time_button" id="remove_time_button"
> >
<i class="fa fa-trash" aria-hidden="true"></i> <i class="fa fa-trash" aria-hidden="true"></i>
Aucune plage horaire Aucune plage horaire
</button> </button>
<button <button
(click)="pollService.resetTimes()" (click)="pollService.resetTimes()"
*ngIf="'false' === pollService.allowSeveralHours" *ngIf="'false' === pollService.allowSeveralHours"
class="btn btn--warning" class="btn btn--warning"
id="reset_time_button" id="reset_time_button"
> >
<i class="fa fa-refresh" aria-hidden="true"></i> <i class="fa fa-refresh" aria-hidden="true"></i>
réinitialiser réinitialiser
</button> </button>
</div> </div>
<div *ngIf="'false' === pollService.allowSeveralHours" class="identical-dates"> <div *ngIf="'false' === pollService.allowSeveralHours" class="identical-dates">
<div cdkDropList class="example-list" (cdkDropListDropped)="drop($event)"> <div cdkDropList class="example-list" (cdkDropListDropped)="drop($event)">
<div *ngFor="let time of pollService.timeList; index as id" class="time-choice" cdkDrag> <div *ngFor="let time of pollService.timeList; index as id" class="time-choice" cdkDrag>
<label for="timeChoices_{{ id }}"> <label for="timeChoices_{{ id }}">
<i class="fa fa-clock-o" aria-hidden="true"></i> <i class="fa fa-clock-o" aria-hidden="true"></i>
</label> </label>
<input [(ngModel)]="time.literal" name="timeChoices_{{ id }}" type="text" id="timeChoices_{{ id }}" /> <input
<button (click)="time.timeList.splice(id, 1)" class="btn btn-warning"> [(ngModel)]="time.literal"
<i class="fa fa-times" aria-hidden="true"></i> name="timeChoices_{{ id }}"
</button> type="text"
id="timeChoices_{{ id }}"
/>
<button (click)="time.timeList.splice(id, 1)" class="btn btn-warning">
<i class="fa fa-times" aria-hidden="true"></i>
</button>
</div>
</div> </div>
</div> </div>
</div> <hr />
<hr /> <span class="count-dates title">
<span class="count-dates title"> {{ pollService.dateList.length }}
{{ pollService.dateList.length }} </span>
</span> <span>
<span> {{ 'dates.count_dates' | translate }}
{{ 'dates.count_dates' | translate }} </span>
</span> <button class="btn btn--primary" (click)="pollService.addChoice()">
<button class="btn btn--primary" (click)="pollService.addChoice()"> {{ 'dates.add' | translate }}
{{ 'dates.add' | translate }}
</button>
<div *ngFor="let choice of pollService.dateList; index as id" class="date-choice">
<input
[(ngModel)]="choice.date_object"
name="dateChoices_{{ id }}"
id="dateChoices_{{ id }}"
useValueAsDate
type="date"
/>
<button (click)="pollService.dateList.splice(id, 1)" class="btn btn-warning">
<i class="fa fa-times" aria-hidden="true"></i>
</button> </button>
<button <div *ngFor="let choice of pollService.dateList; index as id" class="date-choice">
(click)="pollService.addTimeToDate(choice, id)"
*ngIf="'true' === pollService.allowSeveralHours"
class="btn btn--primary"
>
{{ 'dates.add_time' | translate }}
</button>
<div *ngIf="'true' === pollService.allowSeveralHours" class="several-times">
<div *ngFor="let timeItem of choice.timeList; index as idTime" class="time-choice">
<input
[(ngModel)]="timeItem.literal"
name="dateTime_{{ id }}_Choices_{{ idTime }}"
id="dateTime_{{ id }}_Choices_{{ idTime }}"
type="text"
/>
<button (click)="choice.timeList.splice(idTime, 1)" class="btn btn-warning">
<i class="fa fa-times" aria-hidden="true"></i>
</button>
</div>
</div>
</div>
</div>
<button
(click)="pollService.showDateInterval = !pollService.showDateInterval"
[ngClass]="{ active: pollService.showDateInterval }"
class="btn btn--primary"
id="toggle_interval_button"
>
<i class="fa fa-clock-o" aria-hidden="true"></i>
{{ 'dates.add_interval' | translate }}
</button>
<section *ngIf="pollService.showDateInterval" class="date-interval form-row">
<h2>{{ 'dates.add_interval' | translate }}</h2>
<div class="columns">
<div class="column">
{{ 'dates.interval_propose' | translate }}
</div>
<div class="column">
<label for="start_interval" class="hidden">start</label>
<input <input
id="start_interval" [(ngModel)]="choice.date_object"
(change)="pollService.countDays()" name="dateChoices_{{ id }}"
formControlName="startDateInterval" id="dateChoices_{{ id }}"
useValueAsDate
type="date" type="date"
/> />
<button (click)="pollService.dateList.splice(id, 1)" class="btn btn-warning">
<i class="fa fa-times" aria-hidden="true"></i>
</button>
<button
(click)="pollService.addTimeToDate(choice, id)"
*ngIf="'true' === pollService.allowSeveralHours"
class="btn btn--primary"
>
{{ 'dates.add_time' | translate }}
</button>
<div *ngIf="'true' === pollService.allowSeveralHours" class="several-times">
<div *ngFor="let timeItem of choice.timeList; index as idTime" class="time-choice">
<input
[(ngModel)]="timeItem.literal"
name="dateTime_{{ id }}_Choices_{{ idTime }}"
id="dateTime_{{ id }}_Choices_{{ idTime }}"
type="text"
/>
<button (click)="choice.timeList.splice(idTime, 1)" class="btn btn-warning">
<i class="fa fa-times" aria-hidden="true"></i>
</button>
</div>
</div>
</div> </div>
</div> </div>
<div class="columns">
<div class="column">
{{ 'dates.interval_span' | translate }}
</div>
<div class="column">
<label for="end_interval" class="hidden">end</label>
<input id="end_interval" formControlName="endDateInterval" type="date" />
</div>
</div>
<button (click)="pollService.addIntervalOfDates()" class="btn btn-block btn--primary">
<i class="fa fa-plus" aria-hidden="true"></i>
{{ 'dates.interval_button' | translate }}
{{ pollService.intervalDays }}
{{ 'dates.interval_button_dates' | translate }}
</button>
</section>
<button
(click)="pollService.showDateInterval = !pollService.showDateInterval"
[ngClass]="{ active: pollService.showDateInterval }"
class="btn btn--primary"
id="toggle_interval_button"
>
<i class="fa fa-clock-o" aria-hidden="true"></i>
{{ 'dates.add_interval' | translate }}
</button>
<section *ngIf="pollService.showDateInterval" class="date-interval form-row">
<h2>{{ 'dates.add_interval' | translate }}</h2>
<div class="columns">
<div class="column">
{{ 'dates.interval_propose' | translate }}
</div>
<div class="column">
<label for="start_interval" class="hidden">start</label>
<input
id="start_interval"
(change)="pollService.countDays()"
formControlName="startDateInterval"
type="date"
/>
</div>
</div>
<div class="columns">
<div class="column">
{{ 'dates.interval_span' | translate }}
</div>
<div class="column">
<label for="end_interval" class="hidden">end</label>
<input id="end_interval" formControlName="endDateInterval" type="date" />
</div>
</div>
<button (click)="pollService.addIntervalOfDates()" class="btn btn-block btn--primary">
<i class="fa fa-plus" aria-hidden="true"></i>
{{ 'dates.interval_button' | translate }}
{{ pollService.intervalDays }}
{{ 'dates.interval_button_dates' | translate }}
</button>
</section>
</div>
<div class="columns"> <div class="columns">
<div class="column"> <div class="column">
<button class="button is-secondary is-fullwidth" [routerLink]="['/administration/step/2']"> <button class="button is-secondary is-fullwidth" [routerLink]="['/administration/step/2']">

5
src/app/features/administration/form/step-three/step-three.component.ts
View File

@ -1,5 +1,6 @@
import { Component, Input, OnInit } from '@angular/core'; import { Component, Input, OnInit } from '@angular/core';
import { PollService } from '../../../../core/services/poll.service'; import { PollService } from '../../../../core/services/poll.service';
import { CdkDragDrop, moveItemInArray } from '@angular/cdk/drag-drop';
@Component({ @Component({
selector: 'app-step-three', selector: 'app-step-three',
@ -15,4 +16,8 @@ export class StepThreeComponent implements OnInit {
constructor(public pollService: PollService) {} constructor(public pollService: PollService) {}
ngOnInit(): void {} ngOnInit(): void {}
drop(event: CdkDragDrop<string[]>) {
// moveItemInArray(this.pollService.choices, event.previousIndex, event.currentIndex);
}
} }

50
src/app/features/administration/form/step-two/step-two.component.html
View File

@ -1,28 +1,30 @@
<app-stepper [step_current]="2" [step_max]="5"></app-stepper>
<div class="form-field poll-kind"> <div class="form-field poll-kind">
<h2 class="title is-2"> <div class="min-height">
{{ 'creation.want' | translate }} <app-stepper [step_current]="2" [step_max]="5"></app-stepper>
</h2> <h2 class="title is-2">
<div class="kind-of-poll columns"> {{ 'creation.want' | translate }}
<div class="column"> </h2>
<button <div class="kind-of-poll columns">
class="button is-fullwidth" <div class="column">
[ngClass]="{ 'is-selected is-primary': pollService.form.controls.isAboutDate.value }" <button
(click)="pollService.form.controls.isAboutDate.setValue(true)" class="button is-fullwidth"
> [ngClass]="{ 'is-selected is-primary': pollService.form.controls.isAboutDate.value }"
<i class="fa fa-calendar"></i> (click)="pollService.form.controls.isAboutDate.setValue(true)"
{{ 'creation.kind.date' | translate }} >
</button> <i class="fa fa-calendar"></i>
</div> {{ 'creation.kind.date' | translate }}
<div class="column"> </button>
<button </div>
class="button is-fullwidth" <div class="column">
[ngClass]="{ 'is-selected is-primary': !pollService.form.controls.isAboutDate.value }" <button
(click)="pollService.form.controls.isAboutDate.setValue(false)" class="button is-fullwidth"
> [ngClass]="{ 'is-selected is-primary': !pollService.form.controls.isAboutDate.value }"
<i class="fa fa-list-ul"></i> (click)="pollService.form.controls.isAboutDate.setValue(false)"
{{ 'creation.kind.classic' | translate }} >
</button> <i class="fa fa-list-ul"></i>
{{ 'creation.kind.classic' | translate }}
</button>
</div>
</div> </div>
</div> </div>
<div class="columns"> <div class="columns">

4
src/app/features/administration/form/step-two/step-two.component.ts
View File

@ -53,10 +53,6 @@ export class StepTwoComponent implements OnInit {
resetTimes() {} resetTimes() {}
drop(event: CdkDragDrop<string[]>) {
// moveItemInArray(this.choices, event.previousIndex, event.currentIndex);
}
addChoice() {} addChoice() {}
addTimeToDate(choice: any, id: number) {} addTimeToDate(choice: any, id: number) {}

4
src/styles/partials/global.scss
View File

@ -4,3 +4,7 @@ html {
font-size: 1rem; /* 16px */ font-size: 1rem; /* 16px */
color: $font_color; color: $font_color;
} }
.min-height {
min-height: 50vh;
}