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

NavTabButton supports only vertical layout

Browse source
This commit is contained in:
nklhrstv 2020-02-19 12:04:20 +02:00
parent b42b62541c
commit b23177ee7e
2 changed files with 11 additions and 39 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
src/common/NavBar/NavTabButton/NavTabButton.js
View file

@ -5,9 +5,9 @@ const Icon = require('stremio-icons/dom');
const Button = require('stremio/common/Button');
const styles = require('./styles');
const NavTabButton = ({ className, icon, label, href, selected, direction, onClick }) => {
const NavTabButton = ({ className, icon, label, href, selected, onClick }) => {
return (
<Button className={classnames(className, styles['nav-tab-button-container'], styles['nav-tab-button-horizontal'], styles[`nav-tab-button-${direction}`], { 'selected': selected })} title={label} tabIndex={-1} href={href} onClick={onClick}>
<Button className={classnames(className, styles['nav-tab-button-container'], { 'selected': selected })} title={label} tabIndex={-1} href={href} onClick={onClick}>
{
typeof icon === 'string' && icon.length > 0 ?
<Icon className={styles['icon']} icon={icon} />
@ -30,7 +30,6 @@ NavTabButton.propTypes = {
label: PropTypes.string,
href: PropTypes.string,
selected: PropTypes.bool,
direction: PropTypes.oneOf(['horizontal', 'vertical']),
onClick: PropTypes.func
};

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

@ -1,6 +1,9 @@
.nav-tab-button-container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 0.5rem;
&:hover {
background-color: var(--color-secondary);
@ -10,48 +13,18 @@
background-color: var(--color-background);
}
&.nav-tab-button-horizontal {
flex-direction: row;
padding: 0 1rem;
.icon {
width: 1.5rem;
height: 1.2rem;
margin: 0 0.5rem 0 0;
}
.label {
flex: 1;
max-height: 2.4em;
}
}
&.nav-tab-button-vertical {
flex-direction: column;
justify-content: center;
width: var(--vertical-nav-bar-size);
height: var(--vertical-nav-bar-size);
padding: 0.5rem;
.icon {
width: 1.5rem;
height: 1.5rem;
margin: 0 0 0.5rem 0;
}
.label {
flex: none;
max-height: 1.2em;
font-size: 0.85rem;
}
}
.icon {
flex: none;
width: 1.5rem;
height: 1.5rem;
margin-bottom: 0.5rem;
fill: var(--color-surfacelighter);
}
.label {
flex: none;
max-height: 1.2em;
font-size: 0.85rem;
color: var(--color-surfacelighter);
}
}