ui: fix vote button

packages/ui-default/components/discussion/comments.page.styl

@@ -83,7 +83,7 @@ $downvote-color = red
     transition: border-color .2s linear, opacity .2s linear
     opacity: 0.5
 
-    &>form
+    &>button
       width: rem(40px)
       float: left
       position: relative

packages/ui-default/components/vote/vote.page.js

@@ -1,4 +1,5 @@
 import $ from 'jquery';
+import Notification from 'vj/components/notification';
 import Rotator from 'vj/components/rotator';
 import { AutoloadPage } from 'vj/misc/Page';
 import { request } from 'vj/utils';
@@ -25,12 +26,15 @@ const votePage = new AutoloadPage('votePage', () => {
     const $container = $button.closest('.vote');
     const $form = $button.closest('form');
     request
-      .post($form.attr('action'), $form)
+      .post($form.attr('action'), {
+        operation: $button.attr('value'),
+        psid: $form.find('input[name="psid"]').val(),
+      })
       .then((data) => {
         setVoteState($container, data.vote, data.user_vote);
       })
-      .catch(() => {
-        // TODO(iceboy): notify failure
+      .catch((e) => {
+        Notification.error(`Failed to vote: ${ e.message}`);
       });
     return false;
   });

packages/ui-default/templates/components/comments_solution.html

@@ -86,13 +86,11 @@
       <div class="vote vote--discussion">
       {% if handler.user.hasPerm(perm.PERM_VOTE_PROBLEM_SOLUTION) %}
         <div class="vote-number rotator--enabled">{{ doc.vote }}</div>
-        <div class="vote-op clearfix">
-          <form method="post">
-            <input type="hidden" name="psid" value="{{ doc._id }}">
-            <button type="submit" name="operation" value="upvote" class="vote-button upvote{% if pssdict[doc._id].vote == 1 %} active{% endif %}" data-tooltip="{{ _('Upvote') }}" data-tooltip-pos="bottom center" aria-label="{{ _('Upvote') }}"><span class="icon icon-vote--up"></span></button>
-            <button type="submit" name="operation" value="downvote" class="vote-button downvote{% if pssdict[doc._id].vote == -1 %} active{% endif %}" data-tooltip="{{ _('Downvote') }}" data-tooltip-pos="bottom center" aria-label="{{ _('Downvote') }}"><span class="icon icon-vote--down"></span></button>
-          </form>
-        </div>
+        <form method="post" class="vote-op clearfix">
+          <input type="hidden" name="psid" value="{{ doc._id }}">
+          <button type="submit" name="operation" value="upvote" class="vote-button upvote{% if pssdict[doc._id].vote == 1 %} active{% endif %}" data-tooltip="{{ _('Upvote') }}" data-tooltip-pos="bottom center" aria-label="{{ _('Upvote') }}"><span class="icon icon-vote--up"></span></button>
+          <button type="submit" name="operation" value="downvote" class="vote-button downvote{% if pssdict[doc._id].vote == -1 %} active{% endif %}" data-tooltip="{{ _('Downvote') }}" data-tooltip-pos="bottom center" aria-label="{{ _('Downvote') }}"><span class="icon icon-vote--down"></span></button>
+        </form>
       {% else %}
         <div class="vote-number">{{ doc.vote }}</div>
       {% endif %}