Creepso/stremio-web
1
0
Fork 0
mirror of https://github.com/Stremio/stremio-web.git synced 2026-04-27 05:23:01 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

items count changed for rows with landscape posters

Browse source
This commit is contained in:
nklhrstv 2020-03-28 20:19:16 +02:00
parent 3d7cc56f9c
commit f45663b04d
2 changed files with 61 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
src/routes/Search/Search.js
View file

@ -1,5 +1,6 @@
const React = require('react'); const React = require('react');
const PropTypes = require('prop-types'); const PropTypes = require('prop-types');
const classnames = require('classnames');
const Icon = require('stremio-icons/dom'); const Icon = require('stremio-icons/dom');
const { Image, MainNavBars, MetaRow, MetaItem, useDeepEqualMemo } = require('stremio/common'); const { Image, MainNavBars, MetaRow, MetaItem, useDeepEqualMemo } = require('stremio/common');
const useSearch = require('./useSearch'); const useSearch = require('./useSearch');
@ -51,10 +52,14 @@ const Search = ({ queryParams }) => {
const title = `${catalog_resource.origin} - ${catalog_resource.request.path.id} ${catalog_resource.request.path.type_name}`; const title = `${catalog_resource.origin} - ${catalog_resource.request.path.id} ${catalog_resource.request.path.type_name}`;
switch (catalog_resource.content.type) { switch (catalog_resource.content.type) {
case 'Ready': { case 'Ready': {
const posterShape = catalog_resource.content.content.length > 0 ?
catalog_resource.content.content[0].posterShape
:
null;
return ( return (
<MetaRow <MetaRow
key={index} key={index}
className={styles['search-row']} className={classnames(styles['search-row'], styles['search-row-poster'], { [styles[`search-row-${posterShape}`]]: typeof posterShape === 'string' })}
title={title} title={title}
items={catalog_resource.content.content} items={catalog_resource.content.content}
itemComponent={MetaItem} itemComponent={MetaItem}
@ -78,7 +83,7 @@ const Search = ({ queryParams }) => {
return ( return (
<MetaRow.Placeholder <MetaRow.Placeholder
key={index} key={index}
className={styles['search-row']} className={classnames(styles['search-row'], styles['search-row-poster'])}
title={title} title={title}
href={href} href={href}
/> />

60
src/routes/Search/styles.less
View file

@ -97,13 +97,21 @@
@media only screen and (max-width: @large) { @media only screen and (max-width: @large) {
.search-container { .search-container {
.search-content { .search-content {
.search-row { .search-row-poster, .search-row-square {
.meta-item, .meta-item-placeholder { .meta-item, .meta-item-placeholder {
&:nth-child(n+10) { &:nth-child(n+10) {
display: none; display: none;
} }
} }
} }
.search-row-landscape {
.meta-item, .meta-item-placeholder {
&:nth-child(n+9) {
display: none;
}
}
}
} }
} }
} }
@ -111,13 +119,21 @@
@media only screen and (max-width: @normal) { @media only screen and (max-width: @normal) {
.search-container { .search-container {
.search-content { .search-content {
.search-row { .search-row-poster, .search-row-square {
.meta-item, .meta-item-placeholder { .meta-item, .meta-item-placeholder {
&:nth-child(n+9) { &:nth-child(n+9) {
display: none; display: none;
} }
} }
} }
.search-row-landscape {
.meta-item, .meta-item-placeholder {
&:nth-child(n+8) {
display: none;
}
}
}
} }
} }
} }
@ -125,13 +141,21 @@
@media only screen and (max-width: @medium) { @media only screen and (max-width: @medium) {
.search-container { .search-container {
.search-content { .search-content {
.search-row { .search-row-poster, .search-row-square {
.meta-item, .meta-item-placeholder { .meta-item, .meta-item-placeholder {
&:nth-child(n+8) { &:nth-child(n+8) {
display: none; display: none;
} }
} }
} }
.search-row-landscape {
.meta-item, .meta-item-placeholder {
&:nth-child(n+7) {
display: none;
}
}
}
} }
} }
} }
@ -139,13 +163,21 @@
@media only screen and (max-width: @small) { @media only screen and (max-width: @small) {
.search-container { .search-container {
.search-content { .search-content {
.search-row { .search-row-poster, .search-row-square {
.meta-item, .meta-item-placeholder { .meta-item, .meta-item-placeholder {
&:nth-child(n+7) { &:nth-child(n+7) {
display: none; display: none;
} }
} }
} }
.search-row-landscape {
.meta-item, .meta-item-placeholder {
&:nth-child(n+6) {
display: none;
}
}
}
} }
} }
} }
@ -153,13 +185,21 @@
@media only screen and (max-width: @xsmall) { @media only screen and (max-width: @xsmall) {
.search-container { .search-container {
.search-content { .search-content {
.search-row { .search-row-poster, .search-row-square {
.meta-item, .meta-item-placeholder { .meta-item, .meta-item-placeholder {
&:nth-child(n+6) { &:nth-child(n+6) {
display: none; display: none;
} }
} }
} }
.search-row-landscape {
.meta-item, .meta-item-placeholder {
&:nth-child(n+5) {
display: none;
}
}
}
} }
} }
} }
@ -167,13 +207,21 @@
@media only screen and (max-width: @minimum) { @media only screen and (max-width: @minimum) {
.search-container { .search-container {
.search-content { .search-content {
.search-row { .search-row-poster, .search-row-square {
.meta-item, .meta-item-placeholder { .meta-item, .meta-item-placeholder {
&:nth-child(n+5) { &:nth-child(n+5) {
display: none; display: none;
} }
} }
} }
.search-row-landscape {
.meta-item, .meta-item-placeholder {
&:nth-child(n+4) {
display: none;
}
}
}
} }
} }
} }