[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 ( return (
<div className="input-group-wrapper"> <div className="input-group-wrapper">
<span>{translate('SCHEDULING_TOGGLE')}</span> <span className="input-group-header">{translate('SCHEDULING_TOGGLE')}</span>
<label className="switch checkbox"> <label className="switch checkbox">
<input <input
type="checkbox" type="checkbox"

View File

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

View File

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

View File

@ -51,11 +51,13 @@ class FieldsClass extends Component<StateProps> {
<div className="Tab-content-pane"> <div className="Tab-content-pane">
<AddressField /> <AddressField />
<div className="row form-group"> <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} /> <AmountField hasUnitDropdown={true} hasSendEverything={true} />
</div> </div>
{schedulingAvailable && ( {schedulingAvailable && (
<div className="col-xs-2"> <div className="col-sm-3 col-md-2">
<SchedulingToggle /> <SchedulingToggle />
</div> </div>
)} )}

View File

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