refinments on alltype card
This commit is contained in:
@ -1,4 +1,4 @@
|
||||
.root {
|
||||
.cardContent {
|
||||
white-space: nowrap;
|
||||
text-align: center;
|
||||
font-weight: 500;
|
@ -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
|
||||
|
@ -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
|
||||
};
|
||||
|
Reference in New Issue
Block a user