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

step 3 delete buttons

Browse Source
This commit is contained in:
Tykayn 2021-12-21 15:20:41 +01:00 committed by tykayn
parent e35f4f06d7
commit 766ac2ad98
5 changed files with 101 additions and 75 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/app/features/administration/form/date/list/day/day-list.component.html
View File

@ -37,7 +37,7 @@
/>
<hr />
<div class="button delete-date is-block" (click)="dateChoices.splice(id, 1)">
<img class="icon" aria-hidden="true" src="assets/icons/trash.csv" />
<img class="icon" aria-hidden="true" src="assets/icons/trash.svg" />
Supprimer la date
</div>
<div *ngIf="hasSeveralHours" class="several-times">

168
src/app/features/administration/form/date/list/day/day-list.component.scss
View File

@ -1,84 +1,108 @@
@import '../../../../../../../styles/variables';
.day-list-container {
padding-bottom: 2rem;
}
.day-weekend {
background: #dccfed;
}
.button {
min-width: 9ch;
}
.icon {
margin-right: 1ch;
margin-left: 1ch;
display: inline-block;
}
.several-times {
padding-left: 2em;
width: 96.5%;
}
.date-choice {
margin-bottom: 0.5em;
border-radius: 0.25em;
background: $bg-grey;
.columns {
margin-bottom: 0;
.day-weekend {
background: #dccfed;
}
label {
font-weight: 600;
}
input,
.button {
width: 100%;
display: block;
min-width: 9ch;
}
hr {
margin: 0.5em -1em;
background: $rules;
.icon {
margin-right: 1ch;
margin-left: 1ch;
display: inline-block;
}
//&.day-weekend {
// background: mix($legend_color_2, $grey-lighter);
//}
//&:nth-child(odd) {
// background: $grey-lighter;
//
// &.day-weekend {
// background: mix($d-neutral, $grey-lighter);
// }
//}
}
.date-choice-item {
width: 75%;
}
.button .fa {
margin-left: 1ch;
display: inline-block;
}
.delete-date {
color: $secondary_color !important;
border: 0;
background: transparent;
.fa {
color: $secondary_color !important;
.several-times {
padding-left: 2em;
width: 96.5%;
}
&:hover {
color: $white;
background-color: $primary_color;
.date-choice {
margin-bottom: 0.5em;
border-radius: 0.25em;
background: $bg-grey;
.columns {
margin-bottom: 0;
}
label {
font-weight: 600;
}
input {
margin-bottom: 1rem;
}
input,
.button {
width: 100%;
display: block;
}
hr {
margin: 0.5em -1em;
background: $rules;
}
//&.day-weekend {
// background: mix($legend_color_2, $grey-lighter);
//}
//&:nth-child(odd) {
// background: $grey-lighter;
//
// &.day-weekend {
// background: mix($d-neutral, $grey-lighter);
// }
//}
}
.date-choice-item {
width: 75%;
}
.button .fa {
margin-left: 1ch;
display: inline-block;
}
.delete-date {
color: $primary_color;
border: 0;
background: transparent;
text-align: left;
.fa,
.icon {
float: left;
color: $primary_color;
margin-right: 1rem;
height: 1.25rem;
// filter converter is here https://codepen.io/sosuke/pen/Pjoqqp
filter: invert(48%) sepia(68%) saturate(6489%) hue-rotate(233deg) brightness(89%) contrast(81%);
}
&:hover {
color: $white;
background-color: $primary_color;
.fa,
.icon {
color: $white;
filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(80deg) brightness(104%) contrast(105%);
}
}
}
.format-helper {
font-style: normal;
font-weight: normal;
font-size: 14px;
line-height: 16px;
}
}
.format-helper {
font-style: normal;
font-weight: normal;
font-size: 14px;
line-height: 16px;
}

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

@ -27,7 +27,7 @@
<div class="text-date-list" *ngIf="!pollService.mode_calendar">
<app-day-list
[form]="pollService.form"
[hasSeveralHours]="environment.enable_several_hours && pollService.form.value.hasSeveralHours"
[hasSeveralHours]="environment.creation_display_hour_per_day && pollService.form.value.hasSeveralHours"
></app-day-list>
</div>
</div>

1
src/environments/environment.ts
View File

@ -38,7 +38,6 @@ export const environment = {
production: false,
showDemoWarning: false,
showStepperShortcuts: false,
enable_several_hours: false,
api: endpoints,
poll: poll_conf,

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

@ -305,6 +305,9 @@ mat-checkbox {
* {
max-width: $main-column-width-inner;
}
.icon {
width: 1rem;
}
}
// resume de la création de sondage