forked from tykayn/funky-framadate-front
style on hours main
This commit is contained in:
tykayn
parent
6f49099cdf
commit
0c8cb9248e
@ -3,7 +3,7 @@
|
||||
<div class="min-height">
|
||||
<app-errors-list [form]="pollService.form"></app-errors-list>
|
||||
|
||||
<div class="custom-day-time-slices" *ngIf="environment.creation_display_hour_per_day">
|
||||
<div class="custom-day-time-slices" *ngIf="1">
|
||||
<h1 class="title is-2">
|
||||
{{ 'hours.title' | translate }}
|
||||
</h1>
|
||||
@ -20,22 +20,23 @@
|
||||
<label class="pull-left" for="dateChoices_{{ id }}">
|
||||
{{ 'hours.element' | translate }} {{ id + 1 }}
|
||||
</label>
|
||||
|
||||
<input class="input" type="text" id="dateChoices_{{ id }}" [(ngModel)]="timeSlice.literal" />
|
||||
<button
|
||||
[attr.aria-label]="'choices.delete' | translate"
|
||||
class="button is-full has-no-border delete-hour pull-right"
|
||||
class="has-no-border delete-hour"
|
||||
(click)="dayChoice.timeSlices.splice(id, 1)"
|
||||
>
|
||||
{{ 'choices.delete' | translate }}
|
||||
<img src="assets/icons/trash-2.svg" class="icon" />
|
||||
<!-- {{ 'choices.delete' | translate }}-->
|
||||
<img src="assets/icons/trash-2.svg" class="icon is-filtered-icon-primary" />
|
||||
</button>
|
||||
<input class="input" type="text" id="dateChoices_{{ id }}" [(ngModel)]="timeSlice.literal" />
|
||||
</div>
|
||||
<div class="add-time-choice">
|
||||
<button
|
||||
class="has-text-primary button has-no-border is-fullwidth has-text-left"
|
||||
class="has-text-primary has-no-border is-large-button has-text-left has-background-transparent has-background-plus has-background-icon-left is-filtered-icon-primary"
|
||||
(click)="addChoiceForDay(dayChoice)"
|
||||
>
|
||||
<img class="icon" aria-hidden="true" src="assets/icons/plus-circle.svg" />
|
||||
<!-- <img class="icon is-filtered-icon-primary" aria-hidden="true" src="assets/icons/plus-circle.svg" />-->
|
||||
{{ 'hours.add' | translate }}
|
||||
</button>
|
||||
</div>
|
||||
@ -150,7 +151,7 @@
|
||||
</ng-template>
|
||||
<ng-template pTemplate="footer">
|
||||
<div class="columns">
|
||||
<div class="column has-no-padding">
|
||||
<div class="column has-no-padding time-slice-list-of-a-day">
|
||||
<button
|
||||
class="button is-primary is-fullwidth pull-right has-text-white"
|
||||
(click)="applyTimeSlicesToDateChoices()"
|
||||
|
||||
@ -1,48 +1,64 @@
|
||||
@import '../../../../../../styles/variables';
|
||||
@import '../../../../../../styles/dev-utilities/helpers';
|
||||
|
||||
.time-slice-list-of-a-day {
|
||||
label {
|
||||
line-height: 2.25rem;
|
||||
.custom-day-time-slices {
|
||||
.heading-day-choice {
|
||||
font-size: 1.25rem;
|
||||
line-height: 1.25rem;
|
||||
color: $d-black;
|
||||
font-weight: 700;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.time-slice-list-of-a-day {
|
||||
label {
|
||||
line-height: 2.25rem;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
input {
|
||||
width: calc(100% - 2rem);
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.button {
|
||||
color: $primary_color;
|
||||
|
||||
.icon {
|
||||
margin-right: 1rem;
|
||||
fill: $primary_color;
|
||||
}
|
||||
}
|
||||
|
||||
#close_dialog {
|
||||
border: 0;
|
||||
color: $primary !important;
|
||||
|
||||
.icon {
|
||||
margin-left: 1rem;
|
||||
height: 1.5em;
|
||||
width: 1.5em;
|
||||
}
|
||||
}
|
||||
|
||||
.add-time-choice {
|
||||
margin-top: 0.5rem;
|
||||
|
||||
.button {
|
||||
justify-content: inherit;
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.delete-hour {
|
||||
background: transparent;
|
||||
font-size: 0.8rem;
|
||||
width: 2rem;
|
||||
padding: 0;
|
||||
float: right;
|
||||
margin-top: -3rem;
|
||||
margin-right: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.button {
|
||||
color: $primary_color;
|
||||
|
||||
.icon {
|
||||
margin-right: 1rem;
|
||||
fill: $primary_color;
|
||||
}
|
||||
}
|
||||
|
||||
#close_dialog {
|
||||
border: 0;
|
||||
color: $primary !important;
|
||||
|
||||
.icon {
|
||||
margin-left: 1rem;
|
||||
height: 1.5em;
|
||||
width: 1.5em;
|
||||
}
|
||||
}
|
||||
|
||||
.heading-day-choice {
|
||||
font-size: 1.25rem;
|
||||
line-height: 1.25rem;
|
||||
color: $d-black;
|
||||
font-weight: 700;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.add-time-choice {
|
||||
margin-top: 0.5rem;
|
||||
|
||||
.button {
|
||||
justify-content: inherit;
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
.delete-hour {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
@ -22,7 +22,7 @@ export class StepFourComponent implements OnInit {
|
||||
form: any;
|
||||
showSameTimeSlices: boolean = false;
|
||||
timeSlicesProposals: TimeSlices[] = timeSlicesProposals;
|
||||
display_same_hours_dialog: boolean = false;
|
||||
display_same_hours_dialog: boolean = true;
|
||||
|
||||
constructor(
|
||||
private dateUtilitiesService: DateUtilitiesService,
|
||||
|
||||
@ -91,3 +91,26 @@
|
||||
.has-no-padding {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.is-filtered-icon-primary {
|
||||
filter: invert(48%) sepia(68%) saturate(6489%) hue-rotate(233deg) brightness(89%) contrast(81%);
|
||||
}
|
||||
.is-large-button {
|
||||
width: 100%;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.has-no-padd-left {
|
||||
padding-left: 0;
|
||||
}
|
||||
.has-background-icon-left {
|
||||
padding-left: 33px;
|
||||
}
|
||||
// icone bg
|
||||
.has-background-transparent {
|
||||
background-color: transparent;
|
||||
}
|
||||
.has-background-plus {
|
||||
background: url('/assets/icons/plus-circle.svg') no-repeat left center;
|
||||
//background: $d-blue30 url('/assets/img/kind_classic.svg') no-repeat 19px center;
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user