3829e836a2
* apply some missing classes * sweep up minor UI and a11y issues * add missing context locals in invitations view
104 lines
4.2 KiB
Text
104 lines
4.2 KiB
Text
<%= javascript_packs_with_chunks_tag "admin/users/memberIndex", defer: true %>
|
|
<div id="member-index-content" class="crayons-card overflow-admin-main-layout-padding p-4 xl:p-0">
|
|
<header class="p-4 xl:p-7 pb-4">
|
|
<div class="flex flex-col l:flex-row justify-content-between l:items-center">
|
|
<h1 class="crayons-title ml-2 m:ml-0">Members</h1>
|
|
<%= render "admin/users/index/tabs" %>
|
|
</div>
|
|
<%= render "admin/users/index/controls" %>
|
|
</header>
|
|
|
|
<!-- Responsive screen (breakpoints below XL) data view start -->
|
|
<div class="block xl:hidden fs-s">
|
|
<h2 class="member-data-heading fs-s py-2 -mx-4 px-6 color-base-60">Members</h2>
|
|
<ul class="list-none mx-2">
|
|
<% @users.each do |user| %>
|
|
<li class="py-4">
|
|
<article>
|
|
<header class="flex items-center justify-between m:justify-start mb-2">
|
|
<div class="flex grow-1 mr-4 m:w-50 m:max-w-50">
|
|
<%= render "admin/users/index/member_data", user: user %>
|
|
</div>
|
|
<div class="flex justify-between items-center grow-1">
|
|
<div class="hidden m:block">
|
|
<%= render "admin/users/index/status_indicator", user: user %>
|
|
</div>
|
|
<div class="ml-auto">
|
|
<%= render "admin/users/index/user_actions_dropdown", user: user, id: "responsive-#{user.id}" %>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
<div class="flex justify-between mb-2 block m:hidden">
|
|
<div>
|
|
<%= render "admin/users/index/status_indicator", user: user %>
|
|
</div>
|
|
<span class="c-indicator ml-2 crayons-hover-tooltip crayons-hover-tooltip--right" data-tooltip="<%= format_role_tooltip(user) %>">
|
|
<%= cascading_high_level_roles(user) %>
|
|
</span>
|
|
</div>
|
|
<div class="flex justify-between items-end">
|
|
<dl class="flex gap-4">
|
|
<div>
|
|
<dt class="color-base-60 fw-normal">Last activity</dt>
|
|
<dd><%= format_last_activity_timestamp(user.last_activity) %></dd>
|
|
</div>
|
|
<div>
|
|
<dt class="color-base-60 fw-normal">Joined on</dt>
|
|
<dd><%= user.registered_at&.strftime("%d %b, %Y") %></dd>
|
|
</div>
|
|
</dl>
|
|
<div>
|
|
<%= render "admin/users/index/organizations", organizations: user.organizations %>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
</li>
|
|
<% end %>
|
|
</ul>
|
|
</div>
|
|
<!-- Responsive screen (breakpoints below XL) data view end -->
|
|
|
|
<!-- XL screen data view start -->
|
|
<table class="crayons-table crayons-table--minimal w-100 hidden xl:table">
|
|
<thead class="member-data-heading">
|
|
<tr>
|
|
<th scope="col" class="pl-7">Member</th>
|
|
<th scope="col">Status</th>
|
|
<th scope="col">Last activity & Joined on</th>
|
|
<th scope="col">Organizations</th>
|
|
<th scope="col" class="screen-reader-only">Actions</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<% @users.each do |user| %>
|
|
<tr>
|
|
<td class="pl-7">
|
|
<div class="flex s:items-start flex-col s:flex-row">
|
|
<%= render "admin/users/index/member_data", user: user %>
|
|
</div>
|
|
</td>
|
|
<td>
|
|
<%= render "admin/users/index/status_indicator", user: user %>
|
|
</td>
|
|
<td>
|
|
<%= format_last_activity_timestamp(user.last_activity) %>
|
|
<p class="fs-xs color-base-60">
|
|
<%= user.registered_at&.strftime("%d %b, %Y") %>
|
|
</p>
|
|
</td>
|
|
<td>
|
|
<%= render "admin/users/index/organizations", organizations: user.organizations %>
|
|
</td>
|
|
<td>
|
|
<%= render "admin/users/index/user_actions_dropdown", user: user, id: "xl-#{user.id}" %>
|
|
</td>
|
|
</tr>
|
|
<% end %>
|
|
</tbody>
|
|
</table>
|
|
<!-- XL screen data view end -->
|
|
|
|
<div class="flex justify-end xl:p-7">
|
|
<%= paginate @users, theme: "admin", scope: @users, label: "Paginate users", context: "bottom" %>
|
|
</div>
|
|
</div>
|