Skip to content

Fix: make access radio options fully clickable #17933

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
SWAPNILVERMA108 wants to merge 3 commits into
base: main
Choose a base branch
from
Open

Fix: make access radio options fully clickable #17933

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
75a3ed8
Fix: make access radio options fully clickable
SWAPNILVERMA108 Feb 8, 2026
b2abb7f
[pre-commit.ci] auto fixes from pre-commit.com hooks
pre-commit-ci[bot] Feb 8, 2026
a8554e3
Merge branch 'main' into fix-radio-click
SWAPNILVERMA108 Feb 9, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
121 changes: 72 additions & 49 deletions weblate/templates/bootstrap5/layout/radioselect_access.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,68 +19,91 @@
{% for choice in field.field.choices %}
{% with choice_str=choice.0|stringformat:"s" %}
<div class="col-sm-3">

<label for="id_{{ field.html_name }}_{{ forloop.counter }}"
class="{% if inline_class %}radio-{{ inline_class }}{% endif %}">
<h5>
class="radio-option {% if inline_class %}radio-{{ inline_class }}{% endif %}">

<div class="radio-main">

<input type="radio"
{% if choice_str == field.value|default_if_none:""|stringformat:"s" %}checked="checked"{% endif %}
name="{{ field.html_name }}"
id="id_{{ field.html_name }}_{{ forloop.counter }}"
value="{{ choice.0|unlocalize }}"
{{ field.field.widget.attrs|flatatt }}>

{% with image_name="access/"|add:choice_str|add:".svg" %}
<img class="access-icon" src="{% static image_name %}" />
<img class="access-icon" src="{% static image_name %}" alt="" />
{% endwith %}
{{ choice.1|unlocalize }}
</h5>
{% if choice_str == "0" %}
<p>{% translate "Visible to everybody." %}</p>
<p>{% translate "Any authenticated user can contribute." %}</p>
{% if has_gitexport %}
<p>
{% translate "VCS repository is accessible to everybody." %} {% documentation_icon 'admin/optionals' 'git-exporter' %}
</p>
{% endif %}
{% elif choice_str == "1" %}
<p>{% translate "Visible to everybody." %}</p>
<p>{% translate "Only chosen users can contribute." %}</p>
{% if has_gitexport %}
<p>
{% translate "Only chosen users can access VCS repository." %} {% documentation_icon 'admin/optionals' 'git-exporter' %}
</p>
{% endif %}
{% elif choice_str == "100" %}
<p>{% translate "Visible only to chosen users." %}</p>
<p>{% translate "Only chosen users can contribute." %}</p>
{% if has_gitexport %}

<span class="radio-text">{{ choice.1|unlocalize }}</span>

</div>


<div class="radio-description">

{% if choice_str == "0" %}
<p>{% translate "Visible to everybody." %}</p>
<p>{% translate "Any authenticated user can contribute." %}</p>

{% if has_gitexport %}
<p>
{% translate "VCS repository is accessible to everybody." %}
{% documentation_icon 'admin/optionals' 'git-exporter' %}
</p>
{% endif %}

{% elif choice_str == "1" %}
<p>{% translate "Visible to everybody." %}</p>
<p>{% translate "Only chosen users can contribute." %}</p>

{% if has_gitexport %}
<p>
{% translate "Only chosen users can access VCS repository." %}
{% documentation_icon 'admin/optionals' 'git-exporter' %}
</p>
{% endif %}

{% elif choice_str == "100" %}
<p>{% translate "Visible only to chosen users." %}</p>
<p>{% translate "Only chosen users can contribute." %}</p>

{% if has_gitexport %}
<p>
{% translate "Only chosen users can access VCS repository." %}
{% documentation_icon 'admin/optionals' 'git-exporter' %}
</p>
{% endif %}

{% elif choice_str == "200" %}
<p>{% translate "Permissions are not managed in Weblate." %}</p>

<p>
{% translate "Only chosen users can access VCS repository." %} {% documentation_icon 'admin/optionals' 'git-exporter' %}
<strong>
{% translate "Only use this if you know what you are doing, enabling it might revoke your access to this project." %}
</strong>
</p>
{% endif %}
{% elif choice_str == "200" %}
<p>{% translate "Permissions are not managed in Weblate." %}</p>
<p>
<strong>
{% translate "Only use this if you know what you are doing, enabling it might revoke your access to this project." %}
</strong>
</p>
{% endif %}
{% endwith %}
</label>

</div>

</label>

</div>
{% endfor %}
</div>
{% if "disabled" in flat_attrs %}
<div>
<p>
{% translate "You do not have permission to change project access control." %}
{% if has_billing %}
<a href="{% url 'billing' %}">{% translate "Check your billing status" %}</a>
{% endif %}
</p>
</div>
{% endfor %}
{% endif %}

</div>
{% if "disabled" in flat_attrs %}
<div>
<p>
{% translate "You do not have permission to change project access control." %}
{% if has_billing %}
<a href="{% url 'billing' %}">{% translate "Check your billing status" %}</a>
{% endif %}
</p>
</div>
{% endif %}

</div>

</div>
Copy link
Copy Markdown
Member

@nijel nijel Feb 9, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This only changes rendering for the access control selection in project settings, not for a generic radioselect.

37 changes: 37 additions & 0 deletions weblate/templates/mail/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,40 @@
/* Fix: make radio options fully clickable */

.radio-option {
display: block;
width: 100%;
padding: 10px 8px;
cursor: pointer;
border-radius: 6px;
}

.radio-option:hover {
background-color: rgba(0, 0, 0, 0.05);
}

.radio-main {
display: flex;
align-items: center;
gap: 10px;
}

.radio-main input[type="radio"] {
margin: 0;
cursor: pointer;
}

.radio-text {
font-size: 16px;
font-weight: 500;
}

.radio-description {
margin-left: 28px;
margin-top: 4px;
font-size: 14px;
color: #666;
}

Copy link
Copy Markdown
Member

@nijel nijel Feb 9, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is definitely the wrong place; this CSS is only used in e-mail notifications.

Copy link
Copy Markdown
Author

@SWAPNILVERMA108 SWAPNILVERMA108 Feb 9, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for pointing that out.
I’ve removed the unrelated mail CSS change.

button,
hr,
input {
Expand Down