NDOJ/templates/problem/voting-controls.html

<style>
    .featherlight .featherlight-inner{
      display: block !important;
    }
    .featherlight-content {
      overflow: inherit !important;  
    }

    .stars-container {
        display: inline-block;
        vertical-align: top;
    }
    .stars-container .star {
        display: inline-block;
        padding: 2px;
        color: orange;
        cursor: pointer;
        font-size: 30px;
    }
    .stars-container .star:before {
        content:"\f006";
    }
    .filled-star:before, .star:hover:before {
        content:"\f005" !important;
    }
</style>

{% if can_vote or request.user.is_superuser %}
    <div class="vote-form" id="id_vote_form_box" style="display: none">
        {% include 'problem/voting-form.html' %}        
    </div>
    <span>
        {% if can_vote %}
            <a href="#" class="form-button" id="id_vote_button" data-featherlight="#id_vote_form_box"></a>
        {% endif %}
        {% if request.user.is_superuser %}
            - {% include 'problem/voting-stats.html' %}
        {% endif %}
    </span>

    <script src="{{ static('libs/featherlight/featherlight.min.js') }}" type="text/javascript"></script>
    <script>
        let voted_points = null;
        {% if vote is not none %}
            let has_voted = true;
            voted_points = {{ vote.points }};
        {% else %}
            let has_voted = false;
        {% endif %}

        function voteUpdate(){
            $('#id_has_voted_prompt').show();
            $('#id_current_vote_value').prop('innerText', voted_points);
            $('#id_has_not_voted_prompt').hide();
            $('#id_vote_button').prop('innerText', `{{ _('Edit difficulty') }} (` + voted_points + ')');
            $('#id_points_error_box').hide();
            has_voted = true;
        }

        function deleteVoteUpdate(){
            $('#id_has_voted_prompt').hide();
            $('#id_has_not_voted_prompt').show();
            $('#id_vote_button').prop('innerText', `{{ _('Vote difficulty') }}`);
            $('#id_points_error_box').hide();
            has_voted = false;
        }

        if (has_voted) voteUpdate();
        else deleteVoteUpdate();

        $('#id_vote_form').on('submit', function (e) {
            e.preventDefault();
        });
    </script>
{% endif %}