home modal to search for polls by email, style, buttons in footer

This commit is contained in:
Tykayn 2022-03-14 15:33:04 +01:00 committed by tykayn
parent e09429d0d8
commit c3b1df4fc7
2 changed files with 111 additions and 93 deletions

View File

@ -33,7 +33,6 @@
src="{{ environment.appLanding }}" src="{{ environment.appLanding }}"
alt="{{ environment.appTitle }}" alt="{{ environment.appTitle }}"
/> />
<!-- <img src="assets/img/icone_home.png" alt="calendrier icone framadate" />-->
</div> </div>
</div> </div>
@ -41,6 +40,9 @@
<h1 class="title is-1">Titre h1</h1> <h1 class="title is-1">Titre h1</h1>
<h2 class="title is-2">Titre h2</h2> <h2 class="title is-2">Titre h2</h2>
<h3 class="title is-3">Titre h3</h3> <h3 class="title is-3">Titre h3</h3>
<h4 class="title is-4">Titre h4</h4>
<h5 class="title is-5">Titre h5</h5>
<h6 class="title is-6">Titre h6</h6>
<button class="is-primary is-disabled">bouton primaire inactif</button> <button class="is-primary is-disabled">bouton primaire inactif</button>
<button class="is-primary">bouton primaire</button> <button class="is-primary">bouton primaire</button>
<button class="is-primary is-thin">bouton primaire fin</button> <button class="is-primary is-thin">bouton primaire fin</button>
@ -93,28 +95,29 @@
</div> </div>
<!-- dialog search--> <!-- dialog search-->
<p-dialog
[modal]="true" <form (ngSubmit)="searchMyPolls()">
[(visible)]="display_poll_search_dialog" <p-dialog
[breakpoints]="{ '600px': '75vw', '400px': '95vw' }" [modal]="true"
[style]="{ width: '486px' }" [(visible)]="display_poll_search_dialog"
[draggable]="false" [breakpoints]="{ '600px': '75vw', '400px': '95vw' }"
[showHeader]="false" [style]="{ width: '486px' }"
[resizable]="true" [draggable]="false"
> [showHeader]="false"
<div class="home-content"> [resizable]="true"
<div class="top"> >
<button <div class="home-content">
id="close_dialog" <div class="top">
class="no-outline cancel-button-reject pull-right has-no-border is-closing-popup" <button
(click)="focusOnCancelButton()" id="close_dialog"
> class="no-outline cancel-button-reject pull-right has-no-border is-closing-popup"
{{ 'SENTENCES.Close' | translate }} <img class="icon fa" src="assets/icons/x_blue.svg" /> (click)="focusOnCancelButton()"
</button> >
</div> {{ 'SENTENCES.Close' | translate }} <img class="icon fa" src="assets/icons/x_blue.svg" />
<div class=""> </button>
<section class="search"> </div>
<form (ngSubmit)="searchMyPolls()"> <div class="">
<section class="search">
<div class=""> <div class="">
<div class="search-others column"> <div class="search-others column">
<h2 class="title is-2"> <h2 class="title is-2">
@ -135,6 +138,7 @@
[ngClass]="{ [ngClass]="{
'has-background-success': email_sent, 'has-background-success': email_sent,
'ng-invalid has-background-warning': 'ng-invalid has-background-warning':
storageService.vote_stack.owner.email.length &&
nonexistent_email === storageService.vote_stack.owner.email nonexistent_email === storageService.vote_stack.owner.email
}" }"
[(ngModel)]="storageService.vote_stack.owner.email" [(ngModel)]="storageService.vote_stack.owner.email"
@ -149,77 +153,89 @@
> >
<i class="fa fa-warning"></i> Aucun sondage enregistré pour cet email. <i class="fa fa-warning"></i> Aucun sondage enregistré pour cet email.
</div> </div>
<button
type="submit"
role="button"
class="is-outlined is-fullwidth is-info button-submit"
[disabled]="
!storageService.vote_stack.owner.email.length ||
nonexistent_email === storageService.vote_stack.owner.email
"
routerLink="user/polls"
>
<i class="fa fa-search"></i>
{{ 'home.search_button' | translate }}
</button>
</div> </div>
</div> </div>
</form> </section>
</div>
<div class="poll-list">
<ul>
<li *ngFor="let p of storageService.userPolls">
<a class="is-fullwidth padded" [routerLink]="'poll/' + p.custom_url + '/consultation'">
{{ p.title }}
<i class="fa fa-arrow-right pull-right"></i>
</a>
</li>
</ul>
</div>
</section>
<section class="demo-capabilities">
<div
*ngIf="environment.showDemoWarning"
class="demo demo-warning well has-background-warning-light padded marged"
>
<h3 class="title is-3">
Ce que l'on peut faire sur cette démo:
</h3>
<ul>
<li>
☑️ Créer un nouveau sondage
</li>
<li>
☑️ accéder à un sondage existant en tant que visiteur, ajouter une réponse (StackOfVote)
et un commentaire.
</li>
<li>
☑️
<a
href="https://framagit.org/framasoft/framadate/funky-framadate-front/-/tree/master/docs"
>lire la documentation</a
>
</li>
</ul>
<h3 class="title is-3">
Ce qu'on ne peut pas encore faire:
</h3>
<ul>
<li>
🚴‍️ mettre à jour son vote à un sondage
</li>
<li>
🚴‍ modifier un de ses sondages existants par un lien d'administration
</li>
<li>
🚴‍ recevoir immédiatement les emails. Ceux ci nécessitent un vidage du spool d'emails
du backend sur demande (mesure anti spam).
</li>
</ul>
</div>
</section>
</div> </div>
</div> <ng-template pTemplate="footer" class="has-text-right">
</p-dialog> <button
class="button is-secondary"
(click)="focusOnCancelButton()"
id="cancel_popup_button"
aria-haspopup="dialog"
>
{{ 'nav.leave' | translate }}
</button>
<button
type="submit"
role="button"
class="button is-primary button-submit"
(click)="searchMyPolls()"
[disabled]="
!storageService.vote_stack.owner.email.length &&
storageService.vote_stack.owner.email.indexOf('@') !== -1
"
routerLink="user/polls"
>
<i class="fa fa-search"></i>
{{ 'home.search_button' | translate }}
</button>
</ng-template>
</p-dialog>
</form>
</section> </section>
<div class="demos">
<div class="poll-list">
<ul>
<li *ngFor="let p of storageService.userPolls">
<a class="is-fullwidth padded" [routerLink]="'poll/' + p.custom_url + '/consultation'">
{{ p.title }}
<i class="fa fa-arrow-right pull-right"></i>
</a>
</li>
</ul>
</div>
<section class="demo-capabilities">
<div
*ngIf="environment.showDemoWarning"
class="demo demo-warning well has-background-warning-light padded marged"
>
<h3 class="title is-3">
Ce que l'on peut faire sur cette démo:
</h3>
<ul>
<li>
☑️ Créer un nouveau sondage
</li>
<li>
☑️ accéder à un sondage existant en tant que visiteur, ajouter une réponse (StackOfVote) et un
commentaire.
</li>
<li>
☑️
<a href="https://framagit.org/framasoft/framadate/funky-framadate-front/-/tree/master/docs"
>lire la documentation</a
>
</li>
</ul>
<h3 class="title is-3">
Ce qu'on ne peut pas encore faire:
</h3>
<ul>
<li>
🚴‍️ mettre à jour son vote à un sondage
</li>
<li>
🚴‍ modifier un de ses sondages existants par un lien d'administration
</li>
<li>
🚴‍ recevoir immédiatement les emails. Ceux ci nécessitent un vidage du spool d'emails du backend
sur demande (mesure anti spam).
</li>
</ul>
</div>
</section>
</div>

View File

@ -8,6 +8,8 @@
min-width: 107px; min-width: 107px;
min-height: 83px; min-height: 83px;
padding: 8px 0 16px; padding: 8px 0 16px;
color: $primary-color;
.button-description { .button-description {
margin-top: 8px; margin-top: 8px;
font-weight: 700; font-weight: 700;