Merge branch 'thubrecht/datepicker' into 'master'
Thubrecht/datepicker Closes #22 See merge request klub-dev-ens/annuaire!18
This commit is contained in:
Martin Pepin
commit
846a7548d1
11 changed files with 733 additions and 39 deletions
|
|
@ -144,7 +144,7 @@ TIME_ZONE = "UTC"
|
|||
|
||||
USE_I18N = True
|
||||
|
||||
USE_L10N = True
|
||||
USE_L10N = False
|
||||
|
||||
USE_TZ = True
|
||||
|
||||
|
|
|
|||
|
|
@ -6,6 +6,11 @@ from fiches.models import Address, Department, Mail, Phone, Profile, Social
|
|||
|
||||
|
||||
class ProfileForm(forms.ModelForm):
|
||||
birth_date = forms.DateField(
|
||||
input_formats=["%Y-%m-%d"],
|
||||
required=False,
|
||||
)
|
||||
|
||||
class Meta:
|
||||
model = Profile
|
||||
exclude = ["user"]
|
||||
|
|
@ -28,10 +33,10 @@ class SearchForm(forms.Form):
|
|||
raise forms.ValidationError(_("Tous les champs sont vides"), code="invalid")
|
||||
|
||||
|
||||
PhoneFormSet = inlineformset_factory(Profile, Phone, exclude=[])
|
||||
PhoneFormSet = inlineformset_factory(Profile, Phone, exclude=[], extra=0)
|
||||
|
||||
SocialFormSet = inlineformset_factory(Profile, Social, exclude=[])
|
||||
SocialFormSet = inlineformset_factory(Profile, Social, exclude=[], extra=0)
|
||||
|
||||
MailFormSet = inlineformset_factory(Profile, Mail, exclude=[])
|
||||
MailFormSet = inlineformset_factory(Profile, Mail, exclude=[], extra=0)
|
||||
|
||||
AddressFormSet = inlineformset_factory(Profile, Address, exclude=[])
|
||||
AddressFormSet = inlineformset_factory(Profile, Address, exclude=[], extra=0)
|
||||
|
|
|
|||
|
|
@ -65,7 +65,7 @@ body {
|
|||
padding: 0 0 0 10vw;
|
||||
background-color: #1f0e19;
|
||||
box-shadow: 4px 0 0 rgba(31, 14, 25, 0.3);
|
||||
z-index: 1000;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
#main {
|
||||
|
|
@ -75,7 +75,7 @@ body {
|
|||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
background-color: #301827;
|
||||
z-index: 500;
|
||||
z-index: 5;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 1200px) {
|
||||
|
|
|
|||
258
fiches/static/fiches/css/datepicker.css
Normal file
258
fiches/static/fiches/css/datepicker.css
Normal file
|
|
@ -0,0 +1,258 @@
|
|||
/*
|
||||
MIT License
|
||||
|
||||
Copyright (c) 2019 Hidenao Miyamoto
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
of this software and associated documentation files (the "Software"), to deal
|
||||
in the Software without restriction, including without limitation the rights
|
||||
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
copies of the Software, and to permit persons to whom the Software is
|
||||
furnished to do so, subject to the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be included in all
|
||||
copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
||||
SOFTWARE.
|
||||
*/
|
||||
.datepicker {
|
||||
display: none;
|
||||
}
|
||||
.datepicker.active {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.datepicker-dropdown {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 20;
|
||||
padding-top: 4px;
|
||||
}
|
||||
.datepicker-dropdown.datepicker-orient-top {
|
||||
padding-top: 0;
|
||||
padding-bottom: 4px;
|
||||
}
|
||||
|
||||
.datepicker-picker {
|
||||
display: inline-block;
|
||||
border-radius: 0px;
|
||||
background-color: #301827;
|
||||
}
|
||||
.datepicker-dropdown .datepicker-picker {
|
||||
box-shadow: 0 2px 3px rgba(10, 10, 10, 0.1), 0 0 0 1px rgba(10, 10, 10, 0.1);
|
||||
}
|
||||
.datepicker-picker span {
|
||||
display: block;
|
||||
flex: 1;
|
||||
border: 0;
|
||||
border-radius: 0px;
|
||||
cursor: default;
|
||||
text-align: center;
|
||||
-webkit-touch-callout: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.datepicker-main {
|
||||
padding: 2px;
|
||||
}
|
||||
|
||||
.datepicker-footer {
|
||||
box-shadow: inset 0 1px 1px rgba(10, 10, 10, 0.1);
|
||||
background-color: whitesmoke;
|
||||
}
|
||||
|
||||
.datepicker-grid, .datepicker-view .days-of-week, .datepicker-view, .datepicker-controls {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.datepicker-grid {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.datepicker-view .days .datepicker-cell, .datepicker-view .dow {
|
||||
flex-basis: 14.2857142857%;
|
||||
}
|
||||
|
||||
.datepicker-view.datepicker-grid .datepicker-cell {
|
||||
flex-basis: 25%;
|
||||
}
|
||||
|
||||
.datepicker-cell, .datepicker-view .week {
|
||||
height: 2.25rem;
|
||||
line-height: 2.25rem;
|
||||
}
|
||||
|
||||
.datepicker-title {
|
||||
box-shadow: inset 0 -1px 1px rgba(10, 10, 10, 0.1);
|
||||
background-color: #1f0e19;
|
||||
padding: 0.375rem 0.75rem;
|
||||
text-align: center;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.datepicker-header .datepicker-controls {
|
||||
padding: 2px 2px 0;
|
||||
}
|
||||
.datepicker-controls .button {
|
||||
display: inline-flex;
|
||||
position: relative;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin: 0;
|
||||
border: 1px solid #dbdbdb;
|
||||
border-radius: 0px;
|
||||
box-shadow: none;
|
||||
background-color: white;
|
||||
cursor: pointer;
|
||||
padding: calc(0.375em - 1px) 0.75em;
|
||||
height: 2.25em;
|
||||
vertical-align: top;
|
||||
text-align: center;
|
||||
line-height: 1.5;
|
||||
white-space: nowrap;
|
||||
color: #363636;
|
||||
font-size: 1rem;
|
||||
}
|
||||
.datepicker-controls .button:focus, .datepicker-controls .button:active {
|
||||
outline: none;
|
||||
}
|
||||
.datepicker-controls .button:hover {
|
||||
border-color: #b5b5b5;
|
||||
color: #363636;
|
||||
}
|
||||
.datepicker-controls .button:focus {
|
||||
border-color: #3273dc;
|
||||
color: #363636;
|
||||
}
|
||||
.datepicker-controls .button:focus:not(:active) {
|
||||
box-shadow: 0 0 0 0.125em rgba(50, 115, 220, 0.25);
|
||||
}
|
||||
.datepicker-controls .button:active {
|
||||
border-color: #4a4a4a;
|
||||
color: #363636;
|
||||
}
|
||||
.datepicker-controls .button[disabled] {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
.datepicker-header .datepicker-controls .button {
|
||||
border-color: transparent;
|
||||
font-weight: bold;
|
||||
}
|
||||
.datepicker-header .datepicker-controls .button:hover {
|
||||
background-color: #f9f9f9;
|
||||
}
|
||||
.datepicker-header .datepicker-controls .button:focus:not(:active) {
|
||||
box-shadow: 0 0 0 0.125em rgba(255, 255, 255, 0.25);
|
||||
}
|
||||
.datepicker-header .datepicker-controls .button:active {
|
||||
background-color: #f2f2f2;
|
||||
}
|
||||
.datepicker-header .datepicker-controls .button[disabled] {
|
||||
box-shadow: none;
|
||||
}
|
||||
.datepicker-footer .datepicker-controls .button {
|
||||
margin: calc(0.375rem - 1px) 0.375rem;
|
||||
border-radius: 0px;
|
||||
width: 100%;
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
.datepicker-controls .view-switch {
|
||||
flex: auto;
|
||||
}
|
||||
.datepicker-controls .prev-btn,
|
||||
.datepicker-controls .next-btn {
|
||||
padding-right: 0.375rem;
|
||||
padding-left: 0.375rem;
|
||||
width: 2.25rem;
|
||||
}
|
||||
.datepicker-controls .prev-btn.disabled,
|
||||
.datepicker-controls .next-btn.disabled {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.datepicker-view .dow {
|
||||
height: 1.5rem;
|
||||
line-height: 1.5rem;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
.datepicker-view .week {
|
||||
width: 2.25rem;
|
||||
color: #b5b5b5;
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
@media (max-width: 22.5rem) {
|
||||
.datepicker-view .week {
|
||||
width: 1.96875rem;
|
||||
}
|
||||
}
|
||||
|
||||
.datepicker-grid {
|
||||
width: 15.75rem;
|
||||
}
|
||||
@media (max-width: 22.5rem) {
|
||||
.calendar-weeks + .days .datepicker-grid {
|
||||
width: 13.78125rem;
|
||||
}
|
||||
}
|
||||
|
||||
.datepicker-cell:not(.disabled):hover {
|
||||
background-color: #281420;
|
||||
cursor: pointer;
|
||||
}
|
||||
.datepicker-cell.focused:not(.selected) {
|
||||
background-color: #1f1019;
|
||||
}
|
||||
.datepicker-cell.selected, .datepicker-cell.selected:hover {
|
||||
background-color: #3b1e31;
|
||||
color: #ffdc00;
|
||||
font-weight: 600;
|
||||
}
|
||||
.datepicker-cell.disabled {
|
||||
color: #dbdbdb;
|
||||
}
|
||||
.datepicker-cell.prev:not(.disabled), .datepicker-cell.next:not(.disabled) {
|
||||
color: #7a7a7a;
|
||||
}
|
||||
.datepicker-cell.prev.selected, .datepicker-cell.next.selected {
|
||||
color: #ccb000;
|
||||
}
|
||||
.datepicker-cell.highlighted:not(.selected):not(.today) {
|
||||
border-radius: 0;
|
||||
background-color: #3b1e31;
|
||||
}
|
||||
.datepicker-cell.highlighted:not(.selected):not(.today):not(.disabled):hover {
|
||||
background-color: #331a2a;
|
||||
}
|
||||
.datepicker-cell.highlighted:not(.selected):not(.today).focused {
|
||||
background-color: #1f1019;
|
||||
}
|
||||
.datepicker-cell.today:not(.selected) {
|
||||
background-color: #3b1e31;
|
||||
}
|
||||
.datepicker-cell.today:not(.selected):not(.disabled) {
|
||||
color: #fff;
|
||||
}
|
||||
.datepicker-cell.today.focused:not(.selected) {
|
||||
background-color: #331a2a;
|
||||
}
|
||||
.datepicker-view.datepicker-grid .datepicker-cell {
|
||||
height: 4.5rem;
|
||||
line-height: 4.5rem;
|
||||
}
|
||||
|
||||
.datepicker-input.in-edit {
|
||||
border-color: #2366d1;
|
||||
}
|
||||
.datepicker-input.in-edit:focus, .datepicker-input.in-edit:active {
|
||||
box-shadow: 0 0 0.25em 0.25em rgba(35, 102, 209, 0.2);
|
||||
}
|
||||
|
||||
/*# sourceMappingURL=datepicker.css.map */
|
||||
1
fiches/static/fiches/js/datepicker.min.js
vendored
Normal file
1
fiches/static/fiches/js/datepicker.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
|
|
@ -29,7 +29,7 @@ body {
|
|||
padding: 0 0 0 10vw;
|
||||
background-color: colors.$aside-background;
|
||||
box-shadow: 4px 0 0 colors.$shadow;
|
||||
z-index: 1000;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
#main {
|
||||
|
|
@ -39,7 +39,7 @@ body {
|
|||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
background-color: colors.$main-background;
|
||||
z-index: 500;
|
||||
z-index: 5;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 1200px) {
|
||||
|
|
|
|||
414
fiches/static/fiches/scss/datepicker.scss
Normal file
414
fiches/static/fiches/scss/datepicker.scss
Normal file
|
|
@ -0,0 +1,414 @@
|
|||
/*
|
||||
MIT License
|
||||
|
||||
Copyright (c) 2019 Hidenao Miyamoto
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
of this software and associated documentation files (the "Software"), to deal
|
||||
in the Software without restriction, including without limitation the rights
|
||||
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
copies of the Software, and to permit persons to whom the Software is
|
||||
furnished to do so, subject to the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be included in all
|
||||
copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
||||
SOFTWARE.
|
||||
*/
|
||||
|
||||
//== foundational variables ==//
|
||||
$black: hsl(0, 0%, 4%) !default;
|
||||
$white: hsl(0, 0%, 100%) !default;
|
||||
$light: hsl(0, 0%, 96%) !default; // white-ter
|
||||
$dark: hsl(0, 0%, 21%) !default; // grey-darker
|
||||
$link: hsl(217, 71%, 53%) !default; // blue
|
||||
|
||||
$grey-dark: lighten($black, 25%) !default;
|
||||
$grey-light: darken($light, 25%) !default;
|
||||
$grey-lighter: darken($light, 10%) !default;
|
||||
|
||||
//== datepicker variables ==//
|
||||
$dp-background-color: #301827 !default;
|
||||
$dp-border-color: #1f0e19 !default;
|
||||
$dp-border-radius: 0px !default;
|
||||
$dp-border-radius-small: 0px !default;
|
||||
$dp-line-height-base: 1.5 !default;
|
||||
$dp-font-size-normal: 1rem !default;
|
||||
$dp-font-size-small: 0.75rem !default;
|
||||
$dp-font-weight-semibold: 600 !default;
|
||||
$dp-font-weight-bold: 700 !default;
|
||||
$dp-dropdown-offset: 4px !default;
|
||||
$dp-dropdown-shadow: 0 2px 3px rgba($black, 0.1), 0 0 0 1px rgba($black, 0.1) !default;
|
||||
$dp-dropdown-z: 20 !default;
|
||||
|
||||
$dp-title-background-color: #1f0e19 !default;
|
||||
|
||||
$dp-cell-size-base: 2.25rem !default;
|
||||
$dp-cell-focus-background-color: darken(#301827, 5%) !default;
|
||||
$dp-cell-prevnext-color: hsl(0, 0%, 48%) !default; // grey
|
||||
$dp-cell-disabled-color: $grey-lighter !default;
|
||||
$dp-cell-selected-background-color: #3b1e31 !default;
|
||||
$dp-cell-selected-color: #ffdc00 !default; // link(blue)-invert
|
||||
$dp-cell-selected-font-weight: 600 !default;
|
||||
$dp-cell-today-background-color: #3b1e31 !default; // turquoise (primary)
|
||||
$dp-cell-today-color: #fff !default; // turquoise-invert
|
||||
$dp-cell-highlighted-background-color: #3b1e31 !default;
|
||||
$dp-range-start-end-background-color: $grey-light !default;
|
||||
$dp-range-start-end-color: $dp-cell-selected-color !default;
|
||||
$dp-range-background-color: $grey-lighter !default;
|
||||
$dp-range-today-background-color: $dp-cell-today-background-color !default;
|
||||
$dp-week-color: $grey-light !default;
|
||||
|
||||
$dp-footer-background-color: $light !default;
|
||||
|
||||
$dp-input-in-edit-border-color: darken($link, 5%) !default;
|
||||
$dp-input-in-edit-focus-box-shadow-size: 0 0 0.25em 0.25em !default;
|
||||
|
||||
//== non-configurable variables ==//
|
||||
$dp-cell-shrink-threshold: $dp-cell-size-base * 10; // = 8 * 1.25
|
||||
$dp-cell-shrinked-width: $dp-cell-size-base * 7 / 8;
|
||||
|
||||
//== mixins ==//
|
||||
@mixin dp-header-button-common {
|
||||
border-color: transparent;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
@mixin dp-footer-button-common {
|
||||
margin: calc(0.375rem - 1px) 0.375rem;
|
||||
border-radius: $dp-border-radius-small;
|
||||
width: 100%;
|
||||
font-size: $dp-font-size-small;
|
||||
}
|
||||
|
||||
//== styles ==//
|
||||
.datepicker {
|
||||
display: none;
|
||||
|
||||
&.active {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.datepicker-dropdown {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: $dp-dropdown-z;
|
||||
padding-top: $dp-dropdown-offset;
|
||||
|
||||
&.datepicker-orient-top {
|
||||
padding-top: 0;
|
||||
padding-bottom: $dp-dropdown-offset;
|
||||
}
|
||||
}
|
||||
|
||||
.datepicker-picker {
|
||||
display: inline-block;
|
||||
border-radius: $dp-border-radius;
|
||||
background-color: $dp-background-color;
|
||||
|
||||
.datepicker-dropdown & {
|
||||
box-shadow: $dp-dropdown-shadow;
|
||||
}
|
||||
|
||||
span {
|
||||
display: block;
|
||||
flex: 1;
|
||||
border: 0;
|
||||
border-radius: $dp-border-radius;
|
||||
cursor: default;
|
||||
text-align: center;
|
||||
-webkit-touch-callout: none;
|
||||
user-select: none;
|
||||
}
|
||||
}
|
||||
|
||||
.datepicker-main {
|
||||
padding: 2px;
|
||||
}
|
||||
|
||||
.datepicker-footer {
|
||||
box-shadow: inset 0 1px 1px rgba($black, 0.1);
|
||||
background-color: $dp-footer-background-color;
|
||||
}
|
||||
|
||||
%flex-container {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
%flex-wrap {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
%flex-basis-day {
|
||||
flex-basis: percentage(1 / 7);
|
||||
}
|
||||
|
||||
%flex-basis-month-year {
|
||||
flex-basis: 25%;
|
||||
}
|
||||
|
||||
%datepicker-cell-height {
|
||||
height: $dp-cell-size-base;
|
||||
line-height: $dp-cell-size-base;
|
||||
}
|
||||
|
||||
.datepicker-title {
|
||||
box-shadow: inset 0 -1px 1px rgba($black, 0.1);
|
||||
background-color: $dp-title-background-color;
|
||||
padding: 0.375rem 0.75rem;
|
||||
text-align: center;
|
||||
font-weight: $dp-font-weight-bold;
|
||||
}
|
||||
|
||||
.datepicker-controls {
|
||||
@extend %flex-container;
|
||||
|
||||
.datepicker-header & {
|
||||
padding: 2px 2px 0;
|
||||
}
|
||||
|
||||
@if mixin-exists(dp-button) {
|
||||
@include dp-button;
|
||||
} @else {
|
||||
.button {
|
||||
$button-color: $dark;
|
||||
$button-background-color: $white;
|
||||
|
||||
$button-border-color: $grey-lighter;
|
||||
$button-border-width: 1px;
|
||||
|
||||
$button-padding-vertical: calc(0.375em - #{$button-border-width});
|
||||
$button-padding-horizontal: 0.75em;
|
||||
|
||||
$button-hover-color: $dark; // link-hover
|
||||
$button-hover-border-color: $grey-light; // link-hover-border
|
||||
|
||||
$button-focus-color: $dark; // link-focus
|
||||
$button-focus-border-color: $link; // link-focus-border
|
||||
$button-focus-box-shadow-size: 0 0 0 0.125em;
|
||||
$button-focus-box-shadow-color: rgba($link, 0.25);
|
||||
|
||||
$button-active-color: $dark; // link-active
|
||||
$button-active-border-color: $grey-dark; // link-active-border
|
||||
|
||||
display: inline-flex;
|
||||
position: relative;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin: 0;
|
||||
border: $button-border-width solid $button-border-color;
|
||||
border-radius: $dp-border-radius; // control-radius
|
||||
box-shadow: none;
|
||||
background-color: $button-background-color;
|
||||
cursor: pointer;
|
||||
padding: $button-padding-vertical $button-padding-horizontal;
|
||||
height: 2.25em; // control-height
|
||||
vertical-align: top;
|
||||
text-align: center;
|
||||
line-height: $dp-line-height-base; // control-line-height
|
||||
white-space: nowrap;
|
||||
color: $button-color;
|
||||
font-size: $dp-font-size-normal; // size-normal
|
||||
|
||||
&:focus,
|
||||
&:active {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
border-color: $button-hover-border-color;
|
||||
color: $button-hover-color;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
border-color: $button-focus-border-color;
|
||||
color: $button-focus-color;
|
||||
|
||||
&:not(:active) {
|
||||
box-shadow: $button-focus-box-shadow-size $button-focus-box-shadow-color;
|
||||
}
|
||||
}
|
||||
|
||||
&:active {
|
||||
border-color: $button-active-border-color;
|
||||
color: $button-active-color;
|
||||
}
|
||||
|
||||
&[disabled] {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.datepicker-header & {
|
||||
@include dp-header-button-common;
|
||||
|
||||
&:hover {
|
||||
background-color: darken($white, 2.5%);
|
||||
}
|
||||
|
||||
&:focus {
|
||||
&:not(:active) {
|
||||
box-shadow: 0 0 0 0.125em rgba($white, 0.25);
|
||||
}
|
||||
}
|
||||
|
||||
&:active {
|
||||
background-color: darken($white, 5%);
|
||||
}
|
||||
|
||||
&[disabled] {
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
.datepicker-footer & {
|
||||
@include dp-footer-button-common;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.view-switch {
|
||||
flex: auto;
|
||||
}
|
||||
|
||||
.prev-btn,
|
||||
.next-btn {
|
||||
padding-right: 0.375rem;
|
||||
padding-left: 0.375rem;
|
||||
width: $dp-cell-size-base;
|
||||
|
||||
&.disabled {
|
||||
visibility: hidden;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.datepicker-view {
|
||||
@extend %flex-container;
|
||||
|
||||
.days-of-week {
|
||||
@extend %flex-container;
|
||||
}
|
||||
|
||||
.dow {
|
||||
@extend %flex-basis-day;
|
||||
height: $dp-font-size-normal * $dp-line-height-base;
|
||||
line-height: $dp-font-size-normal * $dp-line-height-base;
|
||||
font-size: ($dp-font-size-small + $dp-font-size-normal) / 2;
|
||||
font-weight: $dp-font-weight-bold;
|
||||
}
|
||||
|
||||
.week {
|
||||
@extend %datepicker-cell-height;
|
||||
width: $dp-cell-size-base;
|
||||
color: $dp-week-color;
|
||||
font-size: $dp-font-size-small;
|
||||
|
||||
@media (max-width: $dp-cell-shrink-threshold) {
|
||||
width: $dp-cell-shrinked-width;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.datepicker-grid {
|
||||
@extend %flex-container;
|
||||
@extend %flex-wrap;
|
||||
|
||||
width: $dp-cell-size-base * 7;
|
||||
|
||||
@media (max-width: $dp-cell-shrink-threshold) {
|
||||
.calendar-weeks + .days & {
|
||||
width: $dp-cell-shrinked-width * 7;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.datepicker-cell {
|
||||
@extend %datepicker-cell-height;
|
||||
|
||||
&:not(.disabled):hover {
|
||||
background-color: darken($dp-background-color, 2.5%);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
&.focused:not(.selected) {
|
||||
background-color: $dp-cell-focus-background-color;
|
||||
}
|
||||
|
||||
&.selected {
|
||||
&,
|
||||
&:hover {
|
||||
background-color: $dp-cell-selected-background-color;
|
||||
color: $dp-cell-selected-color;
|
||||
font-weight: $dp-cell-selected-font-weight;
|
||||
}
|
||||
}
|
||||
|
||||
&.disabled {
|
||||
color: $dp-cell-disabled-color;
|
||||
}
|
||||
|
||||
&.prev,
|
||||
&.next {
|
||||
&:not(.disabled) {
|
||||
color: $dp-cell-prevnext-color;
|
||||
}
|
||||
|
||||
&.selected {
|
||||
color: darken($dp-cell-selected-color, 10%);
|
||||
}
|
||||
}
|
||||
|
||||
&.highlighted:not(.selected):not(.today) {
|
||||
border-radius: 0;
|
||||
background-color: $dp-cell-highlighted-background-color;
|
||||
|
||||
&:not(.disabled):hover {
|
||||
background-color: darken($dp-cell-highlighted-background-color, 2.5%);
|
||||
}
|
||||
|
||||
&.focused {
|
||||
background-color: $dp-cell-focus-background-color;
|
||||
}
|
||||
}
|
||||
|
||||
&.today {
|
||||
&:not(.selected) {
|
||||
background-color: $dp-cell-today-background-color;
|
||||
|
||||
&:not(.disabled) {
|
||||
color: $dp-cell-today-color;
|
||||
}
|
||||
}
|
||||
|
||||
&.focused:not(.selected) {
|
||||
background-color: darken($dp-cell-today-background-color, 2.5%);
|
||||
}
|
||||
}
|
||||
|
||||
.datepicker-view .days & {
|
||||
@extend %flex-basis-day;
|
||||
}
|
||||
|
||||
.datepicker-view.datepicker-grid & {
|
||||
@extend %flex-basis-month-year;
|
||||
height: $dp-cell-size-base * 2;
|
||||
line-height: $dp-cell-size-base * 2;
|
||||
}
|
||||
}
|
||||
|
||||
.datepicker-input.in-edit {
|
||||
border-color: $dp-input-in-edit-border-color;
|
||||
|
||||
&:focus,
|
||||
&:active {
|
||||
box-shadow: $dp-input-in-edit-focus-box-shadow-size rgba($dp-input-in-edit-border-color, 0.2);
|
||||
}
|
||||
}
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
{% load i18n %}
|
||||
{% load staticfiles %}
|
||||
{% load static %}
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
|
|
@ -11,6 +11,7 @@
|
|||
</title>
|
||||
<link rel="stylesheet" type="text/css" href="{% static "fiches/css/normalize.css" %}" />
|
||||
<link rel="stylesheet" type="text/css" href="{% static "fiches/css/annuaire.css" %}" />
|
||||
<link rel="stylesheet" type="text/css" href="{% static "fiches/css/datepicker.css" %}" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
|
@ -77,7 +78,7 @@
|
|||
{% endblock %}
|
||||
</div>
|
||||
</div>
|
||||
{% block extra_js %}{% endblock %}
|
||||
</body>
|
||||
{% block extra_js %}{% endblock %}
|
||||
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
{% extends "fiches/base.html" %}
|
||||
{% load i18n %}
|
||||
{% load i18n l10n %}
|
||||
|
||||
{% block content %}
|
||||
|
||||
|
|
@ -40,7 +40,9 @@
|
|||
<div class="birthdate">
|
||||
<span class="label">{% trans "Date de naissance" %}</span>
|
||||
<span class="separator"></span>
|
||||
{% localize on %}
|
||||
<span class="value">{{ profile.birth_date }}</span>
|
||||
{% endlocalize %}
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +1,5 @@
|
|||
{% extends "fiches/base.html" %}
|
||||
{% load i18n %}
|
||||
{% load staticfiles %}
|
||||
{% load i18n static %}
|
||||
|
||||
{% block content %}
|
||||
|
||||
|
|
@ -21,6 +20,10 @@
|
|||
<label for="id_pronoun">{% trans "Pronom(s) utilisé(s) :" %}</label>
|
||||
{{ form.pronoun }}
|
||||
</div>
|
||||
<div class="form-entry">
|
||||
<label for="id_birth_date">{% trans "Date de naissance :" %}</label>
|
||||
{{ form.birth_date }}
|
||||
</div>
|
||||
<div class="form-entry">
|
||||
<label for="id_picture">{% trans "Photo :" %}</label>
|
||||
<div id="photo-edit-form" class="wide-form-entry">
|
||||
|
|
@ -29,8 +32,6 @@
|
|||
<a href="{{ form.instance.picture.url }}">
|
||||
<img src="{{ form.instance.picture.url }}">
|
||||
</a>
|
||||
{% else %}
|
||||
<img>
|
||||
{% endif %}
|
||||
</div>
|
||||
<div class="photo-edit-controls">
|
||||
|
|
@ -67,10 +68,6 @@
|
|||
{{ form.experiences }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-entry">
|
||||
<label for="id_birth_date">{% trans "Date de naissance :" %}</label>
|
||||
{{ form.birth_date }}
|
||||
</div>
|
||||
<div class="form-entry">
|
||||
<label for="id_thurne">{% trans "Thurne :" %}</label>
|
||||
{{ form.thurne }}
|
||||
|
|
@ -116,5 +113,14 @@
|
|||
{% endblock %}
|
||||
|
||||
{% block extra_js %}
|
||||
<script type="text/javascript" src="{% static "fiches/js/forms.js" %}"></script>
|
||||
<script src="{% static "fiches/js/forms.js" %}"></script>
|
||||
<script src="{% static "fiches/js/datepicker.min.js" %}"></script>
|
||||
<script>
|
||||
const elem = document.querySelector('input[name="birth_date"]');
|
||||
const datepicker = new Datepicker(elem, {
|
||||
format: "yyyy-mm-dd",
|
||||
defaultViewDate: "{{ default_birth_date }}",
|
||||
});
|
||||
|
||||
</script>
|
||||
{% endblock %}
|
||||
|
|
|
|||
|
|
@ -1,28 +1,29 @@
|
|||
from django.shortcuts import render
|
||||
from django.shortcuts import get_object_or_404, redirect
|
||||
from datetime import date
|
||||
|
||||
from django.contrib.auth.decorators import login_required
|
||||
from fiches.models import Profile, Phone, Social, Mail, Address
|
||||
from fiches.forms import (
|
||||
ProfileForm,
|
||||
SearchForm,
|
||||
PhoneFormSet,
|
||||
SocialFormSet,
|
||||
MailFormSet,
|
||||
AddressFormSet,
|
||||
)
|
||||
from django.core.mail import send_mail
|
||||
from django.db.models import Q
|
||||
from django.forms import formset_factory
|
||||
from django.forms.models import model_to_dict
|
||||
from django.http import HttpResponseRedirect
|
||||
from django.shortcuts import get_object_or_404, redirect, render
|
||||
from django.template.loader import render_to_string
|
||||
from django.urls import reverse
|
||||
from django.db.models import Q
|
||||
from django.utils import timezone
|
||||
from django.utils.decorators import method_decorator
|
||||
from datetime import timedelta
|
||||
from django.core.mail import send_mail
|
||||
from django.template.loader import render_to_string
|
||||
from django.views.generic.detail import DetailView
|
||||
from django.views.generic.list import ListView
|
||||
from django.views.generic.edit import FormView, UpdateView
|
||||
from django.http import HttpResponseRedirect
|
||||
from django.views.generic.list import ListView
|
||||
|
||||
from fiches.forms import (
|
||||
AddressFormSet,
|
||||
MailFormSet,
|
||||
PhoneFormSet,
|
||||
ProfileForm,
|
||||
SearchForm,
|
||||
SocialFormSet,
|
||||
)
|
||||
from fiches.models import Address, Mail, Phone, Profile, Social
|
||||
|
||||
|
||||
@method_decorator(login_required, name="dispatch")
|
||||
|
|
@ -109,6 +110,12 @@ class EditView(UpdateView):
|
|||
)
|
||||
)
|
||||
|
||||
def get_context_data(self, **kwargs):
|
||||
context = super().get_context_data(**kwargs)
|
||||
today = date.today()
|
||||
context["default_birth_date"] = today.replace(year=(today.year - 20)).isoformat()
|
||||
return context
|
||||
|
||||
def get_object(self):
|
||||
return self.request.user.profile
|
||||
|
||||
|
|
@ -116,7 +123,7 @@ class EditView(UpdateView):
|
|||
return reverse("fiche", args=(self.get_object().user,))
|
||||
|
||||
|
||||
@method_decorator(login_required, name="post")
|
||||
@method_decorator(login_required, name="dispatch")
|
||||
class HomeView(FormView):
|
||||
model = Profile
|
||||
template_name = "fiches/home.html"
|
||||
|
|
|
|||
Loading…
Reference in a new issue