Tighten up users lists

This commit is contained in:
Jason Zimdars
2024-10-28 17:20:49 -05:00
parent 49f1520978
commit 5740a4be23
4 changed files with 12 additions and 12 deletions
+3 -3
View File
@@ -187,11 +187,11 @@
}
}
/* Seperators */
/* Separators */
.separator {
border-block: 0;
border-inline-end: 0;
border-inline-start: 1px solid var(--color-subtle-dark);
border-inline-start: 1px var(--border-style, solid) var(--border-color, currentColor);
display: inline-flex;
inline-size: 0;
}
@@ -199,7 +199,7 @@
.separator--horizontal {
block-size: 0;
border-block-end: 0;
border-block-start: 1px solid var(--color-subtle-dark);
border-block-start: 1px var(--border-style, solid) var(--border-color, currentColor);
border-inline: 0;
display: flex;
}
+1 -1
View File
@@ -5,7 +5,7 @@
<%= user.name %>
</strong>
<hr class="flex-item-grow margin-none" aria-hidden="true">
<hr class="separator--horizontal flex-item-grow" style="--border-color: var(--color-subtle-dark); --border-style: dashed" aria-hidden="true">
<%# FIXME: Move this Current.user check to a stimulus controller that just checks for admin? or the like we so we can cache user list %>
<%= button_to account_user_path(user), method: :delete, class: "btn btn--small btn--negative flex-item-no-shrink",
+4 -4
View File
@@ -1,15 +1,15 @@
<li class="flex align-center gap margin-none" data-value="<%= user.name.downcase %>">
<figure class="avatar flex-item-no-shrink" style="--avatar-size: 4ch;">
<li class="flex align-center gap-half margin-none unpad" data-value="<%= user.name.downcase %>">
<figure class="avatar flex-item-no-shrink">
<%= avatar_tag user, loading: :lazy %>
</figure>
<div class="min-width">
<div class="overflow-ellipsis fill-shade">
<div class="overflow-ellipsis">
<strong><%= user.name %></strong>
</div>
</div>
<hr class="separator" aria-hidden="true">
<hr class="separator--horizontal flex-item-grow" style="--border-color: var(--color-subtle-dark); --border-style: dashed" aria-hidden="true">
<% if user == Current.user %>
<%= hidden_field_tag "user_ids[]", user.id, id: nil %>
+4 -4
View File
@@ -16,7 +16,7 @@
</nav>
<% end %>
<div class="panel shadow center" style="--panel-size: 55ch; view-transition-name: new-bucket">
<div class="panel shadow center" style="--panel-size: 55ch;">
<%= form_with model: @bucket, class: "flex flex-column gap txt-large", controller: "form" do |form| %>
<%= image_tag "bubbles.svg", aria: { hidden: "true" }, size: 150, class: "colorize--black center" %>
@@ -24,14 +24,14 @@
<%= translation_button(:bucket_name) %>
<label class="flex-item-grow txt-large">
<%= form.text_field :name, name: "bucket[name]", class: "input full-width",
<strong><%= form.text_field :name, name: "bucket[name]", class: "input full-width",
required: true, autofocus: true, placeholder: "Give it a name…",
data: { action: "keydown.enter->form#submit:prevent" } %>
data: { action: "keydown.enter->form#submit:prevent" } %></strong>
</label>
</div>
<section class="margin-block pad-inline fill-shade border-radius">
<menu class="flex flex-column gap margin-none pad overflow-y constrain-height" data-controller="filter" data-filter-active-class="filter--active" data-filter-selected-class="selected">
<menu class="flex flex-column gap margin-none pad txt-medium" data-controller="filter" data-filter-active-class="filter--active" data-filter-selected-class="selected">
<% if User.active.count > 20 %>
<input placeholder="Filter…" class="input input--transparent full-width" type="search" autocorrect="off" autocomplete="off" data-1p-ignore="true" data-action="input->filter#filter">
<% end %>