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,
diff --git a/src/routes/Discover/Discover.js b/src/routes/Discover/Discover.js
index bab40a1c2..edbb26550 100644
--- a/src/routes/Discover/Discover.js
+++ b/src/routes/Discover/Discover.js
@@ -107,9 +107,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 62e3adaee..527238757 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,27 @@
}
.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);
+ display: flex;
+ flex: 1 0 5rem;
+ justify-content: flex-end;
- .filter-icon {
+ .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 +228,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 {
@@ -363,7 +377,9 @@
display: none;
&~.filter-container {
- display: flex;
+ .filter-button {
+ display: flex;
+ }
}
}
}
@@ -375,4 +391,22 @@
}
}
}
+
+ .selectable-inputs-modal {
+ .selectable-inputs-modal-container {
+ .selectable-inputs-modal-content {
+ .select-input {
+ display: none;
+
+ &:nth-child(n+2) {
+ display: flex;
+
+ &:not(:last-child) {
+ margin-bottom: 1rem;
+ }
+ }
+ }
+ }
+ }
+ }
}
\ No newline at end of file