mirror of
https://github.com/Stremio/stremio-web.git
synced 2026-05-15 12:12:20 +00:00
nav bars layout in search using grid
This commit is contained in:
nklhrstv
parent
1464044561
commit
655b8654e4
2 changed files with 133 additions and 144 deletions
|
|
@ -31,65 +31,63 @@ const Search = ({ queryParams }) => {
|
||||||
notificationsMenu={true}
|
notificationsMenu={true}
|
||||||
navMenu={true}
|
navMenu={true}
|
||||||
/>
|
/>
|
||||||
<div className={styles['search-content-container']}>
|
<MainVerticalNavBar className={styles['vertical-nav-bar']} route={'search'} />
|
||||||
<MainVerticalNavBar className={styles['nav-bar']} route={'search'} />
|
<div className={styles['search-content']}>
|
||||||
<div className={styles['search-content']}>
|
{
|
||||||
{
|
search.selected === null || search.selected.extra.every(([name]) => name !== 'search') ?
|
||||||
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['message-container']}>
|
<div className={styles['message-container']}>
|
||||||
<div className={styles['message-content']}>
|
<div className={styles['message-content']}>
|
||||||
<Icon className={styles['icon']} icon={'ic_movies'} />
|
<div className={styles['label']}> No addons were requested for catalogs</div>
|
||||||
<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.length === 0 ?
|
search.catalog_resources.map((catalog_resource, index) => {
|
||||||
<div className={styles['message-container']}>
|
switch (catalog_resource.content.type) {
|
||||||
<div className={styles['message-content']}>
|
case 'Ready':
|
||||||
<div className={styles['label']}> No addons were requested for catalogs</div>
|
return (
|
||||||
</div>
|
<MetaRow
|
||||||
</div>
|
key={index}
|
||||||
:
|
className={styles['search-row']}
|
||||||
search.catalog_resources.map((catalog_resource, index) => {
|
title={catalog_resource.addon_name}
|
||||||
switch (catalog_resource.content.type) {
|
items={catalog_resource.content.content}
|
||||||
case 'Ready':
|
href={catalog_resource.href}
|
||||||
return (
|
limit={10}
|
||||||
<MetaRow
|
/>
|
||||||
key={index}
|
);
|
||||||
className={styles['search-row']}
|
case 'Err':
|
||||||
title={catalog_resource.addon_name}
|
return (
|
||||||
items={catalog_resource.content.content}
|
<MetaRow
|
||||||
href={catalog_resource.href}
|
key={index}
|
||||||
limit={10}
|
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}` : ''}`}
|
||||||
case 'Err':
|
limit={10}
|
||||||
return (
|
/>
|
||||||
<MetaRow
|
);
|
||||||
key={index}
|
case 'Loading':
|
||||||
className={styles['search-row']}
|
return (
|
||||||
title={catalog_resource.addon_name}
|
<MetaRow.Placeholder
|
||||||
message={`Error(${catalog_resource.content.content.type})${typeof catalog_resource.content.content.content === 'string' ? ` - ${catalog_resource.content.content.content}` : ''}`}
|
key={index}
|
||||||
limit={10}
|
className={styles['search-row-placeholder']}
|
||||||
/>
|
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>
|
||||||
);
|
);
|
||||||
|
|
|
||||||
|
|
@ -11,78 +11,79 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.search-container {
|
.search-container {
|
||||||
display: flex;
|
display: grid;
|
||||||
flex-direction: column;
|
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
grid-template-columns: auto 1fr;
|
||||||
|
grid-template-rows: auto 1fr;
|
||||||
|
grid-template-areas:
|
||||||
|
"horizontal-nav-bar horizontal-nav-bar"
|
||||||
|
"vertical-nav-bar search-content";
|
||||||
background-color: var(--color-background);
|
background-color: var(--color-background);
|
||||||
|
|
||||||
|
|
||||||
.horizontal-nav-bar {
|
.horizontal-nav-bar {
|
||||||
flex: none;
|
grid-area: horizontal-nav-bar;
|
||||||
align-self: stretch;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.search-content-container {
|
.vertical-nav-bar {
|
||||||
display: flex;
|
grid-area: vertical-nav-bar;
|
||||||
flex-direction: row;
|
}
|
||||||
height: 100%;
|
|
||||||
|
|
||||||
.search-content {
|
.search-content {
|
||||||
flex: 1;
|
grid-area: search-content;
|
||||||
align-self: stretch;
|
overflow-y: auto;
|
||||||
overflow-y: auto;
|
|
||||||
|
|
||||||
.search-row, .search-row-placeholder {
|
.search-row, .search-row-placeholder {
|
||||||
margin: 4rem 2rem;
|
margin: 4rem 2rem;
|
||||||
|
|
||||||
&:first-child {
|
&:first-child {
|
||||||
margin-top: 2rem;
|
margin-top: 2rem;
|
||||||
}
|
|
||||||
|
|
||||||
&:last-child {
|
|
||||||
margin-bottom: 2rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.see-all-container, .see-all-container-placeholder {
|
|
||||||
width: 12rem;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.message-container {
|
&: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;
|
display: flex;
|
||||||
flex-direction: row;
|
flex-direction: column;
|
||||||
align-items: flex-start;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
max-height: calc(100% - 10rem);
|
|
||||||
margin: 5rem;
|
|
||||||
|
|
||||||
.message-content {
|
&:not(:first-child) {
|
||||||
flex: 1;
|
margin-left: 5rem;
|
||||||
display: flex;
|
}
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
|
|
||||||
&:not(:first-child) {
|
.icon {
|
||||||
margin-left: 5rem;
|
flex: none;
|
||||||
}
|
width: 6rem;
|
||||||
|
height: 6rem;
|
||||||
|
margin-bottom: 2rem;
|
||||||
|
fill: var(--color-surfacelighter80);
|
||||||
|
}
|
||||||
|
|
||||||
.icon {
|
.label {
|
||||||
flex: none;
|
flex-grow: 0;
|
||||||
width: 6rem;
|
flex-shrink: 1;
|
||||||
height: 6rem;
|
flex-basis: auto;
|
||||||
margin-bottom: 2rem;
|
font-size: 1.2rem;
|
||||||
fill: var(--color-surfacelighter80);
|
color: var(--color-surfacelighter80);
|
||||||
}
|
text-align: center;
|
||||||
|
|
||||||
.label {
|
|
||||||
flex-grow: 0;
|
|
||||||
flex-shrink: 1;
|
|
||||||
flex-basis: auto;
|
|
||||||
font-size: 1.2rem;
|
|
||||||
color: var(--color-surfacelighter80);
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -91,13 +92,11 @@
|
||||||
|
|
||||||
@media only screen and (min-width: @large) {
|
@media only screen and (min-width: @large) {
|
||||||
.search-container {
|
.search-container {
|
||||||
.search-content-container {
|
.search-content {
|
||||||
.search-content {
|
.search-row, .search-row-placeholder {
|
||||||
.search-row, .search-row-placeholder {
|
.meta-item, .meta-item-placeholder {
|
||||||
.meta-item, .meta-item-placeholder {
|
&:nth-child(n+9) {
|
||||||
&:nth-child(n+9) {
|
display: none;
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -107,13 +106,11 @@
|
||||||
|
|
||||||
@media only screen and (max-width: @large) {
|
@media only screen and (max-width: @large) {
|
||||||
.search-container {
|
.search-container {
|
||||||
.search-content-container {
|
.search-content {
|
||||||
.search-content {
|
.search-row, .search-row-placeholder {
|
||||||
.search-row, .search-row-placeholder {
|
.meta-item, .meta-item-placeholder {
|
||||||
.meta-item, .meta-item-placeholder {
|
&:nth-child(n+8) {
|
||||||
&:nth-child(n+8) {
|
display: none;
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -123,13 +120,11 @@
|
||||||
|
|
||||||
@media only screen and (max-width: @medium) {
|
@media only screen and (max-width: @medium) {
|
||||||
.search-container {
|
.search-container {
|
||||||
.search-content-container {
|
.search-content {
|
||||||
.search-content {
|
.search-row, .search-row-placeholder {
|
||||||
.search-row, .search-row-placeholder {
|
.meta-item, .meta-item-placeholder {
|
||||||
.meta-item, .meta-item-placeholder {
|
&:nth-child(n+7) {
|
||||||
&:nth-child(n+7) {
|
display: none;
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -139,13 +134,11 @@
|
||||||
|
|
||||||
@media only screen and (max-width: @small) {
|
@media only screen and (max-width: @small) {
|
||||||
.search-container {
|
.search-container {
|
||||||
.search-content-container {
|
.search-content {
|
||||||
.search-content {
|
.search-row, .search-row-placeholder {
|
||||||
.search-row, .search-row-placeholder {
|
.meta-item, .meta-item-placeholder {
|
||||||
.meta-item, .meta-item-placeholder {
|
&:nth-child(n+6) {
|
||||||
&:nth-child(n+6) {
|
display: none;
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -155,13 +148,11 @@
|
||||||
|
|
||||||
@media only screen and (max-width: @xsmall) {
|
@media only screen and (max-width: @xsmall) {
|
||||||
.search-container {
|
.search-container {
|
||||||
.search-content-container {
|
.search-content {
|
||||||
.search-content {
|
.search-row, .search-row-placeholder {
|
||||||
.search-row, .search-row-placeholder {
|
.meta-item, .meta-item-placeholder {
|
||||||
.meta-item, .meta-item-placeholder {
|
&:nth-child(n+5) {
|
||||||
&:nth-child(n+5) {
|
display: none;
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue