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

Board styles updated

Browse source
This commit is contained in:
NikolaBorislavovHristov 2019-05-17 12:45:12 +03:00
parent 501b0a994d
commit 759ecdd970
2 changed files with 44 additions and 119 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

81
src/routes/Board/Board.js
View file

@ -34,27 +34,11 @@ class Board extends React.PureComponent {
});
}
renderMetaItemPlaceholders() {
const metaItemPlaceholders = [];
for (let placeholderNumber = 0; placeholderNumber < 20; placeholderNumber++) {
metaItemPlaceholders.push(
<div key={placeholderNumber} className={styles['placeholder']}>
<div className={styles['poster-image-placeholder']}>
<div className={styles['poster']} />
</div>
<div className={styles['title-bar-placeholder']} />
</div>
)
render() {
if (this.props.groups.length === 0) {
return null;
}
return (
<div className={styles['placeholder-container']}>
{metaItemPlaceholders}
</div>
);
}
render() {
return (
<div className={styles['board-container']}>
<NavBar
@ -70,50 +54,43 @@ class Board extends React.PureComponent {
userMenu={true}
/>
<div className={styles['board-content']} tabIndex={-1}>
<div className={classnames(styles['board-row'], styles['continue-watching-row'])}>
<div className={styles['meta-items-container']}>
{this.props.groups[0].items.map((item) => (
<MetaItem
{...item}
key={item.id}
className={classnames(styles['meta-item'], styles[`poster-shape-${item.posterShape === 'landscape' ? 'square' : item.posterShape}`])}
menuClassName={styles['menu-container']}
posterShape={item.posterShape === 'landscape' ? 'square' : item.posterShape}
menuOptions={CONTINUE_WATCHING_MENU}
menuOptionOnSelect={this.menuOptionOnSelect}
onClick={this.onClick}
/>
))}
</div>
<Input className={styles['show-more-container']} type={'button'} />
</div>
{
this.props.groups.length === 0 ?
this.renderMetaItemPlaceholders()
:
<React.Fragment>
<div className={classnames(styles['board-row'], styles['continue-watching-row'])}>
this.props.groups.slice(1, this.props.groups.length).map((group) => {
return (
<div key={group.id} className={classnames(styles['board-row'], styles['addon-catalog-row'])}>
<div className={styles['meta-items-container']}>
{this.props.groups[0].items.map((item) => (
{group.items.map((item, _, metaItems) => (
<MetaItem
{...item}
key={item.id}
className={classnames(styles['meta-item'], styles[`poster-shape-${item.posterShape === 'landscape' ? 'square' : item.posterShape}`])}
menuClassName={styles['menu-container']}
posterShape={item.posterShape === 'landscape' ? 'square' : item.posterShape}
menuOptions={CONTINUE_WATCHING_MENU}
menuOptionOnSelect={this.menuOptionOnSelect}
className={classnames(styles['meta-item'], styles[`poster-shape-${metaItems[0].posterShape}`])}
posterShape={metaItems[0].posterShape}
progress={0}
onClick={this.onClick}
/>
))}
</div>
<Input className={styles['show-more-container']} type={'button'} />
</div>
{
this.props.groups.slice(1, this.props.groups.length).map((group) => {
return (
<div key={group.id} className={classnames(styles['board-row'], styles['addon-catalog-row'])}>
<div className={styles['meta-items-container']}>
{group.items.map((item, _, metaItems) => (
<MetaItem
{...item}
key={item.id}
className={classnames(styles['meta-item'], styles[`poster-shape-${metaItems[0].posterShape}`])}
posterShape={metaItems[0].posterShape}
progress={0}
onClick={this.onClick}
/>
))}
</div>
<Input className={styles['show-more-container']} type={'button'} />
</div>
);
})
}
</React.Fragment>
);
})
}
</div>
</div>

82
src/routes/Board/styles.less
View file

@ -1,4 +1,4 @@
.board-container, .modal-container {
.board-container, .menu-container {
font-size: 14px;
.board-row {
@ -6,7 +6,7 @@
.meta-item {
--play-icon-visibility: visible;
&:nth-child(n+6) {
&:nth-child(n+7) {
display: none;
}
}
@ -18,7 +18,7 @@
--play-icon-visibility: visible;
}
&:nth-child(n+4) {
&:nth-child(n+5) {
display: none;
}
}
@ -26,7 +26,7 @@
&.addon-catalog-row {
.meta-item {
&:nth-child(n+7) {
&:nth-child(n+8) {
display: none;
}
}
@ -42,83 +42,31 @@
background-color: var(--color-background);
.nav-bar {
width: 100%;
flex: none;
align-self: stretch;
}
.board-content {
flex: 1;
align-self: stretch;
padding: 2em;
overflow-x: hidden;
overflow-y: auto;
.placeholder-container {
display: flex;
flex-direction: row;
.placeholder {
flex: 1;
margin: 1em;
padding: 0.4em;
position: relative;
z-index: 0;
overflow: hidden;
background-color: var(--color-backgroundlighter);
.poster-image-placeholder {
flex: calc(1 / var(--poster-shape-ratio));
margin-bottom: 1em;
background-color: var(--color-secondarylighter20);
&:before {
content: "";
display: inline-block;
padding-top: calc(100% * var(--poster-shape-ratio));
}
}
.title-bar-placeholder {
height: 2em;
display: flex;
flex-direction: row;
background-color: var(--color-secondarylighter20);
}
&:after {
content: " ";
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 50%;
width: 800%;
margin-left: -400%;
animation: placeholderAnimation 1s linear infinite;
background: linear-gradient(to right, rgba(255, 255, 255, 0) 44%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0) 56%);
}
@keyframes placeholderAnimation {
0% {
transform: translate3d(-30%, 0, 0);
}
100% {
transform: translate3d(30%, 0, 0);
}
}
&:nth-child(n+7) {
display: none;
}
}
}
.board-row {
width: 100%;
padding: 0 1em;
display: flex;
flex-direction: row;
align-items: stretch;
&:first-child {
padding-top: 1em;
}
&:last-child {
padding-bottom: 1em;
}
.meta-items-container {
flex: 5;
display: flex;