mirror of
https://framagit.org/framasoft/framadate/funky-framadate-front.git
synced 2023-08-25 13:53:14 +02:00
set min height for each step
This commit is contained in:
tykayn
parent
303457afd6
commit
dfb3e98159
@ -165,7 +165,6 @@ export class PollService implements Resolve<Poll> {
|
||||
}
|
||||
|
||||
public async loadPollBySlug(slug: string): Promise<void> {
|
||||
console.log('slug', slug);
|
||||
if (slug) {
|
||||
const poll: Poll | undefined = await this.apiService.getPollBySlug(slug);
|
||||
console.log({ loadPollBySlugResponse: poll });
|
||||
@ -213,14 +212,11 @@ export class PollService implements Resolve<Poll> {
|
||||
keyOnChoice($event: KeyboardEvent, choice_number: number): void {
|
||||
$event.preventDefault();
|
||||
|
||||
console.log('this.choices.length', this.choices.length);
|
||||
console.log('choice_number', choice_number);
|
||||
const lastChoice = this.choices.length - 1 === choice_number;
|
||||
// reset field with Ctrl + D
|
||||
// add a field with Ctrl + N
|
||||
// go to previous choice with arrow up
|
||||
// go to next choice with arrow down
|
||||
console.log('$event', $event);
|
||||
|
||||
if ($event.key == 'ArrowUp' && choice_number > 0) {
|
||||
this.focusOnChoice(choice_number - 1);
|
||||
|
||||
@ -5,22 +5,9 @@
|
||||
</h2>
|
||||
<app-stepper [step_current]="pollService.step_current" [step_max]="pollService.step_max"></app-stepper>
|
||||
</header>
|
||||
<section class="step-container">
|
||||
<section class="step-container min-height">
|
||||
<router-outlet>
|
||||
<app-step-one [form]="form"></app-step-one>
|
||||
</router-outlet>
|
||||
</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>
|
||||
|
||||
@ -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="column"></div>
|
||||
<div class="column">
|
||||
|
||||
@ -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">
|
||||
<label class="" for="creatorEmail">
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
<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">
|
||||
<h2 class="title is-2">
|
||||
{{ 'creation.choose_title' | translate }}
|
||||
@ -62,7 +63,7 @@
|
||||
300 caractères maximum
|
||||
</div>
|
||||
</div>
|
||||
<div class="column">
|
||||
<div class="column is-narrow">
|
||||
<button
|
||||
mat-button
|
||||
*ngIf="description.value"
|
||||
@ -79,14 +80,10 @@
|
||||
slug: {{ pollService.form.value.custom_url }}
|
||||
</form>
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
<button class="button is-secondary is-fullwidth" [routerLink]="['/administration/step/1']">
|
||||
précédent
|
||||
</button>
|
||||
</div>
|
||||
<div class="column"></div>
|
||||
<div class="column">
|
||||
<!-- [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
|
||||
</button>
|
||||
</div>
|
||||
|
||||
@ -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-->
|
||||
<div class="dates-list">
|
||||
<div class="title">
|
||||
<span class="count-dates">
|
||||
{{ pollService.timeList.length }}
|
||||
</span>
|
||||
<span class="count-dates-txt">
|
||||
{{ 'dates.count_time' | translate }}
|
||||
(pour chaque jour)
|
||||
</span>
|
||||
</div>
|
||||
<div class="actions">
|
||||
<button
|
||||
(click)="pollService.addTime()"
|
||||
*ngIf="'false' === pollService.allowSeveralHours"
|
||||
class="btn btn--primary"
|
||||
id="add_time_button"
|
||||
>
|
||||
<i class="fa fa-plus" aria-hidden="true"></i>
|
||||
{{ 'dates.add_time' | translate }}
|
||||
</button>
|
||||
<button
|
||||
(click)="pollService.removeAllTimes()"
|
||||
*ngIf="'false' === pollService.allowSeveralHours"
|
||||
class="btn btn--warning"
|
||||
id="remove_time_button"
|
||||
>
|
||||
<i class="fa fa-trash" aria-hidden="true"></i>
|
||||
Aucune plage horaire
|
||||
</button>
|
||||
<button
|
||||
(click)="pollService.resetTimes()"
|
||||
*ngIf="'false' === pollService.allowSeveralHours"
|
||||
class="btn btn--warning"
|
||||
id="reset_time_button"
|
||||
>
|
||||
<i class="fa fa-refresh" aria-hidden="true"></i>
|
||||
réinitialiser
|
||||
</button>
|
||||
</div>
|
||||
<!-- choix spécialement pour les dates-->
|
||||
<div class="dates-list">
|
||||
<div class="title">
|
||||
<span class="count-dates">
|
||||
{{ pollService.timeList.length }}
|
||||
</span>
|
||||
<span class="count-dates-txt">
|
||||
{{ 'dates.count_time' | translate }}
|
||||
(pour chaque jour)
|
||||
</span>
|
||||
</div>
|
||||
<div class="actions">
|
||||
<button
|
||||
(click)="pollService.addTime()"
|
||||
*ngIf="'false' === pollService.allowSeveralHours"
|
||||
class="btn btn--primary"
|
||||
id="add_time_button"
|
||||
>
|
||||
<i class="fa fa-plus" aria-hidden="true"></i>
|
||||
{{ 'dates.add_time' | translate }}
|
||||
</button>
|
||||
<button
|
||||
(click)="pollService.removeAllTimes()"
|
||||
*ngIf="'false' === pollService.allowSeveralHours"
|
||||
class="btn btn--warning"
|
||||
id="remove_time_button"
|
||||
>
|
||||
<i class="fa fa-trash" aria-hidden="true"></i>
|
||||
Aucune plage horaire
|
||||
</button>
|
||||
<button
|
||||
(click)="pollService.resetTimes()"
|
||||
*ngIf="'false' === pollService.allowSeveralHours"
|
||||
class="btn btn--warning"
|
||||
id="reset_time_button"
|
||||
>
|
||||
<i class="fa fa-refresh" aria-hidden="true"></i>
|
||||
réinitialiser
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div *ngIf="'false' === pollService.allowSeveralHours" class="identical-dates">
|
||||
<div cdkDropList class="example-list" (cdkDropListDropped)="drop($event)">
|
||||
<div *ngFor="let time of pollService.timeList; index as id" class="time-choice" cdkDrag>
|
||||
<label for="timeChoices_{{ id }}">
|
||||
<i class="fa fa-clock-o" aria-hidden="true"></i>
|
||||
</label>
|
||||
<input [(ngModel)]="time.literal" name="timeChoices_{{ id }}" 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 *ngIf="'false' === pollService.allowSeveralHours" class="identical-dates">
|
||||
<div cdkDropList class="example-list" (cdkDropListDropped)="drop($event)">
|
||||
<div *ngFor="let time of pollService.timeList; index as id" class="time-choice" cdkDrag>
|
||||
<label for="timeChoices_{{ id }}">
|
||||
<i class="fa fa-clock-o" aria-hidden="true"></i>
|
||||
</label>
|
||||
<input
|
||||
[(ngModel)]="time.literal"
|
||||
name="timeChoices_{{ id }}"
|
||||
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>
|
||||
<hr />
|
||||
<span class="count-dates title">
|
||||
{{ pollService.dateList.length }}
|
||||
</span>
|
||||
<span>
|
||||
{{ 'dates.count_dates' | translate }}
|
||||
</span>
|
||||
<button class="btn btn--primary" (click)="pollService.addChoice()">
|
||||
{{ '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>
|
||||
<hr />
|
||||
<span class="count-dates title">
|
||||
{{ pollService.dateList.length }}
|
||||
</span>
|
||||
<span>
|
||||
{{ 'dates.count_dates' | translate }}
|
||||
</span>
|
||||
<button class="btn btn--primary" (click)="pollService.addChoice()">
|
||||
{{ 'dates.add' | translate }}
|
||||
</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>
|
||||
|
||||
<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>
|
||||
<div *ngFor="let choice of pollService.dateList; index as id" class="date-choice">
|
||||
<input
|
||||
id="start_interval"
|
||||
(change)="pollService.countDays()"
|
||||
formControlName="startDateInterval"
|
||||
[(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
|
||||
(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 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="column">
|
||||
<button class="button is-secondary is-fullwidth" [routerLink]="['/administration/step/2']">
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
import { Component, Input, OnInit } from '@angular/core';
|
||||
import { PollService } from '../../../../core/services/poll.service';
|
||||
import { CdkDragDrop, moveItemInArray } from '@angular/cdk/drag-drop';
|
||||
|
||||
@Component({
|
||||
selector: 'app-step-three',
|
||||
@ -15,4 +16,8 @@ export class StepThreeComponent implements OnInit {
|
||||
constructor(public pollService: PollService) {}
|
||||
|
||||
ngOnInit(): void {}
|
||||
|
||||
drop(event: CdkDragDrop<string[]>) {
|
||||
// moveItemInArray(this.pollService.choices, event.previousIndex, event.currentIndex);
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,28 +1,30 @@
|
||||
<app-stepper [step_current]="2" [step_max]="5"></app-stepper>
|
||||
<div class="form-field poll-kind">
|
||||
<h2 class="title is-2">
|
||||
{{ 'creation.want' | translate }}
|
||||
</h2>
|
||||
<div class="kind-of-poll columns">
|
||||
<div class="column">
|
||||
<button
|
||||
class="button is-fullwidth"
|
||||
[ngClass]="{ 'is-selected is-primary': pollService.form.controls.isAboutDate.value }"
|
||||
(click)="pollService.form.controls.isAboutDate.setValue(true)"
|
||||
>
|
||||
<i class="fa fa-calendar"></i>
|
||||
{{ 'creation.kind.date' | translate }}
|
||||
</button>
|
||||
</div>
|
||||
<div class="column">
|
||||
<button
|
||||
class="button is-fullwidth"
|
||||
[ngClass]="{ 'is-selected is-primary': !pollService.form.controls.isAboutDate.value }"
|
||||
(click)="pollService.form.controls.isAboutDate.setValue(false)"
|
||||
>
|
||||
<i class="fa fa-list-ul"></i>
|
||||
{{ 'creation.kind.classic' | translate }}
|
||||
</button>
|
||||
<div class="min-height">
|
||||
<app-stepper [step_current]="2" [step_max]="5"></app-stepper>
|
||||
<h2 class="title is-2">
|
||||
{{ 'creation.want' | translate }}
|
||||
</h2>
|
||||
<div class="kind-of-poll columns">
|
||||
<div class="column">
|
||||
<button
|
||||
class="button is-fullwidth"
|
||||
[ngClass]="{ 'is-selected is-primary': pollService.form.controls.isAboutDate.value }"
|
||||
(click)="pollService.form.controls.isAboutDate.setValue(true)"
|
||||
>
|
||||
<i class="fa fa-calendar"></i>
|
||||
{{ 'creation.kind.date' | translate }}
|
||||
</button>
|
||||
</div>
|
||||
<div class="column">
|
||||
<button
|
||||
class="button is-fullwidth"
|
||||
[ngClass]="{ 'is-selected is-primary': !pollService.form.controls.isAboutDate.value }"
|
||||
(click)="pollService.form.controls.isAboutDate.setValue(false)"
|
||||
>
|
||||
<i class="fa fa-list-ul"></i>
|
||||
{{ 'creation.kind.classic' | translate }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="columns">
|
||||
|
||||
@ -53,10 +53,6 @@ export class StepTwoComponent implements OnInit {
|
||||
|
||||
resetTimes() {}
|
||||
|
||||
drop(event: CdkDragDrop<string[]>) {
|
||||
// moveItemInArray(this.choices, event.previousIndex, event.currentIndex);
|
||||
}
|
||||
|
||||
addChoice() {}
|
||||
|
||||
addTimeToDate(choice: any, id: number) {}
|
||||
|
||||
@ -4,3 +4,7 @@ html {
|
||||
font-size: 1rem; /* 16px */
|
||||
color: $font_color;
|
||||
}
|
||||
|
||||
.min-height {
|
||||
min-height: 50vh;
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user