From 363a46af7a0cbe570d6f8ffcd1d450e715ede371 Mon Sep 17 00:00:00 2001
From: Michael Schuller <msc@artbutler.com>
Date: Tue, 18 Jul 2017 15:52:10 +0200
Subject: [PATCH] Layout and style fixes

- Added some poor man's responsiveness
- Better display of vote choices
---
 src/QuestionDetail.js   |  2 +-
 src/QuestionDetail.scss |  6 ++++++
 src/QuestionsList.scss  | 14 ++++++++++++--
 3 files changed, 19 insertions(+), 3 deletions(-)

diff --git a/src/QuestionDetail.js b/src/QuestionDetail.js
index 134a27f..5fe5e97 100644
--- a/src/QuestionDetail.js
+++ b/src/QuestionDetail.js
@@ -126,7 +126,7 @@ class ChoiceInfo extends Component {
           {this.state.text}
         </span>
         <span className="choice-votes">
-          {this.state.currentVotes}
+          {this.state.currentVotes} vote{this.state.currentVotes == 1 ? "" : "s"}
         </span>
         <span className="choice-percent">
           {Math.round(this.state.currentVotes / this.state.totalVotes * 100)}%
diff --git a/src/QuestionDetail.scss b/src/QuestionDetail.scss
index 6cc88b0..8f5d3cf 100644
--- a/src/QuestionDetail.scss
+++ b/src/QuestionDetail.scss
@@ -31,16 +31,22 @@
                 display: inline-block;
                 width: 30%;
                 min-width: 200px;
+                font-weight: bold;
             }
             .choice-votes,
             .choice-percent {
                 display: inline-block;
                 width: 10%;
                 min-width: 100px;
+                color: #AAA;
             }
 
             &.selected {
                 background-color: #AAF;
+                .choice-votes,
+                .choice-percent {
+                    color: white;
+                }
             }
 
         }
diff --git a/src/QuestionsList.scss b/src/QuestionsList.scss
index b9647f3..8188546 100644
--- a/src/QuestionsList.scss
+++ b/src/QuestionsList.scss
@@ -8,10 +8,13 @@
 
     .QuestionInfo {
 
-        width: 350px;
+        min-width: 250px;
+        max-width: 40%;
+        width: 100%;
+        float: left;
+        
         padding: 15px;
         margin: 0 15px 15px 0;
-        float: left;
         border: 1px solid #AAA;
         border-radius: 5px;
 
@@ -30,4 +33,11 @@
         }
     }
 
+    // clearfix
+    &:after {
+        content: "";
+        display: block;
+        clear: both,
+    }
+
 }
\ No newline at end of file