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

ActionButton/MetaLinks classnames and props refactored

Browse source
This commit is contained in:
NikolaBorislavovHristov 2019-09-08 08:32:30 +03:00
parent 26cd151a92
commit 1f5fcf73b4
4 changed files with 13 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/common/MetaPreview/ActionButton/ActionButton.js
View file

@ -5,7 +5,7 @@ const Icon = require('stremio-icons/dom');
const Button = require('stremio/common/Button');
const styles = require('./styles');
const ActionButton = ({ className, icon = '', label = '', ...props }) => {
const ActionButton = ({ className, icon, label, ...props }) => {
return (
<Button {...props} className={classnames(className, styles['action-button-container'])} title={label}>
{

6
src/common/MetaPreview/ActionButton/styles.less
View file

@ -9,7 +9,8 @@
}
.icon {
flex: none;
flex-grow: 0;
flex-shrink: 0;
flex-basis: 50%;
padding-top: 15%;
fill: var(--color-surfacelighter);
@ -20,7 +21,8 @@
}
.label-container {
flex: none;
flex-grow: 0;
flex-shrink: 0;
flex-basis: 50%;
display: flex;
flex-direction: row;

10
src/common/MetaPreview/MetaLinks/MetaLinks.js
View file

@ -4,12 +4,12 @@ const classnames = require('classnames');
const Button = require('stremio/common/Button');
const styles = require('./styles');
const MetaLinks = ({ className, label = '', links = [] }) => {
const MetaLinks = ({ className, label, links }) => {
return (
<div className={classnames(className, styles['meta-links-container'])}>
{
typeof label === 'string' && label.length > 0 ?
<div className={styles['label']}>{label}:</div>
<div className={styles['label-container']}>{label}:</div>
:
null
}
@ -17,7 +17,7 @@ const MetaLinks = ({ className, label = '', links = [] }) => {
Array.isArray(links) && links.length > 0 ?
<div className={styles['links-container']}>
{links.map(({ label, href }, index) => (
<Button key={`${label}-${href}-${index}`} className={styles['link']} title={label} tabIndex={-1} href={href}>
<Button key={`${label}-${href}-${index}`} className={styles['link-container']} title={label} tabIndex={-1} href={href}>
{label}
{index < links.length - 1 ? ',' : null}
</Button>
@ -34,8 +34,8 @@ MetaLinks.propTypes = {
className: PropTypes.string,
label: PropTypes.string,
links: PropTypes.arrayOf(PropTypes.shape({
label: PropTypes.string,
href: PropTypes.string
label: PropTypes.string.isRequired,
href: PropTypes.string.isRequired
}))
};

5
src/common/MetaPreview/MetaLinks/styles.less
View file

@ -1,5 +1,5 @@
.meta-links-container {
.label {
.label-container {
margin-bottom: 0.2rem;
font-size: 1.2rem;
color: var(--color-surfacelighter);
@ -10,9 +10,10 @@
flex-direction: row;
flex-wrap: wrap;
.link {
.link-container {
flex-grow: 0;
flex-shrink: 1;
flex-basis: auto;
margin-right: 0.5rem;
margin-bottom: 0.2rem;
white-space: nowrap;