MieuxVoter
/
mvfront-react
mirror of https://github.com/MieuxVoter/mvfront-react
4
1
Fork 0
Code Issues Releases Wiki Polls Activity

fix: improve style datepicker

Browse Source
pull/89/head
Pierre-Louis Guhur 1 year ago
parent 86b8fdb4d0
commit 80377bdaa9
12 changed files with 801 additions and 86 deletions
Show Stats Download Patch File Download Diff File

38
components/DatePicker.tsx
Unescape View File

@ -1,26 +1,38 @@
import {useState, forwardRef} from 'react'
import {Button, Row, Col} from 'reactstrap'
import {useTranslation} from "next-i18next";
import {faCalendarDays, faChevronDown} from "@fortawesome/free-solid-svg-icons";
import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
import DatePicker from 'react-datepicker'
const CustomDatePicker = ({date, setDate}) => {
const {t} = useTranslation();
const ExampleCustomInput = forwardRef(({value, onClick}, ref) => (
<button onClick={onClick} ref={ref}>
<Row className='p-2 align-items-end'>
<Col className='col-auto me-auto'>
<Row className='gx-3 align-items-end'>
<Col className='col-auto'>
<FontAwesomeIcon icon={faCalendarDays} />
</Col>
<Col className='col-auto'>
{t('admin.until')}{' '}{value}
</Col>
</Row>
</Col>
<Col className='col-auto'>
<FontAwesomeIcon className='text-muted' icon={faChevronDown} />
</Col>
</Row>
</button>
));
const CustomDatePicker = ({icon, date, setDate}) => {
return (<DatePicker
selected={date}
customInput={<ExampleCustomInput />}
onChange={(date) => setDate(date)}
/>);
// const ExampleCustomInput = forwardRef(({value, onClick}, ref) => (
// <Button onClick={onClick} ref={ref}>
// <Row className='gx-2 align-items-end'>
// <Col className='col-auto'>
// <FontAwesomeIcon icon={icon} />
// </Col>
// <Col className='col-auto'>
// {children}
// </Col>
// </Row>
// </Button>
// ));
// {/*<Button className="example-custom-input"
// {value}
// </button>*/}

9
components/admin/LimitDate.tsx
Unescape View File

@ -37,10 +37,13 @@ const LimitDate = () => {
<Col className='col-auto d-flex align-items-center'>
<Switch toggle={toggle} state={hasDate} />
</Col>
{hasDate ?
<DatePicker icon={null} date={endDate} setDate={setEndDate} />
: null}
</Row>
{hasDate ?
<>
<DatePicker icon={null} date={endDate} setDate={setEndDate} />
<span className="badge text-bg-light text-black-50">{t("Starting date")}</span>
</>
: null}
</Container>)
}

83
styles/scss/_admin.scss
Unescape View File

@ -1,18 +1,18 @@
.creation-step.disabled {
opacity: 0.5;
opacity: 0.5;
}
.creation-step {
color: rgb(255,255,255);
.name {
color: rgb(255, 255, 255);
.name {
font-weight: 500;
font-size: 16px;
}
}
.badge {
.badge {
width: 24px;
height: 24px;
background-color: black; // , 0.2);
}
}
}
.creation-step.active {
@ -21,61 +21,56 @@
color: $mv-blue-color;
}
.name {
color: white;
color: white;
}
}
.candidate {
max-width: 500px;
max-width: 500px;
}
.default-avatar {
background-color: rgba(255, 255, 255, 0.16);
width: inherit!important;
position: inherit!important;
padding: 4px;
margin-right: 10px;
background-color: rgba(255, 255, 255, 0.16);
width: inherit !important;
position: inherit !important;
padding: 4px;
margin-right: 10px;
}
.candidate * > input[type="file"] {
display: none;
}
display: none;
}
.candidate * > .inputfile {
background: transparent;
color: #0a004c;
border: 2px solid #0a004c;
box-shadow: 0px 2px 0px 0px #0a004c;
padding: 8px 20px;
font-size: 14px;
line-height: 24px;
display: inline-block;
cursor: pointer;
}
background: transparent;
color: #0a004c;
border: 2px solid #0a004c;
box-shadow: 0px 2px 0px 0px #0a004c;
padding: 8px 20px;
font-size: 14px;
line-height: 24px;
display: inline-block;
cursor: pointer;
}
// .creation-steps > * .form-control, .creation-steps * > input[type='text']:focus,.creation-steps * > input[type='text']::placeholder {
.modal_candidate > * :is(
input[type='text'],
input[type='text']:focus,
input[type='text']::placeholder)
{
background: white;
border-radius: 0px;
color: black!important;
opacity: 0.5;
box-shadow: 0px 2px 0px #C3BFD8;
margin-bottom: 20px;
.modal_candidate
> *
:is(input[type="text"], input[type="text"]:focus, input[type="text"]::placeholder) {
background: white;
border-radius: 0px;
color: black !important;
opacity: 0.5;
box-shadow: 0px 2px 0px #c3bfd8;
margin-bottom: 20px;
}
.modal_candidate > * input[type='text']:focus
{
opacity: 0.8;
.modal_candidate > * input[type="text"]:focus {
opacity: 0.8;
}
.modal_candidate > * input[type='text']:placeholder
{
opacity: 0.4;
.modal_candidate > * input[type="text"]:placeholder {
opacity: 0.4;
}
.params {
max-width: 1070px;
max-width: 1070px;
}

27
styles/scss/_app.scss
Unescape View File

@ -1,7 +1,7 @@
@import url("https://fonts.googleapis.com/css2?family=DM+Sans:ital,wght@0,400;0,500;0,700;1,400;1,500;1,700&family=DM+Serif+Display:ital@0;1&display=swap");
body{
background-color: $mv-blue-color;
body {
background-color: $mv-blue-color;
}
h1,
h2,
@ -51,7 +51,7 @@ main > .div {
}
main {
background: url('../../public/back.svg'), rgb(10, 0, 76, 0.64);
background: url("../../public/back.svg"), rgb(10, 0, 76, 0.64);
}
header {
@ -336,7 +336,7 @@ h5 {
.form-control {
height: auto;
background: transparent;
// color: white;
// color: white;
border: none;
}
/*
@ -372,22 +372,21 @@ ol.result > li {
}
.border-dashed {
border-style: dashed!important;
border-style: dashed !important;
}
.text-muted {
color: inherit;
opacity: 0.5;
color: inherit;
opacity: 0.5;
}
.cursor-pointer {
cursor: pointer;
.cursor-pointer {
cursor: pointer;
}
.hide {
display: none;
display: none;
}
.noshadow {
box-shadow: unset !important;
}
.noshadow{ box-shadow: unset!important;}

3
styles/scss/_badge.scss
Unescape View File

@ -0,0 +1,3 @@
.badge {
border-radius: 0px;
}

4
styles/scss/_buttons.scss → styles/scss/_button.scss
Unescape View File

@ -51,8 +51,8 @@
box-shadow: 0px 5px 0px #7a64f9;
}
*.btn[class*="-info"] {
background-color: #4A2FEF;
border: 2px solid #4A2FEF;
background-color: #4a2fef;
border: 2px solid #4a2fef;
}
.btn:not([class*="btn-outline-"]):hover {
background-color: rgb(255, 255, 255, 0.2);

84
styles/scss/_datepicker-mixins.scss
Unescape View File

@ -0,0 +1,84 @@
%navigation-chevron {
border-color: $mv-blue-color;
border-style: solid;
border-width: 2px 2px 0 0;
content: "";
display: block;
height: 12px;
position: absolute;
top: 6px;
width: 12px;
&--disabled,
&--disabled:hover {
border-color: $datepicker__navigation-disabled-color;
cursor: default;
}
}
%triangle-arrow {
margin-left: -$datepicker__triangle-size * 0.5;
position: absolute;
width: 0;
&::before,
&::after {
box-sizing: content-box;
position: absolute;
border: $datepicker__triangle-size solid transparent;
height: 0;
width: 1px;
content: "";
z-index: -1;
border-width: $datepicker__triangle-size;
left: -$datepicker__triangle-size;
}
&::before {
border-bottom-color: $datepicker__border-color;
}
}
%triangle-arrow-up {
@extend %triangle-arrow;
top: 0;
margin-top: -$datepicker__triangle-size;
&::before,
&::after {
border-top: none;
border-bottom-color: $datepicker__background-color;
}
&::after {
top: 0;
}
&::before {
top: -1px;
border-bottom-color: $datepicker__border-color;
}
}
%triangle-arrow-down {
@extend %triangle-arrow;
bottom: 0;
margin-bottom: -$datepicker__triangle-size;
&::before,
&::after {
border-bottom: none;
border-top-color: #fff;
}
&::after {
bottom: 0;
}
&::before {
bottom: -1px;
border-top-color: $datepicker__border-color;
}
}

20
styles/scss/_datepicker-variables.scss
Unescape View File

@ -0,0 +1,20 @@
$datepicker__background-color: white !default;
$datepicker__border-color: #f2f0ff !default;
$datepicker__highlighted-color: #3dcc4a !default;
$datepicker__muted-color: #ccc !default;
$datepicker__selected-color: $mv-blue-color !default;
$datepicker__text-color: #000 !default;
$datepicker__header-color: #000 !default;
$datepicker__navigation-disabled-color: lighten(
$datepicker__muted-color,
10%
) !default;
$datepicker__border-radius: 2px !default;
$datepicker__day-margin: 0 !default;
$datepicker__font-size: 0.8rem !default;
$datepicker__font-family: "DM Sans", sans-serif !default;
$datepicker__item-size: 42px !default;
$datepicker__margin: 0.4rem !default;
$datepicker__navigation-button-size: 32px !default;
$datepicker__triangle-size: 0px !default;

597
styles/scss/_datepicker.scss
Unescape View File

@ -0,0 +1,597 @@
@import "./_datepicker-variables.scss";
@import "./_datepicker-mixins.scss";
.react-datepicker-wrapper {
display: inline-block;
padding: 0;
border: 0;
width: 100%;
}
.react-datepicker {
font-family: $datepicker__font-family;
font-size: $datepicker__font-size;
background-color: #fff;
color: $datepicker__text-color;
border: 2px solid $datepicker__border-color;
box-shadow: 0px 8px 8px rgba(143, 136, 186, 0.11);
border-radius: $datepicker__border-radius;
display: inline-block;
position: relative;
padding: 16px;
font-weight: bold;
}
.react-datepicker--time-only {
.react-datepicker__triangle {
left: 35px;
}
.react-datepicker__time-container {
border-left: 0;
}
.react-datepicker__time,
.react-datepicker__time-box {
border-bottom-left-radius: 0.3rem;
border-bottom-right-radius: 0.3rem;
}
}
.react-datepicker__triangle {
position: absolute;
left: 50px;
}
.react-datepicker-popper {
z-index: 1;
&[data-placement^="bottom"] {
padding-top: $datepicker__triangle-size + 2px;
.react-datepicker__triangle {
@extend %triangle-arrow-up;
}
}
&[data-placement="bottom-end"],
&[data-placement="top-end"] {
.react-datepicker__triangle {
left: auto;
right: 50px;
}
}
&[data-placement^="top"] {
padding-bottom: $datepicker__triangle-size + 2px;
.react-datepicker__triangle {
@extend %triangle-arrow-down;
}
}
&[data-placement^="right"] {
padding-left: $datepicker__triangle-size;
.react-datepicker__triangle {
left: auto;
right: 42px;
}
}
&[data-placement^="left"] {
padding-right: $datepicker__triangle-size;
.react-datepicker__triangle {
left: 42px;
right: auto;
}
}
}
.react-datepicker__header {
text-align: center;
background-color: $datepicker__background-color;
border-top-left-radius: $datepicker__border-radius;
padding: 8px 0;
position: relative;
&--time {
padding-bottom: 8px;
padding-left: 5px;
padding-right: 5px;
&:not(&--only) {
border-top-left-radius: 0;
}
}
&:not(&--has-time-select) {
border-top-right-radius: $datepicker__border-radius;
}
}
.react-datepicker__year-dropdown-container--select,
.react-datepicker__month-dropdown-container--select,
.react-datepicker__month-year-dropdown-container--select,
.react-datepicker__year-dropdown-container--scroll,
.react-datepicker__month-dropdown-container--scroll,
.react-datepicker__month-year-dropdown-container--scroll {
display: inline-block;
margin: 0 15px;
}
.react-datepicker__current-month,
.react-datepicker-time__header,
.react-datepicker-year-header {
margin-top: 0;
color: $datepicker__header-color;
font-weight: bold;
font-size: $datepicker__font-size * 1.18;
}
.react-datepicker-time__header {
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
.react-datepicker__navigation {
align-items: center;
background: none;
display: flex;
justify-content: center;
text-align: center;
cursor: pointer;
position: absolute;
top: 23px;
padding: 0;
border: none;
z-index: 1;
height: $datepicker__navigation-button-size;
width: $datepicker__navigation-button-size;
text-indent: -999em;
overflow: hidden;
&--previous {
left: 19px;
}
&--next {
right: 19px;
&--with-time:not(&--with-today-button) {
right: 85px;
}
}
&--years {
position: relative;
top: 0;
display: block;
margin-left: auto;
margin-right: auto;
&-previous {
top: 4px;
}
&-upcoming {
top: -4px;
}
}
&:hover {
*::before {
border-color: darken($datepicker__muted-color, 15%);
}
}
}
.react-datepicker__navigation-icon {
position: relative;
top: -1px;
font-size: 20px;
width: 0;
&::before {
@extend %navigation-chevron;
}
&--next {
left: -2px;
&::before {
transform: rotate(45deg);
left: -7px;
}
}
&--previous {
right: -2px;
&::before {
transform: rotate(225deg);
right: -7px;
}
}
}
.react-datepicker__month-container {
float: left;
}
.react-datepicker__year {
margin: $datepicker__margin;
text-align: center;
&-wrapper {
display: flex;
flex-wrap: wrap;
max-width: 180px;
}
.react-datepicker__year-text {
display: inline-block;
width: 4rem;
margin: 2px;
}
}
.react-datepicker__month {
margin: $datepicker__margin;
text-align: center;
.react-datepicker__month-text,
.react-datepicker__quarter-text {
display: inline-block;
width: 4rem;
margin: 2px;
}
}
.react-datepicker__week-number {
color: $datepicker__muted-color;
display: inline-block;
width: $datepicker__item-size;
line-height: $datepicker__item-size;
text-align: center;
margin: $datepicker__day-margin;
&.react-datepicker__week-number--clickable {
cursor: pointer;
&:hover {
border-radius: $datepicker__border-radius;
background-color: $datepicker__background-color;
}
}
}
.react-datepicker__day-names,
.react-datepicker__week {
white-space: nowrap;
}
.react-datepicker__day-names {
margin-bottom: -3px;
margin-top: 20px;
color: #0a004c;
opacity: 0.4;
}
.react-datepicker__day-name,
.react-datepicker__day,
.react-datepicker__time-name {
color: $datepicker__text-color;
display: inline-block;
width: $datepicker__item-size;
line-height: $datepicker__item-size;
text-align: center;
margin: $datepicker__day-margin;
}
.react-datepicker__month,
.react-datepicker__quarter {
&--selected,
&--in-selecting-range,
&--in-range {
border-radius: $datepicker__border-radius;
background-color: $datepicker__selected-color;
color: #fff;
&:hover {
background-color: darken($datepicker__selected-color, 5%);
}
}
&--disabled {
color: $datepicker__muted-color;
pointer-events: none;
&:hover {
cursor: default;
background-color: transparent;
}
}
}
.react-datepicker__day,
.react-datepicker__month-text,
.react-datepicker__quarter-text,
.react-datepicker__year-text {
cursor: pointer;
&:hover {
border-radius: $datepicker__border-radius;
background-color: $datepicker__background-color;
}
&--today {
font-weight: bold;
}
&--highlighted {
border-radius: $datepicker__border-radius;
background-color: $datepicker__highlighted-color;
color: #fff;
&:hover {
background-color: darken($datepicker__highlighted-color, 5%);
}
&-custom-1 {
color: magenta;
}
&-custom-2 {
color: green;
}
}
&--selected,
&--in-selecting-range,
&--in-range {
border-radius: $datepicker__border-radius;
background-color: $datepicker__selected-color;
color: #fff;
&:hover {
background-color: darken($datepicker__selected-color, 5%);
}
}
&--keyboard-selected {
border-radius: $datepicker__border-radius;
background-color: lighten($datepicker__selected-color, 45%);
color: rgb(0, 0, 0);
&:hover {
background-color: darken($datepicker__selected-color, 5%);
}
}
&--in-selecting-range:not(&--in-range) {
background-color: rgba($datepicker__selected-color, 0.5);
}
&--in-range:not(&--in-selecting-range) {
.react-datepicker__month--selecting-range & {
background-color: $datepicker__background-color;
color: $datepicker__text-color;
}
}
&--disabled {
cursor: default;
color: $datepicker__muted-color;
&:hover {
background-color: transparent;
}
}
}
.react-datepicker__month-text,
.react-datepicker__quarter-text {
&.react-datepicker__month--selected,
&.react-datepicker__month--in-range,
&.react-datepicker__quarter--selected,
&.react-datepicker__quarter--in-range {
&:hover {
background-color: $datepicker__selected-color;
}
}
&:hover {
background-color: $datepicker__background-color;
}
}
.react-datepicker__input-container {
position: relative;
display: inline-block;
/* Inside auto layout */
flex: none;
order: 1;
align-self: stretch;
flex-grow: 0;
button {
background: white;
border: 2px solid #2400fd;
border-radius: 4px;
font-weight: bold;
}
}
.react-datepicker__year-read-view,
.react-datepicker__month-read-view,
.react-datepicker__month-year-read-view {
border: 1px solid transparent;
border-radius: $datepicker__border-radius;
position: relative;
&:hover {
cursor: pointer;
.react-datepicker__year-read-view--down-arrow,
.react-datepicker__month-read-view--down-arrow {
border-top-color: darken($datepicker__muted-color, 10%);
}
}
&--down-arrow {
@extend %navigation-chevron;
transform: rotate(135deg);
right: -16px;
top: 0;
}
}
.react-datepicker__year-dropdown,
.react-datepicker__month-dropdown,
.react-datepicker__month-year-dropdown {
background-color: $datepicker__background-color;
position: absolute;
width: 50%;
left: 25%;
top: 30px;
z-index: 1;
text-align: center;
border-radius: $datepicker__border-radius;
border: 1px solid $datepicker__border-color;
&:hover {
cursor: pointer;
}
&--scrollable {
height: 150px;
overflow-y: scroll;
}
}
.react-datepicker__year-option,
.react-datepicker__month-option,
.react-datepicker__month-year-option {
line-height: 20px;
width: 100%;
display: block;
margin-left: auto;
margin-right: auto;
&:first-of-type {
border-top-left-radius: $datepicker__border-radius;
border-top-right-radius: $datepicker__border-radius;
}
&:last-of-type {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
border-bottom-left-radius: $datepicker__border-radius;
border-bottom-right-radius: $datepicker__border-radius;
}
&:hover {
background-color: $datepicker__muted-color;
.react-datepicker__navigation--years-upcoming {
border-bottom-color: darken($datepicker__muted-color, 10%);
}
.react-datepicker__navigation--years-previous {
border-top-color: darken($datepicker__muted-color, 10%);
}
}
&--selected {
position: absolute;
left: 15px;
}
}
.react-datepicker__close-icon {
cursor: pointer;
background-color: transparent;
border: 0;
outline: 0;
padding: 0 6px 0 0;
position: absolute;
top: 0;
right: 0;
height: 100%;
display: table-cell;
vertical-align: middle;
&::after {
cursor: pointer;
background-color: $datepicker__selected-color;
color: #fff;
border-radius: 50%;
height: 16px;
width: 16px;
padding: 2px;
font-size: 12px;
line-height: 1;
text-align: center;
display: table-cell;
vertical-align: middle;
content: "\00d7";
}
}
.react-datepicker__today-button {
background: $datepicker__background-color;
border-top: 1px solid $datepicker__border-color;
cursor: pointer;
text-align: center;
font-weight: bold;
padding: 5px 0;
clear: left;
}
.react-datepicker__portal {
position: fixed;
width: 100vw;
height: 100vh;
background-color: rgba(0, 0, 0, 0.8);
left: 0;
top: 0;
justify-content: center;
align-items: center;
display: flex;
z-index: 2147483647;
.react-datepicker__day-name,
.react-datepicker__day,
.react-datepicker__time-name {
width: 3rem;
line-height: 3rem;
}
@media (max-width: 400px), (max-height: 550px) {
.react-datepicker__day-name,
.react-datepicker__day,
.react-datepicker__time-name {
width: 2rem;
line-height: 2rem;
}
}
.react-datepicker__current-month,
.react-datepicker-time__header {
font-size: $datepicker__font-size * 1.8;
}
}
.react-datepicker__children-container {
width: 13.8rem;
margin: 0.4rem;
padding-right: 0.2rem;
padding-left: 0.2rem;
height: auto;
}

4
styles/scss/_modal.scss
Unescape View File

@ -23,9 +23,9 @@
}
.modal {
border-radius: unset;
border-radius: unset;
}
h4.modal-title {
color: $mv-blue-color;
color: $mv-blue-color;
}

14
styles/scss/_switch.scss
Unescape View File

@ -1,12 +1,12 @@
.form-switch .form-check-input {
height: 24px;
width: 40px;
background-color: #C3BFD8;
border: unset;
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3.5' fill='rgba%280, 0, 0, 0.25%29'/%3e%3c/svg%3e");
height: 24px;
width: 40px;
background-color: #c3bfd8;
border: unset;
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3.5' fill='rgba%280, 0, 0, 0.25%29'/%3e%3c/svg%3e");
}
.form-switch .form-check-input:checked {
background-color: #0d6efd;
background-color: #0d6efd;
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3.5' fill='%23fff'/%3e%3c/svg%3e");
}
}

4
styles/scss/config.scss
Unescape View File

@ -26,7 +26,9 @@ $theme-colors: (
@import "_bootstrap.scss";
@import "app.scss";
@import "_buttons.scss";
@import "_button.scss";
@import "_badge.scss";
@import "_datepicker.scss";
@import "_header.scss";
@import "_footer.scss";
@import "_modal.scss";

Write Preview
Loading…
Cancel
Save