Skip to content

Commit a388be7

Browse files
author
Jicheng Lu
committed
refine date picker
1 parent 2e808ce commit a388be7

1 file changed

Lines changed: 133 additions & 131 deletions

File tree

‎src/lib/common/shared/TimeRangePicker.svelte‎

Lines changed: 133 additions & 131 deletions
Original file line numberDiff line numberDiff line change
@@ -610,165 +610,167 @@
610610
list-style: none;
611611
padding-left: 0;
612612
margin-bottom: 0;
613-
}
614613
615-
/* On small screens, allow the panel to shrink and avoid overflow */
616-
@media (max-width: 576px) {
617-
.time-range-dropdown {
614+
/* On small screens, allow the panel to shrink and avoid overflow */
615+
@media (max-width: 576px) {
618616
min-width: 280px;
619617
max-width: calc(100vw - 2rem);
620618
}
621-
}
622-
623-
/* Tab content area fills remaining space and scrolls */
624-
.time-range-tab-content {
625-
flex: 1 1 auto;
626-
overflow-y: auto;
627-
scrollbar-width: thin;
628-
min-height: 0;
629-
}
630619
631-
/* Override shared .option-list absolute positioning inside our dropdown */
632-
.time-range-option-list {
633-
position: static !important;
634-
max-height: 300px !important;
635-
border: none !important;
636-
}
637-
638-
/* Make option buttons fill the full width of each row */
639-
.time-range-option-list :global(.option-item .select-name) {
640-
flex: 1;
641-
}
620+
/* Scale flatpickr calendar to fit within the panel */
621+
:global(.flatpickr-calendar) {
622+
width: 100% !important;
623+
max-width: 100%;
624+
box-shadow: none;
625+
}
642626
643-
.time-range-option-list :global(.option-item .select-name .clear-btn) {
644-
width: 100%;
645-
text-align: left;
646-
}
627+
/* Refine month/year navigation bar */
628+
:global(.flatpickr-months) {
629+
height: 36px;
630+
align-items: center;
631+
margin-bottom: 4px;
632+
}
647633
648-
/* Scale flatpickr calendar to fit within the panel */
649-
:global(.time-range-dropdown .flatpickr-calendar) {
650-
width: 100% !important;
651-
max-width: 100%;
652-
box-shadow: none;
653-
}
634+
:global(.flatpickr-current-month) {
635+
display: flex;
636+
align-items: center;
637+
justify-content: center;
638+
gap: 4px;
639+
padding-top: 0;
640+
height: 100%;
641+
font-size: 14px;
642+
left: 0;
643+
right: 0;
644+
width: 100%;
645+
}
654646
655-
/* Refine month/year navigation bar */
656-
:global(.time-range-dropdown .flatpickr-months) {
657-
height: 36px;
658-
align-items: center;
659-
margin-bottom: 4px;
660-
}
647+
:global(.flatpickr-monthDropdown-months) {
648+
font-size: 14px;
649+
font-weight: 600;
650+
appearance: none;
651+
-webkit-appearance: none;
652+
-moz-appearance: none;
653+
padding: 4px 20px 4px 8px;
654+
border-radius: 4px;
655+
border: 1px solid lavender;
656+
background-color: var(--bs-body-bg, #fff);
657+
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%23666' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E");
658+
background-repeat: no-repeat;
659+
background-position: right 6px center;
660+
background-size: 10px 6px;
661+
color: var(--bs-body-color, #212529);
662+
cursor: pointer;
663+
width: 90px;
664+
height: 30px;
665+
text-align: center;
666+
text-align-last: center;
667+
box-sizing: border-box;
668+
669+
&:hover {
670+
border-color: var(--bs-primary, #556ee6);
671+
}
661672
662-
:global(.time-range-dropdown .flatpickr-current-month) {
663-
display: flex;
664-
align-items: center;
665-
justify-content: center;
666-
gap: 4px;
667-
padding-top: 0;
668-
height: 100%;
669-
font-size: 14px;
670-
left: 0;
671-
right: 0;
672-
width: 100%;
673-
}
673+
&:focus {
674+
border-color: var(--bs-primary, #556ee6);
675+
outline: none;
676+
box-shadow: 0 0 0 2px rgba(85, 110, 230, 0.15);
677+
}
674678
675-
:global(.time-range-dropdown .flatpickr-monthDropdown-months) {
676-
font-size: 14px;
677-
font-weight: 600;
678-
appearance: none;
679-
-webkit-appearance: none;
680-
-moz-appearance: none;
681-
padding: 4px 20px 4px 8px;
682-
border-radius: 4px;
683-
border: 1px solid var(--bs-border-color, #dee2e6);
684-
background-color: var(--bs-body-bg, #fff);
685-
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%23666' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E");
686-
background-repeat: no-repeat;
687-
background-position: right 6px center;
688-
background-size: 10px 6px;
689-
color: var(--bs-body-color, #212529);
690-
cursor: pointer;
691-
width: 90px;
692-
height: 30px;
693-
text-align: center;
694-
text-align-last: center;
695-
box-sizing: border-box;
696-
}
679+
:global(.flatpickr-monthDropdown-month) {
680+
background-color: lavender;
681+
border-top: 1px solid #c5b8d9;
682+
padding: 4px 8px;
683+
}
684+
}
697685
698-
:global(.time-range-dropdown .flatpickr-monthDropdown-months:hover) {
699-
border-color: var(--bs-primary, #556ee6);
700-
}
686+
:global(.numInputWrapper) {
687+
height: auto;
688+
width: 90px;
701689
702-
:global(.time-range-dropdown .flatpickr-monthDropdown-months:focus) {
703-
border-color: var(--bs-primary, #556ee6);
704-
outline: none;
705-
box-shadow: 0 0 0 2px rgba(85, 110, 230, 0.15);
706-
}
690+
:global(.arrowUp),
691+
:global(.arrowDown) {
692+
display: none;
693+
}
694+
}
707695
708-
:global(.time-range-dropdown .numInputWrapper) {
709-
height: auto;
710-
width: 90px;
711-
}
696+
:global(.numInput.cur-year) {
697+
font-size: 14px;
698+
font-weight: 600;
699+
padding: 4px 8px;
700+
border-radius: 4px;
701+
border: 1px solid var(--bs-border-color, #dee2e6);
702+
background-color: var(--bs-body-bg, #fff);
703+
color: var(--bs-body-color, #212529);
704+
width: 90px;
705+
height: 30px;
706+
text-align: center;
707+
box-sizing: border-box;
708+
709+
&:hover {
710+
border-color: var(--bs-primary, #556ee6);
711+
}
712712
713-
:global(.time-range-dropdown .numInput.cur-year) {
714-
font-size: 14px;
715-
font-weight: 600;
716-
padding: 4px 8px;
717-
border-radius: 4px;
718-
border: 1px solid var(--bs-border-color, #dee2e6);
719-
background-color: var(--bs-body-bg, #fff);
720-
color: var(--bs-body-color, #212529);
721-
width: 90px;
722-
height: 30px;
723-
text-align: center;
724-
box-sizing: border-box;
725-
}
713+
&:focus {
714+
border-color: var(--bs-primary, #556ee6);
715+
outline: none;
716+
box-shadow: 0 0 0 2px rgba(85, 110, 230, 0.15);
717+
}
718+
}
726719
727-
:global(.time-range-dropdown .numInput.cur-year:hover) {
728-
border-color: var(--bs-primary, #556ee6);
729-
}
720+
:global(.flatpickr-prev-month),
721+
:global(.flatpickr-next-month) {
722+
padding: 6px;
723+
height: 28px;
724+
width: 28px;
725+
display: flex;
726+
align-items: center;
727+
justify-content: center;
728+
border-radius: 4px;
729+
top: 4px;
730+
731+
&:hover {
732+
background-color: var(--bs-tertiary-bg, #f8f9fa);
733+
}
730734
731-
:global(.time-range-dropdown .numInput.cur-year:focus) {
732-
border-color: var(--bs-primary, #556ee6);
733-
outline: none;
734-
box-shadow: 0 0 0 2px rgba(85, 110, 230, 0.15);
735+
:global(svg) {
736+
width: 12px;
737+
height: 12px;
738+
}
739+
}
735740
}
736741
737-
:global(.time-range-dropdown .numInputWrapper .arrowUp),
738-
:global(.time-range-dropdown .numInputWrapper .arrowDown) {
739-
display: none;
742+
/* Tab content area fills remaining space and scrolls */
743+
.time-range-tab-content {
744+
flex: 1 1 auto;
745+
overflow-y: auto;
746+
scrollbar-width: thin;
747+
min-height: 0;
740748
}
741749
742-
:global(.time-range-dropdown .flatpickr-prev-month),
743-
:global(.time-range-dropdown .flatpickr-next-month) {
744-
padding: 6px;
745-
height: 28px;
746-
width: 28px;
747-
display: flex;
748-
align-items: center;
749-
justify-content: center;
750-
border-radius: 4px;
751-
top: 4px;
752-
}
750+
/* Override shared .option-list absolute positioning inside our dropdown */
751+
.time-range-option-list {
752+
position: static !important;
753+
max-height: 300px !important;
754+
border: none !important;
753755
754-
:global(.time-range-dropdown .flatpickr-prev-month:hover),
755-
:global(.time-range-dropdown .flatpickr-next-month:hover) {
756-
background-color: var(--bs-tertiary-bg, #f8f9fa);
757-
}
756+
/* Make option buttons fill the full width of each row */
757+
:global(.option-item .select-name) {
758+
flex: 1;
759+
}
758760
759-
:global(.time-range-dropdown .flatpickr-prev-month svg),
760-
:global(.time-range-dropdown .flatpickr-next-month svg) {
761-
width: 12px;
762-
height: 12px;
761+
:global(.option-item .select-name .clear-btn) {
762+
width: 100%;
763+
text-align: left;
764+
}
763765
}
764766
765767
.clear-btn {
766768
background-color: transparent;
767769
border: none;
768770
transition: background-color 0.15s ease-in-out;
769-
}
770771
771-
.clear-btn:hover {
772-
background-color: aliceblue;
772+
&:hover {
773+
background-color: aliceblue;
774+
}
773775
}
774776
</style>

0 commit comments

Comments
 (0)