Layout and style fixes

- Added some poor man's responsiveness - Better display of vote choices
petronius · Jul 18, 2017 · 363a46a · 363a46a
1 parent 53b874c
commit 363a46a
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 3 deletions.
diff --git 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
@@ -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
@@ -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,
+    }
+
 }