diff --git a/annuaire/settings.py b/annuaire/settings.py index 08fcbb1..1e60d22 100644 --- a/annuaire/settings.py +++ b/annuaire/settings.py @@ -144,7 +144,7 @@ TIME_ZONE = "UTC" USE_I18N = True -USE_L10N = True +USE_L10N = False USE_TZ = True diff --git a/fiches/forms.py b/fiches/forms.py index b8f9782..66a1b89 100644 --- a/fiches/forms.py +++ b/fiches/forms.py @@ -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) diff --git a/fiches/static/fiches/css/annuaire.css b/fiches/static/fiches/css/annuaire.css index a388dbc..e05b3b8 100644 --- a/fiches/static/fiches/css/annuaire.css +++ b/fiches/static/fiches/css/annuaire.css @@ -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) { diff --git a/fiches/static/fiches/css/datepicker.css b/fiches/static/fiches/css/datepicker.css new file mode 100644 index 0000000..a863314 --- /dev/null +++ b/fiches/static/fiches/css/datepicker.css @@ -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 */ diff --git a/fiches/static/fiches/js/datepicker.min.js b/fiches/static/fiches/js/datepicker.min.js new file mode 100644 index 0000000..70a9c28 --- /dev/null +++ b/fiches/static/fiches/js/datepicker.min.js @@ -0,0 +1 @@ +var Datepicker=function(){"use strict";function e(e,t){return Object.prototype.hasOwnProperty.call(e,t)}function t(e){return e[e.length-1]}function i(e,...t){return t.forEach(t=>{e.includes(t)||e.push(t)}),e}function s(e,t){return e?e.split(t):[]}function a(e,t,i){return(void 0===t||e>=t)&&(void 0===i||e<=i)}function n(e,t,i){return ei?i:e}function r(e,t,i={},s=0,a=""){a+=`<${Object.keys(i).reduce((e,t)=>{let a=i[t];return"function"==typeof a&&(a=a(s)),`${e} ${t}="${a}"`},e)}>`;const n=s+1;return n\s+/g,">").replace(/\s+new Date(e).setFullYear(parseInt(t,10)),m(e,t,i){const s=new Date(e);let a=parseInt(t,10)-1;if(isNaN(a)){if(!t)return NaN;const e=t.toLowerCase(),s=t=>t.toLowerCase().startsWith(e);if((a=i.monthsShort.findIndex(s))<0&&(a=i.months.findIndex(s)),a<0)return NaN}return s.setMonth(a),s.getMonth()!==function e(t){return t>-1?t%12:e(t+12)}(a)?s.setDate(0):s.getTime()},d:(e,t)=>new Date(e).setDate(parseInt(t,10))},v={d:e=>e.getDate(),dd:e=>b(e.getDate(),2),D:(e,t)=>t.daysShort[e.getDay()],DD:(e,t)=>t.days[e.getDay()],m:e=>e.getMonth()+1,mm:e=>b(e.getMonth()+1,2),M:(e,t)=>t.monthsShort[e.getMonth()],MM:(e,t)=>t.months[e.getMonth()],y:e=>e.getFullYear(),yy:e=>b(e.getFullYear(),2).slice(-2),yyyy:e=>b(e.getFullYear(),4)};function b(e,t){return e.toString().padStart(t,"0")}function x(e){if("string"!=typeof e)throw new Error("Invalid date format.");if(e in k)return k[e];const i=e.split(w),s=e.match(new RegExp(w,"g"));if(0===i.length||!s)throw new Error("Invalid date format.");const a=s.map(e=>v[e]),n=Object.keys(D).reduce((e,t)=>{return s.find(e=>"D"!==e[0]&&e[0].toLowerCase()===t)&&e.push(t),e},[]);return k[e]={parser(e,t){const i=e.split(y).reduce((e,t,i)=>{if(t.length>0&&s[i]){const a=s[i][0];"M"===a?e.m=t:"D"!==a&&(e[a]=t)}return e},{});return n.reduce((e,s)=>{const a=D[s](e,i[s],t);return isNaN(a)?e:a},c())},formatter:(e,s)=>a.reduce((t,a,n)=>t+`${i[n]}${a(e,s)}`,"")+t(i)}}function M(e,t,i){if(e instanceof Date||"number"==typeof e){const t=o(e);return isNaN(t)?void 0:t}if(e){if("today"===e)return c();if(t&&t.toValue){const s=t.toValue(e,t,i);return isNaN(s)?void 0:o(s)}return x(t).parser(e,i)}}function S(e,t,i){if(isNaN(e)||!e&&0!==e)return"";const s="number"==typeof e?new Date(e):e;return t.toDisplay?t.toDisplay(s,t,i):x(t).formatter(s,i)}const C=new WeakMap,{addEventListener:O,removeEventListener:E}=EventTarget.prototype;function F(e,t){let i=C.get(e);i||(i=[],C.set(e,i)),t.forEach(e=>{O.call(...e),i.push(e)})}if(!Event.prototype.composedPath){const e=(t,i=[])=>{let s;return i.push(t),t.parentNode?s=t.parentNode:t.host?s=t.host:t.defaultView&&(s=t.defaultView),s?e(s,i):i};Event.prototype.composedPath=function(){return e(this.target)}}function V(e,t){const i="function"==typeof t?t:e=>e.matches(t);return function e(t,i,s,a=0){const n=t[a];return i(n)?n:n!==s&&n.parentElement?e(t,i,s,a+1):void 0}(e.composedPath(),i,e.currentTarget)}const N={en:{days:["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"],daysShort:["Sun","Mon","Tue","Wed","Thu","Fri","Sat"],daysMin:["Su","Mo","Tu","We","Th","Fr","Sa"],months:["January","February","March","April","May","June","July","August","September","October","November","December"],monthsShort:["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"],today:"Today",clear:"Clear",titleFormat:"MM y"}},L={autohide:!1,beforeShowDay:null,beforeShowDecade:null,beforeShowMonth:null,beforeShowYear:null,calendarWeeks:!1,clearBtn:!1,dateDelimiter:",",datesDisabled:[],daysOfWeekDisabled:[],daysOfWeekHighlighted:[],defaultViewDate:void 0,disableTouchKeyboard:!1,format:"mm/dd/yyyy",language:"en",maxDate:null,maxNumberOfDates:1,maxView:3,minDate:null,nextArrow:"»",orientation:"auto",pickLevel:0,prevArrow:"«",showDaysOfWeek:!0,showOnClick:!0,showOnFocus:!0,startView:0,title:"",todayBtn:!1,todayBtnMode:0,todayHighlight:!1,updateOnBlur:!0,weekStart:0},B=document.createRange();function A(e){return B.createContextualFragment(e)}function Y(e){"none"!==e.style.display&&(e.style.display&&(e.dataset.styleDisplay=e.style.display),e.style.display="none")}function W(e){"none"===e.style.display&&(e.dataset.styleDisplay?(e.style.display=e.dataset.styleDisplay,delete e.dataset.styleDisplay):e.style.display="")}function K(e){e.firstChild&&(e.removeChild(e.firstChild),K(e))}const{language:T,format:H,weekStart:$}=L;function j(e,t){return e.length<6&&t>=0&&t<7?i(e,t):e}function _(e){return(e+6)%7}function I(e,t,i,s){const a=M(e,t,i);return void 0!==a?a:s}function P(e,t,i=3){const s=parseInt(e,10);return s>=0&&s<=i?s:t}function q(t,s){const a=Object.assign({},t),n={},r=s.constructor.locales;let{format:d,language:o,locale:c,maxDate:h,maxView:u,minDate:f,pickLevel:p,startView:m,weekStart:g}=s.config||{};if(a.language){let e;if(a.language!==o&&(r[a.language]?e=a.language:void 0===r[e=a.language.split("-")[0]]&&(e=!1)),delete a.language,e){o=n.language=e;const t=c||r[T];c=Object.assign({format:H,weekStart:$},r[T]),o!==T&&Object.assign(c,r[o]),n.locale=c,d===t.format&&(d=n.format=c.format),g===t.weekStart&&(g=n.weekStart=c.weekStart,n.weekEnd=_(c.weekStart))}}if(a.format){const e="function"==typeof a.format.toDisplay,t="function"==typeof a.format.toValue,i=w.test(a.format);(e&&t||i)&&(d=n.format=a.format),delete a.format}let y=f,k=h;if(void 0!==a.minDate&&(y=null===a.minDate?l(0,0,1):I(a.minDate,d,c,y),delete a.minDate),void 0!==a.maxDate&&(k=null===a.maxDate?void 0:I(a.maxDate,d,c,k),delete a.maxDate),k{const s=M(t,d,c);return void 0!==s?i(e,s):e},[]),delete a.datesDisabled),void 0!==a.defaultViewDate){const e=M(a.defaultViewDate,d,c);void 0!==e&&(n.defaultViewDate=e),delete a.defaultViewDate}if(void 0!==a.weekStart){const e=Number(a.weekStart)%7;isNaN(e)||(g=n.weekStart=e,n.weekEnd=_(e)),delete a.weekStart}if(a.daysOfWeekDisabled&&(n.daysOfWeekDisabled=a.daysOfWeekDisabled.reduce(j,[]),delete a.daysOfWeekDisabled),a.daysOfWeekHighlighted&&(n.daysOfWeekHighlighted=a.daysOfWeekHighlighted.reduce(j,[]),delete a.daysOfWeekHighlighted),void 0!==a.maxNumberOfDates){const e=parseInt(a.maxNumberOfDates,10);e>=0&&(n.maxNumberOfDates=e,n.multidate=1!==e),delete a.maxNumberOfDates}a.dateDelimiter&&(n.dateDelimiter=String(a.dateDelimiter),delete a.dateDelimiter);let D=p;void 0!==a.pickLevel&&(D=P(a.pickLevel,2),delete a.pickLevel),D!==p&&(p=n.pickLevel=D);let v=u;void 0!==a.maxView&&(v=P(a.maxView,u),delete a.maxView),(v=p>v?p:v)!==u&&(u=n.maxView=v);let b=m;if(void 0!==a.startView&&(b=P(a.startView,b),delete a.startView),bu&&(b=u),b!==m&&(n.startView=b),a.prevArrow){const e=A(a.prevArrow);e.childNodes.length>0&&(n.prevArrow=e.childNodes),delete a.prevArrow}if(a.nextArrow){const e=A(a.nextArrow);e.childNodes.length>0&&(n.nextArrow=e.childNodes),delete a.nextArrow}if(void 0!==a.disableTouchKeyboard&&(n.disableTouchKeyboard="ontouchstart"in document&&!!a.disableTouchKeyboard,delete a.disableTouchKeyboard),a.orientation){const e=a.orientation.toLowerCase().split(/\s+/g);n.orientation={x:e.find(e=>"left"===e||"right"===e)||"auto",y:e.find(e=>"top"===e||"bottom"===e)||"auto"},delete a.orientation}if(void 0!==a.todayBtnMode){switch(a.todayBtnMode){case 0:case 1:n.todayBtnMode=a.todayBtnMode}delete a.todayBtnMode}return Object.keys(a).forEach(t=>{void 0!==a[t]&&e(L,t)&&(n[t]=a[t])}),n}const J=d('
\n
\n
\n
\n
\n \n \n \n
\n
\n
\n
\n
\n \n \n
\n
\n
\n
'),R=d(`
\n
${r("span",7,{class:"dow"})}
\n
${r("span",42)}
\n
`),U=d(`
\n
\n
${r("span",6,{class:"week"})}
\n
`);class z{constructor(e,t){Object.assign(this,t,{picker:e,element:A('
').firstChild,selected:[]}),this.init(this.picker.datepicker.config)}init(e){void 0!==e.pickLevel&&(this.isMinView=this.id===e.pickLevel),this.setOptions(e),this.updateFocus(),this.updateSelection()}performBeforeHook(e,t,s){let a=this.beforeShow(new Date(s));switch(typeof a){case"boolean":a={enabled:a};break;case"string":a={classes:a}}if(a){if(!1===a.enabled&&(e.classList.add("disabled"),i(this.disabled,t)),a.classes){const s=a.classes.split(/\s+/);e.classList.add(...s),s.includes("disabled")&&i(this.disabled,t)}a.content&&function(e,t){K(e),t instanceof DocumentFragment?e.appendChild(t):"string"==typeof t?e.appendChild(A(t)):"function"==typeof t.forEach&&t.forEach(t=>{e.appendChild(t)})}(e,a.content)}}}class X extends z{constructor(e){super(e,{id:0,name:"days",cellClass:"day"})}init(e,t=!0){if(t){const e=A(R).firstChild;this.dow=e.firstChild,this.grid=e.lastChild,this.element.appendChild(e)}super.init(e)}setOptions(t){let i;if(e(t,"minDate")&&(this.minDate=t.minDate),e(t,"maxDate")&&(this.maxDate=t.maxDate),t.datesDisabled&&(this.datesDisabled=t.datesDisabled),t.daysOfWeekDisabled&&(this.daysOfWeekDisabled=t.daysOfWeekDisabled,i=!0),t.daysOfWeekHighlighted&&(this.daysOfWeekHighlighted=t.daysOfWeekHighlighted),void 0!==t.todayHighlight&&(this.todayHighlight=t.todayHighlight),void 0!==t.weekStart&&(this.weekStart=t.weekStart,this.weekEnd=t.weekEnd,i=!0),t.locale){const e=this.locale=t.locale;this.dayNames=e.daysMin,this.switchLabelFormat=e.titleFormat,i=!0}if(void 0!==t.beforeShowDay&&(this.beforeShow="function"==typeof t.beforeShowDay?t.beforeShowDay:void 0),void 0!==t.calendarWeeks)if(t.calendarWeeks&&!this.calendarWeeks){const e=A(U).firstChild;this.calendarWeeks={element:e,dow:e.firstChild,weeks:e.lastChild},this.element.insertBefore(e,this.element.firstChild)}else this.calendarWeeks&&!t.calendarWeeks&&(this.element.removeChild(this.calendarWeeks.element),this.calendarWeeks=null);void 0!==t.showDaysOfWeek&&(t.showDaysOfWeek?(W(this.dow),this.calendarWeeks&&W(this.calendarWeeks.dow)):(Y(this.dow),this.calendarWeeks&&Y(this.calendarWeeks.dow))),i&&Array.from(this.dow.children).forEach((e,t)=>{const i=(this.weekStart+t)%7;e.textContent=this.dayNames[i],e.className=this.daysOfWeekDisabled.includes(i)?"dow disabled":"dow"})}updateFocus(){const e=new Date(this.picker.viewDate),t=e.getFullYear(),i=e.getMonth(),s=l(t,i,1),a=m(s,this.weekStart,this.weekStart);this.first=s,this.last=l(t,i+1,0),this.start=a,this.focused=this.picker.viewDate}updateSelection(){const{dates:e,rangepicker:t}=this.picker.datepicker;this.selected=e,t&&(this.range=t.dates)}render(){this.today=this.todayHighlight?c():void 0,this.disabled=[...this.datesDisabled];const e=S(this.focused,this.switchLabelFormat,this.locale);if(this.picker.setViewSwitchLabel(e),this.picker.setPrevBtnDisabled(this.first<=this.minDate),this.picker.setNextBtnDisabled(this.last>=this.maxDate),this.calendarWeeks){const e=m(this.first,1,1);Array.from(this.calendarWeeks.weeks.children).forEach((t,i)=>{t.textContent=function(e){const t=m(e,4,1),i=m(new Date(t).setMonth(0,4),4,1);return Math.round((t-i)/6048e5)+1}(h(e,7*i))})}Array.from(this.grid.children).forEach((e,t)=>{const s=e.classList,a=h(this.start,t),n=new Date(a),r=n.getDay();if(e.className=`datepicker-cell ${this.cellClass}`,e.dataset.date=a,e.textContent=n.getDate(),athis.last&&s.add("next"),this.today===a&&s.add("today"),(athis.maxDate||this.disabled.includes(a))&&s.add("disabled"),this.daysOfWeekDisabled.includes(r)&&(s.add("disabled"),i(this.disabled,a)),this.daysOfWeekHighlighted.includes(r)&&s.add("highlighted"),this.range){const[e,t]=this.range;a>e&&a{e.classList.remove("range","range-start","range-end","selected","focused")}),Array.from(this.grid.children).forEach(i=>{const s=Number(i.dataset.date),a=i.classList;s>e&&s{e.classList.remove("focused")}),this.grid.children[e].classList.add("focused")}}function G(e,t){if(!e||!e[0]||!e[1])return;const[[i,s],[a,n]]=e;return i>t||ae})))),super.init(e)}setOptions(t){if(t.locale&&(this.monthNames=t.locale.monthsShort),e(t,"minDate"))if(void 0===t.minDate)this.minYear=this.minMonth=this.minDate=void 0;else{const e=new Date(t.minDate);this.minYear=e.getFullYear(),this.minMonth=e.getMonth(),this.minDate=e.setDate(1)}if(e(t,"maxDate"))if(void 0===t.maxDate)this.maxYear=this.maxMonth=this.maxDate=void 0;else{const e=new Date(t.maxDate);this.maxYear=e.getFullYear(),this.maxMonth=e.getMonth(),this.maxDate=l(this.maxYear,this.maxMonth+1,0)}void 0!==t.beforeShowMonth&&(this.beforeShow="function"==typeof t.beforeShowMonth?t.beforeShowMonth:void 0)}updateFocus(){const e=new Date(this.picker.viewDate);this.year=e.getFullYear(),this.focused=e.getMonth()}updateSelection(){const{dates:e,rangepicker:t}=this.picker.datepicker;this.selected=e.reduce((e,t)=>{const s=new Date(t),a=s.getFullYear(),n=s.getMonth();return void 0===e[a]?e[a]=[n]:i(e[a],n),e},{}),t&&t.dates&&(this.range=t.dates.map(e=>{const t=new Date(e);return isNaN(t)?void 0:[t.getFullYear(),t.getMonth()]}))}render(){this.disabled=[],this.picker.setViewSwitchLabel(this.year),this.picker.setPrevBtnDisabled(this.year<=this.minYear),this.picker.setNextBtnDisabled(this.year>=this.maxYear);const e=this.selected[this.year]||[],t=this.yearthis.maxYear,i=this.year===this.minYear,s=this.year===this.maxYear,a=G(this.range,this.year);Array.from(this.grid.children).forEach((n,r)=>{const d=n.classList,o=l(this.year,r,1);if(n.className=`datepicker-cell ${this.cellClass}`,this.isMinView&&(n.dataset.date=o),n.textContent=this.monthNames[r],(t||i&&rthis.maxMonth)&&d.add("disabled"),a){const[e,t]=a;r>e&&r{e.classList.remove("range","range-start","range-end","selected","focused")}),Array.from(this.grid.children).forEach((s,a)=>{const n=s.classList;a>t&&a{e.classList.remove("focused")}),this.grid.children[this.focused].classList.add("focused")}}class Z extends z{constructor(e,t){super(e,t)}init(e,t=!0){var i;t&&(this.navStep=10*this.step,this.beforeShowOption=`beforeShow${i=this.cellClass,[...i].reduce((e,t,i)=>e+=i?t:t.toUpperCase(),"")}`,this.grid=this.element,this.element.classList.add(this.name,"datepicker-grid"),this.grid.appendChild(A(r("span",12)))),super.init(e)}setOptions(t){if(e(t,"minDate")&&(void 0===t.minDate?this.minYear=this.minDate=void 0:(this.minYear=g(t.minDate,this.step),this.minDate=l(this.minYear,0,1))),e(t,"maxDate")&&(void 0===t.maxDate?this.maxYear=this.maxDate=void 0:(this.maxYear=g(t.maxDate,this.step),this.maxDate=l(this.maxYear,11,31))),void 0!==t[this.beforeShowOption]){const e=t[this.beforeShowOption];this.beforeShow="function"==typeof e?e:void 0}}updateFocus(){const e=new Date(this.picker.viewDate),t=g(e,this.navStep),i=t+9*this.step;this.first=t,this.last=i,this.start=t-this.step,this.focused=g(e,this.step)}updateSelection(){const{dates:e,rangepicker:t}=this.picker.datepicker;this.selected=e.reduce((e,t)=>i(e,g(t,this.step)),[]),t&&t.dates&&(this.range=t.dates.map(e=>{if(void 0!==e)return g(e,this.step)}))}render(){this.disabled=[],this.picker.setViewSwitchLabel(`${this.first}-${this.last}`),this.picker.setPrevBtnDisabled(this.first<=this.minYear),this.picker.setNextBtnDisabled(this.last>=this.maxYear),Array.from(this.grid.children).forEach((e,t)=>{const i=e.classList,s=this.start+t*this.step,a=l(s,0,1);if(e.className=`datepicker-cell ${this.cellClass}`,this.isMinView&&(e.dataset.date=a),e.textContent=e.dataset.year=s,0===t?i.add("prev"):11===t&&i.add("next"),(sthis.maxYear)&&i.add("disabled"),this.range){const[e,t]=this.range;s>e&&s{e.classList.remove("range","range-start","range-end","selected","focused")}),Array.from(this.grid.children).forEach(i=>{const s=Number(i.textContent),a=i.classList;s>e&&s{e.classList.remove("focused")}),this.grid.children[e].classList.add("focused")}}function ee(e,t){const i={date:e.getDate(),viewDate:new Date(e.picker.viewDate),viewId:e.picker.currentView.id,datepicker:e};e.element.dispatchEvent(new CustomEvent(t,{detail:i}))}function te(e,t){const{minDate:i,maxDate:s}=e.config,{currentView:a,viewDate:r}=e.picker;let d;switch(a.id){case 0:d=u(r,t);break;case 1:d=f(r,t);break;default:d=f(r,t*a.navStep)}d=n(d,i,s),e.picker.changeFocus(d).render()}function ie(e){const t=e.picker.currentView.id;t!==e.config.maxView&&e.picker.changeView(t+1).render()}function se(e){e.config.updateOnBlur?e.update({autohide:!0}):(e.refresh("input"),e.hide())}function ae(e,t){const i=e.picker,s=new Date(i.viewDate),a=i.currentView.id,n=1===a?u(s,t-s.getMonth()):f(s,t-s.getFullYear());i.changeFocus(n).changeView(a-1).render()}function ne(t,i){if(void 0!==i.title&&(i.title?(t.controls.title.textContent=i.title,W(t.controls.title)):(t.controls.title.textContent="",Y(t.controls.title))),i.prevArrow){const e=t.controls.prevBtn;K(e),i.prevArrow.forEach(t=>{e.appendChild(t.cloneNode(!0))})}if(i.nextArrow){const e=t.controls.nextBtn;K(e),i.nextArrow.forEach(t=>{e.appendChild(t.cloneNode(!0))})}if(i.locale&&(t.controls.todayBtn.textContent=i.locale.today,t.controls.clearBtn.textContent=i.locale.clear),void 0!==i.todayBtn&&(i.todayBtn?W(t.controls.todayBtn):Y(t.controls.todayBtn)),e(i,"minDate")||e(i,"maxDate")){const{minDate:e,maxDate:i}=t.datepicker.config;t.controls.todayBtn.disabled=!a(c(),e,i)}void 0!==i.clearBtn&&(i.clearBtn?W(t.controls.clearBtn):Y(t.controls.clearBtn))}function re(e){const{dates:i,config:s}=e;return n(i.length>0?t(i):s.defaultViewDate,s.minDate,s.maxDate)}function de(e,t){const i=new Date(e.viewDate),s=new Date(t),{id:a,year:n,first:r,last:d}=e.currentView,o=s.getFullYear();switch(e.viewDate=t,o!==i.getFullYear()&&ee(e.datepicker,"changeYear"),s.getMonth()!==i.getMonth()&&ee(e.datepicker,"changeMonth"),a){case 0:return td;case 1:return o!==n;default:return od}}function oe(e){return window.getComputedStyle(e).direction}class ce{constructor(e){this.datepicker=e;const t=J.replace(/%buttonClass%/g,e.config.buttonClass),i=this.element=A(t).firstChild,[s,a,n]=i.firstChild.children,r=s.firstElementChild,[d,o,l]=s.lastElementChild.children,[h,u]=n.firstChild.children,f={title:r,prevBtn:d,viewSwitch:o,nextBtn:l,todayBtn:h,clearBtn:u};this.main=a,this.controls=f;const p=e.inline?"inline":"dropdown";i.classList.add(`datepicker-${p}`),ne(this,e.config),this.viewDate=re(e),F(e,[[i,"click",function(e){e.inline||e.config.disableTouchKeyboard||e.inputField.focus()}.bind(null,e),{capture:!0}],[a,"click",function(e,t){const i=V(t,".datepicker-cell");if(!i||i.classList.contains("disabled"))return;const{id:s,isMinView:a}=e.picker.currentView;a?e.setDate(Number(i.dataset.date)):ae(e,1===s?Number(i.dataset.month):Number(i.dataset.year))}.bind(null,e)],[f.viewSwitch,"click",function(e){ie(e)}.bind(null,e)],[f.prevBtn,"click",function(e){te(e,-1)}.bind(null,e)],[f.nextBtn,"click",function(e){te(e,1)}.bind(null,e)],[f.todayBtn,"click",function(e){const t=e.picker,i=c();if(1===e.config.todayBtnMode){if(e.config.autohide)return void e.setDate(i);e.setDate(i,{render:!1}),t.update()}t.viewDate!==i&&t.changeFocus(i),t.changeView(0).render()}.bind(null,e)],[f.clearBtn,"click",function(e){e.setDate({clear:!0})}.bind(null,e)]]),this.views=[new X(this),new Q(this),new Z(this,{id:2,name:"years",cellClass:"year",step:1}),new Z(this,{id:3,name:"decades",cellClass:"decade",step:10})],this.currentView=this.views[e.config.startView],this.currentView.render(),this.main.appendChild(this.currentView.element),e.config.container.appendChild(this.element)}setOptions(e){ne(this,e),this.views.forEach(t=>{t.init(e,!1)}),this.currentView.render()}detach(){this.datepicker.config.container.removeChild(this.element)}show(){if(this.active)return;this.element.classList.add("active"),this.active=!0;const e=this.datepicker;if(!e.inline){const t=oe(e.inputField);t!==oe(e.config.container)?this.element.dir=t:this.element.dir&&this.element.removeAttribute("dir"),this.place(),e.config.disableTouchKeyboard&&e.inputField.blur()}ee(e,"show")}hide(){this.active&&(this.datepicker.exitEditMode(),this.element.classList.remove("active"),this.active=!1,ee(this.datepicker,"hide"))}place(){const{classList:e,style:t}=this.element,{config:i,inputField:s}=this.datepicker,a=i.container,{width:n,height:r}=this.element.getBoundingClientRect(),{left:d,top:o,width:c}=a.getBoundingClientRect(),{left:l,top:h,width:u,height:f}=s.getBoundingClientRect();let p,m,g,{x:w,y:y}=i.orientation;a===document.body?(p=window.scrollY,m=l+window.scrollX,g=h+p):(m=l-d,g=h-o+(p=a.scrollTop)),"auto"===w&&(m<0?(w="left",m=10):w=m+n>c?"right":"rtl"===oe(s)?"right":"left"),"right"===w&&(m-=n-u),"auto"===y&&(y=g-r{e.updateFocus()}),this}update(){const e=re(this.datepicker);return this._renderMethod=de(this,e)?"render":"refresh",this.views.forEach(e=>{e.updateFocus(),e.updateSelection()}),this}render(e=!0){const t=e&&this._renderMethod||"render";delete this._renderMethod,this.currentView[t]()}}function le(e,t,i,s){const n=e.picker,r=n.currentView,d=r.step||1;let o,c,l=n.viewDate;switch(r.id){case 0:l=s?h(l,7*i):t.ctrlKey||t.metaKey?f(l,i):h(l,i),o=h,c=(e=>r.disabled.includes(e));break;case 1:l=u(l,s?4*i:i),o=u,c=(e=>{const t=new Date(e),{year:i,disabled:s}=r;return t.getFullYear()===i&&s.includes(t.getMonth())});break;default:l=f(l,i*(s?4:1)*d),o=f,c=(e=>r.disabled.includes(g(e,d)))}void 0!==(l=function e(t,i,s,n,r,d){if(a(t,r,d))return n(t)?e(i(t,s),i,s,n,r,d):t}(l,o,i<0?-d:d,c,r.minDate,r.maxDate))&&n.changeFocus(l).render()}function he(e,t){return e.map(e=>S(e,t.format,t.locale)).join(t.dateDelimiter)}function ue(e,t,i=!1){const{config:s,dates:n,rangepicker:r}=e;if(0===t.length)return i?[]:void 0;const d=r&&e===r.datepickers[1];let o=t.reduce((e,t)=>{let i=M(t,s.format,s.locale);if(void 0===i)return e;if(s.pickLevel>0){const e=new Date(i);i=1===s.pickLevel?d?e.setMonth(e.getMonth()+1,0):e.setDate(1):d?e.setFullYear(e.getFullYear()+1,0,0):e.setMonth(0,1)}return!a(i,s.minDate,s.maxDate)||e.includes(i)||s.datesDisabled.includes(i)||s.daysOfWeekDisabled.includes(new Date(i).getDay())||e.push(i),e},[]);return 0!==o.length?(s.multidate&&!i&&(o=o.reduce((e,t)=>(n.includes(t)||e.push(t),e),n.filter(e=>!o.includes(e)))),s.maxNumberOfDates&&o.length>s.maxNumberOfDates?o.slice(-1*s.maxNumberOfDates):o):void 0}function fe(e,t=3,i=!0){const{config:s,picker:a,inputField:n}=e;if(2&t){const e=a.active?s.pickLevel:s.startView;a.update().changeView(e).render(i)}1&t&&n&&(n.value=he(e.dates,s))}function pe(e,t,i){let{clear:s,render:a,autohide:n}=i;void 0===a&&(a=!0),a?void 0===n&&(n=e.config.autohide):n=!1;const r=ue(e,t,s);r&&(r.toString()!==e.dates.toString()?(e.dates=r,fe(e,a?3:1),ee(e,"changeDate")):fe(e,1),n&&e.hide())}return class{constructor(e,t={},i){e.datepicker=this,this.element=e;const a=this.config=Object.assign({buttonClass:t.buttonClass&&String(t.buttonClass)||"button",container:document.body,defaultViewDate:c(),maxDate:void 0,minDate:void 0},q(L,this));this._options=t,Object.assign(a,q(t,this));const n=this.inline="INPUT"!==e.tagName;let r,d;if(n)a.container=e,d=s(e.dataset.date,a.dateDelimiter),delete e.dataset.date;else{const i=t.container?document.querySelector(t.container):null;i&&(a.container=i),(r=this.inputField=e).classList.add("datepicker-input"),d=s(r.value,a.dateDelimiter)}if(i){const e=i.inputs.indexOf(r),t=i.datepickers;if(e<0||e>1||!Array.isArray(t))throw Error("Invalid rangepicker object.");t[e]=this,Object.defineProperty(this,"rangepicker",{get:()=>i})}this.dates=ue(this,d)||[],r&&(r.value=he(this.dates,a));const o=this.picker=new ce(this);if(n)this.show();else{const e=function(e,t){const i=e.element;if(i!==document.activeElement)return;const s=e.picker.element;V(t,e=>e===i||e===s)||se(e)}.bind(null,this);F(this,[[r,"keydown",function(e,t){if("Tab"===t.key)return void se(e);const i=e.picker,{id:s,isMinView:a}=i.currentView;if(i.active)if(e.editMode)switch(t.key){case"Escape":i.hide();break;case"Enter":e.exitEditMode({update:!0,autohide:e.config.autohide});break;default:return}else switch(t.key){case"Escape":i.hide();break;case"ArrowLeft":if(t.ctrlKey||t.metaKey)te(e,-1);else{if(t.shiftKey)return void e.enterEditMode();le(e,t,-1,!1)}break;case"ArrowRight":if(t.ctrlKey||t.metaKey)te(e,1);else{if(t.shiftKey)return void e.enterEditMode();le(e,t,1,!1)}break;case"ArrowUp":if(t.ctrlKey||t.metaKey)ie(e);else{if(t.shiftKey)return void e.enterEditMode();le(e,t,-1,!0)}break;case"ArrowDown":if(t.shiftKey&&!t.ctrlKey&&!t.metaKey)return void e.enterEditMode();le(e,t,1,!0);break;case"Enter":a?e.setDate(i.viewDate):i.changeView(s-1).render();break;case"Backspace":case"Delete":return void e.enterEditMode();default:return void(1!==t.key.length||t.ctrlKey||t.metaKey||e.enterEditMode())}else switch(t.key){case"ArrowDown":case"Escape":i.show();break;case"Enter":e.update();break;default:return}t.preventDefault(),t.stopPropagation()}.bind(null,this)],[r,"focus",function(e){e.config.showOnFocus&&e.show()}.bind(null,this)],[r,"mousedown",function(e,t){const i=t.target;(e.picker.active||e.config.showOnClick)&&(i._active=i===document.activeElement,i._clicking=setTimeout(()=>{delete i._active,delete i._clicking},2e3))}.bind(null,this)],[r,"click",function(e,t){const i=t.target;i._clicking&&(clearTimeout(i._clicking),delete i._clicking,i._active&&e.enterEditMode(),delete i._active,e.config.showOnClick&&e.show())}.bind(null,this)],[r,"paste",function(e,t){t.clipboardData.types.includes("text/plain")&&e.enterEditMode()}.bind(null,this)],[document,"mousedown",e],[document,"touchstart",e],[window,"resize",o.place.bind(o)]])}}static formatDate(e,t,i){return S(e,t,i&&N[i]||N.en)}static parseDate(e,t,i){return M(e,t,i&&N[i]||N.en)}static get locales(){return N}get active(){return!(!this.picker||!this.picker.active)}get pickerElement(){return this.picker?this.picker.element:void 0}setOptions(e){const t=this.picker,i=q(e,this);Object.assign(this._options,e),Object.assign(this.config,i),t.setOptions(i),fe(this,3)}show(){this.inputField&&this.inputField.disabled||this.picker.show()}hide(){this.inline||(this.picker.hide(),this.picker.update().changeView(this.config.startView).render())}destroy(){return this.hide(),function(e){let t=C.get(e);t&&(t.forEach(e=>{E.call(...e)}),C.delete(e))}(this),this.picker.detach(),this.inline||this.inputField.classList.remove("datepicker-input"),delete this.element.datepicker,this}getDate(e){const t=e?t=>S(t,e,this.config.locale):e=>new Date(e);return this.config.multidate?this.dates.map(t):this.dates.length>0?t(this.dates[0]):void 0}setDate(...e){const i=[...e],s={},a=t(e);"object"!=typeof a||Array.isArray(a)||a instanceof Date||!a||Object.assign(s,i.pop()),pe(this,Array.isArray(i[0])?i[0]:i,s)}update(e){if(this.inline)return;const t={clear:!0,autohide:!(!e||!e.autohide)};pe(this,s(this.inputField.value,this.config.dateDelimiter),t)}refresh(e,t=!1){let i;e&&"string"!=typeof e&&(t=e,e=void 0),fe(this,i="picker"===e?2:"input"===e?1:3,!t)}enterEditMode(){this.inline||!this.picker.active||this.editMode||(this.editMode=!0,this.inputField.classList.add("in-edit"))}exitEditMode(e){if(this.inline||!this.editMode)return;const t=Object.assign({update:!1},e);delete this.editMode,this.inputField.classList.remove("in-edit"),t.update&&this.update(t)}}}(); diff --git a/fiches/static/fiches/scss/_common.scss b/fiches/static/fiches/scss/_common.scss index 30bb280..4149a58 100644 --- a/fiches/static/fiches/scss/_common.scss +++ b/fiches/static/fiches/scss/_common.scss @@ -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) { diff --git a/fiches/static/fiches/scss/datepicker.scss b/fiches/static/fiches/scss/datepicker.scss new file mode 100644 index 0000000..7795a9d --- /dev/null +++ b/fiches/static/fiches/scss/datepicker.scss @@ -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); + } +} diff --git a/fiches/templates/fiches/base.html b/fiches/templates/fiches/base.html index 72bea43..fbb4a95 100644 --- a/fiches/templates/fiches/base.html +++ b/fiches/templates/fiches/base.html @@ -1,5 +1,5 @@ {% load i18n %} -{% load staticfiles %} +{% load static %} @@ -11,6 +11,7 @@ + @@ -77,7 +78,7 @@ {% endblock %} + {% block extra_js %}{% endblock %} -{% block extra_js %}{% endblock %} diff --git a/fiches/templates/fiches/fiche.html b/fiches/templates/fiches/fiche.html index 68a7292..201a7b2 100644 --- a/fiches/templates/fiches/fiche.html +++ b/fiches/templates/fiches/fiche.html @@ -1,5 +1,5 @@ {% extends "fiches/base.html" %} -{% load i18n %} +{% load i18n l10n %} {% block content %} @@ -40,7 +40,9 @@
{% trans "Date de naissance" %} + {% localize on %} {{ profile.birth_date }} + {% endlocalize %}
{% endif %} diff --git a/fiches/templates/fiches/fiches_modif.html b/fiches/templates/fiches/fiches_modif.html index 57294d4..9bd25e2 100644 --- a/fiches/templates/fiches/fiches_modif.html +++ b/fiches/templates/fiches/fiches_modif.html @@ -1,6 +1,5 @@ {% extends "fiches/base.html" %} -{% load i18n %} -{% load staticfiles %} +{% load i18n static %} {% block content %} @@ -21,6 +20,10 @@ {{ form.pronoun }} +
+ + {{ form.birth_date }} +
@@ -29,8 +32,6 @@ - {% else %} - {% endif %}
@@ -67,10 +68,6 @@ {{ form.experiences }}
-
- - {{ form.birth_date }} -
{{ form.thurne }} @@ -116,5 +113,14 @@ {% endblock %} {% block extra_js %} - + + + {% endblock %} diff --git a/fiches/views.py b/fiches/views.py index 2060b4f..3e321a5 100644 --- a/fiches/views.py +++ b/fiches/views.py @@ -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"