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

Admin member index: initial small screen skeleton layout (#17046)

Browse source 
* initial skeleton

* tweaks

* tweaks to header

* Update cypress spec for small screens

* nudge Travis
This commit is contained in:
Suzanne Aitchison 2022-03-30 16:59:39 +01:00 • committed by GitHub
parent 148f242892
commit 38a9ac41f7
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 54 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
app/assets/stylesheets/admin.scss
View file

@ -35,6 +35,10 @@ label {
}
}
.member-data-heading {
box-shadow: 0 2px 4px var(--header-shadow);
}
// Member index view search and filter indicators
.indicator-btn {
.search-indicator {

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

@ -1,10 +1,50 @@
<div class="crayons-card p-3 s:p-4 m:p-7">
<header class="flex flex-col l:flex-row justify-content-between l:items-center ">
<h1 class="crayons-title ml-3 l:ml-0">Members</h1>
<h1 class="crayons-title">Members</h1>
<%= render "admin/users/index/tabs" %>
</header>
<%= render "admin/users/index/controls" %>
<table class="crayons-table" width="100%">
<!-- 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">
<% @users.each do |user| %>
<li class="py-4">
<article>
<header class="flex">
<img class="radius-full mr-2" src="<%= user.profile_image_url_for(length: 50) %>" width="40" height="40" alt="" />
<div class="flex flex-col">
<h3 class="fs-base"><%= link_to user.name, admin_user_path(user) %></h3>
<span class="color-base-60">@<%= user.username %></span>
</div>
</header>
<div class="flex justify-between py-2">
<div>standing info</div>
<div>role info</div>
</div>
<div class="flex justify-between items-end">
<dl class="flex gap-2">
<div>
<dt class="color-base-60 fw-normal">Last activity</dt>
<dd>placeholder</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>Orgs info</div>
</div>
</article>
</li>
<% end %>
</ul>
</div>
<!-- Small screen data view end -->
<!-- Large screen data view start -->
<table class="crayons-table hidden m:block" width="100%">
<thead>
<tr>
<th scope="col">Member</th>
@ -21,6 +61,7 @@
<% end %>
</tbody>
</table>
<!-- Large screen data view end -->
<div class="flex justify-end">
<%= paginate @users, theme: "admin", scope: @users, label: "Paginate users" %>

11
cypress/integration/seededFlows/adminFlows/users/userIndexView.spec.js
View file

@ -28,8 +28,8 @@ describe('User index view', () => {
cy.findByRole('button', { name: 'Search' }).click();
// The table headers consistitute a row, plus one result
cy.findAllByRole('row').should('have.length', 2);
// Coreect search result should appear
cy.findByRole('heading', { name: 'Admin McAdmin' }).should('exist');
});
it('Filters for a user', () => {
@ -41,8 +41,11 @@ describe('User index view', () => {
cy.findByRole('combobox', { name: 'User role' }).select('super_admin');
cy.findByRole('button', { name: 'Filter' }).click();
// Table header, 'normal' admin and apple auth admin
cy.findAllByRole('row').should('have.length', 3);
// Search results should include these two results
cy.findByRole('heading', { name: 'Admin McAdmin' }).should('exist');
cy.findByRole('heading', { name: 'Apple Auth Admin User' }).should(
'exist',
);
});
it('Prevents both search and filter widgets being visible at the same time', () => {