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

discover picker menus finished

Browse source
This commit is contained in:
NikolaBorislavovHristov 2019-05-23 14:32:45 +03:00
parent d08c7bb2ff
commit 0980ad0f31
2 changed files with 57 additions and 35 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -40,21 +40,25 @@ const Discover = ({ urlParams }) => {
<div className={styles['pickers-container']}>
<Popup onOpen={typePickerOnOpen} onClose={typePickerOnClose}>
<Popup.Label>
<Input className={classnames(styles['picker-button'], { 'active': typePickerOpen }, 'focusable-with-border')} type={'button'}>
<Input className={classnames(styles['picker-button'], styles['types-picker-button'], { 'active': typePickerOpen }, 'focusable-with-border')} type={'button'}>
<div className={styles['picker-label']}>{urlParams.type}</div>
<Icon className={styles['picker-icon']} icon={'ic_arrow_down'} />
</Input>
</Popup.Label>
<Popup.Menu className={styles['menu-layer']}>
<div className={styles['menu-items-container']}>
<Input className={styles['menu-item']} type={'button'}>Movie</Input>
<Input className={styles['menu-item']} type={'button'}>Movie</Input>
<Input className={styles['menu-item']} type={'button'}>Movie</Input>
<Input className={styles['menu-item']} type={'button'}>Movie</Input>
<Input className={styles['menu-item']} type={'button'}>Movie</Input>
<Input className={styles['menu-item']} type={'button'}>Movie</Input>
<Input className={styles['menu-item']} type={'button'}>Movie</Input>
<Input className={styles['menu-item']} type={'button'}>Movie</Input>
<div className={classnames(styles['menu-items-container'], styles['menu-types-container'])}>
<Input className={classnames(styles['menu-item-container'], 'focusable-with-border')} type={'button'}>
<div className={styles['menu-label']}>movie</div>
</Input>
<Input className={classnames(styles['menu-item-container'], 'focusable-with-border')} type={'button'}>
<div className={styles['menu-label']}>series</div>
</Input>
<Input className={classnames(styles['menu-item-container'], 'focusable-with-border')} type={'button'}>
<div className={styles['menu-label']}>channel</div>
</Input>
<Input className={classnames(styles['menu-item-container'], 'focusable-with-border')} type={'button'}>
<div className={styles['menu-label']}>TV channels</div>
</Input>
</div>
</Popup.Menu>
</Popup>
@ -67,14 +71,12 @@ const Discover = ({ urlParams }) => {
</Popup.Label>
<Popup.Menu className={styles['menu-layer']}>
<div className={styles['menu-items-container']}>
<Input className={styles['menu-item']} type={'button'}>Movie</Input>
<Input className={styles['menu-item']} type={'button'}>Movie</Input>
<Input className={styles['menu-item']} type={'button'}>Movie</Input>
<Input className={styles['menu-item']} type={'button'}>Movie</Input>
<Input className={styles['menu-item']} type={'button'}>Movie</Input>
<Input className={styles['menu-item']} type={'button'}>Movie</Input>
<Input className={styles['menu-item']} type={'button'}>Movie</Input>
<Input className={styles['menu-item']} type={'button'}>Movie</Input>
<Input className={classnames(styles['menu-item-container'], 'focusable-with-border')} type={'button'}>
<div className={styles['menu-label']}>catalog1</div>
</Input>
<Input className={classnames(styles['menu-item-container'], 'focusable-with-border')} type={'button'}>
<div className={styles['menu-label']}>catalog2</div>
</Input>
</div>
</Popup.Menu>
</Popup>
@ -87,14 +89,12 @@ const Discover = ({ urlParams }) => {
</Popup.Label>
<Popup.Menu className={styles['menu-layer']}>
<div className={styles['menu-items-container']}>
<Input className={styles['menu-item']} type={'button'}>Movie</Input>
<Input className={styles['menu-item']} type={'button'}>Movie</Input>
<Input className={styles['menu-item']} type={'button'}>Movie</Input>
<Input className={styles['menu-item']} type={'button'}>Movie</Input>
<Input className={styles['menu-item']} type={'button'}>Movie</Input>
<Input className={styles['menu-item']} type={'button'}>Movie</Input>
<Input className={styles['menu-item']} type={'button'}>Movie</Input>
<Input className={styles['menu-item']} type={'button'}>Movie</Input>
<Input className={classnames(styles['menu-item-container'], 'focusable-with-border')} type={'button'}>
<div className={styles['menu-label']}>category1</div>
</Input>
<Input className={classnames(styles['menu-item-container'], 'focusable-with-border')} type={'button'}>
<div className={styles['menu-label']}>category2</div>
</Input>
</div>
</Popup.Menu>
</Popup>

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

@ -51,7 +51,7 @@
flex-direction: row;
align-items: center;
justify-content: space-between;
margin: 0 0.8em;
margin-right: 0.8em;
padding: 0 0.8em;
background-color: var(--color-backgroundlighter);
cursor: pointer;
@ -72,6 +72,12 @@
}
}
&.types-picker-button {
.picker-label {
text-transform: capitalize;
}
}
.picker-label {
flex: 1;
font-size: 1.1em;
@ -84,8 +90,8 @@
.picker-icon {
flex: none;
width: 1.2em;
height: 1.2em;
width: 1em;
height: 1em;
margin-left: 0.8em;
fill: var(--color-surfacelighter);
}
@ -130,23 +136,39 @@
}
.menu-layer {
--box-shadow: -0.6em .6em .5em -0.1em var(--color-backgrounddark40);
--border-color: var(--color-backgroundlighter40);
--box-shadow: -0.6em 0.6em 0.5em -0.1em var(--color-backgrounddark40);
.menu-items-container {
width: 16em;
max-height: 18em;
overflow-y: auto;
background-color: var(--color-backgroundlighter);
.menu-item {
width: 16em;
&.menu-types-container {
.menu-item-container {
.menu-label {
text-transform: capitalize;
}
}
}
.menu-item-container {
width: 100%;
padding: 0.8em;
text-align: center;
color: var(--color-surfacelighter);
background-color: var(--color-backgroundlight);
cursor: pointer;
&:hover {
background-color: var(--color-surfacedarker60);
}
.menu-label {
line-height: 1.1em;
max-height: 2.2em;
color: var(--color-surfacelighter);
word-break: break-all;
word-break: break-word;
}
}
}