Mirrors/Sonarr
1
0
Fork 0
mirror of https://github.com/Sonarr/Sonarr.git synced 2024-10-30 07:22:35 +01:00
Code Issues Releases Wiki Activity

Fixed: Managing display profiles on mobile

Browse Source
This commit is contained in:
Mark McDowall 2021-01-15 17:24:55 -08:00
parent a6637b2911
commit c2fcdb4457
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 {
user-select: none;
}
@ -25,3 +29,10 @@
width: $dragHandleWidth;
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

@ -1,11 +1,12 @@
import PropTypes from 'prop-types';
import React, { Component } from 'react';
import { icons } from 'Helpers/Props';
import { icons, scrollDirections } from 'Helpers/Props';
import FieldSet from 'Components/FieldSet';
import Icon from 'Components/Icon';
import Link from 'Components/Link/Link';
import Measure from 'Components/Measure';
import PageSectionContent from 'Components/Page/PageSectionContent';
import Scroller from 'Components/Scroller/Scroller';
import DelayProfileDragSource from './DelayProfileDragSource';
import DelayProfileDragPreview from './DelayProfileDragPreview';
import DelayProfile from './DelayProfile';
@ -71,48 +72,59 @@ class DelayProfiles extends Component {
errorMessage="Unable to load Delay Profiles"
{...otherProps}
>
<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>
<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}
/>
);
})
<Scroller
className={styles.horizontalScroll}
scrollDirection={
scrollDirections.HORIZONTAL
}
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
width={width}
/>
</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}
/>
);
})
}
{
defaultProfile &&
<div>
<DelayProfile
tagList={tagList}
isDragging={false}
onConfirmDeleteDelayProfile={onConfirmDeleteDelayProfile}
{...defaultProfile}
<DelayProfileDragPreview
width={width}
/>
</div>
}
{
defaultProfile ?
<div>
<DelayProfile
tagList={tagList}
isDragging={false}
onConfirmDeleteDelayProfile={onConfirmDeleteDelayProfile}
{...defaultProfile}
/>
</div> :
null
}
</div>
</Scroller>
<div className={styles.addDelayProfile}>
<Link