Liness/framadate-responsive
5
0
Fork 0
forked from tykayn/funky-framadate-front
Code Pull Requests Activity

style in leaving creation popup

Browse Source
This commit is contained in:
Tykayn 2022-02-10 14:50:05 +01:00 committed by tykayn
parent 4645be41d9
commit d1862485dc
10 changed files with 96 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/app/core/components/home/home.component.html
View File

@ -56,7 +56,7 @@
class="button no-outline cancel-button-reject pull-right"
(click)="focusOnCancelButton()"
>
{{ 'SENTENCES.Close' | translate }} <i class="fa fa-times"></i>
{{ 'SENTENCES.Close' | translate }} <img class="icon fa" src="assets/icons/x_blue.svg" />
</button>
</div>
<div class="column">

2
src/app/features/administration/form/steps/step-four/step-four.component.html
View File

@ -101,7 +101,7 @@
class="button cancel-button-reject pull-right has-text-right"
(click)="closeModalAndFocusOnOpenModalButton()"
>
{{ 'SENTENCES.Close' | translate }} <img class="icon" aria-hidden="true" src="assets/icons/x.svg" />
{{ 'SENTENCES.Close' | translate }} <img class="icon fa" src="assets/icons/x_blue.svg" />
</button>
</div>
</div>

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

@ -89,7 +89,7 @@
<div class="column has-text-right is-narrow">
<app-language-selector class="nav-button"></app-language-selector>
<button
class="nav-button cancel-button"
class="nav-button cancel-button-stepper"
(click)="showCancelDialog()"
id="display_cancel_popup_button"
aria-haspopup="dialog"
@ -104,10 +104,12 @@
<!-- modale pour quitter la création-->
<p-dialog
id="close_stepper"
[modal]="true"
[(visible)]="display_cancel_dialog"
[breakpoints]="{ '960px': '75vw' }"
[style]="{ width: '50vw' }"
[style]="{ width: '50vw', 'border-radius': '1rem' }"
[styleClass]="'round-borders'"
[draggable]="false"
[showHeader]="false"
[resizable]="false"
@ -119,23 +121,24 @@
class="button is-primary cancel-button-reject pull-right"
(click)="focusOnCancelButton()"
>
{{ 'SENTENCES.Close' | translate }} <i class="fa fa-times"></i>
{{ 'SENTENCES.Close' | translate }}
<img class="icon" src="assets/icons/x_blue.svg" />
</button>
</div>
<h1 class="title">
{{ 'popup.cancel.title' | translate }}
</h1>
<p>
<p class="description">
{{ 'popup.cancel.main' | translate }}
</p>
</ng-template>
<ng-template pTemplate="footer">
<div class="columns">
<div class="column has-no-padding">
<button class="button cancel-button-confirm is-outlined" (click)="focusOnCancelButton()">
<button class="button cancel-button-reject-bottom is-outlined" (click)="focusOnCancelButton()">
{{ 'popup.cancel.reject' | translate }}
</button>
<button class="button is-primary cancel-button-reject-bottom" (click)="goToHome()">
<button class="button cancel-button-confirm" (click)="goToHome()">
{{ 'popup.cancel.validate' | translate }}
</button>
</div>

74
src/app/features/administration/stepper/stepper.component.scss
View File

@ -19,8 +19,9 @@
width: 40%;
float: left;
}
.step-title-poll {
max-width: 18ch;
max-width: 40ch;
text-overflow: ellipsis;
display: inline-block !important;
overflow: hidden;
@ -86,24 +87,19 @@
}
}
.cancel-button {
line-height: $stepper-nav-height / 2;
height: $stepper-nav-height / 2;
padding: 0 1rem;
margin-top: 0.75rem;
color: $primary_color;
border-color: $primary_color;
&:hover {
color: $white;
background: $primary_color;
#close_stepper {
border-radius: 3em;
.title {
margin-top: 2rem;
font-size: 24px;
color: $d-primary-intense;
}
}
.cancel-button-reject-bottom {
background: $secondary_color;
color: $white;
margin-left: 1rem;
.description {
color: $font_color;
font-size: 1rem;
line-height: 1.25rem;
}
}
.step-info {
@ -145,21 +141,47 @@
height: 2rem;
}
.cancel-button-stepper {
padding: 0 1rem;
height: auto;
margin-top: 0.75rem;
border-color: $primary_color;
color: $primary_color;
}
.cancel-button-confirm {
color: $white !important;
background: $primary_color;
margin-left: 1rem;
margin-top: 0.75rem;
border-color: $primary_color !important;
padding: 10px 30px;
}
.cancel-button-reject-bottom {
color: $primary_color !important;
border-color: $primary_color !important;
margin-top: 0.75rem;
padding: 10px 30px;
&:hover {
color: $white;
background: $primary_color;
}
}
.cancel-button-reject {
background: none;
color: $primary_color;
margin-right: -1rem;
i {
color: $primary_color;
margin-left: 1ch;
float: right;
.icon {
margin-left: 1rem;
height: 1rem;
width: 1rem;
margin-top: 0.15rem;
float: right;
}
}
.cancel-button-confirm {
color: $secondary_color;
margin-right: 0;
}
}
.lang-selector-icon {

2
src/app/shared/components/selectors/language-selector/language-selector.component.html
View File

@ -21,7 +21,7 @@
class="button no-outline cancel-button-reject"
(click)="focusOnCancelButton()"
>
{{ 'SENTENCES.Close' | translate }} <i class="fa fa-times"></i>
{{ 'SENTENCES.Close' | translate }} <img class="icon fa" src="assets/icons/x_blue.svg" />
</button>
</div>
<h2 class="title is-2 has-text-left">

8
src/assets/i18n/en.json
View File

@ -63,9 +63,13 @@
"description_constraint": "max chars"
},
"popup": {
"languages": {
"title": "Choose your locale",
"validate": "Save"
},
"cancel": {
"title": "You will cancel your poll creation",
"main": "Do you really want to leave the poll creation ?",
"title": "You will leave this poll creation",
"main": "Do you really want to leave ?",
"validate": "Yes, cancel poll",
"reject": "No"
}

5
src/assets/i18n/fr.json
View File

@ -67,10 +67,9 @@
"title": "Choisissez votre langue",
"validate": "Enregistrer"
},
"cancel": {
"title": "Vous allez annuler votre sondage",
"main": "Si vous annulez votre sondage vous perdrez toutes les informations saisies jusqu'à maintenant. Souhaitez-vous vraiment annuler ?",
"title": "Vous allez quitter le sondage",
"main": "Toutes les informations seront effacées.\nSouhaitez-vous vraiment quitter ?",
"validate": "Oui, quitter",
"reject": "Non"
}

3
src/assets/icons/x_blue.svg Normal file
View File

@ -0,0 +1,3 @@
<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M8.43781 6.99976L13.7178 1.71977C14.0778 1.35977 14.0778 0.639766 13.7178 0.279766C13.3578 -0.0802344 12.6378 -0.0802344 12.2778 0.279766L6.99781 5.55976L1.71781 0.279766C1.35781 -0.0802344 0.637813 -0.0802344 0.277813 0.279766C-0.0821875 0.639766 -0.0821875 1.35977 0.277813 1.71977L5.55781 6.99976L0.277813 12.2798C-0.0821875 12.6398 -0.0821875 13.3598 0.277813 13.7198C0.517813 13.9598 0.757812 13.9598 0.997813 13.9598C1.23781 13.9598 1.47781 13.8398 1.71781 13.7198L6.99781 8.43976L12.2778 13.7198C12.5178 13.9598 12.7578 13.9598 12.9978 13.9598C13.2378 13.9598 13.4778 13.8398 13.7178 13.7198C14.0778 13.3598 14.0778 12.6398 13.7178 12.2798L8.43781 6.99976Z" fill="#6359CF"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 794 B

22
src/styles/libraries/_overrides.scss
View File

@ -19,3 +19,25 @@ $input-shadow: none;
display: block !important;
width: 80%;
}
// modal dialog
.p-dialog {
background: blue !important;
}
.cancel-button-reject {
background: none;
color: $primary_color;
margin-right: -1rem;
float: right;
.icon {
margin-left: 1rem;
height: 1rem;
width: 1rem;
margin-top: 0.15rem;
float: right;
}
}
.round-borders {
border-radius: 1rem !important;
}

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

@ -26,6 +26,9 @@
margin-top: 0;
}
}
.step-title-poll {
max-width: 18ch;
}
}
@media (min-width: 380px) {
.feedback-container {