refinments on alltype card

This commit is contained in:
Cássio Zen
2016-07-13 11:37:00 -03:00
parent e50fbfdeeb
commit 893533961f
4 changed files with 17 additions and 23 deletions

View File

@ -1,4 +1,4 @@
.root {
.cardContent {
white-space: nowrap;
text-align: center;
font-weight: 500;

View File

@ -1,7 +1,7 @@
import React, { PropTypes } from 'react';
import { Card } from '../UI';
import ScaledLine from './ScaledLine';
import styles from './AlltypeCard.css';
export default class AlltypeCard extends React.Component {
@ -9,14 +9,14 @@ export default class AlltypeCard extends React.Component {
// http://erikloyer.com/index.php/blog/the_slabtype_algorithm_part_1_background/
renderInscription(inscription) {
var idealCharPerLine = 22;
const idealCharPerLine = 22;
// segment the text into lines
var words = inscription.split(' ');
var preText, postText, finalText;
var preDiff, postDiff;
var wordIndex = 0;
var lineText = [];
const words = inscription.split(' ');
let preText, postText, finalText;
let preDiff, postDiff;
let wordIndex = 0;
const lineText = [];
// while we still have words left, build the next line
while (wordIndex < words.length) {
@ -65,13 +65,12 @@ export default class AlltypeCard extends React.Component {
const { onClick, text } = this.props;
return (
<Card onClick={onClick}>
<div>{this.renderInscription(text)}</div>
<div className={styles.cardContent}>{this.renderInscription(text)}</div>
</Card>
);
}
}
AlltypeCard.propTypes = {
onClick: PropTypes.func,
text: PropTypes.string.isRequired

View File

@ -1,12 +1,10 @@
import React, { PropTypes } from 'react';
import styles from './ScaledLine.css';
export default class ScaledLine extends React.Component {
constructor(props) {
super(props);
this._content = null;
this.state = {
contentWidth: 0,
ratio: 1,
};
}
@ -15,7 +13,6 @@ export default class ScaledLine extends React.Component {
const actualContent = this._content.children[0];
this.setState({
contentWidth: actualContent.offsetWidth,
ratio: this.props.toWidth / actualContent.offsetWidth,
});
}
@ -24,21 +21,19 @@ export default class ScaledLine extends React.Component {
const { ratio } = this.state;
const { children } = this.props;
var baseFontSize = 15;
var inlineStyles = {
const styles = {
fontSize: ratio.toFixed(3) + 'em'
};
inlineStyles.fontSize = Math.round((baseFontSize * ratio)*1000)/1000
return (
<div ref={(c) => this._content = c} style={inlineStyles} className={styles.root}>
<div ref={(c) => this._content = c} style={styles}>
<span>{children}</span>
</div>
)
);
}
};
}
ScaledLine.propTypes = {
toWidth: PropTypes.number.isRequired,
children: PropTypes.node.isRequired
children: PropTypes.node.isRequired,
toWidth: PropTypes.number.isRequired
};