feat: add the merit profile behind the median grade

Usual CSS woes
- Really not confident about positioning top and left with `em`.
- Z-index shenanigans to skip unexpected offset in positioning,
  where the absolute of a child in a relative container
  won't point to top left but to bottom of other child in static
  (try moving the merit profile below the input.emote, and remove z-indices)

Right now the merit profile is shown to all logged in, whether they judged or not.  This is not the intended final behavior.  Ideally we'd have settings fdr this.

templates/repo/polls/merit_radial.tmpl

@@ -8,7 +8,7 @@ In this SVG, the ViewBox centers the (0.0), and both axes go from -1 to 1
 
 */}}
 
-{{ $size := 32 }}{{/* size of the SVG (pixels) */}}
+{{ $size := 34 }}{{/* size of the SVG (pixels) */}}
 {{ $delimiter := 0.04 }}{{/* breadth of the white line between grades (viewbox referential) */}}
 {{ $half_gap := 0.38 }}{{/* ~asin(GOLDEN_RATIO-1) adjusted for the delimiter - (radians) */}}
 {{ $half_rest := 2.7616 }}{{/* MUST BE (PI - $half_gap) ARITHMETIC IS 404 - (radians) */}}

templates/repo/polls/poll_badge.tmpl

@@ -1,8 +1,12 @@
-{{/* A large label for polls' candidates. */}}
-{{/* No javascript for now.  There may be _some_. */}}
-{{/* .Poll : the Poll in question */}}
-{{/* .CandidateID : the Candidate */}}
-{{/* .Super : $ of parent template */}}
+{{/*
+
+A large label for polls' candidates.
+No javascript for now.  There may be _some_.
+.Poll : the Poll in question
+.CandidateID : the Candidate
+.Super : $ of parent template
+
+*/}}
 {{ $pollResult := .Poll.GetResult }}
 {{/*{{ $candidateID := .Issue.Index }}*/}}
 {{ $candidateID := .CandidateID }}
@@ -38,11 +42,20 @@
 	{{ if $.Super.IsSigned }}
 	<div class="judgment-forms">
 		{{ range $grade, $icon := .Poll.GetGradationList }}
-			<form class="judgment-form{{ if (eq $grade $userGrade) }} selected{{ end }}" action="{{ $.Super.AppSubUrl }}/{{ $.Super.RepoRelPath }}/polls/{{ $pollID }}/judgments" method="post">
+			<form class="judgment-form {{ if (eq $grade $userGrade) }}selected{{ end }}" action="{{ $.Super.AppSubUrl }}/{{ $.Super.RepoRelPath }}/polls/{{ $pollID }}/judgments" method="post">
 				{{ $.Super.CsrfTokenHtml }}
 				<input type="hidden" name="redirect" value="{{ $.Super.AppSubUrl }}/{{ $.Super.RepoRelPath }}/issues/{{ $candidateID }}">
 				<input type="hidden" name="grade" value="{{ $grade }}">
 				<input type="hidden" name="candidate" value="{{ $candidateID }}">
+
+				{{ if $pollCandidateResult }}
+				{{ if eq $pollCandidateResult.MedianGrade $grade }}
+				<div class="background-merit-profile">
+				{{ template "repo/polls/merit_radial" $pollCandidateResult.MeritProfile }}
+				</div>
+				{{ end }}
+				{{ end }}
+				{{/* Add the emote AFTER the profile or the absolute of the profile is offset (somehow) */}}
 				<input class="emote" type="submit" value="{{ $icon }}">
 			</form>
 		{{ end }}

web_src/less/_poll.less

@@ -10,7 +10,13 @@
 @mobile: ~"only screen and (max-width: 600px)";
 
 
-/* Emote Support */
+/*
+Emote Support
+
+What would be a good approach here?
+Perhaps we should provide a font as well, for emotes.
+Privilege ubiquitous emotes nonetheless, for accessibility.
+*/
 .emote {
     font-family: "Source Code Pro", Consolas, monaco, monospace !important;
 }
@@ -77,6 +83,7 @@
     /*transition: left 0.4s ease-out 0s, opacity 0.3s ease-out 0s;*/
 }
 
+
 /* Since transitions won't play with a change of display, we use animation */
 @keyframes fade_in_judgment_forms {
     0% {
@@ -106,6 +113,7 @@
 }
 
 .judgment-form input.emote {
+    position: relative;
     font-size: 1.618em;
     width: 1.818rem;
     height: 1.918rem;
@@ -115,6 +123,7 @@
     background: none;
     transition: 0.3s filter, 0.2s transform;
     cursor: pointer;
+    z-index: 2;
 
 }
 
@@ -132,6 +141,7 @@
     font-size: 3em;
     opacity: 0.8;
     pointer-events: none;
+    z-index: 3;
 }
 
 .judgment-form input.emote:hover,
@@ -140,3 +150,10 @@
     filter: grayscale(0.0);
     transform: scale(1.1);
 }
+
+.background-merit-profile {
+    position: absolute;
+    top: -0.29em;
+    left: -0.3em;
+    z-index: 1;
+}