maverick/docbrown
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Admin member index - minor UI/a11y fixes (#17246)

Browse source 
* apply some missing classes

* sweep up minor UI and a11y issues

* add missing context locals in invitations view
This commit is contained in:
Suzanne Aitchison 2022-04-14 07:59:31 +01:00 • committed by GitHub
parent 6959a265d6
commit 3829e836a2
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
9 changed files with 20 additions and 20 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
app/views/admin/invitations/index.html.erb
View file

@ -6,15 +6,15 @@
<%= render "admin/users/index/tabs" %>
</div>
<div class="flex justify-content-between py-3">
<%= form_with url: admin_invitations_path, method: :get, local: true, class:"grow-1" do |f| %>
<% render "admin/users/index/search_field", f: f, placeholder: "Search invited members...", aria_label: "Search invited members by name, username, or email" %>
<%= form_with url: admin_invitations_path, method: :get, local: true, class: "grow-1" do |f| %>
<% render "admin/users/index/search_field", f: f, placeholder: "Search invited members...", aria_label: "Search invited members by name, username, or email", context: "invitations" %>
<% end %>
<div class="flex grow-1 justify-content-end">
<%= paginate @invitations, theme: "admin", scope: @invitations, label: "Paginate invitations" %>
<%= paginate @invitations, theme: "admin", scope: @invitations, label: "Paginate invitations", context: "top" %>
<%= link_to "Invite member", new_admin_invitation_path, class: "c-cta c-cta--branded self-end" %>
</div>
</div>
</header>
<table class="crayons-table crayons-table__lowercase" width="100%">
<thead>
@ -47,7 +47,7 @@
</tbody>
</table>
<div class="flex justify-end">
<%= paginate @invitations, theme: "admin", scope: @invitations, label: "Paginate invitations" %>
<%= paginate @invitations, theme: "admin", scope: @invitations, label: "Paginate invitations", context: "bottom" %>
</div>
<div>
<% else %>

4
app/views/admin/users/_member_index.html.erb
View file

@ -98,7 +98,7 @@
</table>
<!-- XL screen data view end -->
<div class="flex justify-end">
<%= paginate @users, theme: "admin", scope: @users, label: "Paginate users" %>
<div class="flex justify-end xl:p-7">
<%= paginate @users, theme: "admin", scope: @users, label: "Paginate users", context: "bottom" %>
</div>
</div>

12
app/views/admin/users/index/_controls.html.erb
View file

@ -15,14 +15,14 @@
<span class="search-indicator absolute top-1 right-1 c-indicator c-indicator--info <%= params[:role].blank? ? "hidden" : "" %>"></span>
</button>
</div>
<%= paginate @users, theme: "admin", scope: @users, label: "Paginate users" %>
<%= paginate @users, theme: "admin", scope: @users, label: "Paginate users", context: "small" %>
</div>
<div>
<div id="search-users" class="hidden">
<%= render "admin/users/index/search_field", f: f, placeholder: "Search member...", aria_label: "Search member by name, username, email, or Twitter/GitHub usernames" %>
<%= render "admin/users/index/search_field", f: f, context: "small", placeholder: "Search member...", aria_label: "Search member by name, username, email, or Twitter/GitHub usernames" %>
</div>
<div id="filter-users" class="hidden crayons-field flex-row items-center gap-2">
<%= render "admin/users/index/filter_role_field", f: f %>
<%= render "admin/users/index/filter_role_field", f: f, context: "small" %>
</div>
<div>
<%= render "admin/users/index/controls/export", f: f %>
@ -34,16 +34,16 @@
<div class="hidden m:flex justify-between">
<%= form_with url: admin_users_path, method: :get, local: true, class: "flex flex-col m:flex-row gap-3 m:items-center py-3" do |f| %>
<div class="crayons-field flex-1 flex-row items-center gap-2">
<%= render "admin/users/index/search_field", f: f, placeholder: "Search member...", aria_label: "Search member by name, username, email, or Twitter/GitHub usernames" %>
<%= render "admin/users/index/search_field", f: f, context: "medium", placeholder: "Search member...", aria_label: "Search member by name, username, email, or Twitter/GitHub usernames" %>
</div>
<div class="crayons-field flex-row items-center gap-2">
<%= render "admin/users/index/filter_role_field", f: f %>
<%= render "admin/users/index/filter_role_field", f: f, context: "medium" %>
</div>
<div>
<%= render "admin/users/index/controls/export", f: f %>
</div>
<% end %>
<%= paginate @users, theme: "admin", scope: @users, label: "Paginate users" %>
<%= paginate @users, theme: "admin", scope: @users, label: "Paginate users", context: "medium" %>
</div>
<% end %>

2
app/views/admin/users/index/_filter_role_field.html.erb
View file

@ -1,2 +1,2 @@
<%= f.select :role, options_for_select(Role::ROLES, params[:role]), { include_blank: "All roles" }, aria: { label: "User role" }, class: "crayons-select" %>
<%= f.select :role, options_for_select(Role::ROLES, params[:role]), { include_blank: "All roles" }, aria: { label: "User role" }, class: "crayons-select", id: "filter-#{context}" %>
<%= f.submit "Filter", class: "c-btn c-btn--secondary mt-0" %>

4
app/views/admin/users/index/_member_data.html.erb
View file

@ -1,8 +1,8 @@
<a href="<%= admin_user_path(user.id) %>" class="mr-2">
<a href="<%= admin_user_path(user.id) %>" class="mr-2 c-link">
<img class="radius-full align-middle" src="<%= user.profile_image_url_for(length: 50) %>" width="40" height="40" alt="<%= user.name %>" />
</a>
<div class="flex flex-col">
<h3 class="fs-base"><%= link_to user.name, admin_user_path(user) %></h3>
<h3 class="fs-base"><%= link_to user.name, admin_user_path(user), class: "c-link" %></h3>
<div class="flex">
<span class="color-base-60">@<%= user.username %></span>
<span class="hidden m:block">

2
app/views/admin/users/index/_search_field.html.erb
View file

@ -1,5 +1,5 @@
<div class="relative">
<%= f.text_field :search, value: params[:search], class: "crayons-textfield mt-0", placeholder: placeholder, aria: { label: aria_label } %>
<%= f.text_field :search, id: "search-#{context}", value: params[:search], class: "crayons-textfield mt-0", placeholder: placeholder, aria: { label: aria_label } %>
<button type="submit" aria-label="Search" class="crayons-btn crayons-btn--ghost crayons-btn--s crayons-btn--icon-rounded absolute right-2 bottom-0 top-0 m-1">
<%= crayons_icon_tag(:search, aria_hidden: true) %>
</button>

2
app/views/kaminari/admin/_next_page.html.erb
View file

@ -1,4 +1,4 @@
<li class="flex items-center">
<%= link_to_unless current_page.last?, crayons_icon_tag("chevron-right", aria_hidden: true, class: ("admin-pagination--inactive mx-1" if current_page.last?).to_s), url, rel: "next", remote: remote, class: "admin-pagination--link c-link c-link--icon-alone c-link--block",
aria: { label: t("views.pagination.aria_next"), describedby: "pagination-description" } %>
aria: { label: t("views.pagination.aria_next"), describedby: "pagination-description-#{context}" } %>
</li>

2
app/views/kaminari/admin/_paginator.html.erb
View file

@ -1,6 +1,6 @@
<%= paginator.render do %>
<nav aria-label="<%= label %>" class="admin-pagination flex fs-s items-center">
<span id="pagination-description">
<span id="pagination-description-<%= context %>">
<span class="screen-reader-only">Currently showing: </span>
<%= page_entries_info scope %>
</span>

2
app/views/kaminari/admin/_prev_page.html.erb
View file

@ -1,4 +1,4 @@
<li class="flex items-center">
<%= link_to_unless current_page.first?, crayons_icon_tag("chevron-left", aria_hidden: true, class: ("admin-pagination--inactive mx-1" if current_page.first?).to_s), url, rel: "prev", remote: remote, class: "admin-pagination--link c-link c-link--icon-alone c-link--block",
aria: { label: t("views.pagination.aria_previous"), describedby: "pagination-description" } %>
aria: { label: t("views.pagination.aria_previous"), describedby: "pagination-description-#{context}" } %>
</li>