From 893533961fb548392a82b810e25e41850a68a3d8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?C=C3=A1ssio=20Zen?= <cassiozen@gmail.com>
Date: Wed, 13 Jul 2016 11:37:00 -0300
Subject: [PATCH] refinments on alltype card

---
 example/index.html                            |  2 +-
 .../Cards/{ScaledLine.css => AlltypeCard.css} |  2 +-
 src/components/Cards/AlltypeCard.js           | 17 ++++++++---------
 src/components/Cards/ScaledLine.js            | 19 +++++++------------
 4 files changed, 17 insertions(+), 23 deletions(-)
 rename src/components/Cards/{ScaledLine.css => AlltypeCard.css} (81%)

diff --git a/example/index.html b/example/index.html
index 9142ebcc..341eebd4 100644
--- a/example/index.html
+++ b/example/index.html
@@ -20,7 +20,7 @@
       "what-is-jam-stack.md": {
         content: "---\ntitle: What is the “JAM Stack”?\ndate: 2015-11-02T00:00.000Z\n---\n\n# The JAM stack is a new way of building websites and apps that are fast, secure and simple to work with.\n\nJAM stands for JavaScript, APIs and Markup. It's the fastest growing new stack for building websites and apps: no more servers, host all your front-end on a CDN and use APIs for any moving parts.\n\n"
       },
-      "sll-support.md": {
+      "cache-invalidation.md": {
         content: "---\ntitle: What about Cache Invalidation?\ndate: 2015-11-02T00:00.000Z\n---\n\n# Netlify handles cache invalidation automatically\n\nWhen your changes go live, they go live.\n\nNo waiting for cache purges, no cumbersome varnish setup, no API calls to clean your distribution. Netlify handles cache purges within an average of 250ms from your deploy!\n\n"
       },
       "continuous-deployment.md": {
diff --git a/src/components/Cards/ScaledLine.css b/src/components/Cards/AlltypeCard.css
similarity index 81%
rename from src/components/Cards/ScaledLine.css
rename to src/components/Cards/AlltypeCard.css
index 45375896..f0e04a3c 100644
--- a/src/components/Cards/ScaledLine.css
+++ b/src/components/Cards/AlltypeCard.css
@@ -1,4 +1,4 @@
-.root {
+.cardContent {
   white-space: nowrap;
   text-align: center;
   font-weight: 500;
diff --git a/src/components/Cards/AlltypeCard.js b/src/components/Cards/AlltypeCard.js
index 8076f3e2..7e3c98b3 100644
--- a/src/components/Cards/AlltypeCard.js
+++ b/src/components/Cards/AlltypeCard.js
@@ -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
diff --git a/src/components/Cards/ScaledLine.js b/src/components/Cards/ScaledLine.js
index 182c80d1..be274a6d 100644
--- a/src/components/Cards/ScaledLine.js
+++ b/src/components/Cards/ScaledLine.js
@@ -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
 };