From 9ff1feb0359e35669b7384fd7a7b309fa07a68c0 Mon Sep 17 00:00:00 2001
From: Dale John McGrew <dale.mcgrew@wevoteusa.org>
Date: Thu, 25 Feb 2016 12:18:59 -0800
Subject: [PATCH] Made the entire CandidateItem div a link (per original
 designs). Changed "support/oppose" language in cases where we are using
 ratings. Added "source" under Vote Smart ratings. Changed "My Ballot" to "My
 Voter Guide", and added "demo version" per Jenifer's requests. Added "My
 Voter Guide" link to left menu. Added indicator in both ItemActionBar's for
 when the voter supports or opposes something. Did some ES lint clean up.
 Added _position stylesheet. Added text offering test address.

---
 src/js/components/Ballot/CandidateItem.jsx    | 87 ++++++++++---------
 src/js/components/Ballot/PositionItem.jsx     |  9 +-
 src/js/components/Header.jsx                  | 10 ++-
 src/js/components/ItemActionBar2.jsx          | 12 +--
 src/js/components/ItemActionbar.jsx           |  4 +-
 .../components/LanguageSwitchNavigation.jsx   | 20 ++---
 src/js/components/MoreMenu.jsx                | 32 ++-----
 src/js/routes/Ballot/Candidate.jsx            | 18 ----
 src/js/routes/Ballot/EmptyBallot.jsx          | 16 +++-
 src/js/routes/Intro/IntroContests.jsx         |  2 +-
 src/js/routes/More/About.jsx                  |  3 +-
 src/js/routes/Settings/Location.jsx           | 10 ++-
 src/sass/components/_candidate.scss           | 15 +++-
 src/sass/components/_itemActionbar.scss       |  6 ++
 src/sass/components/_position.scss            |  7 ++
 src/sass/main.scss                            |  1 +
 16 files changed, 133 insertions(+), 119 deletions(-)
 create mode 100644 src/sass/components/_position.scss

diff --git a/src/js/components/Ballot/CandidateItem.jsx b/src/js/components/Ballot/CandidateItem.jsx
index e311d5da4..9440114ab 100644
--- a/src/js/components/Ballot/CandidateItem.jsx
+++ b/src/js/components/Ballot/CandidateItem.jsx
@@ -76,49 +76,52 @@ export default class Candidate extends Component {
           we_vote_id={we_vote_id}
           is_starred={this.props.is_starred || false } />
 
-        <div className="row" style={{ paddingBottom: "10px" }}>
-          <div
-            className="col-xs-6"
-            style={candidate_photo_url ? {} : {height: "95px"}}>
-
-            {/* adding inline style to img until Rob can style... */}
-            {
-              candidate_photo_url ?
-
-                <img
-                  className="img-circle"
-                  style={{display: "block", paddingTop: "10px", width: "100px"}}
-                  src={candidate_photo_url}
-                  alt="candidate-photo"/> :
-
-              <i className="icon-lg icon-main icon-icon-person-placeholder-6-1 icon-light"/>
-
-            }
-          </div>
-          <div className="col-xs-6">
-            <h4 className="bufferNone">
-              <Link className="linkLight"
-                    to={"/candidate/" + we_vote_id }
-                    onlyActiveOnIndex={false}>
-                      { ballot_item_display_name }
-              </Link>
-            </h4>
-            <ul className="list-style--none">
-              <li className="list-inline support">
-                <span className={ support_emphasis }>
-                  <span>{ this.state.supportCount }</span>&nbsp;
-                  <span>support</span>
-                </span>
-              </li>
-              <li className="list-inline oppose">
-                <span className={ oppose_emphasis }>
-                  <span>{ this.state.opposeCount }</span>&nbsp;
-                  <span>oppose</span>
-                </span>
-              </li>
-            </ul>
+        <Link className="linkLight"
+              to={"/candidate/" + we_vote_id }
+              onlyActiveOnIndex={false}>
+          {/* Note: We want a click anywhere in this div to take you to the candidate page */}
+          <div className="row" style={{ paddingBottom: "10px" }}>
+            <div
+              className="col-xs-6"
+              style={candidate_photo_url ? {} : {height: "95px"}}>
+
+              {/* adding inline style to img until Rob can style... */}
+              {
+                candidate_photo_url ?
+
+                  <img
+                    className="img-circle"
+                    style={{display: "block", paddingTop: "10px", width: "100px"}}
+                    src={candidate_photo_url}
+                    alt="candidate-photo"/> :
+
+                <i className="icon-lg icon-main icon-icon-person-placeholder-6-1 icon-light"/>
+
+              }
+
+            </div>
+            <div className="col-xs-6">
+              <h4 className="bufferNone">
+                { ballot_item_display_name } <span className="link-text-to-more-info">(more)</span>
+              </h4>
+              <span className="link-text-to-opinions">Summary of opinions you follow: </span>
+              <ul className="list-style--none">
+                <li className="list-inline support">
+                  <span className={ support_emphasis }>
+                    <span>{ this.state.supportCount }</span>&nbsp;
+                    <span>positive</span>
+                  </span>,
+                </li>
+                <li className="list-inline oppose">
+                  <span className={ oppose_emphasis }>
+                    <span>{ this.state.opposeCount }</span>&nbsp;
+                    <span>negative</span>
+                  </span>
+                </li>
+              </ul>
+            </div>
           </div>
-        </div>
+          </Link>
         <ItemActionbar we_vote_id={we_vote_id} action={BallotActions} is_support={is_support} is_oppose={is_oppose} />
       </section>;
   }
diff --git a/src/js/components/Ballot/PositionItem.jsx b/src/js/components/Ballot/PositionItem.jsx
index 985c9169b..c7f652d55 100644
--- a/src/js/components/Ballot/PositionItem.jsx
+++ b/src/js/components/Ballot/PositionItem.jsx
@@ -36,17 +36,17 @@ export default class PositionItem extends Component {
 
     if (position.hasOwnProperty("is_oppose") && position.hasOwnProperty("is_support") && position.is_oppose === position.is_support){
       console.log("Both positions true:", this.props.position_we_vote_id);
-      supportText = "Information about";
+      supportText = "rates";
     } else if (position.is_oppose) {
-      supportText = "Opposes";
+      supportText = "rates";
     } else if (position.is_support) {
-      supportText = "Supports";
+      supportText = "rates";
     }
 
     var dateStr = this.props.last_updated;
     var dateText = moment(dateStr).startOf("day").fromNow();
 
-    return <div>
+    return <div className="position-item">
       {/* One organization"s Position on this Candidate */}
       <li className="list-group-item">
           <div className="row">
@@ -69,6 +69,7 @@ export default class PositionItem extends Component {
           </div>
           <div className="row">
               {position.statement_text}
+              <span className="position-source"> (source: VoteSmart.org)</span>
           </div>
           {/* Likes coming in a later version
           <br />
diff --git a/src/js/components/Header.jsx b/src/js/components/Header.jsx
index 5fff67bb7..facc23eaf 100644
--- a/src/js/components/Header.jsx
+++ b/src/js/components/Header.jsx
@@ -59,7 +59,8 @@ export default class Header extends Component {
             <h4 className="pull-left gutter-left--window bold">
               <span onClick={this.show.bind(this)} className="glyphicon glyphicon-menu-hamburger glyphicon-line-adjustment device-icon--large">
               </span>
-              My Ballot
+              My Voter Guide
+              <span className="header-version"> demo version</span>
             </h4>
             <aside className="header-address pull-right gutter-right--window gutter-top--small">
               <Link to="/settings/location" className="font-lightest">
@@ -83,7 +84,11 @@ export default class Header extends Component {
             </span>
           }
           <ul className="list-group">
-            {/*<li className="list-group-item"><Link to="/more/email_ballot">Print or Email Ballot</Link></li>*/}
+            <li className="list-group-item">
+              <Link onClick={this.hide.bind(this)} to="/ballot">
+                My Voter Guide
+              </Link>
+            </li>
             <li className="list-group-item">
               <Link onClick={this.hide.bind(this)} to="/more/opinions/followed">
                 Opinions I'm Following
@@ -102,6 +107,7 @@ export default class Header extends Component {
                 </li>
                 : <span></span>
             }
+            {/*<li className="list-group-item"><Link to="/more/email_ballot">Print or Email Ballot</Link></li>*/}
           </ul>
           {/*
           <ul className="list-group">
diff --git a/src/js/components/ItemActionBar2.jsx b/src/js/components/ItemActionBar2.jsx
index 0435b2c25..11c130f37 100644
--- a/src/js/components/ItemActionBar2.jsx
+++ b/src/js/components/ItemActionBar2.jsx
@@ -61,8 +61,8 @@ export default class ItemActionBar2 extends Component {
       <div className="item-actionbar2 row">
         {this.state.is_support ?
           <span className="col-xs-4" onClick={ this.stopSupportingItem.bind(this) }>
-            <span>
-              {this.state.supportCount} support
+            <span className="support-emphasis">
+              {this.state.supportCount} positive
               <span className="glyphicon glyphicon-small glyphicon-arrow-up">
               </span>
             </span>
@@ -70,7 +70,7 @@ export default class ItemActionBar2 extends Component {
          :
           <span className="col-xs-4" onClick={ this.supportItem.bind(this) }>
             <span>
-              {this.state.supportCount} support
+              {this.state.supportCount} positive
               <span className="glyphicon glyphicon-small glyphicon-arrow-up">
               </span>
             </span>
@@ -78,8 +78,8 @@ export default class ItemActionBar2 extends Component {
         }
         {this.state.is_oppose ?
           <span className="col-xs-4" onClick={ this.stopOpposingItem.bind(this) }>
-            <span>
-              {this.state.opposeCount} oppose
+            <span className="oppose-emphasis">
+              {this.state.opposeCount} negative
               <span className="glyphicon glyphicon-small glyphicon-arrow-down">
               </span>
             </span>
@@ -87,7 +87,7 @@ export default class ItemActionBar2 extends Component {
           :
           <span className="col-xs-4" onClick={ this.opposeItem.bind(this) }>
             <span>
-              {this.state.opposeCount} oppose
+              {this.state.opposeCount} negative
               <span className="glyphicon glyphicon-small glyphicon-arrow-down">
               </span>
             </span>
diff --git a/src/js/components/ItemActionbar.jsx b/src/js/components/ItemActionbar.jsx
index ad781df48..78f24531c 100644
--- a/src/js/components/ItemActionbar.jsx
+++ b/src/js/components/ItemActionbar.jsx
@@ -66,14 +66,14 @@ export default class ItemActionbar extends Component {
 
       <div className="item-actionbar row">
         <span className="col-xs-4" onClick={ is_support ? supportOff : supportOn }>
-          <span className="inline-phone">
+          <span className={ is_support ? "inline-phone support-emphasis" : "inline-phone" }>
             <span className="glyphicon glyphicon-small glyphicon-arrow-up">
             </span>
             <span style={ is_support ? bold : {} }> Support</span>
           </span>
         </span>
         <span className="col-xs-4" onClick={ is_oppose ? opposeOff : opposeOn }>
-          <span className="inline-phone">
+          <span className={ is_oppose ? "inline-phone oppose-emphasis" : "inline-phone" }>
             <span className="glyphicon glyphicon-small glyphicon-arrow-down">
             </span>
             <span style={ is_oppose ? bold : {} }> Oppose</span>
diff --git a/src/js/components/LanguageSwitchNavigation.jsx b/src/js/components/LanguageSwitchNavigation.jsx
index 179450540..2f07276d9 100644
--- a/src/js/components/LanguageSwitchNavigation.jsx
+++ b/src/js/components/LanguageSwitchNavigation.jsx
@@ -5,19 +5,17 @@ export default class LanguageSwitchNavigation extends Component {
     static propTypes = {
         language_selected: PropTypes.string
     };
-    constructor(props) {
+    constructor (props) {
         super(props);
     }
 
-	render() {
-		return (
-<span>
-    {(this.props.language_selected == "chinese") ? <span></span> : <span><Link to="home">中国</Link><br /></span>}
-    {(this.props.language_selected == null) ? <span></span> : <span><Link to="home">English</Link><br /></span>}
-    {(this.props.language_selected == "spanish") ? <span></span> : <span><Link to="home">Español</Link><br /></span>}
-    {(this.props.language_selected == "tagalog") ? <span></span> : <span><Link to="home">Tagalog</Link><br /></span>}
-    {(this.props.language_selected == "vietnamese") ? <span></span> : <span><Link to="home">tiếng Việt</Link><br /></span>}
-</span>
-        );
+	render () {
+		return <span>
+            {this.props.language_selected === "chinese" ? <span></span> : <span><Link to="home">中国</Link><br /></span>}
+            {this.props.language_selected === null ? <span></span> : <span><Link to="home">English</Link><br /></span>}
+            {this.props.language_selected === "spanish" ? <span></span> : <span><Link to="home">Español</Link><br /></span>}
+            {this.props.language_selected === "tagalog" ? <span></span> : <span><Link to="home">Tagalog</Link><br /></span>}
+            {this.props.language_selected === "vietnamese" ? <span></span> : <span><Link to="home">tiếng Việt</Link><br /></span>}
+        </span>;
 	}
 }
diff --git a/src/js/components/MoreMenu.jsx b/src/js/components/MoreMenu.jsx
index 636f1a232..86a140517 100644
--- a/src/js/components/MoreMenu.jsx
+++ b/src/js/components/MoreMenu.jsx
@@ -1,8 +1,7 @@
 const web_app_config = require("../config");
 import React, { PropTypes, Component } from "react";
 import { Link } from "react-router";
-import LanguageSwitchNavigation from "../components/LanguageSwitchNavigation";
-import VoterStore from "../stores/VoterStore";
+//import LanguageSwitchNavigation from "../components/LanguageSwitchNavigation";
 
 export default class MoreMenu extends Component {
   static propTypes = {
@@ -12,27 +11,16 @@ export default class MoreMenu extends Component {
 	signed_in_personal: PropTypes.bool
   };
 
-  constructor(props) {
+  constructor (props) {
 	super(props);
   }
 
-  render() {
-	var voter_image = "";
-	if (this.props.voter_photo_url) {
-		voter_image = <img
-			src={this.props.voter_photo_url}
-			className="img-circle"
-			width="25px"
-			height="25px" />
-	}
-
-	return (
-		<div>
+  render () {
+	return <div>
 			<div className="device-menu--large container-fluid well well-90">
 				{this.props.signed_in_personal ?
 					<span></span>
-					:
-					<span>
+					: <span>
 						<ul className="list-group">
 							<li className="list-group-item"><Link to="/more/sign_in">Sign In</Link></li>
 						</ul>
@@ -40,14 +28,13 @@ export default class MoreMenu extends Component {
 					</span>
 					}
 				<ul className="list-group">
-					{/*<li className="list-group-item"><Link to="/more/email_ballot">Print or Email Ballot</Link></li>*/}
+					<li className="list-group-item"><Link to="/ballot">My Voter Guide</Link></li>
 					<li className="list-group-item"><Link to="/more/opinions/followed">Opinions I'm Following</Link></li>
 					<li className="list-group-item"><Link to="/settings/location">My Ballot Location</Link></li>
 					{this.props.signed_in_personal ?
-						<li className="list-group-item"><Link to="/more/sign_in">Account Settings</Link></li>
-						:
-						<span></span>
+						<li className="list-group-item"><Link to="/more/sign_in">Account Settings</Link></li> : <span></span>
 					}
+					{/*<li className="list-group-item"><Link to="/more/email_ballot">Print or Email Ballot</Link></li>*/}
 				</ul>
 				{/*
 				<ul className="list-group">
@@ -72,7 +59,6 @@ export default class MoreMenu extends Component {
 					*/}
 				</ul>
 			</div>
-		</div>
-	)
+		</div>;
   }
 }
diff --git a/src/js/routes/Ballot/Candidate.jsx b/src/js/routes/Ballot/Candidate.jsx
index d18a6a957..9843a6f7f 100644
--- a/src/js/routes/Ballot/Candidate.jsx
+++ b/src/js/routes/Ballot/Candidate.jsx
@@ -47,24 +47,6 @@ export default class Candidate extends Component {
     return (
     <section className="candidate well well-90 gutter-top--small">
       <div className="candidate-detail-route list-group-item">
-        {/*
-        <header className="row">
-          <div className="col-xs-6 col-md-6 text-center">
-            <Link to="/ballot">
-              &lt; Back to My Ballot
-            </Link>
-          </div>
-          <div className="col-xs-6 col-md-6 text-center">
-            <i className="icon-icon-more-opinions-2-2 icon-light icon-medium">
-            </i>
-            <Link
-              to="/ballot/opinions"
-              className="font-darkest fluff-left-narrow">
-                More Opinions
-            </Link>
-          </div>
-        </header>
-        */}
         {candidate.hasOwnProperty("is_starred") ?
           <StarAction
           we_vote_id={candidate.we_vote_id}
diff --git a/src/js/routes/Ballot/EmptyBallot.jsx b/src/js/routes/Ballot/EmptyBallot.jsx
index cc340e411..bde4b324e 100644
--- a/src/js/routes/Ballot/EmptyBallot.jsx
+++ b/src/js/routes/Ballot/EmptyBallot.jsx
@@ -14,12 +14,20 @@ export default class EmptyBallot extends Component {
       <div>
         <div className="container-fluid well gutter-top--small fluff-full1">
           <h3 className="text-center">
-            Sorry
+            Your Ballot Is Not Ready Yet
           </h3>
-          <span className="small">
+          <div className="small">
             Our data providers don't have ballot data for your address yet.
-            Please check back 1-2 weeks before your election day
-          </span>
+            Please check back 1-2 weeks before your election day. Thank you for your patience.
+          </div>
+          <br />
+          <br />
+          <div className="medium">
+            See We Vote in action! Copy this test address into "My Ballot Location":
+          </div>
+          <h4>
+            2208 Ebb Tide Rd, Virginia Beach, VA 23451
+          </h4>
         </div>
       </div>
     );
diff --git a/src/js/routes/Intro/IntroContests.jsx b/src/js/routes/Intro/IntroContests.jsx
index c310d384d..fa0859bb3 100644
--- a/src/js/routes/Intro/IntroContests.jsx
+++ b/src/js/routes/Intro/IntroContests.jsx
@@ -42,7 +42,7 @@ export default class IntroBallotContests extends Component {
                     <span style={float.right}>
                         <Link to="/ballot">
                             <Button bsStyle="primary">
-                                Show me My Ballot >
+                                Show me the ballot >
                             </Button>
                         </Link>
                     </span>
diff --git a/src/js/routes/More/About.jsx b/src/js/routes/More/About.jsx
index 21299506c..190c654fd 100644
--- a/src/js/routes/More/About.jsx
+++ b/src/js/routes/More/About.jsx
@@ -18,6 +18,7 @@ export default class About extends Component {
           <h3 className="text-center">About We Vote</h3>
           <p>
               We Vote USA is nonprofit and nonpartisan. For more information, please visit www.WeVoteUSA.org.
+              This is a demonstration version and has not been launched to the general public yet.
           </p>
 
           <h3 className="text-center">Acknowledgements</h3>
@@ -38,7 +39,7 @@ export default class About extends Component {
           </p>
           <p>
               Special thanks to our team of volunteers.
-              Thank you everyone! (This is a list of volunteers who have contributed 10 or more hours, in rough order of hours contributed.)</p>
+              You are the best! (This is a list of volunteers who have contributed 10 or more hours, in rough order of hours contributed.)</p>
           <p>
               Dale McGrew - Oakland, CA<br />
               Jenifer Fernandez Ancona - Oakland, CA<br />
diff --git a/src/js/routes/Settings/Location.jsx b/src/js/routes/Settings/Location.jsx
index 32712d599..a762b2b60 100644
--- a/src/js/routes/Settings/Location.jsx
+++ b/src/js/routes/Settings/Location.jsx
@@ -57,8 +57,16 @@ export default class Location extends Component {
             name="address"
             value={location}
             className="form-control"
-            defaultValue="Oakland, CA"
+            defaultValue=""
           />
+          <br />
+          <br />
+          <div className="medium">
+            See We Vote in action! Copy this test address into "My Ballot Location":
+          </div>
+          <h4>
+            2208 Ebb Tide Rd, Virginia Beach, VA 23451
+          </h4>
 
           <div className="gutter-top--small">
             <ButtonToolbar>
diff --git a/src/sass/components/_candidate.scss b/src/sass/components/_candidate.scss
index 7162cfbe2..a61559f0c 100644
--- a/src/sass/components/_candidate.scss
+++ b/src/sass/components/_candidate.scss
@@ -1,5 +1,5 @@
 // scoped variables
-$smallFont: 1.3em;
+$smallFont: 1.0em;
 $mediumFont: 1.6em;
 $largeFont: 2em;
 .candidate {
@@ -12,15 +12,18 @@ $largeFont: 2em;
       font-size: 1em;
     }
   }
-  .oppose-emphasis-medium, .support-emphasis-large {
+  .support-emphasis-large {
+    color: rgba(63,191,63, 1);
+  }
+  .oppose-emphasis-medium {
     color: rgba(215, 73, 55, 1);
   }
   .oppose-emphasis-medium, .support-emphasis-medium {
-    font-size: $mediumFont;
+    font-size: $smallFont;
     font-weight: 500;
   }
   .oppose-emphasis-large, .support-emphasis-large {
-    font-size: $largeFont;
+    font-size: $smallFont;
     font-weight: 700;
   }
   .support {
@@ -30,4 +33,8 @@ $largeFont: 2em;
     font-size: 1.3em;
     font-weight: 500;
   }
+  .link-text-to-more-info {
+    font-size: 0.8em;
+    font-weight: 100;
+  }
 }
diff --git a/src/sass/components/_itemActionbar.scss b/src/sass/components/_itemActionbar.scss
index 470102e82..d765b5d4d 100644
--- a/src/sass/components/_itemActionbar.scss
+++ b/src/sass/components/_itemActionbar.scss
@@ -8,6 +8,12 @@
   .action {
     width: 25%;
   }
+  .support-emphasis {
+    color: rgba(63,191,63, 1);
+  }
+  .oppose-emphasis {
+    color: rgba(215, 73, 55, 1);
+  }
 
   @media all and (max-width: 480px) {
     .inline-phone {
diff --git a/src/sass/components/_position.scss b/src/sass/components/_position.scss
new file mode 100644
index 000000000..0faddba2a
--- /dev/null
+++ b/src/sass/components/_position.scss
@@ -0,0 +1,7 @@
+.position-item {
+  .position-source {
+    color: rgba(171,171,171, 1);
+    font-size: 0.9em;
+    font-weight: 200;
+  }
+}
diff --git a/src/sass/main.scss b/src/sass/main.scss
index d8bbd231e..4357bdde9 100644
--- a/src/sass/main.scss
+++ b/src/sass/main.scss
@@ -33,6 +33,7 @@
   './components/_itemActionbar',
   './components/_candidate',
   './components/_starAction',
+  './components/_position',
   './components/_navigator',
   './components/_ignore',
   './components/_organization',