Merge pull request #25 from pertrai1/mobile-candidate-fixes

support for size changes on phone
wevote · Feb 13, 2016 · 60d69f6 · 60d69f6
2 parents 5372a21 + c0fca14
commit 60d69f6
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 25 deletions.
diff --git 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
@@ -54,15 +54,15 @@ 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>
             </span>
           </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,25 +71,27 @@ 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>
             </span>
           </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
             </span>
           </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
@@ -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
@@ -6,4 +6,10 @@
     width: 25%;
   }
 
+  @media all and (max-width: 480px) {
+    .inline-phone {
+      font-size: .9em;
+    }
+  }
+
 }