From c0fca14f922838265ea3fdc03e6a7c8aebf9d463 Mon Sep 17 00:00:00 2001
From: Rob Simpson <rsimpson2@me.com>
Date: Sat, 13 Feb 2016 09:58:05 -0500
Subject: [PATCH] support for size changes on phone

---
 src/js/components/Ballot/CandidateItem.jsx |  4 ++--
 src/js/components/ItemActionbar.jsx        | 14 +++++++-----
 src/sass/components/_candidate.scss        | 26 ++++++++--------------
 src/sass/components/_itemActionbar.scss    |  6 +++++
 4 files changed, 25 insertions(+), 25 deletions(-)

diff --git a/src/js/components/Ballot/CandidateItem.jsx b/src/js/components/Ballot/CandidateItem.jsx
index 3750e0d20..1bedb269e 100644
--- a/src/js/components/Ballot/CandidateItem.jsx
+++ b/src/js/components/Ballot/CandidateItem.jsx
@@ -78,7 +78,7 @@ export default class Candidate extends Component {
 
         <div className="row" style={{ paddingBottom: '10px' }}>
           <div
-            className="col-xs-4"
+            className="col-xs-6"
             style={candidate_photo_url ? {} : {height:'95px'}}>
 
             {/* adding inline style to img until Rob can style... */}
@@ -95,7 +95,7 @@ export default class Candidate extends Component {
 
             }
           </div>
-          <div className="col-xs-8">
+          <div className="col-xs-6">
             <h4 className="bufferNone">
               <Link className="linkLight"
                     to={"/candidate/" + we_vote_id }
diff --git a/src/js/components/ItemActionbar.jsx b/src/js/components/ItemActionbar.jsx
index 03c2569c1..7f47496cf 100644
--- a/src/js/components/ItemActionbar.jsx
+++ b/src/js/components/ItemActionbar.jsx
@@ -54,7 +54,7 @@ export default class ItemActionbar extends Component {
       <div className="item-actionbar row">
         {this.state.is_support ?
           <span className="col-xs-4" onClick={ this.stopSupportingItem.bind(this) }>
-            <span>
+            <span className="inline-phone">
               <span className="glyphicon glyphicon-small glyphicon-arrow-up">
               </span>
               <strong> Support</strong>
@@ -62,7 +62,7 @@ export default class ItemActionbar extends Component {
           </span>
          :
           <span className="col-xs-4" onClick={ this.supportItem.bind(this) }>
-            <span>
+            <span className="inline-phone">
               <span className="glyphicon glyphicon-small glyphicon-arrow-up">
               </span>
               Support
@@ -71,7 +71,7 @@ export default class ItemActionbar extends Component {
         }
         {this.state.is_oppose ?
           <span className="col-xs-4" onClick={ this.stopOpposingItem.bind(this) }>
-            <span>
+            <span className="inline-phone">
               <span className="glyphicon glyphicon-small glyphicon-arrow-down">
               </span>
               <strong> Oppose</strong>
@@ -79,7 +79,7 @@ export default class ItemActionbar extends Component {
           </span>
           :
           <span className="col-xs-4" onClick={ this.opposeItem.bind(this) }>
-            <span>
+            <span className="inline-phone">
               <span className="glyphicon glyphicon-small glyphicon-arrow-down">
               </span>
               Oppose
@@ -87,9 +87,11 @@ export default class ItemActionbar extends Component {
           </span>
         }
         <span className="col-xs-4" >
-          <span className="glyphicon glyphicon-small glyphicon-share-alt">
+          <span className="inline-phone">
+            <span className="glyphicon glyphicon-small glyphicon-share-alt">
+            </span>
+            &nbsp;Share
           </span>
-          &nbsp;Share
         </span>
       </div>
     );
diff --git a/src/sass/components/_candidate.scss b/src/sass/components/_candidate.scss
index 46f0a2b66..b0f3686bc 100644
--- a/src/sass/components/_candidate.scss
+++ b/src/sass/components/_candidate.scss
@@ -5,33 +5,25 @@ $largeFont: 2em;
 .candidate {
   .oppose {
   }
-  .oppose-emphasis-small {
+  .oppose-emphasis-small, .support-emphasis-small {
     font-size: $smallFont;
     font-weight: 300;
+    @media all and (max-width: 480px) {
+      font-size: 1em;
+    }
   }
-  .oppose-emphasis-medium {
-    color: red;
+  .oppose-emphasis-medium, .support-emphasis-large {
+    color: rgba(215, 73, 55, 1);
+  }
+  .oppose-emphasis-medium, .support-emphasis-medium {
     font-size: $mediumFont;
     font-weight: 500;
   }
-  .oppose-emphasis-large {
-    color: red;
+  .oppose-emphasis-large, .support-emphasis-large {
     font-size: $largeFont;
     font-weight: 700;
   }
   .support {
     padding-right: 1em;
   }
-  .support-emphasis-small {
-    font-size: $smallFont;
-    font-weight: 300;
-  }
-  .support-emphasis-medium {
-    font-size: $mediumFont;
-    font-weight: 500;
-  }
-  .support-emphasis-large {
-    font-size: $largeFont;
-    font-weight: 700;
-  }
 }
diff --git a/src/sass/components/_itemActionbar.scss b/src/sass/components/_itemActionbar.scss
index a9c4a939e..7a0c2a22a 100644
--- a/src/sass/components/_itemActionbar.scss
+++ b/src/sass/components/_itemActionbar.scss
@@ -6,4 +6,10 @@
     width: 25%;
   }
 
+  @media all and (max-width: 480px) {
+    .inline-phone {
+      font-size: .9em;
+    }
+  }
+
 }