From a0aaf8b3bb9891f4f561788b72dcac5558c4c85a Mon Sep 17 00:00:00 2001
From: JAMES ZHANG <jzhang300@us.ibm.com>
Date: Mon, 16 May 2016 10:16:26 -0500
Subject: [PATCH] add summary descriptions for #56

---
 public/css/style.css | 19 +++++++++++++++++++
 views/index.ejs      | 10 +++++++++-
 2 files changed, 28 insertions(+), 1 deletion(-)

diff --git a/public/css/style.css b/public/css/style.css
index 81b34f70..a8f303a7 100644
--- a/public/css/style.css
+++ b/public/css/style.css
@@ -1344,6 +1344,25 @@ pre[class*=" language-"] {
     text-align: center;
     color: #e71d32; }
 
+.summary--emotion-description {
+  display: block; }
+  @media (min-width: 768px) {
+    .summary--emotion-description {
+      width: 31.91489%;
+      margin-left: 0%;
+      margin-right: 2.12766%;
+      float: left;
+      margin-top: 0rem; } }
+
+.summary--writing-and-social-description {
+  display: block; }
+  @media (min-width: 768px) {
+    .summary--writing-and-social-description {
+      width: 65.95745%;
+      float: left;
+      display: block;
+      margin-top: 0rem; } }
+
 .summary--emotion {
   background-color: #f9f9f9;
   padding: 1rem;
diff --git a/views/index.ejs b/views/index.ejs
index 09d0f289..db333846 100755
--- a/views/index.ejs
+++ b/views/index.ejs
@@ -87,7 +87,7 @@
     <article class="_content base--article">
       <div class="input">
         <h2 class="base--h2">Sample use cases</h2>
-        <p class="base--p input--description">Choose an example to learn how you can adjust the tone of your content to change people's perceptions, or improve its effectiveness. <a href="http://www.ibm.com/smarterplanet/us/en/ibmwatson/developercloud/doc/tone-analyzer/index.shtml#usecases" target="new">Learn more</a>.</p>
+        <p class="base--p input--description">Choose an example to learn how you can adjust the tone of your content to change people's perceptions, or improve its effectiveness. <a class="base--a" href="http://www.ibm.com/smarterplanet/us/en/ibmwatson/developercloud/doc/tone-analyzer/index.shtml#usecases" target="new">Learn more</a>.</p>
         <input role="radio" class="base--radio input--radio" type="radio" id="input-customer-call" name="rb" value="customer-call" checked="true">
         <label class="base--inline-label input--radio-label" for="input-customer-call">Customer service chat</label>
         <input role="radio" class="base--radio input--radio" type="radio" id="input-email" name="rb" value="email">
@@ -119,6 +119,14 @@
         <h2 class="base--h2">Output</h2>
         <p class="base--p output--document-description">The Tone Analyzer Service analyzes text at the document level and the sentence level. Use the document level analysis to get a sense of the overall tone of the document, and use the sentence level analysis to identify specific areas of your content where tones are the strongest.</p>
         <h3 class="base--h3 output--document-title">Document-level</h3>
+        <div class="summary--row">
+          <div class="summary--emotion-description">
+            The Emotion graph represents the likelihood that an emotion tone is present in the text. <a class="base--a" target="_blank" href="http://www.ibm.com/smarterplanet/us/en/ibmwatson/developercloud/doc/tone-analyzer/understanding-tone.shtml#emotional">Learn more</a>.
+          </div>
+          <div class="summary--writing-and-social-description">
+            The Writing Style and Social Tendencies graphs represent the amount of a writing or social tone present in the text. <a class="base--a" target="_blank" href="http://www.ibm.com/smarterplanet/us/en/ibmwatson/developercloud/doc/tone-analyzer/understanding-tone.shtml#social">Learn more</a>.
+          </div>
+        </div>
         <div class="summary--row">
           <div class="summary--emotion">
             <h5 class="base--h5 summary--header">Emotion</h5>