From dad4804bad35ddf9b383f954de3604aea3163673 Mon Sep 17 00:00:00 2001 From: Botzy Date: Mon, 17 Feb 2025 12:57:20 +0200 Subject: [PATCH 1/5] fix(Discover): Hide duplicated catalog type filter on mobile --- src/routes/Discover/styles.less | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/src/routes/Discover/styles.less b/src/routes/Discover/styles.less index 62e3adaee..50eee3c04 100644 --- a/src/routes/Discover/styles.less +++ b/src/routes/Discover/styles.less @@ -375,4 +375,16 @@ } } } + + .selectable-inputs-modal { + .selectable-inputs-modal-container { + .selectable-inputs-modal-content { + .select-input { + &:first-child { + display: none; + } + } + } + } + } } \ No newline at end of file From b1365e31d4d9327065ffaf1c2aeeeca52a55c1a7 Mon Sep 17 00:00:00 2001 From: Botzy Date: Tue, 18 Feb 2025 15:33:11 +0200 Subject: [PATCH 2/5] fix(Multiselect): destruct options from props to not pass them to component --- src/components/Multiselect/Multiselect.js | 20 ++++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/src/components/Multiselect/Multiselect.js b/src/components/Multiselect/Multiselect.js index c791c60d1..0e353eef4 100644 --- a/src/components/Multiselect/Multiselect.js +++ b/src/components/Multiselect/Multiselect.js @@ -10,16 +10,16 @@ const ModalDialog = require('stremio/components/ModalDialog'); const useBinaryState = require('stremio/common/useBinaryState'); const styles = require('./styles'); -const Multiselect = ({ className, mode, direction, title, disabled, dataset, renderLabelContent, renderLabelText, onOpen, onClose, onSelect, ...props }) => { +const Multiselect = ({ className, mode, direction, title, disabled, dataset, options, renderLabelContent, renderLabelText, onOpen, onClose, onSelect, ...props }) => { const [menuOpen, , closeMenu, toggleMenu] = useBinaryState(false); - const options = React.useMemo(() => { - return Array.isArray(props.options) ? - props.options.filter((option) => { + const filteredOptions = React.useMemo(() => { + return Array.isArray(options) ? + options.filter((option) => { return option && (typeof option.value === 'string' || option.value === null); }) : []; - }, [props.options]); + }, [options]); const selected = React.useMemo(() => { return Array.isArray(props.selected) ? props.selected.filter((value) => { @@ -94,7 +94,7 @@ const Multiselect = ({ className, mode, direction, title, disabled, dataset, ren : selected.length > 0 ? selected.map((value) => { - const option = options.find((option) => option.value === value); + const option = filteredOptions.find((option) => option.value === value); return option && typeof option.label === 'string' ? option.label : @@ -109,12 +109,12 @@ const Multiselect = ({ className, mode, direction, title, disabled, dataset, ren } {children} - ), [menuOpen, title, disabled, options, selected, labelOnClick, renderLabelContent, renderLabelText]); + ), [menuOpen, title, disabled, filteredOptions, selected, labelOnClick, renderLabelContent, renderLabelText]); const renderMenu = React.useCallback(() => (
{ - options.length > 0 ? - options.map(({ label, title, value }) => ( + filteredOptions.length > 0 ? + filteredOptions.map(({ label, title, value }) => (
- ), [options, selected, menuOnKeyDown, menuOnClick, optionOnClick]); + ), [filteredOptions, selected, menuOnKeyDown, menuOnClick, optionOnClick]); const renderPopupLabel = React.useMemo(() => (labelProps) => { return renderLabel({ ...labelProps, From 224b6e6f76bdaa376c5b802df8cdc4a57ca7f59b Mon Sep 17 00:00:00 2001 From: Botzy Date: Tue, 18 Feb 2025 15:35:14 +0200 Subject: [PATCH 3/5] fix(Discover): improve styles to handle filters edge cases --- src/routes/Discover/Discover.js | 8 +++-- src/routes/Discover/styles.less | 55 +++++++++++++++++++++------------ 2 files changed, 41 insertions(+), 22 deletions(-) diff --git a/src/routes/Discover/Discover.js b/src/routes/Discover/Discover.js index abcdfb205..db614a363 100644 --- a/src/routes/Discover/Discover.js +++ b/src/routes/Discover/Discover.js @@ -98,9 +98,11 @@ const Discover = ({ urlParams, queryParams }) => { onSelect={onSelect} /> ))} - +
+ +
{ discover.catalog !== null && !discover.catalog.installed ? diff --git a/src/routes/Discover/styles.less b/src/routes/Discover/styles.less index 50eee3c04..bf396c5ce 100644 --- a/src/routes/Discover/styles.less +++ b/src/routes/Discover/styles.less @@ -59,7 +59,9 @@ display: none; &~.filter-container { - display: flex; + .filter-button { + display: flex; + } } } @@ -69,20 +71,26 @@ } .filter-container { - flex: none; - display: none; - align-items: center; - justify-content: center; - width: 3rem; - height: 3rem; - border-radius: var(--border-radius); - background-color: var(--overlay-color); - - .filter-icon { + display: flex; + flex: 1 0 5rem; + justify-content: flex-end; + .filter-button { flex: none; - width: 1.4rem; - height: 1.4rem; - color: var(--primary-foreground-color); + display: none; + align-items: center; + justify-content: center; + width: 3rem; + height: 3rem; + margin-left: 1.5rem; + border-radius: var(--border-radius); + background-color: var(--overlay-color); + + .filter-icon { + flex: none; + width: 1.4rem; + height: 1.4rem; + color: var(--primary-foreground-color); + } } } } @@ -219,9 +227,14 @@ .select-input { height: 3.5rem; + display: none; - &:not(:last-child) { - margin-bottom: 1rem; + &:nth-child(n+4) { + display: flex; + + &:not(:last-child) { + margin-bottom: 1rem; + } } .multiselect-menu-container { @@ -362,7 +375,7 @@ &:nth-child(n+2) { display: none; - &~.filter-container { + &~.filter-button { display: flex; } } @@ -380,8 +393,12 @@ .selectable-inputs-modal-container { .selectable-inputs-modal-content { .select-input { - &:first-child { - display: none; + display: none; + &:nth-child(n+2) { + display: flex; + &:not(:last-child) { + margin-bottom: 1rem; + } } } } From 0506d53f4e341db832918e89c1755ccd514dc1d8 Mon Sep 17 00:00:00 2001 From: Botzy Date: Wed, 19 Feb 2025 17:38:17 +0200 Subject: [PATCH 4/5] fix(Discover): fix mobile styles for filter button --- src/routes/Discover/styles.less | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/src/routes/Discover/styles.less b/src/routes/Discover/styles.less index bf396c5ce..266ef1481 100644 --- a/src/routes/Discover/styles.less +++ b/src/routes/Discover/styles.less @@ -374,9 +374,10 @@ .select-input { &:nth-child(n+2) { display: none; - - &~.filter-button { - display: flex; + &~.filter-container { + .filter-button { + display: flex; + } } } } From a50e3c7186f661cc048f6704a6bb70ffb3399df1 Mon Sep 17 00:00:00 2001 From: Botzy Date: Fri, 21 Feb 2025 15:09:05 +0200 Subject: [PATCH 5/5] fix(Discover): apply new lines in styles where missed --- src/routes/Discover/styles.less | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/routes/Discover/styles.less b/src/routes/Discover/styles.less index 266ef1481..527238757 100644 --- a/src/routes/Discover/styles.less +++ b/src/routes/Discover/styles.less @@ -74,6 +74,7 @@ display: flex; flex: 1 0 5rem; justify-content: flex-end; + .filter-button { flex: none; display: none; @@ -374,6 +375,7 @@ .select-input { &:nth-child(n+2) { display: none; + &~.filter-container { .filter-button { display: flex; @@ -395,8 +397,10 @@ .selectable-inputs-modal-content { .select-input { display: none; + &:nth-child(n+2) { display: flex; + &:not(:last-child) { margin-bottom: 1rem; }