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

display all buttons on home, style accordingly, remove bulma buttons styles

Browse Source
This commit is contained in:
Tykayn 2022-03-10 09:30:27 +01:00 committed by tykayn
parent e84cfa9194
commit 7d1385185b
11 changed files with 119 additions and 73 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -3,20 +3,38 @@
<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 contained-in-main-column"> <section class="buttons-demo contained-in-main-column">
<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>
<button class="button is-primary is-disabled">bouton primaire inactif</button> <button class="is-primary is-disabled">bouton primaire inactif</button>
<button class="button is-primary">bouton primaire</button> <button class="is-primary">bouton primaire</button>
<button class="button is-primary is-thin">bouton primaire fin</button> <button class="is-primary is-thin">bouton primaire fin</button>
<button class="button is-secondary is-disabled">bouton secondaire</button> <button class="is-final">bouton succès</button>
<button class="button is-secondary">bouton secondaire</button> <button class="is-secondary is-disabled">bouton secondaire inactif</button>
<button class="button is-secondary is-thin">bouton secondaire fin</button> <button class="is-secondary">bouton secondaire</button>
<button class="button is-action">bouton action</button> <button class="is-secondary is-thin">bouton secondaire fin</button>
<button class="button is-action">bouton action fin</button> <button class="is-action">bouton action</button>
<button class="is-action is-thin">bouton action fin</button>
</section> </section>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<h2 class="title is-2"> <h2 class="title is-2">
{{ 'config.landing_title' | translate }} {{ 'config.landing_title' | translate }}
</h2> </h2>
@ -25,14 +43,14 @@
</p> </p>
<div class="columns"> <div class="columns">
<div class="column"> <div class="column">
<button class="button is-fullwidth is-primary" routerLink="administration"> <button class="is-fullwidth is-primary" routerLink="administration">
{{ 'config.letsgo' | translate }} {{ 'config.letsgo' | translate }}
</button> </button>
</div> </div>
<div class="column"> <div class="column">
<button <button
id="open_popup_button" id="open_popup_button"
class="button is-fullwidth is-secondary is-outlined" class="is-fullwidth is-secondary is-outlined"
(click)="openModalFindPoll()" (click)="openModalFindPoll()"
> >
{{ 'config.discover' | translate }} {{ 'config.discover' | translate }}
@ -67,7 +85,7 @@
<div class="top"> <div class="top">
<button <button
id="close_dialog" id="close_dialog"
class="button no-outline cancel-button-reject pull-right has-no-border" class="no-outline cancel-button-reject pull-right has-no-border"
(click)="focusOnCancelButton()" (click)="focusOnCancelButton()"
> >
{{ '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" />
@ -112,7 +130,7 @@
<button <button
type="submit" type="submit"
role="button" role="button"
class="button is-outlined is-fullwidth is-info button-submit" class="is-outlined is-fullwidth is-info button-submit"
[disabled]=" [disabled]="
!storageService.vote_stack.owner.email.length || !storageService.vote_stack.owner.email.length ||
nonexistent_email === storageService.vote_stack.owner.email nonexistent_email === storageService.vote_stack.owner.email
@ -129,10 +147,7 @@
<div class="poll-list"> <div class="poll-list">
<ul> <ul>
<li *ngFor="let p of storageService.userPolls"> <li *ngFor="let p of storageService.userPolls">
<a <a class="is-fullwidth padded" [routerLink]="'poll/' + p.custom_url + '/consultation'">
class="button is-fullwidth padded"
[routerLink]="'poll/' + p.custom_url + '/consultation'"
>
{{ p.title }} {{ p.title }}
<i class="fa fa-arrow-right pull-right"></i> <i class="fa fa-arrow-right pull-right"></i>
</a> </a>

2
src/app/features/administration/consultation/consultation.component.html
View File

@ -1,6 +1,6 @@
<div class="admin-consultation min-height padded"> <div class="admin-consultation min-height padded">
<h2 class="title is-2">Consulter le sondage</h2> <h2 class="title is-2">Consulter le sondage</h2>
<button class="btn is-primary" [routerLink]="'/administration'"> <button class="is-primary" [routerLink]="'/administration'">
<i class="fa fa-pencil"></i> <i class="fa fa-pencil"></i>
{{ 'resume.edit' | translate }} {{ 'resume.edit' | translate }}
</button> </button>

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

@ -46,7 +46,7 @@
<button <button
(click)="pollService.removeAllTimes()" (click)="pollService.removeAllTimes()"
*ngIf="pollService.timeList.length && false == pollService.allowSeveralHours" *ngIf="pollService.timeList.length && false == pollService.allowSeveralHours"
class="btn is-warning marged" class="is-warning marged"
id="remove_time_button" id="remove_time_button"
> >
<i class="fa fa-trash" aria-hidden="true"></i> <i class="fa fa-trash" aria-hidden="true"></i>
@ -55,7 +55,7 @@
<button <button
(click)="pollService.resetTimes()" (click)="pollService.resetTimes()"
*ngIf="pollService.timeList.length && false == pollService.allowSeveralHours" *ngIf="pollService.timeList.length && false == pollService.allowSeveralHours"
class="btn is-warning marged" class="is-warning marged"
id="reset_time_button" id="reset_time_button"
> >
<i class="fa fa-refresh" aria-hidden="true"></i> <i class="fa fa-refresh" aria-hidden="true"></i>

6
src/app/features/administration/form/text-select/text-select.component.html
View File

@ -2,13 +2,13 @@
<form [formGroup]="form"> <form [formGroup]="form">
<span class="columns"> <span class="columns">
<span class="column"> <span class="column">
<button class="btn is-primary" (click)="addChoice()"> <button class="is-primary" (click)="addChoice()">
<i class="fa fa-plus"></i> <i class="fa fa-plus"></i>
Ajouter un choix Ajouter un choix
</button> </button>
</span> </span>
<span class="column pull-right"> <span class="column pull-right">
<button class="btn is-warning" (click)="reinitChoices()"> <button class="is-warning" (click)="reinitChoices()">
<i class="fa fa-recycle"></i> <i class="fa fa-recycle"></i>
Réinitialiser Réinitialiser
</button> </button>
@ -22,7 +22,7 @@
<div class="form-row" [formGroup]="choice"> <div class="form-row" [formGroup]="choice">
<div class="columns"> <div class="columns">
<div class="column"> <div class="column">
<button class="btn btn-warning" (click)="deleteChoiceField(i)"> <button class="is-warning" (click)="deleteChoiceField(i)">
<i class="fa fa-times"></i> <i class="fa fa-times"></i>
</button> </button>
{{ i * 1 + 1 }}) {{ i * 1 + 1 }})

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

@ -70,14 +70,8 @@
.go-to-step, .go-to-step,
.custom-action { .custom-action {
@extend .clickable; @extend .clickable;
color: $secondary_color;
padding: 1.5em; padding: 1.5em;
border-radius: 0.25em; border-radius: 0.25em;
&:hover {
background: $secondary_color;
color: $white;
}
} }
} }

4
src/styles/libraries/_frameworks.scss
View File

@ -4,8 +4,8 @@
//@import '../../../node_modules/bulma/sass/base/_all.sass'; //@import '../../../node_modules/bulma/sass/base/_all.sass';
//@import '../../../node_modules/bulma/sass/elements/button.sass'; //@import '../../../node_modules/bulma/sass/elements/button.sass';
@import '../../../node_modules/bulma/sass/elements/container.sass'; @import '../../../node_modules/bulma/sass/elements/container.sass';
@import '../../../node_modules/bulma/sass/elements/title.sass'; //@import '../../../node_modules/bulma/sass/elements/title.sass';
@import '../../../node_modules/bulma/sass/form/_all.sass'; //@import '../../../node_modules/bulma/sass/form/_all.sass';
@import '../../../node_modules/bulma/sass/components/navbar.sass'; @import '../../../node_modules/bulma/sass/components/navbar.sass';
@import '../../../node_modules/bulma/sass/layout/hero.sass'; @import '../../../node_modules/bulma/sass/layout/hero.sass';
@import '../../../node_modules/bulma/sass/layout/section.sass'; @import '../../../node_modules/bulma/sass/layout/section.sass';

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

@ -1,42 +1,62 @@
.outlined { .outlined {
&:focus { &:focus {
outline: #6359cf; outline: $outline-color;
outline-style: solid; outline-style: solid;
outline-offset: 0.15rem;
} }
} }
a {
@extend .outlined;
}
button, button,
.btn { .btn {
@extend .outlined; @extend .outlined;
@extend .button;
} }
.btn--full { .btn--full {
@extend .is-block; @extend .is-block;
} }
button { button,
&.is-white { a {
&:hover { @extend .outlined;
background: $secondary_color; text-align: center;
color: $white; padding: 10px 30px;
} border: 1px solid transparent;
} box-sizing: border-box;
&:hover { border-radius: 4px;
outline-color: cadetblue; cursor: pointer;
}
} }
.is-success { .is-white {
&:hover {
background: $secondary_color;
color: $white;
}
}
.is-final {
background: #128149; background: #128149;
border-color: #128149;
color: #fff; color: #fff;
&:hover {
background: #07532d;
border-color: #07532d;
}
} }
.is-primary { .is-primary {
background: #6359cf; background: #6359cf;
color: #fff; color: #fff;
border-color: #6359cf;
&.is-disabled {
background: #767486;
}
&:hover {
background-color: #3e3882;
border-color: #3e3882;
&.is-disabled {
background: #767486;
border-color: #6359cf;
}
}
} }
.is-disabled { .is-disabled {
@ -48,7 +68,46 @@ button {
background: #fff; background: #fff;
color: #6359cf; color: #6359cf;
border-color: #6359cf; border-color: #6359cf;
&.is-disabled {
color: #767486;
border-color: #767486;
}
&:hover {
background-color: #f6f5fb;
border-color: #3e3882;
color: #3e3882;
&.is-disabled {
color: #767486;
border-color: #767486;
}
}
} }
.is-thin {
font-size: 14px;
line-height: 18px;
}
.is-action {
background: #fff;
color: #6359cf;
border-radius: 100px;
border-color: transparent;
padding: 4px !important;
&:hover {
background-color: #e3e3ea;
border-color: #e3e3ea;
color: #3e3882;
}
}
.buttons-demo button {
float: left;
clear: both;
margin-bottom: 1rem;
}
.btn-primary { .btn-primary {
@extend .is-primary; @extend .is-primary;
} }

4
src/styles/partials/_datepicker.scss
View File

@ -60,10 +60,8 @@ p-calendar,
font-weight: normal; font-weight: normal;
} }
p-button, p-button {
button {
color: $primary_color !important; color: $primary_color !important;
&:hover { &:hover {
color: $white !important; color: $white !important;
background: $secondary_color !important; background: $secondary_color !important;

6
src/styles/partials/_forms.scss
View File

@ -61,12 +61,6 @@ textarea {
@extend .clickable; @extend .clickable;
padding: 0.25rem 0.25rem 0.25rem 1rem; padding: 0.25rem 0.25rem 0.25rem 1rem;
&:active,
&:focus,
&:hover {
color: $primary_color;
}
&[required] { &[required] {
&:after { &:after {
content: '*'; content: '*';

16
src/styles/partials/_navigation.scss
View File

@ -22,15 +22,6 @@ nav {
&::after { &::after {
display: none; display: none;
} }
&.active,
&.is-active {
color: $white;
background: $primary_color !important;
&:hover {
background: $dark !important;
}
}
} }
} }
a { a {
@ -45,13 +36,6 @@ a {
content: ''; content: '';
} }
&:hover {
&.next::before,
&.prev::after {
background-color: rgba($primary_color, 0.7);
}
}
span { span {
padding-right: 1rem; padding-right: 1rem;
padding-left: 1rem; padding-left: 1rem;

2
src/styles/variables.scss
View File

@ -37,6 +37,7 @@ $d-alt: #a9607f;
$d-info: #ecf4ff; $d-info: #ecf4ff;
$d-info-text: #316ec7; $d-info-text: #316ec7;
$intense-blue: #0a76f6;
$d-success: #ecfff5; $d-success: #ecfff5;
$d-success-text: #128149; $d-success-text: #128149;
$d-warning: #dcd3bb; $d-warning: #dcd3bb;
@ -45,6 +46,7 @@ $d-error: #ffecee;
$d-error-text: #d51b38; $d-error-text: #d51b38;
// interpretations in app // interpretations in app
$outline-color: $intense-blue; // #0a76f6
$success_color: $d-success-text; $success_color: $d-success-text;
$primary_color: $d-primary; $primary_color: $d-primary;
$primary: $d-primary; $primary: $d-primary;