From c2fcdb445776d3898be7938216cf8ace65a1a236 Mon Sep 17 00:00:00 2001 From: Mark McDowall Date: Fri, 15 Jan 2021 17:24:55 -0800 Subject: [PATCH] Fixed: Managing display profiles on mobile --- .../Settings/Profiles/Delay/DelayProfiles.css | 11 +++ .../Settings/Profiles/Delay/DelayProfiles.js | 90 +++++++++++-------- 2 files changed, 62 insertions(+), 39 deletions(-) diff --git a/frontend/src/Settings/Profiles/Delay/DelayProfiles.css b/frontend/src/Settings/Profiles/Delay/DelayProfiles.css index 3cf3e9020..efc0b14fa 100644 --- a/frontend/src/Settings/Profiles/Delay/DelayProfiles.css +++ b/frontend/src/Settings/Profiles/Delay/DelayProfiles.css @@ -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%; + } +} diff --git a/frontend/src/Settings/Profiles/Delay/DelayProfiles.js b/frontend/src/Settings/Profiles/Delay/DelayProfiles.js index a745da9d4..6c81357a5 100644 --- a/frontend/src/Settings/Profiles/Delay/DelayProfiles.js +++ b/frontend/src/Settings/Profiles/Delay/DelayProfiles.js @@ -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} > -
-
Protocol
-
Usenet Delay
-
Torrent Delay
-
Tags
-
- -
- { - items.map((item, index) => { - return ( - - ); - }) + +
+
+
Protocol
+
Usenet Delay
+
Torrent Delay
+
Tags
+
- -
- - { - defaultProfile && -
- + { + items.map((item, index) => { + return ( + + ); + }) + } + +
- } + + { + defaultProfile ? +
+ +
: + null + } +
+