Liness/framadate-responsive
5
0
Fork 0
forked from tykayn/funky-framadate-front
Code Pull Requests 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 {
this.initFormDefault(environment.autofill_creation);
this.toastService.display('formulaire réinitialisé');
// this.toastService.display('formulaire réinitialisé');
}
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 }}
</span>
</p>
<button class="is-visible-smallest-screen pull-right menu-button" (click)="toggle_mobile_menu()">
{{ 'nav.menu' | translate }}
<img class="icon" aria-hidden="true" src="assets/icons/book.svg" />
<button
class="is-visible-smallest-screen pull-right menu-button is-filtered-icon-primary has-background-menu"
(click)="toggle_mobile_menu()"
>
<!-- {{ 'nav.menu' | translate }}-->
</button>
<div class="is-hidden-smallest-screen has-right-elements pull-right">
<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>
<!-- modale pour quitter la création-->
<p-dialog
id="close_stepper"
[modal]="true"
[(visible)]="display_cancel_dialog"
[breakpoints]="{ '600px': '75vw', '400px': '95vw' }"
[style]="{ width: '486px', 'border-radius': '1rem' }"
[styleClass]="'roundToPercentWidth-borders'"
[draggable]="false"
[showHeader]="false"
[resizable]="false"
>
<ng-template pTemplate="titlebar">
<button
id="close_dialog"
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" />
</button>
<h1 class="title is-1">
{{ 'popup.cancel.title' | translate }}
</h1>
<p class="description">
{{ 'popup.cancel.main' | translate }}
</p>
</ng-template>
<ng-template pTemplate="footer">
<div class="">
<div class="has-no-padding">
<button class="button cancel-button-reject-bottom is-secondary" (click)="focusOnCancelButton()">
{{ 'popup.cancel.reject' | translate }}
</button>
<button class="button cancel-button-confirm is-primary" (click)="goToHome()">
{{ 'popup.cancel.validate' | translate }}
</button>
<dialog>
<p-dialog
id="close_stepper"
[modal]="true"
[(visible)]="display_cancel_dialog"
[breakpoints]="{ '600px': '75vw', '400px': '95vw' }"
[style]="{ width: '486px', 'border-radius': '1rem' }"
[styleClass]="'roundToPercentWidth-borders'"
[draggable]="false"
[showHeader]="false"
[resizable]="false"
>
<ng-template pTemplate="titlebar">
<button
id="close_dialog"
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" />
</button>
<h1 class="title is-1">
{{ 'popup.cancel.title' | translate }}
</h1>
<p class="description">
{{ 'popup.cancel.main' | translate }}
</p>
</ng-template>
<ng-template pTemplate="footer">
<div class="">
<div class="has-no-padding">
<button class="button cancel-button-reject-bottom is-secondary" (click)="focusOnCancelButton()">
{{ 'popup.cancel.reject' | translate }}
</button>
<button class="button cancel-button-confirm is-primary" (click)="goToHome()">
{{ 'popup.cancel.validate' | translate }}
</button>
</div>
</div>
</div>
</ng-template>
</p-dialog>
</ng-template>
</p-dialog>
</dialog>
<div id="mobile_menu" *ngIf="display_mobile_menu">
<div class="menu-content">
<div class="padded">
<button
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"
>
{{ 'SENTENCES.Close' | translate }}
<img class="icon" src="assets/icons/x_blue.svg" />
{{ 'SENTENCES.Close' | translate }} <img class="icon fa" src="assets/icons/x_blue.svg" />
</button>
<h2 class="title is-2 has-text-primary">Menu</h2>
<div class="langs">
<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;
}
}
.has-background-icon-right {
padding-right: 44px;
background-position: right;
&:hover {
color: $secondary_color;
}
}
// icone bg
.has-background-transparent {
background-color: transparent;
@ -141,6 +148,15 @@
.has-background-trash {
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 {
display: block;
}

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

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