Skip to content
This repository was archived by the owner on Jun 3, 2024. It is now read-only.

Update CSS for DatePickerRange vertical arrows. #699

Merged
merged 6 commits into from
Nov 21, 2019
Merged

Update CSS for DatePickerRange vertical arrows. #699

merged 6 commits into from
Nov 21, 2019

Conversation

shammamah-zz
Copy link
Contributor

@shammamah-zz shammamah-zz commented Nov 11, 2019 •
edited
Loading

Closes #553.

Before

image

After

image

@shammamah-zz shammamah-zz marked this pull request as ready for review November 11, 2019 19:56
@alexcjohnson
Copy link
Collaborator

Can you include before & after screenshots?

@shammamah-zz
Copy link
Contributor Author

shammamah-zz commented Nov 11, 2019 •
edited
Loading

@alexcjohnson Added to the initial comment for this PR. I realized while taking the screenshots that this is only for the default day_size (39) of the DatePickerRange component. The SVG up and down arrows have a hard-coded height, so I'm not sure it's possible to make it depend on the value for day_size. I'll have to check.

(Also, not a big fan of that huge space after the calendar -- that's something else I'll look into fixing.)

Marc-Andre-Rivet
Marc-Andre-Rivet reviewed Nov 19, 2019
View reviewed changes
src/components/css/[email protected]
height: initial;
padding: 10px 0px;
}
Copy link
Contributor

@Marc-Andre-Rivet Marc-Andre-Rivet Nov 19, 2019 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Adding box-sizing: border-box; will take the border width into account when calculating the default 50% size for the buttons, resulting in arrows being side by side.

image

@Marc-Andre-Rivet
Copy link
Contributor

Marc-Andre-Rivet commented Nov 19, 2019 •
edited
Loading

This component's styling is a mess 😨 Let's just make sure the arrows make sense for now. Please open a follow up issue in Dash v1.x to investigate why our styling is off vs. what we're seeing in the airbnb example page. We shouldn't need to override basic stylings at all...

@shammamah-zz shammamah-zz mentioned this pull request Nov 21, 2019
Open
Marc-Andre-Rivet
Marc-Andre-Rivet approved these changes Nov 21, 2019
View reviewed changes
Copy link
Contributor

@Marc-Andre-Rivet Marc-Andre-Rivet left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💃 One tiny little bit better 😄

@shammamah-zz shammamah-zz merged commit 2102156 into dev Nov 21, 2019
@shammamah-zz shammamah-zz deleted the 553-vertical-datepicker branch November 21, 2019 15:16
rpkyle pushed a commit that referenced this pull request Dec 12, 2019
Update CSS for DatePickerRange vertical arrows. (#699)
039fa20 
* Update CSS for DatePickerRange vertical arrows.

* Use day size to calculate vertical height.

* Fix eslint error.
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Reviewers

@Marc-Andre-Rivet Marc-Andre-Rivet Marc-Andre-Rivet approved these changes

@alexcjohnson alexcjohnson Awaiting requested review from alexcjohnson alexcjohnson is a code owner

@byronz byronz Awaiting requested review from byronz

Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

DatePicker vertical component out of bound
3 participants
@shammamah-zz @alexcjohnson @Marc-Andre-Rivet