Fixed: Managing display profiles on mobile

pull/4267/head
Mark McDowall 4 years ago
parent a6637b2911
commit c2fcdb4457

@ -1,3 +1,7 @@
.horizontalScroll {
overflow-x: auto;
}
.delayProfiles { .delayProfiles {
user-select: none; user-select: none;
} }
@ -25,3 +29,10 @@
width: $dragHandleWidth; width: $dragHandleWidth;
text-align: center; text-align: center;
} }
@media only screen and (max-width: $breakpointSmall) {
.horizontalScroll {
overflow-y: hidden;
width: 100%;
}
}

@ -1,11 +1,12 @@
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import React, { Component } from 'react'; import React, { Component } from 'react';
import { icons } from 'Helpers/Props'; import { icons, scrollDirections } from 'Helpers/Props';
import FieldSet from 'Components/FieldSet'; import FieldSet from 'Components/FieldSet';
import Icon from 'Components/Icon'; import Icon from 'Components/Icon';
import Link from 'Components/Link/Link'; import Link from 'Components/Link/Link';
import Measure from 'Components/Measure'; import Measure from 'Components/Measure';
import PageSectionContent from 'Components/Page/PageSectionContent'; import PageSectionContent from 'Components/Page/PageSectionContent';
import Scroller from 'Components/Scroller/Scroller';
import DelayProfileDragSource from './DelayProfileDragSource'; import DelayProfileDragSource from './DelayProfileDragSource';
import DelayProfileDragPreview from './DelayProfileDragPreview'; import DelayProfileDragPreview from './DelayProfileDragPreview';
import DelayProfile from './DelayProfile'; import DelayProfile from './DelayProfile';
@ -71,48 +72,59 @@ class DelayProfiles extends Component {
errorMessage="Unable to load Delay Profiles" errorMessage="Unable to load Delay Profiles"
{...otherProps} {...otherProps}
> >
<div className={styles.delayProfilesHeader}> <Scroller
<div className={styles.column}>Protocol</div> className={styles.horizontalScroll}
<div className={styles.column}>Usenet Delay</div> scrollDirection={
<div className={styles.column}>Torrent Delay</div> scrollDirections.HORIZONTAL
<div className={styles.tags}>Tags</div>
</div>
<div className={styles.delayProfiles}>
{
items.map((item, index) => {
return (
<DelayProfileDragSource
key={item.id}
tagList={tagList}
{...item}
{...otherProps}
index={index}
isDragging={isDragging}
isDraggingUp={isDraggingUp}
isDraggingDown={isDraggingDown}
onConfirmDeleteDelayProfile={onConfirmDeleteDelayProfile}
/>
);
})
} }
autoFocus={false}
>
<div>
<div className={styles.delayProfilesHeader}>
<div className={styles.column}>Protocol</div>
<div className={styles.column}>Usenet Delay</div>
<div className={styles.column}>Torrent Delay</div>
<div className={styles.tags}>Tags</div>
</div>
<DelayProfileDragPreview <div className={styles.delayProfiles}>
width={width} {
/> items.map((item, index) => {
</div> return (
<DelayProfileDragSource
{ key={item.id}
defaultProfile && tagList={tagList}
<div> {...item}
<DelayProfile {...otherProps}
tagList={tagList} index={index}
isDragging={false} isDragging={isDragging}
onConfirmDeleteDelayProfile={onConfirmDeleteDelayProfile} isDraggingUp={isDraggingUp}
{...defaultProfile} isDraggingDown={isDraggingDown}
onConfirmDeleteDelayProfile={onConfirmDeleteDelayProfile}
/>
);
})
}
<DelayProfileDragPreview
width={width}
/> />
</div> </div>
}
{
defaultProfile ?
<div>
<DelayProfile
tagList={tagList}
isDragging={false}
onConfirmDeleteDelayProfile={onConfirmDeleteDelayProfile}
{...defaultProfile}
/>
</div> :
null
}
</div>
</Scroller>
<div className={styles.addDelayProfile}> <div className={styles.addDelayProfile}>
<Link <Link

Loading…
Cancel
Save