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

Search uses horizontal/vertical nav bar

Browse source
This commit is contained in:
svetlagasheva 2020-01-03 16:26:25 +02:00
parent 8ead652d4e
commit f9064c06c6
3 changed files with 154 additions and 128 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -25,6 +25,7 @@
.board-content-container { .board-content-container {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
height: 100%;
.board-content { .board-content {
flex: 1; flex: 1;

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

@ -1,7 +1,7 @@
const React = require('react'); const React = require('react');
const PropTypes = require('prop-types'); const PropTypes = require('prop-types');
const Icon = require('stremio-icons/dom'); const Icon = require('stremio-icons/dom');
const { MainNavBar, MetaRow } = require('stremio/common'); const { HorizontalNavBar, MainVerticalNavBar, MetaRow } = require('stremio/common');
const useSearch = require('./useSearch'); const useSearch = require('./useSearch');
const styles = require('./styles'); const styles = require('./styles');
@ -9,8 +9,9 @@ const Search = ({ queryParams }) => {
const search = useSearch(queryParams); const search = useSearch(queryParams);
return ( return (
<div className={styles['search-container']}> <div className={styles['search-container']}>
<MainNavBar <HorizontalNavBar
className={styles['nav-bar']} className={styles['horizontal-nav-bar']}
route={'search'}
query={ query={
search.selected !== null ? search.selected !== null ?
search.selected.extra.reduce((query, [name, value]) => { search.selected.extra.reduce((query, [name, value]) => {
@ -23,64 +24,72 @@ const Search = ({ queryParams }) => {
: :
null null
} }
route={'search'} backButton={false}
searchBar={true}
addonsButton={true}
fullscreenButton={true}
notificationsMenu={true}
navMenu={true}
/> />
<div className={styles['search-content']}> <div className={styles['search-content-container']}>
{ <MainVerticalNavBar className={styles['nav-bar']} route={'search'} />
search.selected === null || search.selected.extra.every(([name]) => name !== 'search') ? <div className={styles['search-content']}>
<div className={styles['message-container']}> {
<div className={styles['message-content']}> search.selected === null || search.selected.extra.every(([name]) => name !== 'search') ?
<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['message-container']}> <div className={styles['message-container']}>
<div className={styles['message-content']}> <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>
</div> </div>
: :
search.catalog_resources.map((catalog_resource, index) => { search.catalog_resources.length === 0 ?
switch (catalog_resource.content.type) { <div className={styles['message-container']}>
case 'Ready': <div className={styles['message-content']}>
return ( <div className={styles['label']}> No addons were requested for catalogs</div>
<MetaRow </div>
key={index} </div>
className={styles['search-row']} :
title={catalog_resource.addon_name} search.catalog_resources.map((catalog_resource, index) => {
items={catalog_resource.content.content} switch (catalog_resource.content.type) {
href={catalog_resource.href} case 'Ready':
limit={10} return (
/> <MetaRow
); key={index}
case 'Err': className={styles['search-row']}
return ( title={catalog_resource.addon_name}
<MetaRow items={catalog_resource.content.content}
key={index} href={catalog_resource.href}
className={styles['search-row']} limit={10}
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 'Err':
/> return (
); <MetaRow
case 'Loading': key={index}
return ( className={styles['search-row']}
<MetaRow.Placeholder title={catalog_resource.addon_name}
key={index} message={`Error(${catalog_resource.content.content.type})${typeof catalog_resource.content.content.content === 'string' ? ` - ${catalog_resource.content.content.content}` : ''}`}
className={styles['search-row-placeholder']} limit={10}
title={catalog_resource.addon_name} />
limit={10} );
/> case 'Loading':
); return (
} <MetaRow.Placeholder
}) key={index}
} className={styles['search-row-placeholder']}
title={catalog_resource.addon_name}
limit={10}
/>
);
}
})
}
</div>
</div> </div>
</div> </div>
); );

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

@ -17,66 +17,72 @@
height: 100%; height: 100%;
background-color: var(--color-background); background-color: var(--color-background);
.nav-bar { .horizontal-nav-bar {
flex: none; flex: none;
align-self: stretch; align-self: stretch;
} }
.search-content { .search-content-container {
flex: 1; display: flex;
align-self: stretch; flex-direction: row;
overflow-y: auto; height: 100%;
.search-row, .search-row-placeholder { .search-content {
margin: 4rem 2rem; flex: 1;
align-self: stretch;
overflow-y: auto;
&:first-child { .search-row, .search-row-placeholder {
margin-top: 2rem; margin: 4rem 2rem;
}
&:last-child { &:first-child {
margin-bottom: 2rem; margin-top: 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;
} }
.icon { &:last-child {
flex: none;
width: 6rem;
height: 6rem;
margin-bottom: 2rem; margin-bottom: 2rem;
fill: var(--color-surfacelighter80);
} }
.label { .see-all-container, .see-all-container-placeholder {
flex-grow: 0; width: 12rem;
flex-shrink: 1; }
flex-basis: auto; }
font-size: 1.2rem;
color: var(--color-surfacelighter80); .message-container {
text-align: center; 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) { @media only screen and (min-width: @large) {
.search-container { .search-container {
.search-content { .search-content-container {
.search-row, .search-row-placeholder { .search-content {
.meta-item, .meta-item-placeholder { .search-row, .search-row-placeholder {
&:nth-child(n+9) { .meta-item, .meta-item-placeholder {
display: none; &:nth-child(n+9) {
display: none;
}
} }
} }
} }
@ -99,11 +107,13 @@
@media only screen and (max-width: @large) { @media only screen and (max-width: @large) {
.search-container { .search-container {
.search-content { .search-content-container {
.search-row, .search-row-placeholder { .search-content {
.meta-item, .meta-item-placeholder { .search-row, .search-row-placeholder {
&:nth-child(n+8) { .meta-item, .meta-item-placeholder {
display: none; &:nth-child(n+8) {
display: none;
}
} }
} }
} }
@ -113,11 +123,13 @@
@media only screen and (max-width: @medium) { @media only screen and (max-width: @medium) {
.search-container { .search-container {
.search-content { .search-content-container {
.search-row, .search-row-placeholder { .search-content {
.meta-item, .meta-item-placeholder { .search-row, .search-row-placeholder {
&:nth-child(n+7) { .meta-item, .meta-item-placeholder {
display: none; &:nth-child(n+7) {
display: none;
}
} }
} }
} }
@ -127,11 +139,13 @@
@media only screen and (max-width: @small) { @media only screen and (max-width: @small) {
.search-container { .search-container {
.search-content { .search-content-container {
.search-row, .search-row-placeholder { .search-content {
.meta-item, .meta-item-placeholder { .search-row, .search-row-placeholder {
&:nth-child(n+6) { .meta-item, .meta-item-placeholder {
display: none; &:nth-child(n+6) {
display: none;
}
} }
} }
} }
@ -141,11 +155,13 @@
@media only screen and (max-width: @xsmall) { @media only screen and (max-width: @xsmall) {
.search-container { .search-container {
.search-content { .search-content-container {
.search-row, .search-row-placeholder { .search-content {
.meta-item, .meta-item-placeholder { .search-row, .search-row-placeholder {
&:nth-child(n+5) { .meta-item, .meta-item-placeholder {
display: none; &:nth-child(n+5) {
display: none;
}
} }
} }
} }