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

meta items rendered in Library

Browse source
This commit is contained in:
NikolaBorislavovHristov 2019-09-14 21:20:59 +03:00
parent 4d98983b4e
commit 8c20483284
2 changed files with 88 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -1,10 +1,10 @@
const React = require('react');
const { Dropdown, MainNavBar } = require('stremio/common');
const { Dropdown, MainNavBar, MetaItem } = require('stremio/common');
const useLibrary = require('./useLibrary');
const styles = require('./styles');
const Library = ({ urlParams, queryParams }) => {
const [items, dropdowns] = useLibrary(urlParams.type, queryParams.get('sort'));
const [metaItems, dropdowns] = useLibrary(urlParams.type, queryParams.get('sort'));
return (
<div className={styles['library-container']}>
<MainNavBar className={styles['nav-bar']} />
@ -14,6 +14,15 @@ const Library = ({ urlParams, queryParams }) => {
<Dropdown {...dropdown} key={dropdown.name} className={styles['dropdown']} />
))}
</div>
<div className={styles['meta-items-container']}>
{metaItems.map((metaItem) => (
<MetaItem
{...metaItem}
key={metaItem.id}
className={styles['meta-item']}
/>
))}
</div>
</div>
</div>
);

77
src/routes/Library/styles.less
View file

@ -39,5 +39,82 @@
}
}
}
.meta-items-container {
grid-area: meta-items-area;
display: grid;
grid-auto-rows: max-content;
grid-gap: 1.5rem;
align-items: center;
padding: 0 2rem;
overflow-y: auto;
.meta-item {
&.selected {
outline: calc(1.5 * var(--focus-outline-size)) solid var(--color-surfacelighter);
outline-offset: calc(-1.5 * var(--focus-outline-size));
}
}
}
}
}
@media only screen and (min-width: @xxlarge) {
.library-container {
.library-content {
.meta-items-container {
grid-template-columns: repeat(10, auto);
}
}
}
}
@media only screen and (max-width: @xxlarge) {
.library-container {
.library-content {
.meta-items-container {
grid-template-columns: repeat(9, auto);
}
}
}
}
@media only screen and (max-width: @normal) {
.library-container {
.library-content {
.meta-items-container {
grid-template-columns: repeat(8, auto);
}
}
}
}
@media only screen and (max-width: @medium) {
.library-container {
.library-content {
.meta-items-container {
grid-template-columns: repeat(7, auto);
}
}
}
}
@media only screen and (max-width: @small) {
.library-container {
.library-content {
.meta-items-container {
grid-template-columns: repeat(6, auto);
}
}
}
}
@media only screen and (max-width: @xsmall) {
.library-container {
.library-content {
.meta-items-container {
grid-template-columns: repeat(5, auto);
}
}
}
}