mirror of
https://gitee.com/baidu/amis.git
synced 2024-11-30 10:59:42 +08:00
fix: 移动端日期、地图细节优化
This commit is contained in:
parent
ee1f6b731a
commit
016ed06fd3
@ -109,7 +109,8 @@
|
||||
.#{$ns}CalendarMobile {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
overflow: scroll;
|
||||
overflow-y: scroll;
|
||||
overflow-x: hidden;
|
||||
|
||||
&-pop {
|
||||
position: fixed;
|
||||
@ -122,6 +123,11 @@
|
||||
overflow: hidden;
|
||||
border-width: 0;
|
||||
|
||||
&--quarters,
|
||||
&--months {
|
||||
height: px2rem(400px);
|
||||
}
|
||||
|
||||
&--time {
|
||||
height: px2rem(360px);
|
||||
max-height: 90vh;
|
||||
@ -265,12 +271,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
&-embed {
|
||||
.#{$ns}CalendarMobile-footer {
|
||||
width: 90vw;
|
||||
}
|
||||
}
|
||||
|
||||
&-footer {
|
||||
flex-shrink: 0;
|
||||
|
||||
|
@ -323,8 +323,6 @@
|
||||
|
||||
&.is-mobile {
|
||||
.#{$ns}Form-item {
|
||||
padding: px2rem(10px) 0 0 0;
|
||||
|
||||
.#{$ns}Form-rowInner {
|
||||
flex: 1;
|
||||
}
|
||||
@ -332,6 +330,12 @@
|
||||
|
||||
.#{$ns}Combo-delBtn {
|
||||
height: px2rem(20px);
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
.#{$ns}Combo-item {
|
||||
align-items: center;
|
||||
border-bottom: var(--Form-input-borderWidth) solid var(--borderColor);
|
||||
}
|
||||
}
|
||||
|
||||
@ -342,12 +346,6 @@
|
||||
border-bottom: var(--Form-input-borderWidth) solid var(--borderColor);
|
||||
}
|
||||
}
|
||||
|
||||
&.is-mobile:is(.#{$ns}Combo--hor) {
|
||||
.#{$ns}Form-control {
|
||||
padding-top: px2rem(10px);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.#{$ns}ComboTabs > .#{$ns}Tabs-links {
|
||||
|
@ -511,7 +511,7 @@
|
||||
|
||||
.#{$ns}Form-item {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
// flex-wrap: wrap;
|
||||
margin-bottom: 0;
|
||||
padding: var(--Form-item-mobile-gap) 0;
|
||||
position: relative;
|
||||
@ -625,6 +625,7 @@
|
||||
flex: 1;
|
||||
flex-wrap: wrap;
|
||||
font-size: var(--fontSizeLg);
|
||||
overflow-x: hidden;
|
||||
|
||||
.#{$ns}ColorPicker {
|
||||
height: 100%;
|
||||
@ -653,7 +654,7 @@
|
||||
|
||||
.#{$ns}Form-hint,
|
||||
.#{$ns}Form-remark,
|
||||
.#{$ns}Form-static,
|
||||
// .#{$ns}Form-static,
|
||||
.#{$ns}Form-group--hor .#{$ns}Form-item,
|
||||
.#{$ns}SwitchControl,
|
||||
.#{$ns}CheckboxControl,
|
||||
@ -663,6 +664,20 @@
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.#{$ns}CheckboxControl {
|
||||
padding-top: px2rem(2px);
|
||||
}
|
||||
|
||||
.#{$ns}Form-static {
|
||||
.#{$ns}Progress {
|
||||
margin-top: px2rem(3px);
|
||||
}
|
||||
|
||||
.#{$ns}Field-quickEditBtn {
|
||||
vertical-align: baseline;
|
||||
}
|
||||
}
|
||||
|
||||
.#{$ns}Form-group--horizontal .#{$ns}TextControl-input input {
|
||||
height: var(--Form-input-height);
|
||||
}
|
||||
|
@ -41,6 +41,12 @@
|
||||
|
||||
&.is-mobile {
|
||||
border: none;
|
||||
|
||||
.#{$ns}LocationPicker-toggler {
|
||||
svg {
|
||||
top: 0.125rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-placeholder {
|
||||
@ -55,6 +61,8 @@
|
||||
margin-right: var(--gap-base);
|
||||
flex-basis: 0;
|
||||
flex-grow: 1;
|
||||
overflow-x: auto;
|
||||
max-width: calc(100% - px2rem(20px));
|
||||
}
|
||||
|
||||
&-toggler {
|
||||
@ -110,6 +118,7 @@
|
||||
&.is-mobile {
|
||||
flex: 1;
|
||||
text-align: right;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -323,10 +323,10 @@ export class BaiduMapPicker extends React.Component<
|
||||
const results = local.getResults();
|
||||
const poi = results.getPoi(0);
|
||||
this.setState({
|
||||
inputValue: poi.title,
|
||||
inputValue: poi?.title,
|
||||
sugs: []
|
||||
});
|
||||
this.getLocations(poi.point, true);
|
||||
this.getLocations(poi?.point, true);
|
||||
}
|
||||
});
|
||||
local.search(value);
|
||||
|
@ -148,6 +148,7 @@ export class CalendarMobile extends React.Component<
|
||||
|
||||
componentDidUpdate(prevProps: CalendarMobileProps) {
|
||||
const props = this.props;
|
||||
const {classPrefix: ns} = props;
|
||||
|
||||
if (
|
||||
prevProps.minDate !== props.minDate ||
|
||||
@ -168,6 +169,28 @@ export class CalendarMobile extends React.Component<
|
||||
() => this.initMonths()
|
||||
);
|
||||
}
|
||||
|
||||
if (
|
||||
(prevProps.startDate !== props.startDate &&
|
||||
props.startDate !== this.state.startDate) ||
|
||||
(prevProps.endDate !== props.endDate &&
|
||||
props.endDate !== this.state.endDate)
|
||||
) {
|
||||
this.setState(
|
||||
{
|
||||
startDate: props.startDate,
|
||||
endDate: props.endDate
|
||||
},
|
||||
() =>
|
||||
requestAnimationFrame(() => {
|
||||
document
|
||||
.querySelector(
|
||||
`.${ns}CalendarMobile:not(.${ns}CalendarMobile-embed) .rdtRangeStart:not(.rdtNew)`
|
||||
)
|
||||
?.scrollIntoView();
|
||||
})
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
componentWillUnmount() {
|
||||
|
@ -608,10 +608,11 @@ export default class TagControl extends React.PureComponent<
|
||||
placeholder: __(placeholder ?? 'Tag.placeholder'),
|
||||
value: this.state.inputValue,
|
||||
onKeyDown: this.handleKeyDown,
|
||||
onFocus: this.handleFocus,
|
||||
onFocus: !mobileUI ? this.handleFocus : undefined,
|
||||
onBlur: this.handleBlur,
|
||||
disabled
|
||||
})}
|
||||
onResultClick={mobileUI ? this.handleFocus : undefined}
|
||||
inputPlaceholder={''}
|
||||
onChange={this.handleInputChange}
|
||||
className={cx('TagControl-input')}
|
||||
|
Loading…
Reference in New Issue
Block a user