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

Member index: controls layout refactor (#17927)

Browse source 
* tweak for smallest viewport

* layout essentially there

* conditionally toggle what the filter button triggers

* contain width of filter section on large screens

* reinstate old view depending on feature flag status

* add type: button (woops)
This commit is contained in:
Suzanne Aitchison 2022-06-17 10:33:43 +01:00 • committed by GitHub
parent a0d3a2a200
commit 48818a96b7
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 34 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -1,8 +1,8 @@
<%= 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="xl:p-7 pb-4">
<header class="xl:p-7 pb-4 mx-2">
<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>
<h1 class="crayons-title">Members</h1>
</div>
<%= render "admin/users/index/controls" %>
</header>

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

@ -1,6 +1,36 @@
<%= javascript_packs_with_chunks_tag "admin/users/controls", defer: true %>
<% if params[:controller] == "admin/users" %>
<!-- Small screen layout -->
<% if FeatureFlag.enabled?(:member_index_view) %>
<%= form_with url: admin_users_path, method: :get, local: true do |f| %>
<div class="flex m:flex-col xl:flex-row justify-between m:items-end xl:justify-end xl:items-center mb-4">
<%= paginate @users, theme: "admin", scope: @users, label: "Paginate users", context: "small" %>
<div class="flex justify-between xl:justify-end m:w-100 xl:w-max">
<div class="hidden m:block m:w-50 xl:w-max">
<%= render "admin/users/controls/search_field", f: f, context: "small", placeholder: "Search member...", aria_label: "Search member by name, username or email" %>
</div>
<div class="flex xl:ml-2">
<div class="m:hidden">
<%= render "admin/users/controls/expand_search_button" %>
</div>
<button type="button" aria-label="Filter" class="js-open-filter-modal-btn c-btn c-btn--icon-alone"><%= crayons_icon_tag("filter", aria_hidden: true) %></button>
<%= render "admin/users/controls/export" %>
</div>
</div>
</div>
<!-- Expandable sections -->
<div class="xl:flex xl:justify-end">
<div id="search-users" class="hidden">
<%= render "admin/users/controls/search_field", f: f, context: "small", placeholder: "Search member...", aria_label: "Search member by name, username or email" %>
</div>
<div id="filter-users" class="hidden crayons-field flex-row items-center gap-2 m:w-50">
<%= render "admin/users/controls/filter_role_field", f: f, context: "small" %>
</div>
</div>
<% end %>
<% else %>
<!-- TODO: "Phase 1" view, to be removed when Phase 2 ships -->
<!-- Small screen layout -->
<%= form_with url: admin_users_path, method: :get, local: true, class: "m:hidden" do |f| %>
<div class="flex justify-between align-items-center my-3">
<div>
@ -38,10 +68,6 @@
<div class="flex">
<%= paginate @users, theme: "admin", scope: @users, label: "Paginate users", context: "medium" %>
<%= render "admin/users/controls/export" %>
<% if FeatureFlag.enabled?(:member_index_view) %>
<button aria-label="Filter" class="js-open-filter-modal-btn c-btn c-btn--icon-alone"><%= crayons_icon_tag("filter", aria_hidden: true) %></button>
<% end %>
</div>
</div>
<% end %>