Mirrors/Radarr
1
0
Fork 0
mirror of https://github.com/Radarr/Radarr.git synced 2024-09-11 20:12:41 +02:00
Code Issues Releases Wiki Activity

Fixed: Managing display profiles on mobile

Browse Source 
Fixes #5761

(cherry picked from commit c2fcdb445776d3898be7938216cf8ace65a1a236)
This commit is contained in:
Mark McDowall 2021-01-15 17:24:55 -08:00 committed by Qstick
parent 4dc67c027b
commit 2b7a383886
2 changed files with 61 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
frontend/src/Settings/Profiles/Delay/DelayProfiles.css
View File

@ -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%;
}
}

88
frontend/src/Settings/Profiles/Delay/DelayProfiles.js
View File

@ -5,7 +5,8 @@ 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 { icons } from 'Helpers/Props'; import Scroller from 'Components/Scroller/Scroller';
import { icons, scrollDirections } from 'Helpers/Props';
import translate from 'Utilities/String/translate'; import translate from 'Utilities/String/translate';
import DelayProfile from './DelayProfile'; import DelayProfile from './DelayProfile';
import DelayProfileDragPreview from './DelayProfileDragPreview'; import DelayProfileDragPreview from './DelayProfileDragPreview';
@ -72,48 +73,59 @@ class DelayProfiles extends Component {
errorMessage={translate('UnableToLoadDelayProfiles')} errorMessage={translate('UnableToLoadDelayProfiles')}
{...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}
tagList={tagList}
{...item}
{...otherProps}
index={index}
isDragging={isDragging}
isDraggingUp={isDraggingUp}
isDraggingDown={isDraggingDown}
onConfirmDeleteDelayProfile={onConfirmDeleteDelayProfile}
/>
);
})
}
{ <DelayProfileDragPreview
defaultProfile && width={width}
<div>
<DelayProfile
tagList={tagList}
isDragging={false}
onConfirmDeleteDelayProfile={onConfirmDeleteDelayProfile}
{...defaultProfile}
/> />
</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