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

remove border for cal, place label for text date input

Browse Source
This commit is contained in:
Tykayn 2021-12-09 11:48:42 +01:00 committed by tykayn
parent cdfff22967
commit e4ebebf0b6
5 changed files with 57 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -20,12 +20,10 @@
<!-- </span>--> <!-- </span>-->
<div class="columns"> <div class="columns">
<div class="column"> <div class="column">
<label for="dateChoices_{{ id }}"> <label class="pull-left" for="dateChoices_{{ id }}">
Date {{ id + 1 }} - {{ choice.date_object | date: 'E':'Europe/Paris':'fr_FR' }} Date {{ id + 1 }} - {{ choice.date_object | date: 'E':'Europe/Paris':'fr_FR' }}
</label> </label>
</div> <span class="format-helper pull-right">JJ/MM/AAAA</span>
<div class="column has-text-right">
<span class="format-helper">JJ/MM/AAAA</span>
</div> </div>
</div> </div>

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

@ -63,8 +63,20 @@
.delete-date { .delete-date {
color: $secondary_color !important; color: $secondary_color !important;
border: 0;
background: transparent;
.fa { .fa {
color: $secondary_color !important; color: $secondary_color !important;
} }
&:hover {
color: $white;
background-color: $primary_color;
}
}
.format-helper {
font-style: normal;
font-weight: normal;
font-size: 14px;
line-height: 16px;
} }

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

@ -2,11 +2,7 @@
<app-stepper [step_current]="3" [step_max]="pollService.step_max"></app-stepper> <app-stepper [step_current]="3" [step_max]="pollService.step_max"></app-stepper>
<app-errors-list [form]="pollService.form"></app-errors-list> <app-errors-list [form]="pollService.form"></app-errors-list>
<!-- sélecteur d'interface--> <!-- sélecteur d'interface-->
<button <button class="button is-fullwidth date-input-selector is-secondary" (click)="changeDateInputMode()">
class="button is-fullwidth date-input-selector is-secondary"
(click)="changeDateInputMode()"
[ngClass]="{ 'is-primary': !pollService.mode_calendar }"
>
<span *ngIf="pollService.mode_calendar"> <i class="fa fa-pencil"></i> Saisir les dates manuellement </span> <span *ngIf="pollService.mode_calendar"> <i class="fa fa-pencil"></i> Saisir les dates manuellement </span>
<span *ngIf="!pollService.mode_calendar"> <span *ngIf="!pollService.mode_calendar">
<i class="fa fa-calendar-o"></i> Saisir les dates dans le calendrier <i class="fa fa-calendar-o"></i> Saisir les dates dans le calendrier

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

@ -3,9 +3,26 @@
text-align: center; text-align: center;
} }
p-calendar,
.p-calendar {
display: block !important;
width: 100%;
max-width: 90vw;
}
.p-datepicker { .p-datepicker {
padding: 0.5em; padding: 0.5em;
margin: 1em auto; margin: 1em auto;
border: 0;
tbody,
thead,
tfoot tr,
td,
th {
border: 0 !important;
text-align: center;
}
.p-datepicker-title, .p-datepicker-title,
.p-datepicker-calendar thead tr th span { .p-datepicker-calendar thead tr th span {
@ -17,8 +34,8 @@
p-button, p-button,
button { button {
border: solid 1px $primary_color !important;
color: $primary_color !important; color: $primary_color !important;
&:hover { &:hover {
color: $white !important; color: $white !important;
background: $secondary_color !important; background: $secondary_color !important;
@ -30,7 +47,7 @@
margin-top: 0.5em; margin-top: 0.5em;
button { button {
min-width: 15em; min-width: 5em;
} }
} }
@ -48,11 +65,20 @@
background: $white; background: $white;
} }
$cell-size: 30px;
.p-datepicker-calendar { .p-datepicker-calendar {
td {
width: $cell-size;
padding: 0.25rem;
}
td span, td span,
.p-ripple { .p-ripple {
padding: 1.5em 0.5em; margin: 0;
width: 3.5em; padding: 0.5em;
width: $cell-size;
height: $cell-size;
transition: all ease 0.5s; transition: all ease 0.5s;
background: $white; background: $white;
border: solid 1px $primary_color; border: solid 1px $primary_color;
@ -93,3 +119,13 @@
} }
} }
} }
.p-datepicker-buttonbar {
.p-button {
width: 50%;
}
}
.p-datepicker-header,
.p-datepicker .p-datepicker-buttonbar {
border: 0 !important;
}

2
src/styles/variables.scss
View File

@ -46,7 +46,7 @@ $success_color: $d-success-text;
$primary_color: $d-primary; $primary_color: $d-primary;
$primary: $d-primary; $primary: $d-primary;
$secondary_color: $d-primary-intense; $secondary_color: $d-primary-intense;
$bg-grey: $d-grey; $bg-grey: $d-blue30;
$font_color: $black; $font_color: $black;
$logo_color: $d-primary; $logo_color: $d-primary;
$logo_color_2: $d-primary-intense; $logo_color_2: $d-primary-intense;