tykayn/funky-framadate-front
1
1
Fork 1
mirror of https://framagit.org/framasoft/framadate/funky-framadate-front.git synced 2023-08-25 13:53:14 +02:00
Code Issues Projects Releases Wiki Activity

mobile button to exit menu, padding on main col on small screens

Browse Source
This commit is contained in:
Tykayn 2022-03-15 11:18:38 +01:00 committed by tykayn
parent 6afb4d4640
commit 934e004a33
4 changed files with 68 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -485,7 +485,7 @@ export class PollService implements Resolve<Poll> {
askInitFormDefault(): void { askInitFormDefault(): void {
this.initFormDefault(environment.autofill_creation); this.initFormDefault(environment.autofill_creation);
this.toastService.display('formulaire réinitialisé'); // this.toastService.display('formulaire réinitialisé');
} }
countDays(): void { countDays(): void {

94
src/app/features/administration/stepper/stepper.component.html
View File

@ -79,9 +79,11 @@
{{ 'nav.step' | translate }} {{ step_current }} {{ 'nav.on' | translate }} {{ step_max }} {{ 'nav.step' | translate }} {{ step_current }} {{ 'nav.on' | translate }} {{ step_max }}
</span> </span>
</p> </p>
<button class="is-visible-smallest-screen pull-right menu-button" (click)="toggle_mobile_menu()"> <button
{{ 'nav.menu' | translate }} class="is-visible-smallest-screen pull-right menu-button is-filtered-icon-primary has-background-menu"
<img class="icon" aria-hidden="true" src="assets/icons/book.svg" /> (click)="toggle_mobile_menu()"
>
<!-- {{ 'nav.menu' | translate }}-->
</button> </button>
<div class="is-hidden-smallest-screen has-right-elements pull-right"> <div class="is-hidden-smallest-screen has-right-elements pull-right">
<app-language-selector class="nav-button"></app-language-selector> <app-language-selector class="nav-button"></app-language-selector>
@ -99,57 +101,59 @@
<div class="step-bar-progress" [ngStyle]="{ width: (step_current / step_max) * 100 + '%' }"></div> <div class="step-bar-progress" [ngStyle]="{ width: (step_current / step_max) * 100 + '%' }"></div>
<!-- modale pour quitter la création--> <!-- modale pour quitter la création-->
<p-dialog <dialog>
id="close_stepper" <p-dialog
[modal]="true" id="close_stepper"
[(visible)]="display_cancel_dialog" [modal]="true"
[breakpoints]="{ '600px': '75vw', '400px': '95vw' }" [(visible)]="display_cancel_dialog"
[style]="{ width: '486px', 'border-radius': '1rem' }" [breakpoints]="{ '600px': '75vw', '400px': '95vw' }"
[styleClass]="'roundToPercentWidth-borders'" [style]="{ width: '486px', 'border-radius': '1rem' }"
[draggable]="false" [styleClass]="'roundToPercentWidth-borders'"
[showHeader]="false" [draggable]="false"
[resizable]="false" [showHeader]="false"
> [resizable]="false"
<ng-template pTemplate="titlebar"> >
<button <ng-template pTemplate="titlebar">
id="close_dialog" <button
class="button cancel-button-reject pull-right img-marged-left has-no-border is-closing-popup" id="close_dialog"
(click)="focusOnCancelButton()" class="button cancel-button-reject pull-right img-marged-left has-no-border is-closing-popup"
> (click)="focusOnCancelButton()"
{{ 'SENTENCES.Close' | translate }} >
<img class="icon" src="assets/icons/x_blue.svg" /> {{ 'SENTENCES.Close' | translate }}
</button> <img class="icon" src="assets/icons/x_blue.svg" />
<h1 class="title is-1"> </button>
{{ 'popup.cancel.title' | translate }} <h1 class="title is-1">
</h1> {{ 'popup.cancel.title' | translate }}
<p class="description"> </h1>
{{ 'popup.cancel.main' | translate }} <p class="description">
</p> {{ 'popup.cancel.main' | translate }}
</ng-template> </p>
<ng-template pTemplate="footer"> </ng-template>
<div class=""> <ng-template pTemplate="footer">
<div class="has-no-padding"> <div class="">
<button class="button cancel-button-reject-bottom is-secondary" (click)="focusOnCancelButton()"> <div class="has-no-padding">
{{ 'popup.cancel.reject' | translate }} <button class="button cancel-button-reject-bottom is-secondary" (click)="focusOnCancelButton()">
</button> {{ 'popup.cancel.reject' | translate }}
<button class="button cancel-button-confirm is-primary" (click)="goToHome()"> </button>
{{ 'popup.cancel.validate' | translate }} <button class="button cancel-button-confirm is-primary" (click)="goToHome()">
</button> {{ 'popup.cancel.validate' | translate }}
</button>
</div>
</div> </div>
</div> </ng-template>
</ng-template> </p-dialog>
</p-dialog> </dialog>
<div id="mobile_menu" *ngIf="display_mobile_menu"> <div id="mobile_menu" *ngIf="display_mobile_menu">
<div class="menu-content"> <div class="menu-content">
<div class="padded"> <div class="padded">
<button <button
id="close_menu" id="close_menu"
class="button cancel-button-reject pull-right img-marged-left" class="button cancel-button-reject pull-right has-text-right has-no-border is-closing-popup"
(click)="display_mobile_menu = false" (click)="display_mobile_menu = false"
> >
{{ 'SENTENCES.Close' | translate }} {{ 'SENTENCES.Close' | translate }} <img class="icon fa" src="assets/icons/x_blue.svg" />
<img class="icon" src="assets/icons/x_blue.svg" />
</button> </button>
<h2 class="title is-2 has-text-primary">Menu</h2> <h2 class="title is-2 has-text-primary">Menu</h2>
<div class="langs"> <div class="langs">
<app-language-selector class="nav-button" [idSuffix]="'_mobile'"></app-language-selector> <app-language-selector class="nav-button" [idSuffix]="'_mobile'"></app-language-selector>

16
src/styles/dev-utilities/_helpers.scss
View File

@ -114,6 +114,13 @@
color: $secondary_color; color: $secondary_color;
} }
} }
.has-background-icon-right {
padding-right: 44px;
background-position: right;
&:hover {
color: $secondary_color;
}
}
// icone bg // icone bg
.has-background-transparent { .has-background-transparent {
background-color: transparent; background-color: transparent;
@ -141,6 +148,15 @@
.has-background-trash { .has-background-trash {
background: url('/assets/icons/trash-2.svg') no-repeat 16px center; background: url('/assets/icons/trash-2.svg') no-repeat 16px center;
} }
.has-background-menu {
background: url('/assets/icons/menu.svg') no-repeat 16px center;
}
.has-background-close {
background: url('/assets/icons/x.svg') no-repeat 16px center;
}
.has-background-arrow-down-circle {
background: url('/assets/icons/arrow-down-circle.svg') no-repeat 16px center;
}
.is-block { .is-block {
display: block; display: block;
} }

3
src/styles/partials/_responsive.scss
View File

@ -76,7 +76,7 @@
} }
.step { .step {
padding: 120px 0; padding: 120px 10px;
} }
#creation_stepper { #creation_stepper {
.logo-home-link { .logo-home-link {
@ -97,6 +97,7 @@
margin-top: 0; margin-top: 0;
} }
} }
.step-title-poll { .step-title-poll {
max-width: 18ch; max-width: 18ch;
} }