mirror of
https://github.com/Stremio/stremio-web.git
synced 2026-01-11 22:40:31 +00:00
Search uses horizontal/vertical nav bar
This commit is contained in:
svetlagasheva
parent
8ead652d4e
commit
f9064c06c6
3 changed files with 154 additions and 128 deletions
|
|
@ -25,6 +25,7 @@
|
|||
.board-content-container {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
height: 100%;
|
||||
|
||||
.board-content {
|
||||
flex: 1;
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
const React = require('react');
|
||||
const PropTypes = require('prop-types');
|
||||
const Icon = require('stremio-icons/dom');
|
||||
const { MainNavBar, MetaRow } = require('stremio/common');
|
||||
const { HorizontalNavBar, MainVerticalNavBar, MetaRow } = require('stremio/common');
|
||||
const useSearch = require('./useSearch');
|
||||
const styles = require('./styles');
|
||||
|
||||
|
|
@ -9,8 +9,9 @@ const Search = ({ queryParams }) => {
|
|||
const search = useSearch(queryParams);
|
||||
return (
|
||||
<div className={styles['search-container']}>
|
||||
<MainNavBar
|
||||
className={styles['nav-bar']}
|
||||
<HorizontalNavBar
|
||||
className={styles['horizontal-nav-bar']}
|
||||
route={'search'}
|
||||
query={
|
||||
search.selected !== null ?
|
||||
search.selected.extra.reduce((query, [name, value]) => {
|
||||
|
|
@ -23,64 +24,72 @@ const Search = ({ queryParams }) => {
|
|||
:
|
||||
null
|
||||
}
|
||||
route={'search'}
|
||||
backButton={false}
|
||||
searchBar={true}
|
||||
addonsButton={true}
|
||||
fullscreenButton={true}
|
||||
notificationsMenu={true}
|
||||
navMenu={true}
|
||||
/>
|
||||
<div className={styles['search-content']}>
|
||||
{
|
||||
search.selected === null || search.selected.extra.every(([name]) => name !== 'search') ?
|
||||
<div className={styles['message-container']}>
|
||||
<div className={styles['message-content']}>
|
||||
<Icon className={styles['icon']} icon={'ic_movies'} />
|
||||
<div className={styles['label']}>Search for movies, series, YouTube and TV channels</div>
|
||||
</div>
|
||||
<div className={styles['message-content']}>
|
||||
<Icon className={styles['icon']} icon={'ic_actor'} />
|
||||
<div className={styles['label']}>Search for actors, directors and writers</div>
|
||||
</div>
|
||||
</div>
|
||||
:
|
||||
search.catalog_resources.length === 0 ?
|
||||
<div className={styles['search-content-container']}>
|
||||
<MainVerticalNavBar className={styles['nav-bar']} route={'search'} />
|
||||
<div className={styles['search-content']}>
|
||||
{
|
||||
search.selected === null || search.selected.extra.every(([name]) => name !== 'search') ?
|
||||
<div className={styles['message-container']}>
|
||||
<div className={styles['message-content']}>
|
||||
<div className={styles['label']}> No addons were requested for catalogs</div>
|
||||
<Icon className={styles['icon']} icon={'ic_movies'} />
|
||||
<div className={styles['label']}>Search for movies, series, YouTube and TV channels</div>
|
||||
</div>
|
||||
<div className={styles['message-content']}>
|
||||
<Icon className={styles['icon']} icon={'ic_actor'} />
|
||||
<div className={styles['label']}>Search for actors, directors and writers</div>
|
||||
</div>
|
||||
</div>
|
||||
:
|
||||
search.catalog_resources.map((catalog_resource, index) => {
|
||||
switch (catalog_resource.content.type) {
|
||||
case 'Ready':
|
||||
return (
|
||||
<MetaRow
|
||||
key={index}
|
||||
className={styles['search-row']}
|
||||
title={catalog_resource.addon_name}
|
||||
items={catalog_resource.content.content}
|
||||
href={catalog_resource.href}
|
||||
limit={10}
|
||||
/>
|
||||
);
|
||||
case 'Err':
|
||||
return (
|
||||
<MetaRow
|
||||
key={index}
|
||||
className={styles['search-row']}
|
||||
title={catalog_resource.addon_name}
|
||||
message={`Error(${catalog_resource.content.content.type})${typeof catalog_resource.content.content.content === 'string' ? ` - ${catalog_resource.content.content.content}` : ''}`}
|
||||
limit={10}
|
||||
/>
|
||||
);
|
||||
case 'Loading':
|
||||
return (
|
||||
<MetaRow.Placeholder
|
||||
key={index}
|
||||
className={styles['search-row-placeholder']}
|
||||
title={catalog_resource.addon_name}
|
||||
limit={10}
|
||||
/>
|
||||
);
|
||||
}
|
||||
})
|
||||
}
|
||||
search.catalog_resources.length === 0 ?
|
||||
<div className={styles['message-container']}>
|
||||
<div className={styles['message-content']}>
|
||||
<div className={styles['label']}> No addons were requested for catalogs</div>
|
||||
</div>
|
||||
</div>
|
||||
:
|
||||
search.catalog_resources.map((catalog_resource, index) => {
|
||||
switch (catalog_resource.content.type) {
|
||||
case 'Ready':
|
||||
return (
|
||||
<MetaRow
|
||||
key={index}
|
||||
className={styles['search-row']}
|
||||
title={catalog_resource.addon_name}
|
||||
items={catalog_resource.content.content}
|
||||
href={catalog_resource.href}
|
||||
limit={10}
|
||||
/>
|
||||
);
|
||||
case 'Err':
|
||||
return (
|
||||
<MetaRow
|
||||
key={index}
|
||||
className={styles['search-row']}
|
||||
title={catalog_resource.addon_name}
|
||||
message={`Error(${catalog_resource.content.content.type})${typeof catalog_resource.content.content.content === 'string' ? ` - ${catalog_resource.content.content.content}` : ''}`}
|
||||
limit={10}
|
||||
/>
|
||||
);
|
||||
case 'Loading':
|
||||
return (
|
||||
<MetaRow.Placeholder
|
||||
key={index}
|
||||
className={styles['search-row-placeholder']}
|
||||
title={catalog_resource.addon_name}
|
||||
limit={10}
|
||||
/>
|
||||
);
|
||||
}
|
||||
})
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -17,66 +17,72 @@
|
|||
height: 100%;
|
||||
background-color: var(--color-background);
|
||||
|
||||
.nav-bar {
|
||||
.horizontal-nav-bar {
|
||||
flex: none;
|
||||
align-self: stretch;
|
||||
}
|
||||
|
||||
.search-content {
|
||||
flex: 1;
|
||||
align-self: stretch;
|
||||
overflow-y: auto;
|
||||
.search-content-container {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
height: 100%;
|
||||
|
||||
.search-row, .search-row-placeholder {
|
||||
margin: 4rem 2rem;
|
||||
.search-content {
|
||||
flex: 1;
|
||||
align-self: stretch;
|
||||
overflow-y: auto;
|
||||
|
||||
&:first-child {
|
||||
margin-top: 2rem;
|
||||
}
|
||||
.search-row, .search-row-placeholder {
|
||||
margin: 4rem 2rem;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.see-all-container, .see-all-container-placeholder {
|
||||
width: 12rem;
|
||||
}
|
||||
}
|
||||
|
||||
.message-container {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: flex-start;
|
||||
justify-content: center;
|
||||
max-height: calc(100% - 10rem);
|
||||
margin: 5rem;
|
||||
|
||||
.message-content {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
&:not(:first-child) {
|
||||
margin-left: 5rem;
|
||||
&:first-child {
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
.icon {
|
||||
flex: none;
|
||||
width: 6rem;
|
||||
height: 6rem;
|
||||
&:last-child {
|
||||
margin-bottom: 2rem;
|
||||
fill: var(--color-surfacelighter80);
|
||||
}
|
||||
|
||||
.label {
|
||||
flex-grow: 0;
|
||||
flex-shrink: 1;
|
||||
flex-basis: auto;
|
||||
font-size: 1.2rem;
|
||||
color: var(--color-surfacelighter80);
|
||||
text-align: center;
|
||||
.see-all-container, .see-all-container-placeholder {
|
||||
width: 12rem;
|
||||
}
|
||||
}
|
||||
|
||||
.message-container {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: flex-start;
|
||||
justify-content: center;
|
||||
max-height: calc(100% - 10rem);
|
||||
margin: 5rem;
|
||||
|
||||
.message-content {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
&:not(:first-child) {
|
||||
margin-left: 5rem;
|
||||
}
|
||||
|
||||
.icon {
|
||||
flex: none;
|
||||
width: 6rem;
|
||||
height: 6rem;
|
||||
margin-bottom: 2rem;
|
||||
fill: var(--color-surfacelighter80);
|
||||
}
|
||||
|
||||
.label {
|
||||
flex-grow: 0;
|
||||
flex-shrink: 1;
|
||||
flex-basis: auto;
|
||||
font-size: 1.2rem;
|
||||
color: var(--color-surfacelighter80);
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -85,11 +91,13 @@
|
|||
|
||||
@media only screen and (min-width: @large) {
|
||||
.search-container {
|
||||
.search-content {
|
||||
.search-row, .search-row-placeholder {
|
||||
.meta-item, .meta-item-placeholder {
|
||||
&:nth-child(n+9) {
|
||||
display: none;
|
||||
.search-content-container {
|
||||
.search-content {
|
||||
.search-row, .search-row-placeholder {
|
||||
.meta-item, .meta-item-placeholder {
|
||||
&:nth-child(n+9) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -99,11 +107,13 @@
|
|||
|
||||
@media only screen and (max-width: @large) {
|
||||
.search-container {
|
||||
.search-content {
|
||||
.search-row, .search-row-placeholder {
|
||||
.meta-item, .meta-item-placeholder {
|
||||
&:nth-child(n+8) {
|
||||
display: none;
|
||||
.search-content-container {
|
||||
.search-content {
|
||||
.search-row, .search-row-placeholder {
|
||||
.meta-item, .meta-item-placeholder {
|
||||
&:nth-child(n+8) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -113,11 +123,13 @@
|
|||
|
||||
@media only screen and (max-width: @medium) {
|
||||
.search-container {
|
||||
.search-content {
|
||||
.search-row, .search-row-placeholder {
|
||||
.meta-item, .meta-item-placeholder {
|
||||
&:nth-child(n+7) {
|
||||
display: none;
|
||||
.search-content-container {
|
||||
.search-content {
|
||||
.search-row, .search-row-placeholder {
|
||||
.meta-item, .meta-item-placeholder {
|
||||
&:nth-child(n+7) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -127,11 +139,13 @@
|
|||
|
||||
@media only screen and (max-width: @small) {
|
||||
.search-container {
|
||||
.search-content {
|
||||
.search-row, .search-row-placeholder {
|
||||
.meta-item, .meta-item-placeholder {
|
||||
&:nth-child(n+6) {
|
||||
display: none;
|
||||
.search-content-container {
|
||||
.search-content {
|
||||
.search-row, .search-row-placeholder {
|
||||
.meta-item, .meta-item-placeholder {
|
||||
&:nth-child(n+6) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -141,11 +155,13 @@
|
|||
|
||||
@media only screen and (max-width: @xsmall) {
|
||||
.search-container {
|
||||
.search-content {
|
||||
.search-row, .search-row-placeholder {
|
||||
.meta-item, .meta-item-placeholder {
|
||||
&:nth-child(n+5) {
|
||||
display: none;
|
||||
.search-content-container {
|
||||
.search-content {
|
||||
.search-row, .search-row-placeholder {
|
||||
.meta-item, .meta-item-placeholder {
|
||||
&:nth-child(n+5) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue