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

Admin member index: responsive UI should occupy full width (#17065)

Browse source 
* allow overflow on member index page, adjust header alignment

* some tweaks to inner mobile layout
This commit is contained in:
Suzanne Aitchison 2022-03-31 15:52:39 +01:00 • committed by GitHub
parent df4020efa6
commit 71f9a56bd8
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 15 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -22,6 +22,17 @@ label {
padding: 8px;
}
}
/****
The admin area's shared <main> has padding of var(--su-2).
In the new member index view we want inner content to be able to take up full screen width.
Since we will want to be able to do the same in later admin area redesigns, we have created a helper class,
which may be more easily removed once we no longer wish admin layouts to have a padded <main> by default.
****/
.overflow-admin-main-layout-padding {
margin: calc(-1 * var(--su-2));
}
// New pagination styles as added in Admin Member Index view. As we roll out these styles to other admin views, the above CSS will eventually be removed.
.admin-pagination {
color: var(--link-color-secondary);

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

@ -1,14 +1,14 @@
<div class="crayons-card p-3 s:p-4 m:p-7">
<div class="crayons-card overflow-admin-main-layout-padding p-4 m:p-7">
<header class="flex flex-col l:flex-row justify-content-between l:items-center ">
<h1 class="crayons-title">Members</h1>
<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">
<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>