adam/bones73k
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

improved user_management data display & sorting for mobile & desktop

Browse source
This commit is contained in:
Adam Piontek 2021-03-09 10:20:47 -05:00
parent dc80790e59
commit efaa296e5d
3 changed files with 34 additions and 20 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
assets/css/app.scss
View file

@ -41,17 +41,17 @@
}
/* style icon */
.inner-addon .icon {
.inner-addon > .icon {
position: absolute;
padding: 0.5625rem 0.5rem;
pointer-events: none;
}
/* align icon */
.inner-addon .icon.is-left {
.inner-addon > .icon.is-left {
left: 0px;
}
.inner-addon .icon.is-right {
.inner-addon > .icon.is-right {
right: 0px;
}

1
assets/js/app.js
View file

@ -19,6 +19,7 @@ import "../node_modules/bootstrap-icons/icons/key-fill.svg"; // pw confirm field
import "../node_modules/bootstrap-icons/icons/lock.svg"; // current pw field
import "../node_modules/bootstrap-icons/icons/shield.svg"; // role
// live tables
import "../node_modules/bootstrap-icons/icons/arrow-down-up.svg"; // sort
import "../node_modules/bootstrap-icons/icons/funnel.svg"; // filter
import "../node_modules/bootstrap-icons/icons/x-circle-fill.svg"; // clear filter
import "../node_modules/bootstrap-icons/icons/sort-down-alt.svg";

47
lib/bones73k_web/live/user_management/index.html.leex
View file

@ -22,24 +22,47 @@
</h2>
<%# filtering and new item creation %>
<div class="d-flex flex-column flex-sm-row justify-content-between align-items-start align-items-sm-end mb-3">
<div class="row justify-content-between align-items-start align-items-sm-end mb-3">
<div class="col-12 col-sm-6 col-lg-4 col-xl-3">
<%= live_patch to: Routes.user_management_index_path(@socket, :new, Enum.into(@query, [])),
class: "btn btn-primary mb-3 mb-sm-0" do %>
<%= icon_div @socket, "bi-person-plus", [class: "icon baseline me-1"] %>
New User
<% end %>
</div>
<div class="col-12 d-block d-sm-none">
<%= form_for :sort, "#", [phx_change: "sort-by-change"], fn srt -> %>
<%= label srt, :sort_by, class: "visually-hidden" %>
<div class="input-group inner-addon left-addon mb-3 mb-sm-0">
<%= icon_div @socket, "bi-arrow-down-up", [class: "icon is-left text-muted fs-5", style: "z-index:1001;"], [style: "padding: 1px;"] %>
<%= Phoenix.HTML.Form.select srt, :sort_by, ["Email": "email", "Role": "role", "Created at": "inserted_at"], value: @query.sort_by, class: "form-select" %>
<button class="btn btn-primary" type="button" aria-label="Change sort order" phx-click="sort-order-change">
<%= icon_div @socket, (@query.sort_order == "desc" && "bi-sort-up-alt" || "bi-sort-down-alt"), [class: "icon baseline"] %>
</button>
</div>
<% end %>
</div>
<div class="col-12 col-sm-6 col-lg-4 col-xl-3">
<%= form_for :filter, "#", [phx_change: "filter-change"], fn flt -> %>
<%= label flt, :filter, class: "visually-hidden" %>
<div class="inner-addon left-addon right-addon">
<%= icon_div @socket, "bi-funnel", [class: "icon is-left text-muted fs-5"] %>
<%= if @query.filter != "" do %>
<%= icon_div @socket, "bi-x-circle-fill", [class: "icon is-right text-primary fs-5"], [role: "img", aria_hidden: false, aria_label: "Clear filter", class: "cursor-pointer pe-auto", phx_click: "filter-clear"] %>
<% end %>
<%= text_input flt, :filter, name: "filter", class: "form-control", placeholder: "Filter users...", value: @query.filter %>
<%= text_input flt, :filter,
name: "filter",
value: @query.filter,
class: "form-control",
placeholder: "Filter users",
aria_label: "Filter users"
%>
</div>
<% end %>
</div>
</div>
<%# mobile data cards %>
@ -65,13 +88,8 @@
<dd class="col-sm-9"><%= dt_out(user.inserted_at) %></dd>
<dt class="col-sm-3">
Confirmed?
<%= if user.confirmed_at do %>
<span class="visually-hidden">Yes</span>
<%= icon_div @socket, "bi-check", [class: "icon baseline fs-4 text-success"], [role: "img", aria_hidden: false] %>
<% else %>
<span class="visually-hidden">No</span>
<%= icon_div @socket, "bi-x", [class: "icon baseline fs-4 text-warning"], [role: "img", aria_hidden: false] %>
<% end %>
<span class="visually-hidden"><%= user.confirmed_at && "Yes" || "No" %></span>
<input type="checkbox" class="form-check-input ms-1" aria-hidden="true" <%= user.confirmed_at && "checked" || "" %>>
</dt>
</dl>
@ -150,13 +168,8 @@
<td class="align-middle"><%= user.role |> Atom.to_string() |> String.capitalize() %></td>
<td class="align-middle" style="white-space: nowrap;"><%= dt_out(user.inserted_at) %></td>
<td class="align-middle">
<%= if user.confirmed_at do %>
<span class="visually-hidden">Yes</span>
<%= icon_div @socket, "bi-check", [class: "icon baseline fs-4 text-success"], [role: "img", aria_hidden: false] %>
<% else %>
<span class="visually-hidden">No</span>
<%= icon_div @socket, "bi-x", [class: "icon baseline fs-4 text-warning"], [role: "img", aria_hidden: false] %>
<% end %>
<span class="visually-hidden"><%= user.confirmed_at && "Confirmed" || "Not confirmed" %></span>
<input type="checkbox" class="form-check-input" aria-hidden="true" <%= user.confirmed_at && "checked" || "" %>>
</td>
<td class="align-middle text-end text-nowrap">