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

remove dom classes in popups

Browse Source
This commit is contained in:
Tykayn 2022-03-10 12:00:31 +01:00 committed by tykayn
parent 0d3fdf78eb
commit 86229138da
12 changed files with 146 additions and 133 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/app/core/components/header/header.component.scss
View File

@ -8,6 +8,9 @@
width: 100%; width: 100%;
background: $white; background: $white;
z-index: 2; z-index: 2;
.logo-home-link {
padding: 0;
}
} }
.app-title { .app-title {
color: $white !important; color: $white !important;

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

@ -3,42 +3,10 @@
<div class="landing container content"> <div class="landing container content">
<div class="columns presentation"> <div class="columns presentation">
<div class="column"> <div class="column">
<section class="buttons-demo contained-in-main-column"> <h1 class="title is-1 has-text-primary marged-v">
<h1 class="title is-1">titre h1</h1>
<h2 class="title is-2">titre h2</h2>
<h3 class="title is-3">titre h3</h3>
<button class="is-primary is-disabled">bouton primaire inactif</button>
<button class="is-primary">bouton primaire</button>
<button class="is-primary is-thin">bouton primaire fin</button>
<button class="is-final">bouton succès</button>
<button class="is-secondary is-disabled">bouton secondaire inactif</button>
<button class="is-secondary">bouton secondaire</button>
<button class="is-secondary is-thin">bouton secondaire fin</button>
<button class="is-action">bouton action</button>
<button class="is-action is-thin">bouton action fin</button>
</section>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<h2 class="title is-2">
{{ 'config.landing_title' | translate }} {{ 'config.landing_title' | translate }}
</h2> </h1>
<p class="subtitle"> <p class="subtitle marged-v">
{{ 'config.landing_subtitle' | translate: { AppTitle: AppTitle } }} {{ 'config.landing_subtitle' | translate: { AppTitle: AppTitle } }}
</p> </p>
<div class="columns"> <div class="columns">
@ -68,6 +36,46 @@
<!-- <img src="assets/img/icone_home.png" alt="calendrier icone framadate" />--> <!-- <img src="assets/img/icone_home.png" alt="calendrier icone framadate" />-->
</div> </div>
</div> </div>
<section class="buttons-demo">
<h1 class="title is-1">Titre h1</h1>
<h2 class="title is-2">Titre h2</h2>
<h3 class="title is-3">Titre h3</h3>
<button class="is-primary is-disabled">bouton primaire inactif</button>
<button class="is-primary">bouton primaire</button>
<button class="is-primary is-thin">bouton primaire fin</button>
<button class="is-final">bouton succès</button>
<button class="is-secondary is-disabled">bouton secondaire inactif</button>
<button class="is-secondary">bouton secondaire</button>
<button class="is-secondary is-thin">bouton secondaire fin</button>
<button class="is-action">bouton action</button>
<button class="is-action is-thin">bouton action fin</button>
</section>
<section>
Autres boutons:
<button id="close_dialog_more" class="is-closing-popup">
bouton fermeture popin <img class="icon fa" src="assets/icons/x_blue.svg" />
</button>
<app-language-selector></app-language-selector>
</section>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
</div> </div>
</div> </div>
@ -75,8 +83,8 @@
<p-dialog <p-dialog
[modal]="true" [modal]="true"
[(visible)]="display_poll_search_dialog" [(visible)]="display_poll_search_dialog"
[breakpoints]="{ '960px': '75vw' }" [breakpoints]="{ '600px': '75vw', '400px': '95vw' }"
[style]="{ width: '454px' }" [style]="{ width: '486px' }"
[draggable]="false" [draggable]="false"
[showHeader]="false" [showHeader]="false"
[resizable]="true" [resizable]="true"
@ -91,10 +99,10 @@
{{ 'SENTENCES.Close' | translate }} <img class="icon fa" src="assets/icons/x_blue.svg" /> {{ 'SENTENCES.Close' | translate }} <img class="icon fa" src="assets/icons/x_blue.svg" />
</button> </button>
</div> </div>
<div class="column"> <div class="">
<section class="search"> <section class="search">
<form (ngSubmit)="searchMyPolls()"> <form (ngSubmit)="searchMyPolls()">
<div class="columns"> <div class="">
<div class="search-others column"> <div class="search-others column">
<h2 class="title is-2"> <h2 class="title is-2">
{{ 'home.search_title' | translate }} {{ 'home.search_title' | translate }}

4
src/app/features/administration/form/option-link/option-link.component.html
View File

@ -36,8 +36,8 @@
<p-dialog <p-dialog
[modal]="true" [modal]="true"
[(visible)]="display_option_dialog" [(visible)]="display_option_dialog"
[breakpoints]="{ '960px': '75vw' }" [breakpoints]="{ '600px': '75vw', '400px': '95vw' }"
[style]="{ width: '454px' }" [style]="{ width: '486px' }"
[draggable]="false" [draggable]="false"
[showHeader]="false" [showHeader]="false"
[resizable]="true" [resizable]="true"

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

@ -73,25 +73,20 @@
[modal]="true" [modal]="true"
[(visible)]="display_same_hours_dialog" [(visible)]="display_same_hours_dialog"
[breakpoints]="{ '960px': '454px' }" [breakpoints]="{ '960px': '454px' }"
[style]="{ width: '454px' }" [style]="{ width: '486px' }"
[draggable]="false" [draggable]="false"
[showHeader]="false" [showHeader]="false"
[resizable]="false" [resizable]="false"
> >
<ng-template pTemplate="titlebar"> <ng-template pTemplate="titlebar">
<div class="columns"> <button
<div class="column"></div> id="close_dialog"
<div class="column is-narrow"> class="button cancel-button-reject pull-right has-text-right has-no-border is-closing-popup"
<button (click)="closeModalAndFocusOnOpenModalButton()"
id="close_dialog" >
class="button cancel-button-reject pull-right has-text-right has-no-border is-closing-popup" {{ 'SENTENCES.Close' | translate }} <img class="icon fa" src="assets/icons/x_blue.svg" />
(click)="closeModalAndFocusOnOpenModalButton()" </button>
> <h1 class="title is-1">
{{ 'SENTENCES.Close' | translate }} <img class="icon fa" src="assets/icons/x_blue.svg" />
</button>
</div>
</div>
<h1 class="title">
{{ 'hours.modal.title' | translate }} {{ 'hours.modal.title' | translate }}
</h1> </h1>
<section class="same-time-slices"> <section class="same-time-slices">
@ -144,18 +139,16 @@
</section> </section>
</ng-template> </ng-template>
<ng-template pTemplate="footer"> <ng-template pTemplate="footer">
<div class="columns"> <div class="has-no-padding time-slice-list-of-a-day">
<div class="column has-no-padding time-slice-list-of-a-day"> <button
<button class="button is-primary is-fullwidth pull-right has-text-white"
class="button is-primary is-fullwidth pull-right has-text-white" (click)="applyTimeSlicesToDateChoices()"
(click)="applyTimeSlicesToDateChoices()" >
> {{ 'hours.modal.validate' | translate }}
{{ 'hours.modal.validate' | translate }} </button>
</button> <button class="button is-outlined pull-right" (click)="closeModalAndFocusOnOpenModalButton()">
<button class="button is-outlined pull-right" (click)="closeModalAndFocusOnOpenModalButton()"> {{ 'SENTENCES.Cancel' | translate }}
{{ 'SENTENCES.Cancel' | translate }} </button>
</button>
</div>
</div> </div>
</ng-template> </ng-template>
</p-dialog> </p-dialog>

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

@ -61,7 +61,7 @@
</div> </div>
</div> </div>
</form> </form>
<p-confirmDialog #cd [style]="{ width: '454px' }"> <p-confirmDialog #cd [style]="{ width: '486px' }">
<ng-template pTemplate="header"> <ng-template pTemplate="header">
<h3>{{ 'creation.dialog' | translate }}</h3> <h3>{{ 'creation.dialog' | translate }}</h3>
</ng-template> </ng-template>

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

@ -103,25 +103,23 @@
id="close_stepper" id="close_stepper"
[modal]="true" [modal]="true"
[(visible)]="display_cancel_dialog" [(visible)]="display_cancel_dialog"
[breakpoints]="{ '960px': '75vw' }" [breakpoints]="{ '600px': '75vw', '400px': '95vw' }"
[style]="{ width: '454px', 'border-radius': '1rem' }" [style]="{ width: '486px', 'border-radius': '1rem' }"
[styleClass]="'roundToPercentWidth-borders'" [styleClass]="'roundToPercentWidth-borders'"
[draggable]="false" [draggable]="false"
[showHeader]="false" [showHeader]="false"
[resizable]="false" [resizable]="false"
> >
<ng-template pTemplate="titlebar"> <ng-template pTemplate="titlebar">
<div class="top"> <button
<button id="close_dialog"
id="close_dialog" class="button cancel-button-reject pull-right img-marged-left has-no-border is-closing-popup"
class="button cancel-button-reject pull-right img-marged-left has-no-border is-closing-popup" (click)="focusOnCancelButton()"
(click)="focusOnCancelButton()" >
> {{ 'SENTENCES.Close' | translate }}
{{ 'SENTENCES.Close' | translate }} <img class="icon" src="assets/icons/x_blue.svg" />
<img class="icon" src="assets/icons/x_blue.svg" /> </button>
</button> <h1 class="title is-1">
</div>
<h1 class="title">
{{ 'popup.cancel.title' | translate }} {{ 'popup.cancel.title' | translate }}
</h1> </h1>
<p class="description"> <p class="description">
@ -129,8 +127,8 @@
</p> </p>
</ng-template> </ng-template>
<ng-template pTemplate="footer"> <ng-template pTemplate="footer">
<div class="columns"> <div class="">
<div class="column has-no-padding"> <div class="has-no-padding">
<button class="button cancel-button-reject-bottom is-secondary" (click)="focusOnCancelButton()"> <button class="button cancel-button-reject-bottom is-secondary" (click)="focusOnCancelButton()">
{{ 'popup.cancel.reject' | translate }} {{ 'popup.cancel.reject' | translate }}
</button> </button>

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

@ -20,7 +20,7 @@
[modal]="true" [modal]="true"
[(visible)]="display_lang_dialog" [(visible)]="display_lang_dialog"
[breakpoints]="['960px']" [breakpoints]="['960px']"
[style]="{ width: '454px' }" [style]="{ width: '486px' }"
[draggable]="false" [draggable]="false"
[showHeader]="false" [showHeader]="false"
[resizable]="true" [resizable]="true"
@ -29,8 +29,8 @@
id="lang_selector_modale" id="lang_selector_modale"
> >
<ng-template pTemplate="titlebar"> <ng-template pTemplate="titlebar">
<div class="columns"> <div class="">
<div class="column"> <div class="">
<div class="top"> <div class="top">
<button <button
id="close_dialog{{ idSuffix }}" id="close_dialog{{ idSuffix }}"
@ -44,7 +44,7 @@
</div> </div>
</div> </div>
</div> </div>
<h1 class="title is-2 has-text-left" id="lang_selector_modale_title"> <h1 class="title is-1 has-text-left" id="lang_selector_modale_title">
{{ 'popup.languages.title' | translate }} {{ 'popup.languages.title' | translate }}
</h1> </h1>

4
src/app/shared/components/selectors/language-selector/language-selector.component.scss
View File

@ -34,10 +34,10 @@
float: left; float: left;
height: auto; height: auto;
min-height: auto; min-height: auto;
margin: 0.5em; margin-right: 2rem;
margin-bottom: 1rem;
input { input {
//height: 1.5rem;
display: none; display: none;
} }
} }

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

@ -16,7 +16,7 @@ export class LanguageSelectorComponent implements OnInit {
public availableLanguages: any = ['FR', 'EN', 'ES']; public availableLanguages: any = ['FR', 'EN', 'ES'];
language: string; language: string;
language_to_apply: string; language_to_apply: string;
display_lang_dialog: boolean = false; display_lang_dialog: boolean = true;
display_dynamic_langs: boolean = false; display_dynamic_langs: boolean = false;
availableLanguagesStatic: any = [ availableLanguagesStatic: any = [

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

@ -22,31 +22,49 @@ $input-shadow: none;
} }
// modal dialog // modal dialog
.p-dialog-content {
border-top-left-radius: 0.5rem;
border-top-right-radius: 0.5rem;
}
.p-dialog-footer {
border-bottom-left-radius: 0.5rem !important;
border-bottom-right-radius: 0.5rem !important;
}
.p-dialog { .p-dialog {
background: transparent !important; background: transparent !important;
box-shadow: none; box-shadow: none;
font-family: $title_font !important;
max-width: $widescreen-width-main-column;
box-sizing: border-box;
.title {
margin-top: 72px;
margin-bottom: 1rem;
@extend .is-3;
}
.p-dialog-header {
color: $primary_color;
padding: 1rem;
}
.p-dialog-content {
border-top-left-radius: 8px;
border-top-right-radius: 8px;
padding: 0 1em;
}
.p-dialog-footer {
border-bottom-left-radius: 8px !important;
border-bottom-right-radius: 8px !important;
padding: 1rem;
button {
margin-right: 0;
margin-left: 1rem;
}
}
} }
.cancel-button-reject { .cancel-button-reject {
background: none; background: none;
margin-right: -1.55rem; margin-right: -0.5rem;
margin-top: 0.5rem;
padding: 0.5rem !important;
float: right; float: right;
.icon {
margin-left: 1rem;
height: 1rem;
width: 1rem;
margin-top: 0.2rem;
float: right;
}
} }
.round-borders { .round-borders {
@ -81,5 +99,5 @@ button .icon:first-child:last-child,
.p-datepicker table td > span:focus, .p-datepicker table td > span:focus,
.p-datepicker .p-datepicker-header .p-datepicker-prev:focus, .p-datepicker .p-datepicker-header .p-datepicker-prev:focus,
.p-datepicker .p-datepicker-header .p-datepicker-next:focus { .p-datepicker .p-datepicker-header .p-datepicker-next:focus {
outline: 3px solid $black !important; outline: 3px solid $outline-color !important;
} }

11
src/styles/partials/_buttons.scss
View File

@ -108,6 +108,17 @@ a {
.is-closing-popup { .is-closing-popup {
background: #fff; background: #fff;
color: #6359cf !important; color: #6359cf !important;
font-weight: 400;
font-size: 16px;
line-height: 20px;
.icon {
margin-left: 1rem;
height: 14px;
width: 14px;
margin-top: 0.15rem;
float: right;
}
} }
.buttons-demo button { .buttons-demo button {

32
src/styles/partials/_typo.scss
View File

@ -1,4 +1,5 @@
body { body {
font-family: $default_font;
h1, h1,
h2, h2,
h3, h3,
@ -27,8 +28,9 @@ body {
color: $d-primary-intense; color: $d-primary-intense;
font-family: $title_font; font-family: $title_font;
font-weight: 700; font-weight: 700;
font-size: 20px; font-style: normal;
line-height: 23px; font-size: 24px;
line-height: 28px;
margin-bottom: 1rem; margin-bottom: 1rem;
} }
} }
@ -49,32 +51,12 @@ body {
color: $d-primary-intense; color: $d-primary-intense;
font-family: $title_font; font-family: $title_font;
font-weight: 700; font-weight: 700;
font-size: 20px; font-style: normal;
line-height: 23px; font-size: 24px;
line-height: 28px;
margin-bottom: 1rem; margin-bottom: 1rem;
} }
.p-dialog {
font-family: $title_font !important;
max-width: $widescreen-width-main-column;
.p-dialog-header {
color: $primary_color !important;
.p-dialog-title {
font-size: 2rem;
}
}
.p-dialog-content {
padding: 1rem 2rem;
}
.p-dialog-footer {
padding: 3rem 2.5rem;
}
}
.nobold { .nobold {
font-weight: normal; font-weight: normal;
} }