Creepso/stremio-web
1
0
Fork 0
mirror of https://github.com/Stremio/stremio-web.git synced 2026-08-19 18:48:17 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

discover grid implemented

Browse source
This commit is contained in:
NikolaBorislavovHristov 2019-05-20 21:40:32 +03:00
parent 4cd8e60756
commit 8e6d951499
2 changed files with 86 additions and 22 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -1,26 +1,43 @@
const React = require('react');
const { NavBar } = require('stremio-common');
const { NavBar, MetaItem } = require('stremio-common');
const styles = require('./styles');
class Discover extends React.Component {
render() {
return (
<React.Fragment>
<NavBar
backButton={false}
tabs={[
{ label: 'Board', icon: 'ic_board', href: '#/' },
{ label: 'Discover', icon: 'ic_discover', href: '#/discover' },
{ label: 'Library', icon: 'ic_library', href: '#/library' },
{ label: 'Calendar', icon: 'ic_calendar', href: '#/calendar' },
]}
searchBar={true}
userMenu={true}
/>
<div className={styles['discover-container']} />
</React.Fragment>
);
}
}
const Discover = () => {
return (
<div className={styles['discover-container']}>
<NavBar
className={styles['nav-bar']}
backButton={false}
tabs={[
{ label: 'Board', icon: 'ic_board', href: '#/' },
{ label: 'Discover', icon: 'ic_discover', href: '#/discover' },
{ label: 'Library', icon: 'ic_library', href: '#/library' },
{ label: 'Calendar', icon: 'ic_calendar', href: '#/calendar' },
]}
searchBar={true}
userMenu={true}
/>
<div className={styles['discover-content']}>
<div className={styles['meta-items-container']}>
{
Array(145).fill(null).map((_, index) => (
<div key={index} className={styles['meta-item-container']}>
<MetaItem
className={styles['meta-item']}
id={`tt${index}`}
type={'movie'}
title={index === 4 ? 'title' : ''}
posterShape={'poster'}
/>
</div>
))
}
</div>
</div>
</div>
);
};
module.exports = Discover;

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

@ -1,4 +1,51 @@
.discover-container {
background-color: var(--color-background);
font-size: 14px;
--items-per-row: 10;
}
.discover-container {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
background-color: var(--color-background);
.nav-bar {
flex: none;
align-self: stretch;
}
.discover-content {
flex: 1;
align-self: stretch;
display: flex;
flex-direction: row;
overflow: hidden;
.meta-items-container {
flex: 1;
align-self: stretch;
display: flex;
flex-direction: row;
justify-content: flex-start;
flex-wrap: wrap;
padding-top: 0.8em;
padding-left: 0.8em;
overflow-x: hidden;
overflow-y: auto;
.meta-item-container {
flex-grow: 0;
flex-shrink: 0;
flex-basis: calc(100% / var(--items-per-row));
padding-right: 0.8em;
padding-bottom: 0.8em;
.meta-item {
width: 100%;
height: 100%;
}
}
}
}
}