Creepso/stremio-web
1
0
Fork 0
mirror of https://github.com/Stremio/stremio-web.git synced 2026-03-11 21:27:05 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

refactor(Discover): use modal to display filters instead of Filters component

Browse source
This commit is contained in:
Tim 2022-02-18 14:16:05 +01:00
parent 9dbd3dc929
commit 585fca48b0
2 changed files with 29 additions and 66 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

26
src/routes/Discover/Discover.js
View file

@ -9,7 +9,6 @@ const { AddonDetailsModal, Button, MainNavBars, MetaItem, Image, MetaPreview, Mu
const useDiscover = require('./useDiscover');
const useSelectableInputs = require('./useSelectableInputs');
const styles = require('./styles');
const { Filters } = require('stremio/common');
const Discover = ({ urlParams, queryParams }) => {
const { core } = useServices();
@ -107,9 +106,6 @@ const Discover = ({ urlParams, queryParams }) => {
:
<PaginationInput label={'1'} className={classnames(styles['pagination-input'], styles['pagination-input-placeholder'])} />
}
<Filters className={styles['filters']}>
{ renderMultiselectsInputs() }
</Filters>
</div>
:
null
@ -194,24 +190,10 @@ const Discover = ({ urlParams, queryParams }) => {
</div>
{
inputsModalOpen && discover.defaultRequest ?
<ModalDialog title={'Catalog filters'} className={styles['selectable-inputs-modal-container']} onCloseRequest={closeInputsModal}>
{selectInputs.map(({ title, isRequired, options, selected, renderLabelText, onSelect }, index) => (
<div key={index} className={styles['selectable-input-container']}>
<div className={styles['select-input-label']} title={title}>
{title}
{isRequired ? '*' : null}
</div>
<Multiselect
className={styles['select-input']}
mode={'modal'}
title={title}
options={options}
selected={selected}
renderLabelText={renderLabelText}
onSelect={onSelect}
/>
</div>
))}
<ModalDialog title={'Catalog filters'} className={styles['selectable-inputs-modal']} onCloseRequest={closeInputsModal}>
<div className={styles['selectable-input-container']}>
{ renderMultiselectsInputs() }
</div>
</ModalDialog>
:
null

69
src/routes/Discover/styles.less
View file

@ -18,6 +18,11 @@
pagination-label: label;
}
:import('~stremio/common/ModalDialog/styles.less') {
selectable-inputs-modal-container: modal-dialog-container;
selectable-inputs-modal-content: modal-dialog-content;
}
.discover-container {
width: 100%;
height: 100%;
@ -39,7 +44,7 @@
flex: none;
align-self: stretch;
display: flex;
flex-direction: row;
flex-direction: row-reverse;
padding: 1.5rem;
overflow: visible;
@ -79,7 +84,6 @@
justify-content: center;
width: 3.5rem;
height: 3.5rem;
margin-left: 1.5rem;
background-color: @color-background;
.filter-icon {
@ -246,48 +250,25 @@
}
}
.selectable-inputs-modal-container {
.selectable-input-container {
display: flex;
flex-direction: row;
align-items: center;
.selectable-inputs-modal {
.selectable-inputs-modal-container {
overflow: visible;
&:not(:last-child) {
margin-bottom: 1rem;
}
.selectable-inputs-modal-content {
overflow-y: visible !important;
overflow: visible;
.select-input-label {
flex: none;
width: 10rem;
max-height: 2.4em;
margin-right: 1.5rem;
font-size: 1.1rem;
color: @color-background-dark2-90;
}
.selectable-input-container {
display: flex;
gap: 1em;
flex-direction: column;
overflow: visible;
.select-input {
flex: none;
width: 15rem;
height: 3.5rem;
background-color: @color-surface-light2;
&:hover, &:focus {
background-color: @color-surface-light3;
.select-input {
height: 3.5em;
}
}
&:focus {
outline-color: @color-background-dark2;
}
.multiselect-label {
font-weight: normal;
color: @color-background-dark2-90;
}
.multiselect-icon {
fill: @color-background-dark2-90;
}
}
}
}
}
@ -470,6 +451,10 @@
display: none;
}
.filter-container {
display: flex;
}
.spacing {
display: none;
}
@ -477,10 +462,6 @@
.pagination-input {
margin-left: 0;
}
.filters {
display: block;
}
}
.meta-items-container {