mirrors/django
1
0
Fork 0
mirror of https://github.com/django/django.git synced 2024-12-22 09:05:43 +00:00
Code Issues 25 Releases Wiki Activity

Fixed #35791 -- Updated icon button dimensions to 24x24 pixels.

Browse Source 
This is to meet the WCAG 2.5.8 minimum size requirement.

Co-authored-by: Eva Nanyonga <evewish@gmail.com>
This commit is contained in:
Tainara Palmeira 2024-11-15 16:19:23 +01:00 committed by Sarah Boyce
parent 15ca75449b
commit 86661f2449
10 changed files with 55 additions and 121 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
django/contrib/admin/static/admin/css/dark_mode.css
View File

@ -84,8 +84,8 @@ html[data-theme="dark"] {
.theme-toggle svg { .theme-toggle svg {
vertical-align: middle; vertical-align: middle;
height: 1rem; height: 1.5rem;
width: 1rem; width: 1.5rem;
display: none; display: none;
} }

72
django/contrib/admin/static/admin/css/responsive.css
View File

@ -277,28 +277,6 @@ input[type="submit"], button {
margin-bottom: 5px; margin-bottom: 5px;
} }
.selector ul.selector-chooser {
width: 26px;
height: 52px;
padding: 2px 0;
border-radius: 20px;
transform: translateY(-10px);
}
.selector-add, .selector-remove {
width: 20px;
height: 20px;
background-size: 20px auto;
}
.selector-add {
background-position: 0 -120px;
}
.selector-remove {
background-position: 0 -80px;
}
.selector-chooseall, .selector-clearall { .selector-chooseall, .selector-clearall {
align-self: center; align-self: center;
} }
@ -321,8 +299,6 @@ input[type="submit"], button {
} }
.stacked ul.selector-chooser { .stacked ul.selector-chooser {
width: 52px;
height: 26px;
padding: 0 2px; padding: 0 2px;
transform: none; transform: none;
} }
@ -331,42 +307,6 @@ input[type="submit"], button {
padding: 3px; padding: 3px;
} }
.stacked .selector-add, .stacked .selector-remove {
background-size: 20px auto;
}
.stacked .selector-add {
background-position: 0 -40px;
}
.stacked .active.selector-add {
background-position: 0 -40px;
}
.active.selector-add:focus, .active.selector-add:hover {
background-position: 0 -140px;
}
.stacked .active.selector-add:focus, .stacked .active.selector-add:hover {
background-position: 0 -60px;
}
.stacked .selector-remove {
background-position: 0 0;
}
.stacked .active.selector-remove {
background-position: 0 0;
}
.active.selector-remove:focus, .active.selector-remove:hover {
background-position: 0 -100px;
}
.stacked .active.selector-remove:focus, .stacked .active.selector-remove:hover {
background-position: 0 -20px;
}
.help-tooltip, .selector .help-icon { .help-tooltip, .selector .help-icon {
display: none; display: none;
} }
@ -680,9 +620,9 @@ input[type="submit"], button {
} }
.selector ul.selector-chooser { .selector ul.selector-chooser {
display: block; display: flex;
width: 52px; width: 60px;
height: 26px; height: 30px;
padding: 0 2px; padding: 0 2px;
transform: none; transform: none;
} }
@ -696,15 +636,15 @@ input[type="submit"], button {
} }
.active.selector-remove:focus, .active.selector-remove:hover { .active.selector-remove:focus, .active.selector-remove:hover {
background-position: 0 -20px; background-position: 0 -24px;
} }
.selector-add { .selector-add {
background-position: 0 -40px; background-position: 0 -48px;
} }
.active.selector-add:focus, .active.selector-add:hover { .active.selector-add:focus, .active.selector-add:hover {
background-position: 0 -60px; background-position: 0 -72px;
} }
/* Inlines */ /* Inlines */

22
django/contrib/admin/static/admin/css/responsive_rtl.css
View File

@ -52,22 +52,6 @@
padding-left: 0; padding-left: 0;
padding-right: 16px; padding-right: 16px;
} }
[dir="rtl"] .selector-add {
background-position: 0 -80px;
}
[dir="rtl"] .selector-remove {
background-position: 0 -120px;
}
[dir="rtl"] .active.selector-add:focus, .active.selector-add:hover {
background-position: 0 -100px;
}
[dir="rtl"] .active.selector-remove:focus, .active.selector-remove:hover {
background-position: 0 -140px;
}
} }
/* MOBILE */ /* MOBILE */
@ -97,14 +81,14 @@
} }
[dir="rtl"] .active.selector-remove:focus, .active.selector-remove:hover { [dir="rtl"] .active.selector-remove:focus, .active.selector-remove:hover {
background-position: 0 -20px; background-position: 0 -24px;
} }
[dir="rtl"] .selector-add { [dir="rtl"] .selector-add {
background-position: 0 -40px; background-position: 0 -48px;
} }
[dir="rtl"] .active.selector-add:focus, .active.selector-add:hover { [dir="rtl"] .active.selector-add:focus, .active.selector-add:hover {
background-position: 0 -60px; background-position: 0 -72px;
} }
} }

10
django/contrib/admin/static/admin/css/rtl.css
View File

@ -220,19 +220,21 @@ fieldset .fieldBox {
} }
.selector-add { .selector-add {
background: url(../img/selector-icons.svg) 0 -64px no-repeat; background: url(../img/selector-icons.svg) 0 -96px no-repeat;
background-size: 24px auto;
} }
.active.selector-add:focus, .active.selector-add:hover { .active.selector-add:focus, .active.selector-add:hover {
background-position: 0 -80px; background-position: 0 -120px;
} }
.selector-remove { .selector-remove {
background: url(../img/selector-icons.svg) 0 -96px no-repeat; background: url(../img/selector-icons.svg) 0 -144px no-repeat;
background-size: 24px auto;
} }
.active.selector-remove:focus, .active.selector-remove:hover { .active.selector-remove:focus, .active.selector-remove:hover {
background-position: 0 -112px; background-position: 0 -168px;
} }
.selector-chooseall { .selector-chooseall {

46
django/contrib/admin/static/admin/css/widgets.css
View File

@ -93,7 +93,7 @@
.selector ul.selector-chooser { .selector ul.selector-chooser {
align-self: center; align-self: center;
width: 22px; width: 30px;
background-color: var(--selected-bg); background-color: var(--selected-bg);
border-radius: 10px; border-radius: 10px;
margin: 0; margin: 0;
@ -123,8 +123,8 @@
} }
.selector-add, .selector-remove { .selector-add, .selector-remove {
width: 16px; width: 24px;
height: 16px; height: 24px;
display: block; display: block;
text-indent: -3000px; text-indent: -3000px;
overflow: hidden; overflow: hidden;
@ -142,19 +142,21 @@
} }
.selector-add { .selector-add {
background: url(../img/selector-icons.svg) 0 -96px no-repeat; background: url(../img/selector-icons.svg) 0 -144px no-repeat;
background-size: 24px auto;
} }
.active.selector-add:focus, .active.selector-add:hover { .active.selector-add:focus, .active.selector-add:hover {
background-position: 0 -112px; background-position: 0 -168px;
} }
.selector-remove { .selector-remove {
background: url(../img/selector-icons.svg) 0 -64px no-repeat; background: url(../img/selector-icons.svg) 0 -96px no-repeat;
background-size: 24px auto;
} }
.active.selector-remove:focus, .active.selector-remove:hover { .active.selector-remove:focus, .active.selector-remove:hover {
background-position: 0 -80px; background-position: 0 -120px;
} }
.selector-chooseall, .selector-clearall { .selector-chooseall, .selector-clearall {
@ -230,8 +232,9 @@
} }
.stacked ul.selector-chooser { .stacked ul.selector-chooser {
height: 22px; display: flex;
width: 50px; height: 30px;
width: 64px;
margin: 0 0 10px 40%; margin: 0 0 10px 40%;
background-color: #eee; background-color: #eee;
border-radius: 10px; border-radius: 10px;
@ -248,22 +251,24 @@
} }
.stacked .selector-add { .stacked .selector-add {
background: url(../img/selector-icons.svg) 0 -32px no-repeat; background: url(../img/selector-icons.svg) 0 -48px no-repeat;
background-size: 24px auto;
cursor: default; cursor: default;
} }
.stacked .active.selector-add { .stacked .active.selector-add {
background-position: 0 -32px; background-position: 0 -48px;
cursor: pointer; cursor: pointer;
} }
.stacked .active.selector-add:focus, .stacked .active.selector-add:hover { .stacked .active.selector-add:focus, .stacked .active.selector-add:hover {
background-position: 0 -48px; background-position: 0 -72px;
cursor: pointer; cursor: pointer;
} }
.stacked .selector-remove { .stacked .selector-remove {
background: url(../img/selector-icons.svg) 0 0 no-repeat; background: url(../img/selector-icons.svg) 0 0 no-repeat;
background-size: 24px auto;
cursor: default; cursor: default;
} }
@ -273,7 +278,7 @@
} }
.stacked .active.selector-remove:focus, .stacked .active.selector-remove:hover { .stacked .active.selector-remove:focus, .stacked .active.selector-remove:hover {
background-position: 0 -16px; background-position: 0 -24px;
cursor: pointer; cursor: pointer;
} }
@ -329,28 +334,30 @@ table p.datetime {
position: relative; position: relative;
display: inline-block; display: inline-block;
vertical-align: middle; vertical-align: middle;
height: 16px; height: 24px;
width: 16px; width: 24px;
overflow: hidden; overflow: hidden;
} }
.datetimeshortcuts .clock-icon { .datetimeshortcuts .clock-icon {
background: url(../img/icon-clock.svg) 0 0 no-repeat; background: url(../img/icon-clock.svg) 0 0 no-repeat;
background-size: 24px auto;
} }
.datetimeshortcuts a:focus .clock-icon, .datetimeshortcuts a:focus .clock-icon,
.datetimeshortcuts a:hover .clock-icon { .datetimeshortcuts a:hover .clock-icon {
background-position: 0 -16px; background-position: 0 -24px;
} }
.datetimeshortcuts .date-icon { .datetimeshortcuts .date-icon {
background: url(../img/icon-calendar.svg) 0 0 no-repeat; background: url(../img/icon-calendar.svg) 0 0 no-repeat;
background-size: 24px auto;
top: -1px; top: -1px;
} }
.datetimeshortcuts a:focus .date-icon, .datetimeshortcuts a:focus .date-icon,
.datetimeshortcuts a:hover .date-icon { .datetimeshortcuts a:hover .date-icon {
background-position: 0 -16px; background-position: 0 -24px;
} }
.timezonewarning { .timezonewarning {
@ -569,9 +576,10 @@ ul.timelist, .timelist li {
float: right; float: right;
text-indent: -9999px; text-indent: -9999px;
background: url(../img/inline-delete.svg) 0 0 no-repeat; background: url(../img/inline-delete.svg) 0 0 no-repeat;
width: 16px; width: 1.5rem;
height: 16px; height: 1.5rem;
border: 0px none; border: 0px none;
margin-bottom: .25rem;
} }
.inline-deletelink:focus, .inline-deletelink:hover { .inline-deletelink:focus, .inline-deletelink:hover {

2
django/contrib/admin/static/admin/img/inline-delete.svg
View File

@ -1,3 +1,3 @@
<svg width="16" height="16" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"> <svg viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg">
<path fill="#999999" d="M1277 1122q0-26-19-45l-181-181 181-181q19-19 19-45 0-27-19-46l-90-90q-19-19-46-19-26 0-45 19l-181 181-181-181q-19-19-45-19-27 0-46 19l-90 90q-19 19-19 46 0 26 19 45l181 181-181 181q-19 19-19 45 0 27 19 46l90 90q19 19 46 19 26 0 45-19l181-181 181 181q19 19 45 19 27 0 46-19l90-90q19-19 19-46zm387-226q0 209-103 385.5t-279.5 279.5-385.5 103-385.5-103-279.5-279.5-103-385.5 103-385.5 279.5-279.5 385.5-103 385.5 103 279.5 279.5 103 385.5z"/> <path fill="#999999" d="M1277 1122q0-26-19-45l-181-181 181-181q19-19 19-45 0-27-19-46l-90-90q-19-19-46-19-26 0-45 19l-181 181-181-181q-19-19-45-19-27 0-46 19l-90 90q-19 19-19 46 0 26 19 45l181 181-181 181q-19 19-19 45 0 27 19 46l90 90q19 19 46 19 26 0 45-19l181-181 181 181q19 19 45 19 27 0 46-19l90-90q19-19 19-46zm387-226q0 209-103 385.5t-279.5 279.5-385.5 103-385.5-103-279.5-279.5-103-385.5 103-385.5 279.5-279.5 385.5-103 385.5 103 279.5 279.5 103 385.5z"/>
</svg> </svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 560 B

After

Width:  |  Height:  |  Size: 537 B

6
django/contrib/admin/templates/admin/base.html
View File

@ -115,9 +115,9 @@
<!-- SVGs --> <!-- SVGs -->
<svg xmlns="http://www.w3.org/2000/svg" class="base-svgs"> <svg xmlns="http://www.w3.org/2000/svg" class="base-svgs">
<symbol viewBox="0 0 24 24" width="1rem" height="1rem" id="icon-auto"><path d="M0 0h24v24H0z" fill="currentColor"/><path d="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zm0-2V4a8 8 0 1 0 0 16z"/></symbol> <symbol viewBox="0 0 24 24" width="1.5rem" height="1.5rem" id="icon-auto"><path d="M0 0h24v24H0z" fill="currentColor"/><path d="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zm0-2V4a8 8 0 1 0 0 16z"/></symbol>
<symbol viewBox="0 0 24 24" width="1rem" height="1rem" id="icon-moon"><path d="M0 0h24v24H0z" fill="currentColor"/><path d="M10 7a7 7 0 0 0 12 4.9v.1c0 5.523-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2h.1A6.979 6.979 0 0 0 10 7zm-6 5a8 8 0 0 0 15.062 3.762A9 9 0 0 1 8.238 4.938 7.999 7.999 0 0 0 4 12z"/></symbol> <symbol viewBox="0 0 24 24" width="1.5rem" height="1.5rem" id="icon-moon"><path d="M0 0h24v24H0z" fill="currentColor"/><path d="M10 7a7 7 0 0 0 12 4.9v.1c0 5.523-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2h.1A6.979 6.979 0 0 0 10 7zm-6 5a8 8 0 0 0 15.062 3.762A9 9 0 0 1 8.238 4.938 7.999 7.999 0 0 0 4 12z"/></symbol>
<symbol viewBox="0 0 24 24" width="1rem" height="1rem" id="icon-sun"><path d="M0 0h24v24H0z" fill="currentColor"/><path d="M12 18a6 6 0 1 1 0-12 6 6 0 0 1 0 12zm0-2a4 4 0 1 0 0-8 4 4 0 0 0 0 8zM11 1h2v3h-2V1zm0 19h2v3h-2v-3zM3.515 4.929l1.414-1.414L7.05 5.636 5.636 7.05 3.515 4.93zM16.95 18.364l1.414-1.414 2.121 2.121-1.414 1.414-2.121-2.121zm2.121-14.85l1.414 1.415-2.121 2.121-1.414-1.414 2.121-2.121zM5.636 16.95l1.414 1.414-2.121 2.121-1.414-1.414 2.121-2.121zM23 11v2h-3v-2h3zM4 11v2H1v-2h3z"/></symbol> <symbol viewBox="0 0 24 24" width="1.5rem" height="1.5rem" id="icon-sun"><path d="M0 0h24v24H0z" fill="currentColor"/><path d="M12 18a6 6 0 1 1 0-12 6 6 0 0 1 0 12zm0-2a4 4 0 1 0 0-8 4 4 0 0 0 0 8zM11 1h2v3h-2V1zm0 19h2v3h-2v-3zM3.515 4.929l1.414-1.414L7.05 5.636 5.636 7.05 3.515 4.93zM16.95 18.364l1.414-1.414 2.121 2.121-1.414 1.414-2.121-2.121zm2.121-14.85l1.414 1.415-2.121 2.121-1.414-1.414 2.121-2.121zM5.636 16.95l1.414 1.414-2.121 2.121-1.414-1.414 2.121-2.121zM23 11v2h-3v-2h3zM4 11v2H1v-2h3z"/></symbol>
</svg> </svg>
<!-- END SVGs --> <!-- END SVGs -->
{% block extrabody %}{% endblock extrabody %} {% block extrabody %}{% endblock extrabody %}

8
django/contrib/admin/templates/admin/widgets/related_widget_wrapper.html
View File

@ -9,7 +9,7 @@
data-href-template="{{ change_related_template_url }}?{{ url_params }}" data-href-template="{{ change_related_template_url }}?{{ url_params }}"
data-popup="yes" data-popup="yes"
title="{% blocktranslate %}Change selected {{ model }}{% endblocktranslate %}"> title="{% blocktranslate %}Change selected {{ model }}{% endblocktranslate %}">
<img src="{% static 'admin/img/icon-changelink.svg' %}" alt="" width="20" height="20"> <img src="{% static 'admin/img/icon-changelink.svg' %}" alt="" width="24" height="24">
</a> </a>
{% endif %} {% endif %}
{% if can_add_related %} {% if can_add_related %}
@ -17,7 +17,7 @@
data-popup="yes" data-popup="yes"
href="{{ add_related_url }}?{{ url_params }}" href="{{ add_related_url }}?{{ url_params }}"
title="{% blocktranslate %}Add another {{ model }}{% endblocktranslate %}"> title="{% blocktranslate %}Add another {{ model }}{% endblocktranslate %}">
<img src="{% static 'admin/img/icon-addlink.svg' %}" alt="" width="20" height="20"> <img src="{% static 'admin/img/icon-addlink.svg' %}" alt="" width="24" height="24">
</a> </a>
{% endif %} {% endif %}
{% if can_delete_related %} {% if can_delete_related %}
@ -25,14 +25,14 @@
data-href-template="{{ delete_related_template_url }}?{{ url_params }}" data-href-template="{{ delete_related_template_url }}?{{ url_params }}"
data-popup="yes" data-popup="yes"
title="{% blocktranslate %}Delete selected {{ model }}{% endblocktranslate %}"> title="{% blocktranslate %}Delete selected {{ model }}{% endblocktranslate %}">
<img src="{% static 'admin/img/icon-deletelink.svg' %}" alt="" width="20" height="20"> <img src="{% static 'admin/img/icon-deletelink.svg' %}" alt="" width="24" height="24">
</a> </a>
{% endif %} {% endif %}
{% if can_view_related %} {% if can_view_related %}
<a class="related-widget-wrapper-link view-related" id="view_id_{{ name }}" <a class="related-widget-wrapper-link view-related" id="view_id_{{ name }}"
data-href-template="{{ change_related_template_url }}?{{ view_related_url_params }}" data-href-template="{{ change_related_template_url }}?{{ view_related_url_params }}"
title="{% blocktranslate %}View selected {{ model }}{% endblocktranslate %}"> title="{% blocktranslate %}View selected {{ model }}{% endblocktranslate %}">
<img src="{% static 'admin/img/icon-viewlink.svg' %}" alt="" width="20" height="20"> <img src="{% static 'admin/img/icon-viewlink.svg' %}" alt="" width="24" height="24">
</a> </a>
{% endif %} {% endif %}
{% endif %} {% endif %}

4
tests/admin_views/test_related_object_lookups.py
View File

@ -36,8 +36,8 @@ class SeleniumTests(AdminSeleniumTestCase):
By.XPATH, f'//*[@id="{link_id}"]/img' By.XPATH, f'//*[@id="{link_id}"]/img'
) )
self.assertEqual(link_image.get_attribute("alt"), "") self.assertEqual(link_image.get_attribute("alt"), "")
self.assertEqual(link_image.get_attribute("width"), "20") self.assertEqual(link_image.get_attribute("width"), "24")
self.assertEqual(link_image.get_attribute("height"), "20") self.assertEqual(link_image.get_attribute("height"), "24")
def test_related_object_lookup_link_initial_state(self): def test_related_object_lookup_link_initial_state(self):
from selenium.webdriver.common.by import By from selenium.webdriver.common.by import By

2
tests/admin_widgets/tests.py
View File

@ -959,7 +959,7 @@ class RelatedFieldWidgetWrapperTests(SimpleTestCase):
<a class="related-widget-wrapper-link add-related" id="add_id_stream" <a class="related-widget-wrapper-link add-related" id="add_id_stream"
data-popup="yes" title="Add another release event" data-popup="yes" title="Add another release event"
href="/admin_widgets/releaseevent/add/?_to_field=album&amp;_popup=1"> href="/admin_widgets/releaseevent/add/?_to_field=album&amp;_popup=1">
<img src="/static/admin/img/icon-addlink.svg" alt="" width="20" height="20"> <img src="/static/admin/img/icon-addlink.svg" alt="" width="24" height="24">
</a> </a>
</div> </div>
""" """