From 64fdbf6b8fef564a7d7e47cebb6cf732fe208251 Mon Sep 17 00:00:00 2001 From: Andy Smith Date: Mon, 12 Jan 2026 15:37:06 -0600 Subject: [PATCH 1/2] Clean up blank slates --- app/assets/stylesheets/blank-slates.css | 51 +++++-------------- app/assets/stylesheets/card-columns.css | 28 +++++++++- app/assets/stylesheets/notifications.css | 2 +- app/assets/stylesheets/search.css | 2 +- .../columns/_empty_placeholder.html.erb | 6 +-- .../boards/show/_filtered_cards.html.erb | 2 +- app/views/cards/index.html.erb | 2 +- app/views/my/menus/_jump.html.erb | 2 +- .../index/_unread_notifications.html.erb | 2 +- .../boards/columns/closeds/show.html.erb | 2 +- .../boards/columns/not_nows/show.html.erb | 2 +- app/views/public/boards/columns/show.html.erb | 2 +- .../boards/columns/streams/show.html.erb | 2 +- app/views/searches/_results.html.erb | 2 +- test/controllers/searches_controller_test.rb | 2 +- 15 files changed, 54 insertions(+), 55 deletions(-) diff --git a/app/assets/stylesheets/blank-slates.css b/app/assets/stylesheets/blank-slates.css index aa221c452..90532c33c 100644 --- a/app/assets/stylesheets/blank-slates.css +++ b/app/assets/stylesheets/blank-slates.css @@ -1,46 +1,21 @@ +/* Styles for the blank slate. To manage when they are shown/hidden, do so in context */ + @layer components { - .blank-slate--drag { - box-shadow: none !important; - color: color-mix(in srgb, var(--card-color) 70%, var(--color-canvas)); - - p { - font-size: var(--text-small); - overflow: hidden; - text-align: center; - text-overflow: ellipsis; - white-space: nowrap; - } - - .cards--maybe & { - background-color: var(--card-bg-color) !important; - } - - .cards--grid & { - display: none; - } - } - - .blank-slate--empty { - border: 2px dashed var(--color-ink-light); + .blank-slate { border-radius: 1ch; + border: 2px dashed var(--color-ink-lighter); color: var(--color-ink-dark); - margin-block-start: 2dvh; - padding: 1ch 2ch; - rotate: -3deg; font-weight: 500; - - .cards:has(.card) & { - display: none; - } + margin-block-start: 2dvh; + padding: 1.5ch 2ch; + rotate: -3deg; } - .blank-slate--filters { - .cards--grid:has(.card) & { - display: none; - } - } - - .cards__list:has(> :not(.blank-slate)) .card--hide-unless-empty { - display: none; + .blank-slate--drag { + background-color: color-mix(in srgb, transparent, var(--card-color) 5%); + border-color: color-mix(in srgb, transparent, var(--card-color) 10%); + color: color-mix(in srgb, transparent, var(--card-color) 75%); + margin-block-start: 0; + rotate: 0deg; } } diff --git a/app/assets/stylesheets/card-columns.css b/app/assets/stylesheets/card-columns.css index f60e8da73..4edb06c64 100644 --- a/app/assets/stylesheets/card-columns.css +++ b/app/assets/stylesheets/card-columns.css @@ -255,6 +255,27 @@ } } } + + &:has(.card) { + .blank-slate { + display: none; + } + } + + /* Use the default blank-slate on small viewports since drag-and-drop isn't available */ + [data-controller~="drag-and-drop"] & { + @media (max-width: 639px) { + .blank-slate--drag { + display: none; + } + } + + @media (min-width: 640px) { + .blank-slate--default { + display: none; + } + } + } } .cards__new-column { @@ -315,6 +336,10 @@ inline-size: fit-content; margin: 0 0 0 auto; } + + .blank-slate--drag { + display: none; + } } /* Column Elements @@ -731,7 +756,8 @@ .cards--on-deck { --card-color: var(--color-ink-light) !important; - .card { + .card, + .blank-slate { --card-color: var(--color-card-complete) !important; } diff --git a/app/assets/stylesheets/notifications.css b/app/assets/stylesheets/notifications.css index ada7324d2..91ff5750d 100644 --- a/app/assets/stylesheets/notifications.css +++ b/app/assets/stylesheets/notifications.css @@ -30,7 +30,7 @@ } &:has(.card--notification) { - .notifications-list__empty-message { + .notifications-list__blank-slate { display: none; } } diff --git a/app/assets/stylesheets/search.css b/app/assets/stylesheets/search.css index fcd4563ca..5691ac5e5 100644 --- a/app/assets/stylesheets/search.css +++ b/app/assets/stylesheets/search.css @@ -71,7 +71,7 @@ summary { text-align: start; } - .search__empty { + .search__blank-slate { margin-block: 3em; margin-inline: auto; inline-size: fit-content; diff --git a/app/views/boards/columns/_empty_placeholder.html.erb b/app/views/boards/columns/_empty_placeholder.html.erb index d9da8a896..21e709b84 100644 --- a/app/views/boards/columns/_empty_placeholder.html.erb +++ b/app/views/boards/columns/_empty_placeholder.html.erb @@ -1,4 +1,2 @@ -
-

Drag cards here

-
-
No cards here
+
No cards here
+
Drag cards here
diff --git a/app/views/boards/show/_filtered_cards.html.erb b/app/views/boards/show/_filtered_cards.html.erb index 4e4d8f749..53b25f80f 100644 --- a/app/views/boards/show/_filtered_cards.html.erb +++ b/app/views/boards/show/_filtered_cards.html.erb @@ -3,6 +3,6 @@ <%= with_automatic_pagination :filtered_cards_paginated_container, page do %> <%= render "cards/display/previews", cards: page.records, draggable: true %> <% end %> -
No cards match this filter
+
No cards match this filter
diff --git a/app/views/cards/index.html.erb b/app/views/cards/index.html.erb index a7e4769f5..20bbfac98 100644 --- a/app/views/cards/index.html.erb +++ b/app/views/cards/index.html.erb @@ -23,7 +23,7 @@ <%= with_automatic_pagination :cards_paginated_container, @page do %> <%= render "cards/display/previews", cards: @page.records, draggable: true %> <% end %> -
No cards match this filter
+
No cards match this filter
<% end %> diff --git a/app/views/my/menus/_jump.html.erb b/app/views/my/menus/_jump.html.erb index 1f1ea70c9..f22bedf23 100644 --- a/app/views/my/menus/_jump.html.erb +++ b/app/views/my/menus/_jump.html.erb @@ -26,7 +26,7 @@ <%= yield %> -
+
Nothing matches that filter
diff --git a/app/views/notifications/index/_unread_notifications.html.erb b/app/views/notifications/index/_unread_notifications.html.erb index b8b9618d1..4890a4822 100644 --- a/app/views/notifications/index/_unread_notifications.html.erb +++ b/app/views/notifications/index/_unread_notifications.html.erb @@ -5,7 +5,7 @@ <%= button_to "Mark all as read", bulk_reading_path, class: "btn txt-small", form: { data: { turbo: false } }, data: { action: "badge#clear" } %> <% else %> -
+
Nothing new for you
<% end %> diff --git a/app/views/public/boards/columns/closeds/show.html.erb b/app/views/public/boards/columns/closeds/show.html.erb index 21977743e..61ce3887d 100644 --- a/app/views/public/boards/columns/closeds/show.html.erb +++ b/app/views/public/boards/columns/closeds/show.html.erb @@ -18,7 +18,7 @@ <%= render "cards/display/public_previews", cards: @page.records %> <% end %> <% else %> -
No cards here
+
No cards here
<% end %>
<% end %> diff --git a/app/views/public/boards/columns/not_nows/show.html.erb b/app/views/public/boards/columns/not_nows/show.html.erb index 786cb7afb..3dad8bcfe 100644 --- a/app/views/public/boards/columns/not_nows/show.html.erb +++ b/app/views/public/boards/columns/not_nows/show.html.erb @@ -18,7 +18,7 @@ <%= render "cards/display/public_previews", cards: @page.records %> <% end %> <% else %> -
No cards here
+
No cards here
<% end %> <% end %> diff --git a/app/views/public/boards/columns/show.html.erb b/app/views/public/boards/columns/show.html.erb index 6f0d2542f..a8a86451b 100644 --- a/app/views/public/boards/columns/show.html.erb +++ b/app/views/public/boards/columns/show.html.erb @@ -18,7 +18,7 @@ <%= render "cards/display/public_previews", cards: @page.records %> <% end %> <% else %> -
No cards here
+
No cards here
<% end %> <% end %> diff --git a/app/views/public/boards/columns/streams/show.html.erb b/app/views/public/boards/columns/streams/show.html.erb index 4df8c2b12..5566a7955 100644 --- a/app/views/public/boards/columns/streams/show.html.erb +++ b/app/views/public/boards/columns/streams/show.html.erb @@ -18,7 +18,7 @@ <%= render "cards/display/public_previews", cards: @page.records %> <% end %> <% else %> -
No cards here
+
No cards here
<% end %> <% end %> diff --git a/app/views/searches/_results.html.erb b/app/views/searches/_results.html.erb index 602878c65..0b622e95d 100644 --- a/app/views/searches/_results.html.erb +++ b/app/views/searches/_results.html.erb @@ -1,7 +1,7 @@
<% unless page.used? %> -
+
No matches
<% end %> diff --git a/test/controllers/searches_controller_test.rb b/test/controllers/searches_controller_test.rb index 14bd91e64..70ec15da9 100644 --- a/test/controllers/searches_controller_test.rb +++ b/test/controllers/searches_controller_test.rb @@ -39,7 +39,7 @@ class SearchesControllerTest < ActionDispatch::IntegrationTest # Searching with non-existent card id get search_path(q: "999999", script_name: "/#{@account.external_account_id}") assert_select "form[data-controller='auto-submit']", count: 0 - assert_select ".search__empty", text: "No matches" + assert_select ".search__blank-slate", text: "No matches" end test "search highlights matched terms with proper HTML marks" do From f428bfaa7c3234a7a79b13785b0bc66d50c5c4e9 Mon Sep 17 00:00:00 2001 From: Andy Smith Date: Mon, 12 Jan 2026 15:43:59 -0600 Subject: [PATCH 2/2] Adjust border radius --- app/assets/stylesheets/blank-slates.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/assets/stylesheets/blank-slates.css b/app/assets/stylesheets/blank-slates.css index 90532c33c..5db13ef7f 100644 --- a/app/assets/stylesheets/blank-slates.css +++ b/app/assets/stylesheets/blank-slates.css @@ -2,7 +2,7 @@ @layer components { .blank-slate { - border-radius: 1ch; + border-radius: 0.5ch; border: 2px dashed var(--color-ink-lighter); color: var(--color-ink-dark); font-weight: 500;