diff --git a/src/routes/Library/Library.js b/src/routes/Library/Library.js index 06870c1b2..861e53096 100644 --- a/src/routes/Library/Library.js +++ b/src/routes/Library/Library.js @@ -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 (
@@ -14,6 +14,15 @@ const Library = ({ urlParams, queryParams }) => { ))}
+
+ {metaItems.map((metaItem) => ( + + ))} +
); diff --git a/src/routes/Library/styles.less b/src/routes/Library/styles.less index 9e352f3d3..a71d6f53b 100644 --- a/src/routes/Library/styles.less +++ b/src/routes/Library/styles.less @@ -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); + } + } } } \ No newline at end of file