Convert submission buttons to fancy radio buttons

jarickc · Sep 28, 2020 · 00fc8f3 · 00fc8f3
1 parent 9f4454c
commit 00fc8f3
Show file tree

Hide file tree

Showing 7 changed files with 101 additions and 14 deletions.
diff --git a/gavel/controllers/judge.py b/gavel/controllers/judge.py
@@ -106,7 +106,7 @@ def tx():
         annotator = get_current_annotator()
         if annotator.next.id == int(request.form['item_id']):
             annotator.ignore.append(annotator.next)
-            if request.form['action'] == 'Done':
+            if request.form['action'] == 'Continue':
                 annotator.next.viewed.append(annotator)
                 annotator.prev = annotator.next
                 annotator.update_next(choose_next(annotator))
@@ -146,7 +146,7 @@ def welcome():
 def welcome_done():
     def tx():
         annotator = get_current_annotator()
-        if request.form['action'] == 'Done':
+        if request.form['action'] == 'Continue':
             annotator.read_welcome = True
         db.session.commit()
     with_retries(tx)

diff --git a/gavel/static/css/_constants.scss b/gavel/static/css/_constants.scss
@@ -2,16 +2,18 @@ $branding-orange: #ffbc29;
 $branding-turquoise: #4ecdc4;
 $branding-red: #fc5454;
 $branding-yellow: #ffe86b;
+$branding-grey: #cccccc;
 $branding-green: #c9d41b;
+$branding-blue: #57b6ff;
 $branding-dark: #0b3b4b;
 
 $wait-color: $branding-yellow;
 $error-color: $branding-red;
 $previous-color: $branding-orange;
 $current-color: $branding-turquoise;
 $vote-color: $branding-red;
-$vote-skip-color: $branding-yellow;
-$vote-done-color: $branding-green;
+$vote-skip-color: $branding-red;
+$vote-submit-color: $branding-blue;
 $admin-color: $branding-dark;
 $disabled-color: mix($branding-red, white, 25%);
 $prioritized-color: mix($branding-green, white, 25%);

diff --git a/gavel/static/css/style.scss b/gavel/static/css/style.scss
@@ -230,7 +230,7 @@ hr {
 input[type=submit] {
   color: $light;
   background-color: $dark;
-  border: 1px solid $dark;
+  border: 2px solid $dark;
   font-size: 1.2rem;
   text-transform: uppercase;
   text-align: center;
@@ -263,19 +263,57 @@ input[type=submit] {
 
 #vote-previous {
   background-color: $previous-color;
+  border: 3px solid $previous-color;
 }
 
 #vote-current {
   background-color: $current-color;
+  border: 3px solid $current-color;
+}
+
+#vote-continue {
+  background-color: $current-color;
+  border: 3px solid $current-color;
 }
 
 #vote-skip {
   background-color: $vote-skip-color;
-  color: $dark;
+  border: 3px solid $vote-skip-color;
+}
+
+#vote-submit {
+  background-color: $vote-submit-color;
 }
 
-#vote-done {
-  background-color: $vote-done-color;
+#vote-submit:disabled {
+  background-color: $light-grey;
+  border: none;
+}
+
+.radio-button {
+  display: inline-block;
+}
+
+.radio-button > input {
+  opacity: 0;
+  position: fixed;
+  width: 0;
+}
+
+.radio-button > label {
+  display: inline-block;
+  padding: 10px 20px;
+  width: 100%;
+  color: $light;
+  font-size: 1.2rem;
+  font-weight: bold;
+  text-transform: uppercase;
+  text-align: center;
+}
+
+.radio-button > input:not(:checked) + label {
+  background-color: white;
+  color: $dark;
 }
 
 input[type=submit].positive {

diff --git a/gavel/static/js/smart-button-toggle.js b/gavel/static/js/smart-button-toggle.js
@@ -0,0 +1,14 @@
+function buttonSelected() {
+  document.getElementById('vote-submit').disabled = false;
+}
+
+(function() {
+  document.getElementsByName('action').forEach(elem => {
+    if (elem.type === 'radio') {
+      elem.checked = false;
+      elem.onchange = buttonSelected;
+    }
+  });
+
+  document.getElementById('vote-submit').disabled = true;
+})();
diff --git a/gavel/templates/begin.html b/gavel/templates/begin.html
@@ -11,13 +11,30 @@ <h1>Start</h1>
 </div>
 
 <div class="item">
+  <div class="banner" id="vote-header">
+    <h1>Vote</h1>
+  </div>
+
   <div class="info">
     <form action="{{ url_for('begin') }}" method="post">
-      <input type="submit" name="action" value="Skip" id="vote-skip" class="button-full">
-      <input type="submit" name="action" value="Done" id="vote-done" class="button-full button-gap">
+      <p class="center">Comparison voting begins after you see your first project. Please click <b>CONTINUE</b> after seeing this project or <b>SKIP</b> if you cannot find this project.</p>
+      <div id="vote-continue" class="radio-button button-full button-gap">
+        <input type="radio" name="action" id="vote-continue-radio" value="Continue">
+        <label for="vote-continue-radio">Continue</label>
+      </div>
+
+      <div id="vote-skip" class="radio-button button-full button-gap">
+        <input type="radio" name="action" id="vote-skip-radio" value="Skip" checked>
+        <label for="vote-skip-radio">Skip</label>
+      </div>
+
+      <input type="submit" name="action" value="Submit" id="vote-submit" class="button-full button-gap">
+
       <input type="hidden" name="item_id" value="{{ item.id }}">
       <input type="hidden" name="_csrf_token" value="{{ csrf_token() }}">
     </form>
+
+    <script src="{{ url_for('static', filename='js/smart-button-toggle.js') }}"></script>
   </div>
 </div>
 {% endblock %}
diff --git a/gavel/templates/vote.html b/gavel/templates/vote.html
@@ -27,16 +27,32 @@ <h1>Current</h1>
   <div class="banner" id="vote-header">
     <h1>Vote</h1>
   </div>
+
   <div class="info">
     <form action="{{ url_for('vote') }}" method="post">
       <p class="center">Which one is better?</p>
-      <input type="submit" name="action" value="Previous" id="vote-previous" class="button-left">
-      <input type="submit" name="action" value="Current" id="vote-current" class="button-right">
-      <input type="submit" name="action" value="Skip" id="vote-skip" class="button-full button-gap">
+      <div id="vote-previous" class="radio-button button-left">
+        <input type="radio" name="action" id="vote-previous-radio" value="Previous">
+        <label for="vote-previous-radio">Previous</label>
+      </div>
+
+      <div id="vote-current" class="radio-button button-right">
+        <input type="radio" name="action" id="vote-current-radio" value="Current">
+        <label for="vote-current-radio">Current</label>
+      </div>
+
+      <div id="vote-skip" class="radio-button button-full button-gap">
+        <input type="radio" name="action" id="vote-skip-radio" value="Skip" checked>
+        <label for="vote-skip-radio">Skip</label>
+      </div>
+
+      <input type="submit" name="action" value="Submit" id="vote-submit" class="button-full button-gap">
       <input type="hidden" name="prev_id" value="{{ prev.id }}">
       <input type="hidden" name="next_id" value="{{ next.id }}">
       <input type="hidden" name="_csrf_token" value="{{ csrf_token() }}">
     </form>
+
+    <script src="{{ url_for('static', filename='js/smart-button-toggle.js') }}"></script>
   </div>
 </div>
 {% endblock %}
diff --git a/gavel/templates/welcome.html b/gavel/templates/welcome.html
@@ -13,7 +13,7 @@ <h1>Welcome</h1>
 <div class="item">
   <div class="info">
     <form action="{{ url_for('welcome_done') }}" method="post">
-      <input type="submit" name="action" value="Done" class="button-full button-gap positive">
+      <input type="submit" name="action" value="Continue" class="button-full button-gap positive">
       <input type="hidden" name="_csrf_token" value="{{ csrf_token() }}">
     </form>
   </div>