darkhelm/notifications-admin
1
0
Fork 0
mirror of https://github.com/GSA/notifications-admin.git synced 2026-06-23 08:49:46 -04:00
Code Issues Packages Projects Releases Wiki Activity

Make clickable areas bigger on tables with links

Browse Source 
Generally, bigger click areas are better[1], as long as they don’t cause
ambiguity or accidental clicks.

This commit expands the clickable area of tables where the left-hand
column is a link to include the meta information under the link.

We can’t make the whole row clickable, because sometimes we have links
in the right hand column which go to a different place

This commit also removes the CSS for `.spark-bar-label`, because these
elements are visually identical to `file-list`s now.

1. https://en.wikipedia.org/wiki/Fitts%27s_law
This commit is contained in:
Chris Hill-Scott
2017-06-20 09:50:55 +01:00
parent b8cc0de44e
commit 010886e5be
3 changed files with 11 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
app/assets/stylesheets/views/dashboard.scss
View File

@@ -46,17 +46,6 @@
transition: width 0.6s ease-in-out;
}
&-label {
@include bold-19;
display: block;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
color: $govuk-blue;
max-width: 100%;
background: $white;
}
}
.file-list {
@@ -67,12 +56,17 @@
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
padding-bottom: 30px;
padding-top: 10px;
margin-bottom: -30px;
margin-top: -10px;
}
&-hint {
@include core-16;
display: block;
color: $secondary-text-colour;
pointer-events: none;
}
}

8
app/templates/views/dashboard/all-template-statistics.html
View File

@@ -41,11 +41,9 @@
field_headings_visible=False
) %}
{% call row_heading() %}
<span class="spark-bar-label">
<a href="{{ url_for('.view_template', service_id=current_service.id, template_id=item.id) }}">{{ item.name }}</a>
<span class="file-list-hint">
{{ message_count_label(1, item.type, suffix='template')|capitalize }}
</span>
<a class="file-list-filename" href="{{ url_for('.view_template', service_id=current_service.id, template_id=item.id) }}">{{ item.name }}</a>
<span class="file-list-hint">
{{ message_count_label(1, item.type, suffix='template')|capitalize }}
</span>
{% endcall %}
{{ spark_bar_field(item.requested_count, most_used_template_count) }}

8
app/templates/views/dashboard/template-statistics.html
View File

@@ -17,11 +17,9 @@
) %}
{% call row_heading() %}
<span class="spark-bar-label">
<a href="{{ url_for('.view_template', service_id=current_service.id, template_id=item.template_id) }}">{{ item.template_name }}</a>
<span class="file-list-hint">
{{ message_count_label(1, item.template_type, suffix='template')|capitalize }}
</span>
<a class="file-list-filename" href="{{ url_for('.view_template', service_id=current_service.id, template_id=item.template_id) }}">{{ item.template_name }}</a>
<span class="file-list-hint">
{{ message_count_label(1, item.template_type, suffix='template')|capitalize }}
</span>
{% endcall %}
{% if template_statistics|length > 1 %}