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

use plain css for router styles

Browse source
This commit is contained in:
NikolaBorislavovHristov 2019-08-06 12:51:42 +03:00
parent e774b1b400
commit 4aadefc170
10 changed files with 58 additions and 63 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
src/App/App.js
View file

@ -2,7 +2,7 @@ const React = require('react');
const { Router } = require('stremio-router');
const { KeyboardNavigation, ServicesProvider } = require('stremio/services');
const routerViewsConfig = require('./routerViewsConfig');
const styles = require('./styles');
require('./styles');
const App = () => {
const onPathNotMatch = React.useCallback(() => {
@ -18,7 +18,6 @@ const App = () => {
<React.StrictMode>
<ServicesProvider services={services}>
<Router
className={styles['router']}
homePath={'/'}
viewsConfig={routerViewsConfig}
onPathNotMatch={onPathNotMatch}

5
src/App/styles.less
View file

@ -1,4 +1,5 @@
@import (inline, once, css) 'stremio-colors/css/stremio-colors.css';
@import (inline, once, css) 'router/styles.css';
@import (reference) 'common/screen-sizes.less';
@font-face {
@ -70,7 +71,7 @@ html {
--scroll-bar-width: 6px;
--color-facebook: #4267b2;
&, body, :global(#app) {
&, body, #app {
position: relative;
z-index: 0;
width: 100vw;
@ -81,7 +82,7 @@ html {
overflow: auto;
}
.router {
.router-container {
width: 100%;
height: 100%;
}

2
src/router/Modal/Modal.js
View file

@ -14,7 +14,7 @@ const Modal = ({ children }) => {
}, []);
return ReactDOM.createPortal(
<FocusableProvider onRoutesContainerDomTreeChange={onRoutesContainerDomTreeChange} onModalsContainerDomTreeChange={onModalsContainerDomTreeChange}>
<div>{children}</div>
<div className={'modal-container'}>{children}</div>
</FocusableProvider>,
modalsContainer
);

5
src/router/ModalsContainerContext/ModalsContainerProvider.js
View file

@ -2,18 +2,17 @@ const React = require('react');
const PropTypes = require('prop-types');
const ModalsContainerContext = require('./ModalsContainerContext');
const ModalsContainerProvider = ({ containerClassName, children }) => {
const ModalsContainerProvider = ({ children }) => {
const [container, setContainer] = React.useState(null);
return (
<ModalsContainerContext.Provider value={container}>
{container instanceof HTMLElement ? children : null}
<div ref={setContainer} className={containerClassName} />
<div ref={setContainer} className={'modals-container'} />
</ModalsContainerContext.Provider>
);
};
ModalsContainerProvider.propTypes = {
containerClassName: PropTypes.string,
children: PropTypes.oneOfType([
PropTypes.arrayOf(PropTypes.node),
PropTypes.node

7
src/router/Router/Route.js
View file

@ -2,7 +2,6 @@ const React = require('react');
const PropTypes = require('prop-types');
const { FocusableProvider } = require('../FocusableContext');
const { ModalsContainerProvider } = require('../ModalsContainerContext');
const styles = require('./styles');
const Route = ({ children }) => {
const onRoutesContainerDomTreeChange = React.useCallback(({ routesContainer, contentContainer }) => {
@ -12,10 +11,10 @@ const Route = ({ children }) => {
return modalsContainer.childElementCount === 0;
}, []);
return (
<div className={styles['route-container']}>
<ModalsContainerProvider containerClassName={styles['modals-container']}>
<div className={'route-container'}>
<ModalsContainerProvider>
<FocusableProvider onRoutesContainerDomTreeChange={onRoutesContainerDomTreeChange} onModalsContainerDomTreeChange={onModalsContainerDomTreeChange}>
<div className={styles['route-content']}>{children}</div>
<div className={'route-content'}>{children}</div>
</FocusableProvider>
</ModalsContainerProvider>
</div>

7
src/router/Router/Router.js
View file

@ -1,12 +1,10 @@
const React = require('react');
const PropTypes = require('prop-types');
const classnames = require('classnames');
const UrlUtils = require('url');
const { RoutesContainerProvider } = require('../RoutesContainerContext');
const Route = require('./Route');
const styles = require('./styles');
const Router = ({ className, homePath, viewsConfig, onPathNotMatch }) => {
const Router = ({ homePath, viewsConfig, onPathNotMatch }) => {
const [views, setViews] = React.useState(() => {
return Array(viewsConfig.length).fill({
routeConfig: null,
@ -92,7 +90,7 @@ const Router = ({ className, homePath, viewsConfig, onPathNotMatch }) => {
};
}, []);
return (
<RoutesContainerProvider containerClassName={classnames(className, styles['router-container'])}>
<RoutesContainerProvider>
{
views
.filter(({ routeConfig }) => routeConfig !== null)
@ -107,7 +105,6 @@ const Router = ({ className, homePath, viewsConfig, onPathNotMatch }) => {
};
Router.propTypes = {
className: PropTypes.string,
homePath: PropTypes.string,
onPathNotMatch: PropTypes.func,
viewsConfig: PropTypes.arrayOf(PropTypes.arrayOf(PropTypes.exact({

42
src/router/Router/styles.less
View file

@ -1,42 +0,0 @@
.router-container {
position: relative;
z-index: 0;
.route-container {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 0;
&:not(:last-child) {
display: none;
}
.route-content {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 0;
overflow: hidden;
}
.modals-container {
width: 0;
height: 0;
>* {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1;
overflow: hidden;
}
}
}
}

5
src/router/RoutesContainerContext/RoutesContainerProvider.js
View file

@ -2,11 +2,11 @@ const React = require('react');
const PropTypes = require('prop-types');
const RoutesContainerContext = require('./RoutesContainerContext');
const RoutesContainerProvider = ({ containerClassName, children }) => {
const RoutesContainerProvider = ({ children }) => {
const [container, setContainer] = React.useState(null);
return (
<RoutesContainerContext.Provider value={container}>
<div ref={setContainer} className={containerClassName}>
<div ref={setContainer} className={'router-container'}>
{container instanceof HTMLElement ? children : null}
</div>
</RoutesContainerContext.Provider>
@ -14,7 +14,6 @@ const RoutesContainerProvider = ({ containerClassName, children }) => {
};
RoutesContainerProvider.propTypes = {
containerClassName: PropTypes.string,
children: PropTypes.oneOfType([
PropTypes.arrayOf(PropTypes.node),
PropTypes.node

42
src/router/styles.css Normal file
View file

@ -0,0 +1,42 @@
.router-container {
position: relative;
z-index: 0;
}
.router-container .route-container {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 0;
}
.router-container .route-container:not(:last-child) {
display: none;
}
.router-container .route-container .route-content {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 0;
overflow: hidden;
}
.router-container .route-container .modals-container {
width: 0;
height: 0;
}
.router-container .route-container .modals-container .modal-container {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1;
overflow: hidden;
}

3
webpack.config.js
View file

@ -44,7 +44,8 @@ module.exports = {
importLoaders: 2,
modules: {
getLocalIdent: (context, localIdentName, localName, options) => {
if (context.resourcePath.startsWith(path.resolve(__dirname, 'src/routes'))) {
if (context.resourcePath.startsWith(path.resolve(__dirname, 'src/routes')) ||
context.resourcePath.startsWith(path.resolve(__dirname, 'src/App'))) {
localIdentName = '[local]';
} else {
localIdentName = '[local]-[hash:base64:5]';