Tweak the poll's labels for mobile with a CSS media query.

Thanks @pierre-louis for the bug report !
mj
domi41 4 years ago
parent 2b107ec543
commit 53643f0ebc

@ -38,7 +38,7 @@
{{ if $.Super.IsSigned }} {{ if $.Super.IsSigned }}
<div class="judgment-forms"> <div class="judgment-forms">
{{ range $grade, $icon := .Poll.GetGradationList }} {{ 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 }} {{ $.Super.CsrfTokenHtml }}
<input type="hidden" name="redirect" value="{{ $.Super.AppSubUrl }}/{{ $.Super.RepoRelPath }}/issues/{{ $candidateID }}"> <input type="hidden" name="redirect" value="{{ $.Super.AppSubUrl }}/{{ $.Super.RepoRelPath }}/issues/{{ $candidateID }}">
<input type="hidden" name="grade" value="{{ $grade }}"> <input type="hidden" name="grade" value="{{ $grade }}">

@ -7,6 +7,9 @@
// //
@mobile: ~"only screen and (max-width: 600px)";
/* Emote Support */ /* Emote Support */
.emote { .emote {
font-family: "Source Code Pro", Consolas, monaco, monospace !important; font-family: "Source Code Pro", Consolas, monaco, monospace !important;
@ -44,10 +47,15 @@
.poll-badge { .poll-badge {
display: inline-block; display: inline-block;
margin-top: 0.3em;
margin-bottom: 0.3em;
/* Otherwise the h1 blocks a portion of the label's hover area */ /* Otherwise the h1 blocks a portion of the label's hover area */
position: relative; position: relative;
z-index: 1; z-index: 1;
/***************************************************************/ /***************************************************************/
@media @mobile {
display: block;
}
} }
.poll-badge:focus-within .judgment-forms, .poll-badge:focus-within .judgment-forms,
@ -119,9 +127,9 @@
color: darkred; color: darkred;
position: absolute; position: absolute;
content: "×"; content: "×";
top: 0.11em; top: 0.05em;
left: 0.19em; left: 0.05em;
font-size: 2em; font-size: 3em;
opacity: 0.8; opacity: 0.8;
pointer-events: none; pointer-events: none;
} }

Loading…
Cancel
Save