Use proper tags, adjust spacing, reset list height

This commit is contained in:
Andy Smith
2025-08-05 16:40:46 -05:00
parent 6df28577d9
commit 4ab48a0d9a
5 changed files with 17 additions and 29 deletions
+4 -3
View File
@@ -1,7 +1,8 @@
.users-list {
max-block-size: 40dvh;
overflow: auto;
padding-block: 1ch;
--btn-size: 4ch;
--avatar-size: var(--btn-size);
inline-size: 100%;
li + li {
margin-block-start: 1ch;
-10
View File
@@ -191,17 +191,7 @@
/* Lists */
:where(.list-style-none) {
margin: 0 auto;
min-inline-size: 0;
padding: 0;
li {
display: block;
margin: 0;
max-inline-size: 100%;
min-inline-size: 0;
padding: 0;
text-align: start;
}
}
/* Accessibility */
+5 -6
View File
@@ -1,9 +1,8 @@
<li class="flex align-center gap-half pad-inline" data-filter-target="item">
<%= avatar_tag user, hidden_for_screen_reader: true %>
<strong class="overflow-ellipsis">
<%= link_to user.name, user, class: "txt-ink btn btn--plain" %>
</strong>
<li class="flex align-center gap-half" data-filter-target="item">
<%= link_to user, class: "txt-ink flex gap-half align-center min-width" do %>
<%= avatar_preview_tag user, hidden_for_screen_reader: true %>
<strong class="overflow-ellipsis"><%= user.name %></strong>
<% end %>
<hr class="separator--horizontal flex-item-grow" style="--border-color: var(--color-ink-medium); --border-style: dashed" aria-hidden="true">
@@ -1,5 +1,5 @@
<div class="panel shadow center flex flex-column">
<strong class="divider txt-large">Do or Die</strong>
<div class="panel shadow center flex flex-column gap">
<h2 class="divider txt-large">Do or Die</h2>
<p class="margin-none-block-start">Choose default settings for this account. You can override them in individual collections.</p>
<%= render "entropy/auto_close", model: account.default_entropy_configuration, url: account_entropy_configuration_path %>
</div>
+6 -8
View File
@@ -1,12 +1,10 @@
<div class="panel shadow center flex flex-column">
<strong class="divider txt-large margin-block-end">People on the account</strong>
<div class="panel shadow center flex flex-column gap" data-controller="filter">
<h2 class="divider txt-large">People on the account</h2>
<%#= render "accounts/invite" # Scheduled work in https://3.basecamp.com/2914079/buckets/37331921/todos/8746162337 %>
<div class="flex flex-column" data-controller="filter">
<input placeholder="Filter…" class="input input--transparent full-width" type="search" autocorrect="off" autocomplete="off" data-1p-ignore="true" data-filter-target="input" data-action="input->filter#filter">
<input placeholder="Filter…" class="input input--transparent full-width" type="search" autocorrect="off" autocomplete="off" data-1p-ignore="true" data-filter-target="input" data-action="input->filter#filter">
<div data-filter-target="list" class="users-list">
<%= render partial: "accounts/user", collection: users %>
</div>
</div>
<ul class="users-list list-style-none" data-filter-target="list">
<%= render partial: "accounts/user", collection: users %>
</ul>
</div>