Made the entire CandidateItem div a link (per original designs). Chan…

…ged "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.
wevote · Feb 25, 2016 · 9ff1feb · 9ff1feb
1 parent c9a4d8b
commit 9ff1feb
Show file tree

Hide file tree

Showing 16 changed files with 133 additions and 119 deletions.
diff --git 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
@@ -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
@@ -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
@@ -61,33 +61,33 @@ 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>
           </span>
          :
           <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>
           </span>
         }
         {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>
           </span>
           :
           <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
@@ -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
@@ -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
@@ -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,42 +11,30 @@ 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>
 						<h4 className="text-left"></h4>
 					</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
@@ -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
@@ -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
@@ -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
@@ -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 />