bterkuile/fizzy
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #2349 from basecamp/card-placeholder-mobile

Browse Source 
Clean up blank slates
This commit is contained in:
Andy Smith
2026-01-12 15:46:57 -06:00
committed by GitHub
parent 30928a1f5a f428bfaa7c
commit 2d118b0bcd
15 changed files with 55 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/assets/stylesheets/blank-slates.css
+14 -39
View File
@@ -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);
border-radius: 1ch;
.blank-slate {
border-radius: 0.5ch;
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;
}
}
app/assets/stylesheets/card-columns.css
+27 -1
View File
@@ -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;
}
app/assets/stylesheets/notifications.css
+1 -1
View File
@@ -30,7 +30,7 @@
}
&:has(.card--notification) {
.notifications-list__empty-message {
.notifications-list__blank-slate {
display: none;
}
}
app/assets/stylesheets/search.css
+1 -1
View File
@@ -71,7 +71,7 @@ summary {
text-align: start;
}
.search__empty {
.search__blank-slate {
margin-block: 3em;
margin-inline: auto;
inline-size: fit-content;
app/views/boards/columns/_empty_placeholder.html.erb
+2 -4
View File
@@ -1,4 +1,2 @@
<div class="blank-slate blank-slate--drag card card--hide-unless-empty">
<p>Drag cards here</p>
</div>
<div class="blank-slate blank-slate--empty card--hide-unless-empty">No cards here</div>
<div class="blank-slate blank-slate--default">No cards here</div>
<div class="blank-slate blank-slate--drag overflow-ellipsis">Drag cards here</div>
app/views/boards/show/_filtered_cards.html.erb
+1 -1
View File
@@ -3,6 +3,6 @@
<%= with_automatic_pagination :filtered_cards_paginated_container, page do %>
<%= render "cards/display/previews", cards: page.records, draggable: true %>
<% end %>
<div class="blank-slate blank-slate--empty blank-slate--filters">No cards match this filter</div>
<div class="blank-slate">No cards match this filter</div>
</div>
</section>
app/views/cards/index.html.erb
+1 -1
View File
@@ -23,7 +23,7 @@
<%= with_automatic_pagination :cards_paginated_container, @page do %>
<%= render "cards/display/previews", cards: @page.records, draggable: true %>
<% end %>
<div class="blank-slate blank-slate--empty blank-slate--filters">No cards match this filter</div>
<div class="blank-slate">No cards match this filter</div>
</div>
</section>
<% end %>
app/views/my/menus/_jump.html.erb
+1 -1
View File
@@ -26,7 +26,7 @@
<%= yield %>
<div class="nav__blank-slate blank-slate blank-slate--empty">
<div class="nav__blank-slate blank-slate">
Nothing matches that filter
</div>
</div>
app/views/notifications/index/_unread_notifications.html.erb
+1 -1
View File
@@ -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" } %>
</div>
<% else %>
<div class="notifications-list__empty-message blank-slate blank-slate--empty align-self-center">
<div class="notifications-list__blank-slate blank-slate align-self-center">
Nothing new for you
</div>
<% end %>
app/views/public/boards/columns/closeds/show.html.erb
+1 -1
View File
@@ -18,7 +18,7 @@
<%= render "cards/display/public_previews", cards: @page.records %>
<% end %>
<% else %>
<div class="blank-slate blank-slate--empty">No cards here</div>
<div class="blank-slate">No cards here</div>
<% end %>
</div>
<% end %>
app/views/public/boards/columns/not_nows/show.html.erb
+1 -1
View File
@@ -18,7 +18,7 @@
<%= render "cards/display/public_previews", cards: @page.records %>
<% end %>
<% else %>
<div class="blank-slate blank-slate--empty">No cards here</div>
<div class="blank-slate">No cards here</div>
<% end %>
</div>
<% end %>
app/views/public/boards/columns/show.html.erb
+1 -1
View File
@@ -18,7 +18,7 @@
<%= render "cards/display/public_previews", cards: @page.records %>
<% end %>
<% else %>
<div class="blank-slate blank-slate--empty">No cards here</div>
<div class="blank-slate">No cards here</div>
<% end %>
</div>
<% end %>
app/views/public/boards/columns/streams/show.html.erb
+1 -1
View File
@@ -18,7 +18,7 @@
<%= render "cards/display/public_previews", cards: @page.records %>
<% end %>
<% else %>
<div class="blank-slate blank-slate--empty">No cards here</div>
<div class="blank-slate">No cards here</div>
<% end %>
</div>
<% end %>
app/views/searches/_results.html.erb
+1 -1
View File
@@ -1,7 +1,7 @@
<section class="search">
<div class="search__results">
<% unless page.used? %>
<div class="search__empty blank-slate blank-slate--empty">
<div class="search__blank-slate blank-slate">
No matches
</div>
<% end %>
test/controllers/searches_controller_test.rb
+1 -1
View File
@@ -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