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="columns presentation">
<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>
<h2 class="title is-2">titre h2</h2>
<h3 class="title is-3">titre h3</h3>
<button class="button is-primary is-disabled">bouton primaire inactif</button>
<button class="button is-primary">bouton primaire</button>
<button class="button is-primary is-thin">bouton primaire fin</button>
<button class="button is-secondary is-disabled">bouton secondaire</button>
<button class="button is-secondary">bouton secondaire</button>
<button class="button is-secondary is-thin">bouton secondaire fin</button>
<button class="button is-action">bouton action</button>
<button class="button is-action">bouton action fin</button>
<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 }}
</h2>
@ -25,14 +43,14 @@
</p>
<div class="columns">
<div class="column">
<button class="button is-fullwidth is-primary" routerLink="administration">
<button class="is-fullwidth is-primary" routerLink="administration">
{{ 'config.letsgo' | translate }}
</button>
</div>
<div class="column">
<button
id="open_popup_button"
class="button is-fullwidth is-secondary is-outlined"
class="is-fullwidth is-secondary is-outlined"
(click)="openModalFindPoll()"
>
{{ 'config.discover' | translate }}
@ -67,7 +85,7 @@
<div class="top">
<button
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()"
>
{{ 'SENTENCES.Close' | translate }} <img class="icon fa" src="assets/icons/x_blue.svg" />
@ -112,7 +130,7 @@
<button
type="submit"
role="button"
class="button is-outlined is-fullwidth is-info button-submit"
class="is-outlined is-fullwidth is-info button-submit"
[disabled]="
!storageService.vote_stack.owner.email.length ||
nonexistent_email === storageService.vote_stack.owner.email
@ -129,10 +147,7 @@
<div class="poll-list">
<ul>
<li *ngFor="let p of storageService.userPolls">
<a
class="button is-fullwidth padded"
[routerLink]="'poll/' + p.custom_url + '/consultation'"
>
<a class="is-fullwidth padded" [routerLink]="'poll/' + p.custom_url + '/consultation'">
{{ p.title }}
<i class="fa fa-arrow-right pull-right"></i>
</a>

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

@ -1,6 +1,6 @@
<div class="admin-consultation min-height padded">
<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>
{{ 'resume.edit' | translate }}
</button>

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

@ -46,7 +46,7 @@
<button
(click)="pollService.removeAllTimes()"
*ngIf="pollService.timeList.length && false == pollService.allowSeveralHours"
class="btn is-warning marged"
class="is-warning marged"
id="remove_time_button"
>
<i class="fa fa-trash" aria-hidden="true"></i>
@ -55,7 +55,7 @@
<button
(click)="pollService.resetTimes()"
*ngIf="pollService.timeList.length && false == pollService.allowSeveralHours"
class="btn is-warning marged"
class="is-warning marged"
id="reset_time_button"
>
<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">
<span class="columns">
<span class="column">
<button class="btn is-primary" (click)="addChoice()">
<button class="is-primary" (click)="addChoice()">
<i class="fa fa-plus"></i>
Ajouter un choix
</button>
</span>
<span class="column pull-right">
<button class="btn is-warning" (click)="reinitChoices()">
<button class="is-warning" (click)="reinitChoices()">
<i class="fa fa-recycle"></i>
Réinitialiser
</button>
@ -22,7 +22,7 @@
<div class="form-row" [formGroup]="choice">
<div class="columns">
<div class="column">
<button class="btn btn-warning" (click)="deleteChoiceField(i)">
<button class="is-warning" (click)="deleteChoiceField(i)">
<i class="fa fa-times"></i>
</button>
{{ i * 1 + 1 }})

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

@ -70,14 +70,8 @@
.go-to-step,
.custom-action {
@extend .clickable;
color: $secondary_color;
padding: 1.5em;
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/elements/button.sass';
@import '../../../node_modules/bulma/sass/elements/container.sass';
@import '../../../node_modules/bulma/sass/elements/title.sass';
@import '../../../node_modules/bulma/sass/form/_all.sass';
//@import '../../../node_modules/bulma/sass/elements/title.sass';
//@import '../../../node_modules/bulma/sass/form/_all.sass';
@import '../../../node_modules/bulma/sass/components/navbar.sass';
@import '../../../node_modules/bulma/sass/layout/hero.sass';
@import '../../../node_modules/bulma/sass/layout/section.sass';

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

@ -1,42 +1,62 @@
.outlined {
&:focus {
outline: #6359cf;
outline: $outline-color;
outline-style: solid;
outline-offset: 0.15rem;
}
}
a {
@extend .outlined;
}
button,
.btn {
@extend .outlined;
@extend .button;
}
.btn--full {
@extend .is-block;
}
button {
&.is-white {
button,
a {
@extend .outlined;
text-align: center;
padding: 10px 30px;
border: 1px solid transparent;
box-sizing: border-box;
border-radius: 4px;
cursor: pointer;
}
.is-white {
&:hover {
background: $secondary_color;
color: $white;
}
}
&:hover {
outline-color: cadetblue;
}
}
.is-success {
.is-final {
background: #128149;
border-color: #128149;
color: #fff;
&:hover {
background: #07532d;
border-color: #07532d;
}
}
.is-primary {
background: #6359cf;
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 {
@ -48,7 +68,46 @@ button {
background: #fff;
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 {
@extend .is-primary;
}

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

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

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

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

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

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

2
src/styles/variables.scss
View File

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