fix(ui5-datetime-picker): Adapt components with responsive paddings (#4977)

Todor-ads · web-flow · commit 6c5e51613df6 · 2022-04-06T09:49:16.000+03:00
Related to: #4869
diff --git a/packages/main/src/DateTimePicker.js b/packages/main/src/DateTimePicker.js
@@ -234,6 +234,9 @@ class DateTimePicker extends DatePicker {
 				"ui5-dt-cal--hidden": this.phone && this.showTimeView,
 				"ui5-dt-time--hidden": this.phone && this.showDateView,
 			},
+			footer: {
+				"ui5-dt-picker-footer-time-hidden": (this.phone && this.showTimeView) || (this.phone && this.showDateView),
+			},
 		};
 	}
 
diff --git a/packages/main/src/DateTimePickerPopover.hbs b/packages/main/src/DateTimePickerPopover.hbs
@@ -53,7 +53,7 @@
 {{/inline}}
 
 {{#*inline "footer"}}
-	<div slot="footer" class="ui5-dt-picker-footer">
+	<div slot="footer" class="ui5-dt-picker-footer {{classes.footer}}">
 		<ui5-button
 			id="ok"
 			class="ui5-dt-picker-action"
diff --git a/packages/main/src/themes/Calendar.css b/packages/main/src/themes/Calendar.css
@@ -7,7 +7,7 @@
     box-sizing: border-box;
     height: var(--_ui5_calendar_height);
     width: var(--_ui5_calendar_width);
-    margin: var(--_ui5_calendar_top_bottom_padding) var(--_ui5_calendar_left_right_padding) 0;
+    padding: var(--_ui5_calendar_top_bottom_padding) var(--_ui5_calendar_left_right_padding) 0;
     display: flex;
     flex-direction: column-reverse;
     justify-content: flex-end;
diff --git a/packages/main/src/themes/DateTimePickerPopover.css b/packages/main/src/themes/DateTimePickerPopover.css
@@ -13,7 +13,6 @@
 
 .ui5-dt-cal {
 	width: auto;
-	padding: 0.5rem 0.25rem 0 0.25rem; /* both cozy and compact */
 	box-sizing: border-box;
 }
 
@@ -54,6 +53,11 @@
 	padding: 0 0.5rem 0 0.25rem;
 }
 
+
+.ui5-dt-picker-footer.ui5-dt-picker-footer-time-hidden {
+	padding: 0;
+}
+
 .ui5-dt-picker-action {
 	margin: 0.25rem;
 }

Original file line number	Diff line number	Diff line change
`@@ -234,6 +234,9 @@ class DateTimePicker extends DatePicker {`
`234`	`234`	`"ui5-dt-cal--hidden": this.phone && this.showTimeView,`
`235`	`235`	`"ui5-dt-time--hidden": this.phone && this.showDateView,`
`236`	`236`	`},`
	`237`	`+ footer: {`
	`238`	`+ "ui5-dt-picker-footer-time-hidden": (this.phone && this.showTimeView) \|\| (this.phone && this.showDateView),`
	`239`	`+ },`
`237`	`240`	`};`
`238`	`241`	`}`
`239`	`242`
Original file line number	Diff line number	Diff line change
`@@ -13,7 +13,6 @@`
`13`	`13`
`14`	`14`	`.ui5-dt-cal {`
`15`	`15`	`width: auto;`
`16`		`- padding: 0.5rem 0.25rem 0 0.25rem; /* both cozy and compact */`
`17`	`16`	`box-sizing: border-box;`
`18`	`17`	`}`
`19`	`18`
`@@ -54,6 +53,11 @@`
`54`	`53`	`padding: 0 0.5rem 0 0.25rem;`
`55`	`54`	`}`
`56`	`55`
	`56`	`+`
	`57`	`+.ui5-dt-picker-footer.ui5-dt-picker-footer-time-hidden {`
	`58`	`+ padding: 0;`
	`59`	`+}`
	`60`	`+`
`57`	`61`	`.ui5-dt-picker-action {`
`58`	`62`	`margin: 0.25rem;`
`59`	`63`	`}`