muerwre/vault-frontend
1
0
Fork 0
mirror of https://github.com/muerwre/vault-frontend.git synced 2025-04-25 12:56:41 +07:00
Code Packages Activity Actions

player bar

Browse source
This commit is contained in:
Fedor Katurov 2019-10-13 20:17:50 +07:00
parent 63a616875c
commit 7263f3b7b9
5 changed files with 186 additions and 14 deletions
Download patch file Download diff file Expand all files Collapse all files

33
src/containers/App.tsx
View file

@ -15,6 +15,7 @@ import { Modal } from '~/containers/dialogs/Modal';
import { selectModal } from '~/redux/modal/selectors';
import { BlurWrapper } from '~/components/containers/BlurWrapper';
import { NodeLayout } from './node/NodeLayout';
import { BottomContainer } from '~/containers/main/BottomContainer';
const mapStateToProps = selectModal;
const mapDispatchToProps = {};
@ -23,22 +24,26 @@ type IProps = typeof mapDispatchToProps & ReturnType<typeof mapStateToProps> & {
const Component: FC<IProps> = ({ is_shown }) => (
<ConnectedRouter history={history}>
<BlurWrapper is_blurred={is_shown}>
<MainLayout>
<Modal />
<Sprites />
<div>
<BlurWrapper is_blurred={is_shown}>
<MainLayout>
<Modal />
<Sprites />
<Switch>
<Route exact path={URLS.BASE} component={FlowLayout} />
<Route path={URLS.EXAMPLES.IMAGE} component={ImageExample} />
<Route path={URLS.EXAMPLES.EDITOR} component={EditorExample} />
<Route path="/examples/horizontal" component={HorizontalExample} />
<Route path="/post:id" component={NodeLayout} />
<Switch>
<Route exact path={URLS.BASE} component={FlowLayout} />
<Route path={URLS.EXAMPLES.IMAGE} component={ImageExample} />
<Route path={URLS.EXAMPLES.EDITOR} component={EditorExample} />
<Route path="/examples/horizontal" component={HorizontalExample} />
<Route path="/post:id" component={NodeLayout} />
<Redirect to="/" />
</Switch>
</MainLayout>
</BlurWrapper>
<Redirect to="/" />
</Switch>
</MainLayout>
</BlurWrapper>
<BottomContainer />
</div>
</ConnectedRouter>
);

15
src/containers/main/BottomContainer/index.tsx Normal file
View file

@ -0,0 +1,15 @@
import React, { FC } from 'react';
import * as styles from './styles.scss';
import { PlayerBar } from '~/components/bars/PlayerBar';
interface IProps {}
const BottomContainer: FC<IProps> = ({}) => (
<div className={styles.wrap}>
<div className={styles.content}>
<PlayerBar />
</div>
</div>
);
export { BottomContainer };

30
src/containers/main/BottomContainer/styles.scss Normal file
View file

@ -0,0 +1,30 @@
.wrap {
position: fixed;
transform: translateZ(0);
bottom: 0px;
pointer-events: none;
touch-action: none;
height: 54px;
display: flex;
z-index: 10;
width: 100%;
left: 0;
align-items: center;
justify-content: center;
padding: 0 $gap;
box-sizing: border-box;
}
.content {
position: relative;
flex: 0 1 $content_width;
height: 48px;
display: flex;
align-items: center;
justify-content: flex-end;
& > div {
pointer-events: all;
touch-action: all;
}
}