Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix(VPicker,VDatePicker): landscape mode in date picker #20605

Draft
wants to merge 2 commits into
base: master
Choose a base branch
from
+43 −39
Draft

fix(VPicker,VDatePicker): landscape mode in date picker #20605

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
1c7e9be
fix(VPicker,VDatePicker): landscape mode in date picker
userquin Oct 21, 2024
ad4e751
chore: update landscape width variable
userquin Oct 21, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions packages/vuetify/src/components/VDatePicker/VDatePicker.sass
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,5 +6,8 @@
overflow: hidden
width: $date-picker-width

&.v-picker--landscape
width: $date-picker-landscape-width

&--show-week
width: $date-picker-show-week-width
1 change: 1 addition & 0 deletions packages/vuetify/src/components/VDatePicker/_variables.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
$date-picker-width: 328px !default;
$date-picker-landscape-width: 545px !default;
$date-picker-show-week-width: 368px !default;

$date-picker-header-height: 70px !default;
Expand Down
78 changes: 39 additions & 39 deletions packages/vuetify/src/labs/VPicker/VPicker.sass
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,47 +6,47 @@
.v-picker.v-sheet
display: grid
grid-auto-rows: min-content
grid-template-areas: "title" "header" "body"
grid-template-areas: "header" "body"
overflow: hidden
@include tools.elevation($picker-elevation)
@include tools.rounded($picker-border-radius)

&.v-picker--with-actions
grid-template-areas: "title" "header" "body" "actions"

.v-picker__body
grid-area: body
overflow: hidden
position: relative

.v-picker__header
grid-area: header

.v-picker__actions
grid-area: actions
padding: $picker-actions-padding
display: flex
align-items: center
justify-content: flex-end

.v-btn
min-width: 48px

&:not(:last-child)
margin-inline-end: 8px

.v-picker--landscape
grid-template-areas: "title" "header body" "header body"

.v-picker--landscape.v-picker--with-actions
grid-template-areas: "title" "header body" "header actions"

.v-picker-title
text-transform: uppercase
font-size: .75rem
grid-area: title
padding-inline: 24px 12px
padding-top: 16px
padding-bottom: 16px
font-weight: $picker-title-font-weight
letter-spacing: .1666666667em
grid-template-areas: "header" "body" "actions"

.v-picker__body
grid-area: body
overflow: hidden
position: relative

.v-picker__header
grid-area: header

.v-picker__actions
grid-area: actions
padding: $picker-actions-padding
display: flex
align-items: center
justify-content: flex-end

.v-btn
min-width: 48px

&:not(:last-child)
margin-inline-end: 8px

&.v-picker--landscape
grid-template-areas: "header body" "header body"

&.v-picker--landscape.v-picker--with-actions
grid-template-areas: "header body" "header actions"

.v-picker-title
text-transform: uppercase
font-size: .75rem
grid-area: title
Copy link
Member

Choose a reason for hiding this comment

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

Where does this one go now?

Copy link
Member Author

Choose a reason for hiding this comment

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

Inside the header

Copy link
Member Author

Choose a reason for hiding this comment

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

https://github.com/vuetifyjs/vuetify/blob/master/packages/vuetify/src/labs/VPicker/VPicker.tsx#L68

Copy link
Member Author

Choose a reason for hiding this comment

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

Using Labs component...

padding-inline: 24px 12px
padding-top: 16px
padding-bottom: 16px
font-weight: $picker-title-font-weight
letter-spacing: .1666666667em