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

toasts container styles applied through props

Browse source
This commit is contained in:
nklhrstv 2020-01-31 23:28:19 +02:00
parent a20f6a4e24
commit c2db27d938
5 changed files with 21 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/App/App.js
View file

@ -51,7 +51,7 @@ const App = () => {
<ServicesProvider services={services}>
{
shellInitialized && coreInitialized ?
<ToastsContainerProvider>
<ToastsContainerProvider className={styles['toasts-container']}>
<Router
className={styles['router']}
homePath={'/'}

16
src/App/styles.less
View file

@ -72,6 +72,22 @@ html {
width: 100%;
height: 100%;
.toasts-container {
position: absolute;
top: calc(1.2 * var(--nav-bar-size));
right: var(--nav-bar-size);
bottom: calc(1.2 * var(--nav-bar-size));
left: auto;
z-index: 0;
overflow-y: auto;
scrollbar-width: none;
pointer-events: none;
&::-webkit-scrollbar {
width: var(--scroll-bar-width);
}
}
.router {
width: 100%;
height: 100%;

2
src/common/Toasts/Toasts.js
View file

@ -1,6 +1,6 @@
const React = require('react');
const { Modal } = require('stremio-router');
const ModalsContainerContext = require('stremio-router/ModalsContainerContext/ModalsContainerContext');
const { ModalsContainerContext } = require('stremio-router');
const { useToastsContainer } = require('./ToastsContainerContext');
const Toast = require('./Toast');

6
src/common/Toasts/ToastsContainerContext/ToastsContainerProvider.js
View file

@ -1,19 +1,19 @@
const React = require('react');
const PropTypes = require('prop-types');
const ToastsContainerContext = require('./ToastsContainerContext');
const styles = require('./styles');
const ToastsContainerProvider = ({ children }) => {
const ToastsContainerProvider = ({ className, children }) => {
const [container, setContainer] = React.useState(null);
return (
<ToastsContainerContext.Provider value={container}>
{container instanceof HTMLElement ? children : null}
<div ref={setContainer} className={styles['toasts-container']} />
<div ref={setContainer} className={className} />
</ToastsContainerContext.Provider>
);
};
ToastsContainerProvider.propTypes = {
className: PropTypes.string,
children: PropTypes.node
};

9
src/common/Toasts/ToastsContainerContext/styles.less
View file

@ -1,9 +0,0 @@
.toasts-container {
position: absolute;
top: var(--nav-bar-size);
right: 0;
bottom: 0;
left: auto !important;
z-index: 0;
pointer-events: none;
}