Creepso/stremio-web
1
0
Fork 0
mirror of https://github.com/Stremio/stremio-web.git synced 2026-04-21 07:32:02 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

discover layout restructured

Browse source
This commit is contained in:
nklhrstv 2020-03-29 14:23:03 +03:00
parent e1de328b4e
commit 474d3771af
2 changed files with 279 additions and 286 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

92
src/routes/Discover/Discover.js
View file

@ -38,7 +38,7 @@ const Discover = ({ urlParams, queryParams }) => {
event.currentTarget.focus(); event.currentTarget.focus();
} }
}, [discover.catalog_resource, selectedMetaItem]); }, [discover.catalog_resource, selectedMetaItem]);
const avaliable = React.useMemo(() => { const available = React.useMemo(() => {
return discover.selectable.types.length > 0 || discover.catalog_resource !== null; return discover.selectable.types.length > 0 || discover.catalog_resource !== null;
}, [discover]); }, [discover]);
React.useLayoutEffect(() => { React.useLayoutEffect(() => {
@ -52,66 +52,54 @@ const Discover = ({ urlParams, queryParams }) => {
return ( return (
<MainNavBars className={styles['discover-container']} route={'discover'}> <MainNavBars className={styles['discover-container']} route={'discover'}>
<div className={styles['discover-content']}> <div className={styles['discover-content']}>
{ <div className={styles['catalog-container']}>
avaliable ?
<div className={styles['selectable-inputs-container']}>
{selectInputs.map((selectInput, index) => (
<Multiselect {...selectInput} key={index} className={styles['select-input-container']} />
))}
<Button className={styles['filter-container']} title={'More filters'} onClick={openInputsModal}>
<Icon className={styles['filter-icon']} icon={'ic_filter'} />
</Button>
<div className={styles['spacing']} />
{
paginationInput !== null ?
<PaginationInput {...paginationInput} className={styles['pagination-input-container']} />
:
null
}
</div>
:
null
}
{
discover.catalog_resource !== null && discover.catalog_resource.content.type === 'Ready' && !profile.addons.some((addon) => addon.transportUrl === discover.catalog_resource.request.base) ?
<div className={styles['missing-addon-warning-container']}>
<div className={styles['warning-info']}>This addon is not installed. Install now?</div>
<Button className={styles['install-button']} title={'Install addon'} onClick={openAddonModal}>
<div className={styles['label']}>Install</div>
</Button>
</div>
:
null
}
<div className={styles['catalog-content-container']}>
{ {
discover.selectable.types.length === 0 && discover.catalog_resource === null ? available ?
<div className={styles['selectable-inputs-container']}>
{selectInputs.map((selectInput, index) => (
<Multiselect {...selectInput} key={index} className={styles['select-input-container']} />
))}
<Button className={styles['filter-container']} title={'All filters'} onClick={openInputsModal}>
<Icon className={styles['filter-icon']} icon={'ic_filter'} />
</Button>
<div className={styles['spacing']} />
{
paginationInput !== null ?
<PaginationInput {...paginationInput} className={styles['pagination-input-container']} />
:
null
}
</div>
:
null
}
{
discover.catalog_resource !== null && discover.catalog_resource.content.type === 'Ready' && !profile.addons.some((addon) => addon.transportUrl === discover.catalog_resource.request.base) ?
<div className={styles['missing-addon-warning-container']}>
<div className={styles['warning-label']}>Addon is not installed. Install now?</div>
<Button className={styles['install-button']} title={'Install addon'} onClick={openAddonModal}>
<div className={styles['label']}>Install</div>
</Button>
</div>
:
null
}
{
!available ?
<div className={styles['message-container']}> <div className={styles['message-container']}>
<Image <Image className={styles['image']} src={'/images/empty.png'} alt={' '} />
className={styles['image']} <div className={styles['message-label']}>No catalogs available!</div>
src={'/images/empty.png'}
alt={' '}
/>
<div className={styles['message-label']}>No catalogs avaliable.</div>
</div> </div>
: :
discover.catalog_resource === null ? discover.catalog_resource === null ?
<div className={styles['message-container']}> <div className={styles['message-container']}>
<Image <Image className={styles['image']} src={'/images/empty.png'} alt={' '} />
className={styles['image']} <div className={styles['message-label']}>No catalog selected!</div>
src={'/images/empty.png'}
alt={' '}
/>
<div className={styles['message-label']}>No catalog selected</div>
</div> </div>
: :
discover.catalog_resource.content.type === 'Err' ? discover.catalog_resource.content.type === 'Err' ?
<div className={styles['message-container']}> <div className={styles['message-container']}>
<Image <Image className={styles['image']} src={'/images/empty.png'} alt={' '} />
className={styles['image']}
src={'/images/empty.png'}
alt={' '}
/>
<div className={styles['message-label']}> <div className={styles['message-label']}>
{`Error(${discover.catalog_resource.content.content.type})${typeof discover.catalog_resource.content.content.content === 'string' ? ` - ${discover.catalog_resource.content.content.content}` : ''}`} {`Error(${discover.catalog_resource.content.content.type})${typeof discover.catalog_resource.content.content.content === 'string' ? ` - ${discover.catalog_resource.content.content.content}` : ''}`}
</div> </div>
@ -148,7 +136,7 @@ const Discover = ({ urlParams, queryParams }) => {
} }
</div> </div>
{ {
avaliable ? available ?
selectedMetaItem !== null ? selectedMetaItem !== null ?
<MetaPreview <MetaPreview
className={styles['meta-preview-container']} className={styles['meta-preview-container']}

473
src/routes/Discover/styles.less
View file

@ -21,133 +21,160 @@
.discover-content { .discover-content {
width: 100%; width: 100%;
height: 100%; height: 100%;
display: grid; display: flex;
grid-template-columns: 1fr 28rem; flex-direction: row;
grid-template-rows: auto auto 1fr;
grid-template-areas:
"selectable-inputs-area meta-preview-area"
"missing-addon-warning-container meta-preview-area"
"catalog-content-area meta-preview-area";
.selectable-inputs-container { .catalog-container {
grid-area: selectable-inputs-area; flex: 1;
display: flex; align-self: stretch;
flex-direction: row;
padding: 1.5rem;
overflow: visible;
.select-input-container {
flex-grow: 0;
flex-shrink: 1;
flex-basis: 15rem;
height: 3.5rem;
&:not(:first-child) {
margin-left: 1.5rem;
}
&:nth-child(n+4) {
display: none;
&~.filter-container {
display: flex;
}
}
.multiselect-menu-container {
max-height: calc(3.2rem * 7);
overflow: auto;
}
}
.filter-container {
flex: none;
display: none;
align-items: center;
justify-content: center;
width: 3.5rem;
height: 3.5rem;
margin-left: 1.5rem;
background-color: @color-background;
&:not(:nth-last-child(2)) {
margin-right: 1.5rem;
}
.filter-icon {
flex: none;
width: 1.4rem;
height: 1.4rem;
fill: @color-secondaryvariant1-90;
}
}
.spacing {
flex: 1;
}
.pagination-input-container {
flex: none;
height: 3.5rem;
.pagination-prev-button-container, .pagination-next-button-container {
width: 3.5rem;
height: 3.5rem;
.pagination-button-icon {
width: 1rem;
height: 1rem;
}
}
.pagination-label {
width: 3rem;
}
}
}
.missing-addon-warning-container {
grid-area: missing-addon-warning-container;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center;
padding: 0 1.5rem 1.5rem 1.5rem;
.warning-info { .selectable-inputs-container {
flex: none; flex: none;
max-height: 2.4em; align-self: stretch;
margin-bottom: 1rem; display: flex;
font-size: 1.2rem; flex-direction: row;
text-align: center; padding: 1.5rem;
color: @color-surface-light5-90; overflow: visible;
}
.install-button { .select-input-container {
flex: none; flex: 0 1 15rem;
min-width: 10rem; height: 3.5rem;
max-width: 15rem;
padding: 1rem;
background-color: @color-accent3;
&:hover { &:not(:first-child) {
background-color: @color-accent3-light1; margin-left: 1.5rem;
}
&:nth-child(n+4) {
display: none;
&~.filter-container {
display: flex;
}
}
.multiselect-menu-container {
max-height: calc(3.2rem * 7);
overflow: auto;
}
} }
.label { .filter-container {
flex: none;
display: none;
align-items: center;
justify-content: center;
width: 3.5rem;
height: 3.5rem;
margin-left: 1.5rem;
background-color: @color-background;
.filter-icon {
flex: none;
width: 1.4rem;
height: 1.4rem;
fill: @color-secondaryvariant1-90;
}
}
.spacing {
flex: 1;
}
.pagination-input-container {
flex: none;
height: 3.5rem;
margin-left: 1.5rem;
.pagination-prev-button-container, .pagination-next-button-container {
width: 3.5rem;
height: 3.5rem;
.pagination-button-icon {
width: 1rem;
height: 1rem;
}
}
.pagination-label {
width: 3rem;
}
}
}
.missing-addon-warning-container {
flex: none;
align-self: stretch;
display: flex;
flex-direction: column;
align-items: center;
padding: 0 1.5rem 1.5rem 1.5rem;
.warning-label {
flex: none;
max-height: 2.4em; max-height: 2.4em;
font-weight: 500; margin-bottom: 1rem;
font-size: 1.4rem;
text-align: center; text-align: center;
color: @color-surface-light5-90; color: @color-surface-light5-90;
} }
}
}
.catalog-content-container { .install-button {
grid-area: catalog-content-area; flex: none;
min-width: 10rem;
max-width: 15rem;
padding: 1rem;
background-color: @color-accent3;
&:hover {
background-color: @color-accent3-light1;
}
.label {
max-height: 2.4em;
font-weight: 500;
text-align: center;
color: @color-surface-light5-90;
}
}
}
.message-container {
flex: 0 1 auto;
align-self: stretch;
display: flex;
flex-direction: column;
align-items: center;
padding: 0 1.5rem;
overflow-y: auto;
&:first-child {
padding: 4rem;
}
.image {
flex: none;
width: 12rem;
height: 12rem;
margin-bottom: 1rem;
object-fit: contain;
object-position: center;
opacity: 0.9;
}
.message-label {
flex: none;
font-size: 2.5rem;
text-align: center;
color: @color-secondaryvariant2-light1-90;
}
}
.meta-items-container { .meta-items-container {
flex: 1;
align-self: stretch;
display: grid; display: grid;
max-height: 100%;
grid-auto-rows: max-content; grid-auto-rows: max-content;
align-items: center; align-items: center;
grid-gap: 0.5rem; grid-gap: 0.5rem;
@ -178,35 +205,13 @@
} }
} }
} }
.message-container {
display: flex;
flex-direction: column;
align-items: center;
padding: 4rem;
.image {
flex: none;
width: 12rem;
height: 12rem;
margin-bottom: 1rem;
object-fit: contain;
object-position: center;
opacity: 0.9;
}
.message-label {
flex: 0 1 auto;
font-size: 2.5rem;
text-align: center;
color: @color-secondaryvariant2-light1-90;
}
}
} }
.meta-preview-container { .meta-preview-container {
grid-area: meta-preview-area; flex: none;
background-color: @color-background-dark5; align-self: stretch;
width: 28rem;
background-color: @color-background-dark3;
} }
} }
} }
@ -245,110 +250,110 @@
} }
} }
@media only screen and (min-width: @xxlarge) { // @media only screen and (min-width: @xxlarge) {
.discover-container { // .discover-container {
.discover-content { // .discover-content {
.catalog-content-container { // .catalog-content-container {
.meta-items-container { // .meta-items-container {
grid-template-columns: repeat(10, 1fr); // grid-template-columns: repeat(10, 1fr);
} // }
} // }
} // }
} // }
} // }
@media only screen and (max-width: @xxlarge) { // @media only screen and (max-width: @xxlarge) {
.discover-container { // .discover-container {
.discover-content { // .discover-content {
.catalog-content-container { // .catalog-content-container {
.meta-items-container { // .meta-items-container {
grid-template-columns: repeat(9, 1fr); // grid-template-columns: repeat(9, 1fr);
} // }
} // }
} // }
} // }
} // }
@media only screen and (max-width: @xlarge) { // @media only screen and (max-width: @xlarge) {
.discover-container { // .discover-container {
.discover-content { // .discover-content {
.catalog-content-container { // .catalog-content-container {
.meta-items-container { // .meta-items-container {
grid-template-columns: repeat(8, 1fr); // grid-template-columns: repeat(8, 1fr);
} // }
} // }
} // }
} // }
} // }
@media only screen and (max-width: @large) { // @media only screen and (max-width: @large) {
.discover-container { // .discover-container {
.discover-content { // .discover-content {
.catalog-content-container { // .catalog-content-container {
.meta-items-container { // .meta-items-container {
grid-template-columns: repeat(7, 1fr); // grid-template-columns: repeat(7, 1fr);
} // }
} // }
} // }
} // }
} // }
@media only screen and (max-width: @normal) { // @media only screen and (max-width: @normal) {
.discover-container { // .discover-container {
.discover-content { // .discover-content {
.catalog-content-container { // .catalog-content-container {
.meta-items-container { // .meta-items-container {
grid-template-columns: repeat(6, 1fr); // grid-template-columns: repeat(6, 1fr);
} // }
} // }
} // }
} // }
} // }
@media only screen and (max-width: @medium) { // @media only screen and (max-width: @medium) {
.discover-container { // .discover-container {
.discover-content { // .discover-content {
.catalog-content-container { // .catalog-content-container {
.meta-items-container { // .meta-items-container {
grid-template-columns: repeat(5, 1fr); // grid-template-columns: repeat(5, 1fr);
} // }
} // }
} // }
} // }
} // }
@media only screen and (max-width: @small) { // @media only screen and (max-width: @small) {
.discover-container { // .discover-container {
.discover-content { // .discover-content {
.catalog-content-container { // .catalog-content-container {
.meta-items-container { // .meta-items-container {
grid-template-columns: repeat(4, 1fr); // grid-template-columns: repeat(4, 1fr);
} // }
} // }
} // }
} // }
} // }
@media only screen and (max-width: @xsmall) { // @media only screen and (max-width: @xsmall) {
.discover-container { // .discover-container {
.discover-content { // .discover-content {
grid-template-columns: 1fr; // grid-template-columns: 1fr;
grid-template-rows: auto auto 1fr; // grid-template-rows: auto auto 1fr;
grid-template-areas: // grid-template-areas:
"selectable-inputs-area" // "selectable-inputs-area"
"missing-addon-warning-container" // "missing-addon-warning-container"
"catalog-content-area"; // "catalog-content-area";
.catalog-content-container { // .catalog-content-container {
.meta-items-container { // .meta-items-container {
grid-template-columns: repeat(5, 1fr); // grid-template-columns: repeat(5, 1fr);
margin-right: 0; // margin-right: 0;
} // }
} // }
.meta-preview-container { // .meta-preview-container {
display: none; // display: none;
} // }
} // }
} // }
} // }