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

Admin member index: update responsive layouts (#17124)

Browse source 
* add an xl breakpoint and use in member index view

* expand search controls at medium breakpoint

* tweak small screen layout options per breakpoint, add overflow button

* small fix

* switch where role appears depending on breakpoint

* adjust for smallest layout

* tweaks for medium layout

* tweaks for large layout

* tweaks for XL table
This commit is contained in:
Suzanne Aitchison 2022-04-07 14:36:43 +01:00 • committed by GitHub
parent 07983e38be
commit eae8557cf1
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 79 additions and 43 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
app/assets/stylesheets/config/_import.scss vendored
View file

@ -43,11 +43,13 @@ $breakpoint-xs: 480px;
$breakpoint-s: 640px;
$breakpoint-m: 768px;
$breakpoint-l: 1024px;
$breakpoint-xl: 1280px;
$breakpoints: (
's': $breakpoint-s,
'm': $breakpoint-m,
'l': $breakpoint-l,
'xl': $breakpoint-xl,
);
////////////////////////////////////////////////////////////////////////////////////

1
app/javascript/shared/components/useMediaQuery.js
View file

@ -9,6 +9,7 @@ export const BREAKPOINTS = Object.freeze({
Small: 640,
Medium: 768,
Large: 1024,
ExtraLarge: 1280,
});
/**

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

@ -1,47 +1,74 @@
<div class="crayons-card overflow-admin-main-layout-padding p-4 m:p-7">
<div class="crayons-card overflow-admin-main-layout-padding p-4 xl:p-7">
<header 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" %>
</header>
<%= render "admin/users/index/controls" %>
<!-- Small screen data view start -->
<div class="block m:hidden fs-s">
<h2 class="member-data-heading fs-s py-2 -mx-3 px-3 color-base-60">Members</h2>
<ul class="list-none">
<!-- 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.includes([:organization_memberships]).each do |user| %>
<li class="py-4">
<article>
<header class="flex">
<a href="<%= admin_user_path(user.id) %>">
<img class="radius-full align-middle" src="<%= user.profile_image_url_for(length: 50) %>" width="40" height="40" alt="<%= user.name %>" />
</a>
<div class="pl-3 flex-1 fs-s"><h3 class="fs-base"><%= link_to user.name, admin_user_path(user), class: "color-base-80" %></h3>
<%= link_to "@#{user.username}", admin_user_path(user), class: "color-base-60" %>
<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">
<a href="<%= admin_user_path(user.id) %>" class="mr-2">
<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>
<div class="flex">
<span class="color-base-60">@<%= user.username %></span>
<span class="hidden m:block">
&nbsp;
<span class="c-indicator ml-2 crayons-hover-tooltip" data-tooltip="<%= cascading_high_level_roles(user) %>">
<%= cascading_high_level_roles(user) %>
</span>
</span>
</div>
</div>
</div>
<div class="flex justify-between items-center grow-1">
<div class="hidden m:block">
<% if user.suspended? %>
<span class="c-indicator mr-2 inline-block" style="--bg: #DC2626"></span>Suspended
<% elsif user.warned? %>
<span class="c-indicator mr-2 inline-block" style="--bg: #F59E0B"></span>Warned
<% elsif user.comment_suspended? %>
<span class="c-indicator mr-2 inline-block" style="--bg: #DC2626"></span>Comment suspended
<% elsif user.trusted? %>
<span class="c-indicator mr-2 inline-block" style="--bg: #059669"></span>Trusted
<% else %>
<span class="c-indicator mr-2 inline-block" style="--bg: #A3A3A3"></span>Good standing
<% end %>
</div>
<button type="button" class="c-btn c-btn--icon-alone ml-auto" aria-label="User actions: #{user.name}">
<%= crayons_icon_tag("overflow-vertical", aria_hidden: true) %>
</button>
</div>
</header>
<div class="flex justify-between py-2">
<div class="flex justify-between mb-2 block m:hidden">
<div>
<% if user.suspended? %>
<span class="c-indicator mr-2 inline-block" style="--bg: #DC2626"></span>Suspended
<% elsif user.warned? %>
<span class="c-indicator mr-2 inline-block" style="--bg: #F59E0B"></span>Warned
<% elsif user.comment_suspended? %>
<span class="c-indicator mr-2 inline-block" style="--bg: #DC2626"></span>Comment suspended
<% elsif user.trusted? %>
<span class="c-indicator mr-2 inline-block" style="--bg: #059669"></span>Trusted
<% else %>
<span class="c-indicator mr-2 inline-block" style="--bg: #A3A3A3"></span>Good standing
<% end %>
<% if user.suspended? %>
<span class="c-indicator mr-2 inline-block" style="--bg: #DC2626"></span>Suspended
<% elsif user.warned? %>
<span class="c-indicator mr-2 inline-block" style="--bg: #F59E0B"></span>Warned
<% elsif user.comment_suspended? %>
<span class="c-indicator mr-2 inline-block" style="--bg: #DC2626"></span>Comment suspended
<% elsif user.trusted? %>
<span class="c-indicator mr-2 inline-block" style="--bg: #059669"></span>Trusted
<% else %>
<span class="c-indicator mr-2 inline-block" style="--bg: #A3A3A3"></span>Good standing
<% end %>
</div>
<div>
<span class="c-indicator ml-2 crayons-hover-tooltip" data-tooltip="<%= cascading_high_level_roles(user) %>">
<%= cascading_high_level_roles(user) %>
</span>
</div>
</div>
<div class="flex justify-between items-end">
<dl class="flex gap-2">
<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>
@ -66,33 +93,34 @@
<% end %>
</ul>
</div>
<!-- Small screen data view end -->
<!-- Responsive screen (breakpoints below XL) data view end -->
<!-- Large screen data view start -->
<table class="crayons-table hidden m:block" width="100%">
<!-- XL screen data view start -->
<table class="crayons-table hidden xl:block" width="100%">
<thead>
<tr>
<th scope="col">Member</th>
<th scope="col" class="normal-case">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</div>
</tr>
</thead>
<tbody class="crayons-card">
<% @users.includes([:organization_memberships]).each do |user| %>
<tr>
<td>
<div class="flex s:items-start flex-col s:flex-row">
<a href="<%= admin_user_path(user.id) %>">
<img class="radius-full align-middle" src="<%= user.profile_image_url_for(length: 50) %>" width="40" height="40" alt="<%= user.name %>" />
</a>
<div class="pl-3 flex-1 fs-s"><h3 class="fs-base"><%= link_to user.name, admin_user_path(user), class: "color-base-80" %></h3>
<%= link_to "@#{user.username}", admin_user_path(user), class: "color-base-60" %>&nbsp;
<span class="c-indicator ml-2 crayons-hover-tooltip" data-tooltip="<%= cascading_high_level_roles(user) %>">
<%= cascading_high_level_roles(user) %>
</span>
<div class="flex s:items-start flex-col s:flex-row">
<a href="<%= admin_user_path(user.id) %>">
<img class="radius-full align-middle" src="<%= user.profile_image_url_for(length: 50) %>" width="40" height="40" alt="<%= user.name %>" />
</a>
<div class="pl-3 flex-1 fs-s"><h3 class="fs-base"><%= link_to user.name, admin_user_path(user), class: "color-base-80" %></h3>
<%= link_to "@#{user.username}", admin_user_path(user), class: "color-base-60" %>&nbsp;
<span class="c-indicator ml-2 crayons-hover-tooltip" data-tooltip="<%= cascading_high_level_roles(user) %>">
<%= cascading_high_level_roles(user) %>
</span>
</div>
</div>
</div>
</td>
<td>
<% if user.suspended? %>
@ -124,11 +152,16 @@
-
<% end %>
</td>
<td>
<button type="button" class="c-btn c-btn--icon-alone ml-auto" aria-label="User actions: #{user.name}">
<%= crayons_icon_tag("overflow-vertical", aria_hidden: true) %>
</button>
</td>
</tr>
<% end %>
</tbody>
</table>
<!-- Large screen data view end -->
<!-- XL screen data view end -->
<div class="flex justify-end">
<%= paginate @users, theme: "admin", scope: @users, label: "Paginate users" %>

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

@ -3,7 +3,7 @@
<% if FeatureFlag.enabled?(:member_index_view) %>
<% if params[:controller] == "admin/users" %>
<!-- Small screen layout -->
<%= form_with url: admin_users_path, method: :get, local: true, class: "l:hidden" do |f| %>
<%= form_with url: admin_users_path, method: :get, local: true, class: "m:hidden" do |f| %>
<div class="flex justify-between my-3">
<div>
<button type="button" id="expand-search-btn" class="relative c-btn c-btn--icon-alone indicator-btn" aria-label="Expand search" aria-expanded="false" aria-controls="search-users">
@ -28,7 +28,7 @@
<% end %>
<!-- Larger screen layout -->
<div class="hidden l:flex justify-between">
<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 relative">
<%= render "admin/users/index/search_field", f: f %>