shifts to templates, incomplete

crowdsourcehinter/static/css/crowdsourcehinter.css

@@ -36,7 +36,7 @@
 }
 
 div[data-rate="flag"] {
-     align-self: flex-end;
+     float: right;
 }
 
 div[data-rate="upvote"] {

crowdsourcehinter/static/html/crowdsourcehinter.html

@@ -3,14 +3,14 @@
         <div role="button" class="csh_rate_hint" data-rate="upvote" data-icon="arrow-u" aria-label="upvote">
             <b>↑</b>
         </div>
-        <div role="button" class="csh_rate_hint" data-rate="flag" data-icon="flag" aria-label="flag">
-            <b>!</b>
-        </div>
         <div class ="csh_rating"> {{rating}} </div>
         <div class="csh_hint"> {{hint}} </div>
         <div role="button" class="csh_rate_hint" data-rate="downvote" aria-label="downvote">
             <b>↓</b>
         </div>
+        <div role="button" class="csh_rate_hint" data-rate="flag" data-icon="flag" aria-label="flag">
+            <b>"Report this hint"</b>
+        </div>
     </div>
 </script>
 

crowdsourcehinter/static/js/src/crowdsourcehinter.js

@@ -82,10 +82,11 @@ function CrowdsourceHinter(runtime, element){
                 $(this).append(Mustache.render(template, data));*/
                 $(this).append(unescape("<div class=\"csh_hint_value\" value = \"" + result.hint + "\">" +
                 "<div role=\"button\"class=\"csh_rate_hint\"data-rate=\"upvote\" data-icon=\"arrow-u\" aria-label=\"upvote\"><b>↑</b></div>" +
-                "<div role=\"button\" class=\"csh_rate_hint\" data-rate=\"flag\" data-icon=\"flag\" aria-label=\"flag\"><b>!</b></div>"+
                 "<div class = \"csh_rating\">" + result.rating + "</div>"+
                 "<div class=\"csh_hint\">" + ""+result.hint+"</div>" +
-                "<div role=\"button\" class=\"csh_rate_hint\" data-rate=\"downvote\" aria-label=\"downvote\"><b>↓</b></div> </div>"));
+                "<div role=\"button\" class=\"csh_rate_hint\" data-rate=\"downvote\" aria-label=\"downvote\"><b>↓</b></div>"+
+                "<div role=\"button\" class=\"csh_rate_hint\" data-rate=\"flag\" data-icon=\"flag\" aria-label=\"flag\">" +
+                "<b>Report this hint</b></div> </div>"));
             }
         });
     }