Merge pull request #69 from pertrai1/ui-changes

Update UI margins, paddings, and headings
wevote · Feb 20, 2016 · 449fb0c · 449fb0c
2 parents 5a0c3af + f14cd7c
commit 449fb0c
Show file tree

Hide file tree

Showing 13 changed files with 78 additions and 59 deletions.
diff --git a/src/js/components/VoterGuide/VoterGuideItem.jsx b/src/js/components/VoterGuide/VoterGuideItem.jsx
@@ -47,10 +47,14 @@ export default class VoterGuideItem extends Component {
   render() {
 
     return (
-      <div className="ballot-item well well-skinny split-top-skinny clearfix">
+      <div className="ballot-item well well-skinny well-bg--light split-top-skinny clearfix">
 
-        <div className="display-name">
-          <img src={this.props.voter_guide_image_url} width="75px" />&nbsp;
+        <div className="display-name pull-left">
+          <img className="img-circle"
+                src={this.props.voter_guide_image_url} 
+                width="75px" 
+          />
+          &nbsp;
           { this.props.voter_guide_display_name }
         </div>
         <FollowOrIgnore action={VoterGuideActions} organization_we_vote_id={this.props.organization_we_vote_id}

diff --git a/src/js/routes/Activity.jsx b/src/js/routes/Activity.jsx
@@ -18,9 +18,9 @@ export default class Activity extends Component {
 	render() {
 	    return (
 			<div>
-	        	<div className="container-fluid well well-90">
-					<h2 className="text-center">Activity Feed<br />
-						Coming Soon</h2>
+	        	<div className="container-fluid well gutter-top--small fluff-full1">
+					<h3 className="text-center">Activity Feed</h3>
+					<h4 className="text-center">Coming Soon</h4>
 					<p>See the latest endorsements and news.</p>
 				</div>
 			</div>

diff --git a/src/js/routes/AddFriends.jsx b/src/js/routes/AddFriends.jsx
@@ -17,9 +17,9 @@ export default class AddFriends extends Component {
 	render() {
 	    return (
             <div>
-            	<div className="container-fluid well well-90">
-					<h2 className="text-center">Add Friends<br />
-						Coming Soon</h2>
+            	<div className="container-fluid well gutter-top--small fluff-full1">
+					<h3 className="text-center">Add Friends</h3>
+					<h4 className="text-center">Coming Soon</h4>
 					<p>You will be able to ask your friends for their opinions on how to vote.</p>
 					{/* Still to be implemented
             		<h2 className="text-center">Add Friends</h2>

diff --git a/src/js/routes/Connect.jsx b/src/js/routes/Connect.jsx
@@ -26,25 +26,25 @@ export default class Connect extends Component {
         };
 	    return (
 			<div>
-				<div className="container-fluid well well-90">
+				<div className="container-fluid well gutter-top--small fluff-full1">
 					<h4 className="text-left">Add Friends</h4>
 			        <span style={floatRight}>
-			            <Link to="/friends/add"><Button bsStyle="primary">Next &gt;</Button></Link>
+			            <Link to="/friends/add"><Button bsStyle="primary">Next &#x21AC;</Button></Link>
 			        </span>
 			        <p>Friends can see what you support and oppose. We never sell emails.<br />
 			        <br /></p>
 
 					<h4 className="text-left">Follow More Opinions</h4>
 			        <span style={floatRight}>
-			            <Link to="/opinions"><Button bsStyle="primary">Next &gt;</Button></Link>
+			            <Link to="/opinions"><Button bsStyle="primary">Next &#x21AC;</Button></Link>
 			        </span>
 			        <p>Find voter guides you can follow. These voter guides have been created by nonprofits, public figures, your friends, and more.<br />
 			        <br /></p>
 
 					{/*
 					<input type="text" name="search_opinions" className="form-control"
 						   placeholder="Search by name or twitter handle." />
-			        <Link to="add_friends_message"><Button bsStyle="primary">Select from those I Follow on Twitter &gt;</Button></Link>
+			        <Link to="add_friends_message"><Button bsStyle="primary">Select from those I Follow on Twitter &#x21AC;</Button></Link>
 					<OrganizationsToFollowList />
 			        <br />
 			        */}

diff --git a/src/js/routes/More/About.jsx b/src/js/routes/More/About.jsx
@@ -15,13 +15,13 @@ export default class About extends Component {
   render() {
     return (
       <div>
-        <div className="container-fluid well well-90">
-          <h4>About We Vote</h4>
+        <div className="container-fluid well gutter-top--small fluff-full1">
+          <h3 className="text-center">About We Vote</h3>
           <p>
               We Vote USA is nonprofit and nonpartisan. For more information, please visit www.WeVoteUSA.org.
           </p>
 
-          <h4>Acknowledgements</h4>
+          <h3 className="text-center">Acknowledgements</h3>
 
           <p>We are grateful for these organizations that are critical to our work.<br />
               <br />
@@ -39,7 +39,8 @@ 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.)<br />
+              Thank you everyone! (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 />
               Rob Simpson - Vienna, VA<br />

diff --git a/src/js/routes/More/OpinionsFollowed.jsx b/src/js/routes/More/OpinionsFollowed.jsx
@@ -23,8 +23,8 @@ export default class OpinionsFollowed extends Component {
   render() {
     return (
 <div>
-  <div className="container-fluid well well-90">
-    <h2 className="text-center">Opinions I'm Following</h2>
+  <div className="container-fluid well gutter-top--small fluff-full1">
+    <h3 className="text-center">Opinions I'm Following</h3>
     {/*
       <input type="text" name="search_opinions" className="form-control"
            placeholder="Search by name or twitter handle." /><br />

diff --git a/src/js/routes/More/SignIn.jsx b/src/js/routes/More/SignIn.jsx
@@ -85,8 +85,8 @@ export default class SignIn extends Component {
 
     return (
     <div className="">
-      <div className="container-fluid well well-90">
-        <h2 className="text-center">{voter.signed_in_personal ? <span>My Account</span> : <span>Sign In</span>}</h2>
+      <div className="container-fluid well gutter-top--small fluff-full1">
+        <h3 className="text-center">{voter.signed_in_personal ? <span>My Account</span> : <span>Sign In</span>}</h3>
         <div className="text-center">
           {voter.signed_in_facebook ? <span></span> : <FacebookSignIn />}
           {/*

diff --git a/src/js/routes/Opinions.jsx b/src/js/routes/Opinions.jsx
@@ -22,33 +22,29 @@ export default class Opinions extends Component {
 
   render() {
     return (
-<div>
-  <div className="container-fluid">
-    <h4 className="pull-left">More Opinions I Can Follow</h4>
-    {/*
-      <input type="text" name="search_opinions" className="form-control"
-           placeholder="Search by name or twitter handle." />
-    */}
-    <br />
-    <br />
-    <div>
-      These organizations and public figures have opinions about items on your
-                ballot. Click the 'Follow' button to pay attention to them.
+      <div>
+        <div className="container-fluid well gutter-top--small fluff-full1">
+          <h3 className="text-center">More Opinions I Can Follow</h3>
+          {/*
+            <input type="text" name="search_opinions" className="form-control"
+                 placeholder="Search by name or twitter handle." />
+          */}
+          <p>These organizations and public figures have opinions about items on your
+                      ballot. Click the 'Follow' button to pay attention to them.</p>
 
-      <div className="voter-guide-list">
-        {
-          this.state.voter_guide_list ?
-          this.state.voter_guide_list.map( item =>
-            <VoterGuideItem key={item.we_vote_id} {...item} />
-          ) : (<div className="box-loader">
-                <i className="fa fa-spinner fa-pulse"></i>
-                <p>Loading ... One Moment</p>
-                </div>)
-        }
+            <div className="voter-guide-list">
+              {
+                this.state.voter_guide_list ?
+                this.state.voter_guide_list.map( item =>
+                  <VoterGuideItem key={item.we_vote_id} {...item} />
+                ) : (<div className="box-loader">
+                      <i className="fa fa-spinner fa-pulse"></i>
+                      <p>Loading ... One Moment</p>
+                      </div>)
+              }
+            </div>
+        </div>
       </div>
-    </div>
-  </div>
-</div>
     );
   }
 }
diff --git a/src/js/routes/Requests.jsx b/src/js/routes/Requests.jsx
@@ -15,9 +15,9 @@ export default class RequestsPage extends Component {
 	render() {
 	    return (
 			<section>
-	        	<div className="container-fluid well well-90">
-					<h2 className="text-center">Friend Requests<br />
-						Coming Soon</h2>
+	        	<div className="container-fluid well gutter-top--small fluff-full1">
+					<h3 className="text-center">Friend Requests</h3>
+					<h4 className="text-center">Coming Soon</h4>
 					<p>Friends will be able to reach out to you so you can collaborate on how to vote.</p>
 					{/*
 					<h4 className="text-left">Friend Requests</h4>

diff --git a/src/js/routes/Settings/Location.jsx b/src/js/routes/Settings/Location.jsx
@@ -35,10 +35,10 @@ export default class Location extends Component {
     var { location } = this.state;
 
     return <div>
-      <div className="container-fluid well well-90">
-        <h2 className="text-center">
+      <div className="container-fluid well gutter-top--small fluff-full1">
+        <h3 className="text-center">
           Change Location
-        </h2>
+        </h3>
         <div>
           <span className="small">
             Please enter the address (or just the city) where you registered to
@@ -52,14 +52,17 @@ export default class Location extends Component {
             name="address"
             value={location}
             className="form-control"
-            defaultValue="Oakland, CA" />
+            defaultValue="Oakland, CA" 
+          />
 
-          <ButtonToolbar>
-              <Button
-                onClick={this.saveLocation.bind(this)}
-                bsStyle="primary">Save Location</Button>
+          <div className="gutter-top--small">
+            <ButtonToolbar>
+                <Button
+                  onClick={this.saveLocation.bind(this)}
+                  bsStyle="primary">Save Location</Button>
 
-          </ButtonToolbar>
+            </ButtonToolbar>
+          </div>
         </div>
       </div>
     </div>;

diff --git a/src/sass/layout/_boxmodel.scss b/src/sass/layout/_boxmodel.scss
@@ -28,6 +28,11 @@
 .fluff-loose--top {
     padding-top: 1.5em;
 }
+
+.fluff-full1 {
+    padding: 1em;
+}
+
 @media all and (min-width: 480px) {
     .fluff-loose--top {
         padding-top: .8em;

diff --git a/src/sass/layout/_mediaquery.scss b/src/sass/layout/_mediaquery.scss
@@ -29,7 +29,7 @@
                 display: inline-block;
                 height: 45px;
                 left: auto;
-                right: 100px;
+                right: 175px;
                 top: 0;
 
                 .separate-top {
@@ -78,4 +78,10 @@
     margin: 0 auto;
     width: 960px;
   }
+
+  .headroom--pinned {
+    margin: 0 auto;
+    max-width: 958px;
+    width: 958px;
+  }
 }
diff --git a/src/sass/vendor/_vendors.scss b/src/sass/vendor/_vendors.scss
@@ -21,6 +21,10 @@
   border-radius: 0;
 }
 
+.well-bg--light {
+  background-color: #fff;
+}
+
 .row {
   margin-left: 0;
   margin-right: 0;