integreat_cms/cms/templates/hix_widget.html
{% extends "_collapsible_box.html" %}
{% load i18n %}
{% load l10n %}
{% load widget_tweaks %}
{% block collapsible_box_icon %}
gauge
{% endblock collapsible_box_icon %}
{% block collapsible_box_title %}
{% translate "Text understandability" %}
{% endblock collapsible_box_title %}
{% block collapsible_box_content %}
<div class="relative">
<div id="hix-loading"
class="{% if page_form.instance.hix_ignore %} hidden{% endif %} absolute w-full h-full bg-white bg-opacity-75">
<div class="relative top-1/3 text-center">
<i icon-name="loader" class="animate-spin"></i> {% translate "Loading..." %}
</div>
</div>
{% if not request.user.expert_mode and page_form.instance.hix_ignore %}
<div class="help-text">
{% translate "HIX value calculation is disabled for this page." %}
</div>
{% endif %}
<div id="hix-block"
class="{% if page_form.instance.hix_ignore %}hidden{% endif %}">
<div class="help-text mt-2">
{% translate "Improve the understandability of the page here:" %}
</div>
<div id="hix-container"
data-content-changed
data-initial-hix-score="{{ page_translation_form.instance.rounded_hix_score|safe }}"
data-initial-hix-feedback="{{ page_translation_form.instance.hix_feedback }}">
<div id="hix-bar">
<span id="hix-bar-fill">
<div id="hix-value">
HIX
</div>
</span>
</div>
</div>
<div class="mt-2 mb-2 pb-2 pt-2">
<div data-hix-state="updated" class="text-gray-800 hidden">
<i icon-name="check-circle" class="text-green-400 size-6 pr-1"></i>
{% translate "HIX value is up to date" %}
</div>
<div data-hix-state="outdated"
class="text-gray-800 bg-yellow-300 rounded p-3 hidden">
<i icon-name="alert-circle" class="size-6 pr-1"></i>
{% translate "HIX value is outdated" %}
</div>
<div data-hix-state="error"
class="text-gray-800 bg-red-300 rounded p-3 hidden">
<i icon-name="alert-triangle" class="size-6 pr-1"></i>
{% translate "HIX value could not be calculated." %} {% translate "Please try again later." %}
</div>
<div data-hix-state="no-content"
class="text-gray-800 bg-blue-300 rounded p-3 hidden">
<i icon-name="info" class="size-6 pr-1"></i>
{% translate "There is no page content" %}
</div>
</div>
<button id="btn-update-hix-value"
class="btn w-full"
data-url="{% url "get_hix_score" region_slug=request.region.slug %}">
<i icon-name="refresh-ccw"></i>
{% translate "Update" %}
</button>
<div id="hix-feedback" class="hidden">
<label class="secondary">
{% translate "For review:" %}
</label>
<div hix-feedback-category="nested-sentences"
class="help-text mt-2 hidden">
<i icon-name="bar-chart-big" class="size-6 pr-1"></i>
{% translate "The text contains" %}
<span class="font-bold"></span>
<span class="font-bold">{% translate "nested sentences" %}</span>
</div>
<div hix-feedback-category="long-sentences" class="help-text mt-2 hidden">
<i icon-name="bar-chart-big" class="size-6 pr-1"></i>
{% translate "The text contains" %}
<span class="font-bold"></span>
<span class="font-bold">{% translate "sentences that are too long" %}</span>
</div>
<div hix-feedback-category="long-words" class="help-text mt-2 hidden">
<i icon-name="bar-chart-big" class="size-6 pr-1"></i>
{% translate "The text contains" %}
<span class="font-bold"></span>
<span class="font-bold">{% translate "words that are too long" %}</span>
</div>
<div hix-feedback-category="passive-voice-sentences"
class="help-text mt-2 hidden">
<i icon-name="bar-chart-big" class="size-6 pr-1"></i>
{% translate "The text contains" %}
<span class="font-bold"></span>
<span class="font-bold">{% translate "sentences in passive voice" %}</span>
</div>
<div hix-feedback-category="infinitive-constructions"
class="help-text mt-2 hidden">
<i icon-name="bar-chart-big" class="size-6 pr-1"></i>
{% translate "The text contains" %}
<span class="font-bold"></span>
<span class="font-bold">{% translate "infinitive constructions" %}</span>
</div>
<div hix-feedback-category="nominal-sentences"
class="help-text mt-2 hidden">
<i icon-name="bar-chart-big" class="size-6 pr-1"></i>
{% translate "The text contains" %}
<span class="font-bold"></span>
<span class="font-bold">{% translate "sentences in nominal style" %}</span>
</div>
<div hix-feedback-category="future-tense-sentences"
class="help-text mt-2 hidden">
<i icon-name="bar-chart-big" class="size-6 pr-1"></i>
{% translate "The text contains" %}
<span class="font-bold"></span>
<span class="font-bold">{% translate "sentences in the future tense" %}</span>
</div>
<div hix-feedback-category="abbreviations" class="help-text mt-2 hidden">
<i icon-name="bar-chart-big" class="size-6 pr-1"></i>
{% translate "The text contains" %}
<span class="font-bold"></span>
<span class="font-bold">{% translate "abbreviations" %}</span>
</div>
</div>
<label class="secondary pt-2">
{% translate "HIX value unexpectedly bad?" %}
</label>
<div class="help-text mt-2">
{% translate "Editorial tips and possible reasons can be found " %}
<a href="{% translate "https://wiki.tuerantuer.org/write-texts" %}" rel="nooperner noreferrer" target="_blank" class="text-blue-500 underline">{% translate "here" %}</a>.
</div>
</div>
<div {% if not request.user.expert_mode %}class="hidden"{% endif %}>
{% render_field page_form.hix_ignore %}
<label for="{{ page_form.hix_ignore.id_for_label }}" class="secondary">
{{ page_form.hix_ignore.label }}
</label>
<div class="help-text">
{{ page_form.hix_ignore.help_text }}
</div>
</div>
</div>
{% endblock collapsible_box_content %}