Creepso/stremio-web
1
0
Fork 0
mirror of https://github.com/Stremio/stremio-web.git synced 2026-04-20 10:42:12 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

ModalDialog with Multiselect used for filter button in Discover

Browse source
This commit is contained in:
svetlagasheva 2020-02-04 18:23:14 +02:00
parent 92b4b8bca3
commit bd1a4f2768
2 changed files with 38 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -52,6 +52,7 @@ const Discover = ({ urlParams, queryParams }) => {
<Multiselect
{...selectInput}
key={index}
modalSelects={false}
className={styles['select-input-container']}
/>
))}
@ -128,7 +129,17 @@ const Discover = ({ urlParams, queryParams }) => {
</div>
{
inputsModalOpen ?
<ModalDialog onCloseRequest={closeInputsModal} />
<ModalDialog title={'Select inputs'} className={styles['selectable-inputs-modal-container']} onCloseRequest={() => closeInputsModal()}>
{
selectInputs.map((selectInput, index) => (
<Multiselect
{...selectInput}
key={index}
modalSelects={true}
/>
))
}
</ModalDialog>
:
null
}

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

@ -1,6 +1,9 @@
@import (reference) '~stremio/common/screen-sizes.less';
:import('~stremio/common/Multiselect/styles.less') {
label-container: label-container;
label-container-label: label;
label-container-icon: icon;
multiselect-menu-container: menu-container;
}
@ -139,6 +142,29 @@
}
}
.selectable-inputs-modal-container {
.label-container {
width: 15rem;
height: 3rem;
&:not(:last-child) {
margin-bottom: 1rem;
}
&:hover {
background-color: var(--color-surfacelight);
.label-container-label {
color: var(--color-backgrounddarker);
}
.label-container-icon {
fill: var(--color-backgrounddarker);
}
}
}
}
@media only screen and (min-width: @xxlarge) {
.discover-container {
.discover-content {