[FIX] Scheduling responsiveness

This commit is contained in:
Joseph Bagaric 2018-04-02 13:34:07 +02:00 committed by Bagaric
parent 42af363088
commit c2f1d002b5
5 changed files with 13 additions and 9 deletions

View File

@ -21,7 +21,7 @@ class SchedulingToggleClass extends Component<Props> {
return (
<div className="input-group-wrapper">
<span>{translate('SCHEDULING_TOGGLE')}</span>
<span className="input-group-header">{translate('SCHEDULING_TOGGLE')}</span>
<label className="switch checkbox">
<input
type="checkbox"

View File

@ -14,7 +14,7 @@
}
.vcenter-sm {
@media (min-width: $screen-sm) {
@media (min-width: $screen-lg) {
display: flex;
align-items: center;
}

View File

@ -27,16 +27,17 @@ class ScheduleFieldsClass extends React.Component<Props> {
<br />
<div className="row form-group vcenter-sm">
<div className="col-xs-12 col-sm-6 col-md-3 col-md-push-9">
<div className="col-lg-3 col-lg-push-9">
<ScheduleType />
<hr className="hidden-lg" />
</div>
{schedulingType.value === 'time' && (
<>
<div className="col-xs-12 col-md-3 col-md-pull-3">
<div className="col-md-5 col-lg-3 col-lg-pull-3">
<ScheduleTimestampField />
</div>
<div className="col-xs-12 col-md-3 col-md-pull-3">
<div className="col-md-4 col-lg-3 col-lg-pull-3">
<ScheduleTimezoneDropDown />
</div>
</>
@ -44,13 +45,13 @@ class ScheduleFieldsClass extends React.Component<Props> {
{schedulingType.value === 'block' && (
<>
<div className="col-xs-12 col-md-6 col-md-pull-3">
<div className="col-md-9 col-lg-6 col-lg-pull-3">
<WindowStartField />
</div>
</>
)}
<div className="col-xs-12 col-md-3 col-md-pull-3">
<div className="col-lg-3 col-lg-pull-3">
<WindowSizeField />
</div>
</div>

View File

@ -51,11 +51,13 @@ class FieldsClass extends Component<StateProps> {
<div className="Tab-content-pane">
<AddressField />
<div className="row form-group">
<div className={schedulingAvailable ? 'col-xs-10' : 'col-xs-12'}>
<div
className={schedulingAvailable ? 'col-sm-9 col-md-10' : 'col-sm-12 col-md-12'}
>
<AmountField hasUnitDropdown={true} hasSendEverything={true} />
</div>
{schedulingAvailable && (
<div className="col-xs-2">
<div className="col-sm-3 col-md-2">
<SchedulingToggle />
</div>
)}

View File

@ -9,6 +9,7 @@ $travel-distance: 38px;
display: inline-block;
width: 72px;
height: 34px;
margin: 5px 0;
& input {
display: none;