tykayn
/
funky-framadate-front
mirror of https://framagit.org/framasoft/framadate/funky-framadate-front
1
1
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

set min height for each step

develop
Tykayn 9 months ago committed by tykayn
parent
303457afd6
commit
dfb3e98159
10 changed files with 178 additions and 185 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 4
      src/app/core/services/poll.service.ts
  2. 15
      src/app/features/administration/form/form.component.html
  3. 2
      src/app/features/administration/form/step-five/step-five.component.html
  4. 2
      src/app/features/administration/form/step-four/step-four.component.html
  5. 13
      src/app/features/administration/form/step-one/step-one.component.html
  6. 264
      src/app/features/administration/form/step-three/step-three.component.html
  7. 5
      src/app/features/administration/form/step-three/step-three.component.ts
  8. 50
      src/app/features/administration/form/step-two/step-two.component.html
  9. 4
      src/app/features/administration/form/step-two/step-two.component.ts
  10. 4
      src/styles/partials/global.scss

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

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

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

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

2
src/app/features/administration/form/step-five/step-five.component.html
Unescape 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="column"></div>
<div class="column">

2
src/app/features/administration/form/step-four/step-four.component.html
Unescape 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">
<label class="" for="creatorEmail">

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

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

264
src/app/features/administration/form/step-three/step-three.component.html
Unescape 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-->
<div class="dates-list">
<div class="title">
<span class="count-dates">
{{ pollService.timeList.length }}
<!-- 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>
</div>
</div>
<hr />
<span class="count-dates title">
{{ pollService.dateList.length }}
</span>
<span class="count-dates-txt">
{{ 'dates.count_time' | translate }}
(pour chaque jour)
<span>
{{ 'dates.count_dates' | translate }}
</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 class="btn btn--primary" (click)="pollService.addChoice()">
{{ 'dates.add' | translate }}
</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 *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
(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>
<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
(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>
<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
(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">
<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
[(ngModel)]="timeItem.literal"
name="dateTime_{{ id }}_Choices_{{ idTime }}"
id="dateTime_{{ id }}_Choices_{{ idTime }}"
type="text"
id="start_interval"
(change)="pollService.countDays()"
formControlName="startDateInterval"
type="date"
/>
<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
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 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>
</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.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']">

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

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

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

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

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

@ -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
src/styles/partials/global.scss
Unescape View File

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

Write Preview
Loading…
Cancel
Save