From 6df28577d9b256cf26b6b083f38309d4a350903b Mon Sep 17 00:00:00 2001 From: Andy Smith Date: Tue, 5 Aug 2025 16:13:56 -0500 Subject: [PATCH 1/7] Simplify dividers padding --- app/assets/stylesheets/dividers.css | 8 +++----- app/views/accounts/settings/_users.html.erb | 4 +--- 2 files changed, 4 insertions(+), 8 deletions(-) diff --git a/app/assets/stylesheets/dividers.css b/app/assets/stylesheets/dividers.css index 3b755ae36..83759c1ba 100644 --- a/app/assets/stylesheets/dividers.css +++ b/app/assets/stylesheets/dividers.css @@ -1,19 +1,17 @@ @layer components { .divider { - --divider-padding: var(--inline-space); --divider-color: var(--color-ink-light); align-items: center; display: flex; - margin-inline: calc(var(--divider-padding) * -1); - + gap: var(--inline-space); + &:before, &:after { background: var(--divider-color); block-size: var(--divider-size, 1px); content: ""; flex: 1; - margin: 0 var(--divider-padding); } } -} \ No newline at end of file +} diff --git a/app/views/accounts/settings/_users.html.erb b/app/views/accounts/settings/_users.html.erb index 60eecef33..cf5a4bced 100644 --- a/app/views/accounts/settings/_users.html.erb +++ b/app/views/accounts/settings/_users.html.erb @@ -3,9 +3,7 @@ <%#= render "accounts/invite" # Scheduled work in https://3.basecamp.com/2914079/buckets/37331921/todos/8746162337 %>
-
- -
+
<%= render partial: "accounts/user", collection: users %> From 4ab48a0d9a78d3e978e09ad6bb9b83a58d01a3ba Mon Sep 17 00:00:00 2001 From: Andy Smith Date: Tue, 5 Aug 2025 16:40:46 -0500 Subject: [PATCH 2/7] Use proper tags, adjust spacing, reset list height --- app/assets/stylesheets/users.css | 7 ++++--- app/assets/stylesheets/utilities.css | 10 ---------- app/views/accounts/_user.html.erb | 11 +++++------ .../settings/_entropy_configuration.html.erb | 4 ++-- app/views/accounts/settings/_users.html.erb | 14 ++++++-------- 5 files changed, 17 insertions(+), 29 deletions(-) diff --git a/app/assets/stylesheets/users.css b/app/assets/stylesheets/users.css index 32de82ac2..5aaab5285 100644 --- a/app/assets/stylesheets/users.css +++ b/app/assets/stylesheets/users.css @@ -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; diff --git a/app/assets/stylesheets/utilities.css b/app/assets/stylesheets/utilities.css index 1b87d121a..3c89367e6 100644 --- a/app/assets/stylesheets/utilities.css +++ b/app/assets/stylesheets/utilities.css @@ -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 */ diff --git a/app/views/accounts/_user.html.erb b/app/views/accounts/_user.html.erb index f176236c3..8846d329e 100644 --- a/app/views/accounts/_user.html.erb +++ b/app/views/accounts/_user.html.erb @@ -1,9 +1,8 @@ -
  • - <%= avatar_tag user, hidden_for_screen_reader: true %> - - - <%= link_to user.name, user, class: "txt-ink btn btn--plain" %> - +
  • + <%= link_to user, class: "txt-ink flex gap-half align-center min-width" do %> + <%= avatar_preview_tag user, hidden_for_screen_reader: true %> + <%= user.name %> + <% end %> diff --git a/app/views/accounts/settings/_entropy_configuration.html.erb b/app/views/accounts/settings/_entropy_configuration.html.erb index 68d775a83..152aaf4f4 100644 --- a/app/views/accounts/settings/_entropy_configuration.html.erb +++ b/app/views/accounts/settings/_entropy_configuration.html.erb @@ -1,5 +1,5 @@ -
    - Do or Die +
    +

    Do or Die

    Choose default settings for this account. You can override them in individual collections.

    <%= render "entropy/auto_close", model: account.default_entropy_configuration, url: account_entropy_configuration_path %>
    diff --git a/app/views/accounts/settings/_users.html.erb b/app/views/accounts/settings/_users.html.erb index cf5a4bced..6eb537f7f 100644 --- a/app/views/accounts/settings/_users.html.erb +++ b/app/views/accounts/settings/_users.html.erb @@ -1,12 +1,10 @@ -
    - People on the account +
    +

    People on the account

    <%#= render "accounts/invite" # Scheduled work in https://3.basecamp.com/2914079/buckets/37331921/todos/8746162337 %> -
    - + -
    - <%= render partial: "accounts/user", collection: users %> -
    -
    +
      + <%= render partial: "accounts/user", collection: users %> +
    From 806e1b2af2fe6f1ba816b9c3349d0deb6ca5022e Mon Sep 17 00:00:00 2001 From: Andy Smith Date: Tue, 5 Aug 2025 17:02:24 -0500 Subject: [PATCH 3/7] Simplify Name & Access on collection settings --- app/helpers/accesses_helper.rb | 4 +- app/views/collections/edit.html.erb | 10 ++-- app/views/collections/edit/_users.html.erb | 54 ++++++++++------------ 3 files changed, 32 insertions(+), 36 deletions(-) diff --git a/app/helpers/accesses_helper.rb b/app/helpers/accesses_helper.rb index d7f442114..b46f459c7 100644 --- a/app/helpers/accesses_helper.rb +++ b/app/helpers/accesses_helper.rb @@ -1,6 +1,6 @@ module AccessesHelper - def access_menu_tag(collection, &) - tag.menu class: [ "flex flex-column gap-half unpad margin-none txt-medium", { "toggler--toggled": collection.all_access? } ], data: { + def access_menu_tag(collection, **options, &) + tag.menu class: [ options[:class], { "toggler--toggled": collection.all_access? } ], data: { controller: "filter toggle-class", toggle_class_toggle_class: "toggler--toggled" }, & end diff --git a/app/views/collections/edit.html.erb b/app/views/collections/edit.html.erb index c06780237..8ee92d739 100644 --- a/app/views/collections/edit.html.erb +++ b/app/views/collections/edit.html.erb @@ -13,11 +13,13 @@ <% end %>
    -
    - Name and Access -

    Choose who can access this Collection.

    - <%= form_with model: @collection, class: "flex flex-column gap txt-large", data: { controller: "form" } do |form| %> +
    +
    +

    Name and Access

    +
    Choose who can access this Collection
    +
    + <%= form_with model: @collection, class: "display-contents", data: { controller: "form" } do |form| %> <%= render "collections/edit/name", form: form %> <%= render "collections/edit/users", collection: @collection, selected_users: @selected_users, unselected_users: @unselected_users, form: form %> diff --git a/app/views/collections/edit/_users.html.erb b/app/views/collections/edit/_users.html.erb index 866b23655..cdbaa9cd4 100644 --- a/app/views/collections/edit/_users.html.erb +++ b/app/views/collections/edit/_users.html.erb @@ -1,33 +1,27 @@ -
    - <%= access_menu_tag collection do %> -
  • -
    - <%= icon_tag "everyone" %> - Everyone -
    +<%= access_menu_tag collection, class: "flex flex-column gap pad fill-shade border-radius list-style-none full-width" do %> +
  • +
    + <%= icon_tag "everyone" %> + Everyone +
    -
    -
    Everyone
    -
    - - - - -
    • - - - -
    - +
    +
    Everyone
    -
    - <%= access_toggles_for selected_users, selected: true %> - <%= access_toggles_for unselected_users, selected: false %> -
    - <% end %> -
    + + + +
    • + + + +
    + <%= access_toggles_for selected_users, selected: true %> + <%= access_toggles_for unselected_users, selected: false %> +
    +<% end %> From 41c187b736a425d582031589d92a19a7fa6e25b5 Mon Sep 17 00:00:00 2001 From: Andy Smith Date: Tue, 5 Aug 2025 17:08:40 -0500 Subject: [PATCH 4/7] Tidy up the rest of collection settings --- app/views/collections/edit.html.erb | 4 +- .../collections/edit/_auto_close.html.erb | 6 +- .../collections/edit/_publication.html.erb | 94 +++++++++---------- .../collections/edit/_workflows.html.erb | 9 +- 4 files changed, 57 insertions(+), 56 deletions(-) diff --git a/app/views/collections/edit.html.erb b/app/views/collections/edit.html.erb index 8ee92d739..33d5915f9 100644 --- a/app/views/collections/edit.html.erb +++ b/app/views/collections/edit.html.erb @@ -32,12 +32,12 @@ <% end %>
    -
    +
    <%= render "collections/edit/workflows", collection: @collection %> <%= render "collections/edit/auto_close", collection: @collection %> <%= render "collections/edit/publication", collection: @collection %> - + <%= render "collections/edit/delete", collection: @collection %>
    diff --git a/app/views/collections/edit/_auto_close.html.erb b/app/views/collections/edit/_auto_close.html.erb index 79125016d..127aab427 100644 --- a/app/views/collections/edit/_auto_close.html.erb +++ b/app/views/collections/edit/_auto_close.html.erb @@ -1,6 +1,4 @@ <%= turbo_frame_tag @collection, :entropy_configuration do %> -
    - Do or Die - <%= render "entropy/auto_close", model: collection, url: collection_entropy_configuration_path(collection) %> -
    +

    Do or Die

    + <%= render "entropy/auto_close", model: collection, url: collection_entropy_configuration_path(collection) %> <% end %> diff --git a/app/views/collections/edit/_publication.html.erb b/app/views/collections/edit/_publication.html.erb index 32299fe88..54428a2fa 100644 --- a/app/views/collections/edit/_publication.html.erb +++ b/app/views/collections/edit/_publication.html.erb @@ -1,55 +1,55 @@ <%= turbo_frame_tag @collection, :publication do %> -
    - Public link -

    Turn on the Public link to share this collection with anyone in the world. They won’t need to log in and they won’t be able to see anything else in Fizzy.

    +
    +

    Public link

    +
    Turn on the Public link to share this collection with anyone in the world. They won’t need to log in and they won’t be able to see anything else in Fizzy.
    +
    - <% if collection.published? %> -
    -
    - <%= icon_tag "lock" %> - - <%= icon_tag "world" %> -
    + <% if collection.published? %> +
    +
    + <%= icon_tag "lock" %> + + <%= icon_tag "world" %> +
    -
    - <%= text_field_tag :publication_url, published_collection_url(collection), readonly: true, class: "full-width input fill-white" %> -
    - <%= button_to_copy_to_clipboard(published_collection_url(collection)) do %> - <%= icon_tag "copy-paste" %> - Copy public link - <% end %> -
    -
    - Add an optional description to the public page -
    - <%= form_with model: collection, class: "txt-align-start", data: { controller: "form" } do |form| %> - <%= form.rich_textarea :public_description, class: "rich-text-content txt-small", - placeholder: "Add a public note about this collection…", - data: { action: "keydown.ctrl+enter->form#submit:prevent keydown.meta+enter->form#submit:prevent keydown.esc->form#cancel:stop" } %> - <%= form.button "Save changes", type: :submit, class: "btn txt-small" %> +
    + <%= text_field_tag :publication_url, published_collection_url(collection), readonly: true, class: "full-width input fill-white" %> +
    + <%= button_to_copy_to_clipboard(published_collection_url(collection)) do %> + <%= icon_tag "copy-paste" %> + Copy public link <% end %>
    - <% else %> -
    -
    - <%= icon_tag "lock" %> - - <%= icon_tag "world" %> -
    + Add an optional description to the public page +
    + <%= form_with model: collection, class: "txt-align-start", data: { controller: "form" } do |form| %> + <%= form.rich_textarea :public_description, class: "rich-text-content txt-small", + placeholder: "Add a public note about this collection…", + data: { action: "keydown.ctrl+enter->form#submit:prevent keydown.meta+enter->form#submit:prevent keydown.esc->form#cancel:stop" } %> + <%= form.button "Save changes", type: :submit, class: "btn txt-small" %> + <% end %>
    - <% end %> -
    +
    + <% else %> +
    +
    + <%= icon_tag "lock" %> + + <%= icon_tag "world" %> +
    +
    + <% end %> <% end %> diff --git a/app/views/collections/edit/_workflows.html.erb b/app/views/collections/edit/_workflows.html.erb index 4914f4c38..180b6a4c6 100644 --- a/app/views/collections/edit/_workflows.html.erb +++ b/app/views/collections/edit/_workflows.html.erb @@ -1,6 +1,9 @@ <%= turbo_frame_tag @collection, :workflows do %> - Workflows -
    Use a Workflow to track progress in this Collection.
    +
    +

    Workflows

    +
    Use a Workflow to track progress in this Collection
    +
    +
    <% Workflow.all.each do |workflow| %>
    @@ -19,5 +22,5 @@
    <% end %>
    -

    <%= link_to "Manage workflows", workflows_path, class: "btn btn--plain txt-link", data: { turbo_frame: "_top" } %>

    + <%= link_to "Manage workflows", workflows_path, class: "btn btn--plain txt-link", data: { turbo_frame: "_top" } %> <% end %> From 4332b98d275d7a091aeb639474b6b04bed5ad89e Mon Sep 17 00:00:00 2001 From: Andy Smith Date: Wed, 6 Aug 2025 14:05:24 -0500 Subject: [PATCH 5/7] Max height on container --- app/assets/stylesheets/panels.css | 16 ----- app/assets/stylesheets/settings.css | 69 +++++++++++++++++++ app/assets/stylesheets/users.css | 10 --- app/views/accounts/_user.html.erb | 4 +- .../settings/_entropy_configuration.html.erb | 2 +- app/views/accounts/settings/_users.html.erb | 12 ++-- app/views/accounts/settings/show.html.erb | 2 +- app/views/collections/_access_toggle.erb | 12 ++-- app/views/collections/edit.html.erb | 6 +- app/views/collections/edit/_users.html.erb | 6 +- 10 files changed, 91 insertions(+), 48 deletions(-) create mode 100644 app/assets/stylesheets/settings.css delete mode 100644 app/assets/stylesheets/users.css diff --git a/app/assets/stylesheets/panels.css b/app/assets/stylesheets/panels.css index 63eeafe0a..9770cf2f8 100644 --- a/app/assets/stylesheets/panels.css +++ b/app/assets/stylesheets/panels.css @@ -8,20 +8,4 @@ max-inline-size: 100%; padding: var(--panel-padding, calc(var(--block-space) * 2)); } - - .panels--two-up { - --panel-size: auto; - - display: flex; - flex-wrap: wrap; - gap: var(--block-space-double); - align-content: start; - max-inline-size: min(100ch, 100%); - margin: auto; - - .panel { - flex: 1 1 33%; - min-inline-size: 36ch; - } - } } diff --git a/app/assets/stylesheets/settings.css b/app/assets/stylesheets/settings.css new file mode 100644 index 000000000..487b5314f --- /dev/null +++ b/app/assets/stylesheets/settings.css @@ -0,0 +1,69 @@ +@layer components { + .settings { + --settings-spacer: var(--block-space); + + /* align-items: start; */ + display: grid; + gap: calc(var(--settings-spacer) * 2); + margin: var(--block-space) auto 0; + max-inline-size: min(100ch, 100%); + + @media (min-width: 960px) { + grid-template-columns: repeat(2, 1fr); + } + } + + .settings__panel { + --panel-size: 100%; + --panel-padding: calc(var(--settings-spacer) / 1); + + display: flex; + flex-direction: column; + gap: var(--settings-spacer); + max-height: 80dvh; + + @media (min-width: 960px) { + --panel-padding: calc(var(--settings-spacer) * 2); + + max-height: calc(100dvh - 12rem); + } + } + + /* Users + /* ------------------------------------------------------------------------ */ + + .settings__user-filter { + --btn-size: 3.5ch; + --avatar-size: var(--btn-size); + + display: flex; + flex-direction: column; + gap: var(--settings-spacer); + min-height: 0; + } + + .settings__user-filter--bg { + background-color: var(--color-ink-lightest); + border-radius: 0.5em; + padding: var(--settings-spacer); + } + + .settings__user-list { + flex: 1 1 auto; + inline-size: 100%; + list-style: none; + margin: calc(var(--settings-spacer) / -4) 0; + padding: 0; + overflow: auto; + + a { + padding-block: calc(var(--settings-spacer) / 4); + + @media(any-hover: hover) { + &:hover { + text-decoration: underline; + } + } + } + } +} diff --git a/app/assets/stylesheets/users.css b/app/assets/stylesheets/users.css deleted file mode 100644 index 5aaab5285..000000000 --- a/app/assets/stylesheets/users.css +++ /dev/null @@ -1,10 +0,0 @@ -.users-list { - --btn-size: 4ch; - --avatar-size: var(--btn-size); - - inline-size: 100%; - - li + li { - margin-block-start: 1ch; - } -} diff --git a/app/views/accounts/_user.html.erb b/app/views/accounts/_user.html.erb index 8846d329e..32e0c66ed 100644 --- a/app/views/accounts/_user.html.erb +++ b/app/views/accounts/_user.html.erb @@ -7,7 +7,7 @@ <%= form_with model: user, url: user_role_path(user), data: { controller: "form" }, method: :patch do | form | %> -