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

VerticalNavBar styled

Browse source
This commit is contained in:
nklhrstv 2020-02-18 22:25:10 +02:00
parent c011b46d73
commit 43a506e73a
4 changed files with 8 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
src/App/styles.less
View file

@ -11,6 +11,7 @@
--poster-shape-ratio: 1.464; --poster-shape-ratio: 1.464;
--scroll-bar-width: 6px; --scroll-bar-width: 6px;
--nav-bar-size: 3.2rem; --nav-bar-size: 3.2rem;
--vertical-nav-bar-size: 5rem;
--focus-outline-size: 2px; --focus-outline-size: 2px;
--color-facebook: #4267b2; --color-facebook: #4267b2;
--color-twitter: #1DA1F2; --color-twitter: #1DA1F2;

4
src/common/NavBar/NavTabButton/styles.less
View file

@ -27,6 +27,8 @@
&.nav-tab-button-vertical { &.nav-tab-button-vertical {
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
width: var(--vertical-nav-bar-size);
height: var(--vertical-nav-bar-size);
padding: 0.5rem; padding: 0.5rem;
.icon { .icon {
@ -36,7 +38,7 @@
.label { .label {
flex: none; flex: none;
max-height: 1.2em; max-height: 1.2em;
font-size: 0.75rem; font-size: 0.85rem;
} }
} }

4
src/common/NavBar/VerticalNavBar/VerticalNavBar.js
View file

@ -1,12 +1,12 @@
const React = require('react'); const React = require('react');
const PropTypes = require('prop-types'); const PropTypes = require('prop-types');
const classnames = require('classnames'); const classnames = require('classnames');
const NavTabButton = require('stremio/common/NavBar/NavTabButton'); const NavTabButton = require('../NavTabButton');
const styles = require('./styles'); const styles = require('./styles');
const VerticalNavBar = React.memo(({ className, route, tabs }) => { const VerticalNavBar = React.memo(({ className, route, tabs }) => {
return ( return (
<nav className={classnames(className, styles['nav-bar-container'])}> <nav className={classnames(className, styles['vertical-nav-bar-container'])}>
{ {
Array.isArray(tabs) && tabs.length > 0 ? Array.isArray(tabs) && tabs.length > 0 ?
tabs.map((tab, index) => ( tabs.map((tab, index) => (

5
src/common/NavBar/VerticalNavBar/styles.less
View file

@ -1,6 +1,5 @@
.nav-bar-container { .vertical-nav-bar-container {
--nav-bar-size: 4.4rem; width: var(--vertical-nav-bar-size);
width: var(--nav-bar-size);
padding: 1rem 0; padding: 1rem 0;
background-color: var(--color-backgroundlighter); background-color: var(--color-backgroundlighter);
overflow-y: auto; overflow-y: auto;