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

Update table style for member index view (#17207)

Browse source 
* add minimal table style

* tweak table style vs member index specific style

* rename

* replace padding for smaller screens
This commit is contained in:
Suzanne Aitchison 2022-04-11 19:07:59 +01:00 • committed by GitHub
parent e2618c50f5
commit a44d09e71a
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 22 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
app/assets/stylesheets/components/tables.scss
View file

@ -65,12 +65,6 @@
}
}
&__lowercase {
th {
text-transform: none;
}
}
tbody {
tr {
&:first-child {
@ -114,4 +108,14 @@
}
}
}
&--minimal {
th {
text-transform: none;
}
td {
border-bottom: none;
}
}
}

3
app/assets/stylesheets/config/_generator.scss
View file

@ -451,7 +451,8 @@
'inline-block': inline-block,
'flex': flex,
'inline-flex': inline-flex,
'grid': grid
'grid': grid,
'table': table
),
(),
true,

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

@ -1,10 +1,12 @@
<%= 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-7">
<header class="flex flex-col l:flex-row justify-content-between l:items-center ">
<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" %>
</header>
</div>
<%= render "admin/users/index/controls" %>
</header>
<!-- Responsive screen (breakpoints below XL) data view start -->
<div class="block xl:hidden fs-s">
@ -57,20 +59,20 @@
<!-- Responsive screen (breakpoints below XL) data view end -->
<!-- XL screen data view start -->
<table class="crayons-table crayons-table__lowercase hidden xl:block" width="100%">
<thead>
<table class="crayons-table crayons-table--minimal w-100 hidden xl:table">
<thead class="member-data-heading">
<tr>
<th scope="col" class="normal-case">Member</th>
<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 class="crayons-card">
<tbody>
<% @users.includes([:organizations]).each do |user| %>
<tr>
<td>
<td class="pl-7">
<div class="flex s:items-start flex-col s:flex-row">
<%= render "admin/users/index/member_data", user: user %>
</div>