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

Merge pull request #1872 from basecamp/filters-no-results

Browse Source 
Nicer blank slates
This commit is contained in:
Andy Smith
2025-12-04 10:52:08 -06:00
committed by GitHub
parent 373f4d5116 bb149da532
commit 78ea18b5da
12 changed files with 58 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/assets/stylesheets/blank-slates.css
+42
View File
@@ -0,0 +1,42 @@
@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--considering & {
background-color: var(--card-bg-color) !important;
}
.cards--grid & {
display: none;
}
}
.blank-slate--empty {
border: 2px dashed var(--color-ink-light);
border-radius: 1ch;
color: var(--color-ink-dark);
margin-block-start: 5dvh;
padding: 1ch 2ch;
rotate: -3deg;
font-weight: 500;
.cards:not(.cards--grid) & {
display: none;
}
}
.blank-slate--filters {
.cards--grid:has(.card) & {
display: none;
}
}
}
app/assets/stylesheets/card-columns.css
-24
View File
@@ -402,30 +402,6 @@
}
}
.blank-slate--card {
box-shadow: none !important;
color: color-mix(in srgb, var(--card-color) 70%, var(--color-canvas));
.cards--considering & {
background-color: var(--card-bg-color) !important;
}
p {
font-size: var(--text-small);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
&.blank-slate-for-grid {
display: none;
.cards--grid & {
display: initial;
}
}
}
}
/* TODO: I think this is legacy now? */
.cards__heading {
display: flex;
app/views/boards/columns/closeds/show.html.erb
+3 -3
View File
@@ -18,10 +18,10 @@
<% end %>
<% else %>
<div class="cards__list">
<div class="card blank-slate blank-slate--card">
<p class="txt-align-center">Drag cards here</p>
<p class="txt-align-center blank-slate-for-grid">Nothing here</p>
<div class="blank-slate blank-slate--drag card">
<p>Drag cards here</p>
</div>
<div class="blank-slate blank-slate--empty">No cards here</div>
</div>
<% end %>
<% end %>
app/views/boards/columns/not_nows/show.html.erb
+3 -3
View File
@@ -18,10 +18,10 @@
<% end %>
<% else %>
<div class="cards__list">
<div class="card blank-slate blank-slate--card">
<p class="txt-align-center">Drag cards here</p>
<p class="txt-align-center blank-slate-for-grid">Nothing here</p>
<div class="blank-slate blank-slate--drag card">
<p>Drag cards here</p>
</div>
<div class="blank-slate blank-slate--empty">No cards here</div>
</div>
<% end %>
<% end %>
app/views/boards/columns/show.html.erb
+3 -3
View File
@@ -18,10 +18,10 @@
<% end %>
<% else %>
<div class="cards__list">
<div class="card blank-slate blank-slate--card">
<p class="txt-align-center">Drag cards here</p>
<p class="txt-align-center blank-slate-for-grid">Nothing here</p>
<div class="blank-slate blank-slate--drag card">
<p>Drag cards here</p>
</div>
<div class="blank-slate blank-slate--empty">No cards here</div>
</div>
<% end %>
<% end %>
app/views/boards/columns/streams/show.html.erb
+1 -3
View File
@@ -17,9 +17,7 @@
<%= render "boards/columns/list", cards: @page.records, draggable: true %>
<% end %>
<% else %>
<div class="card blank-slate blank-slate--card">
<p class="txt-align-center blank-slate-for-grid">Nothing here</p>
</div>
<div class="blank-slate blank-slate--empty">No cards here</div>
<% end %>
<% end %>
</section>
app/views/boards/show/_filtered_cards.html.erb
+1
View File
@@ -2,4 +2,5 @@
<%= 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>
</section>
app/views/cards/index.html.erb
+1
View File
@@ -22,5 +22,6 @@
<%= 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>
</section>
<% end %>
app/views/public/boards/columns/closeds/show.html.erb
+1 -3
View File
@@ -17,9 +17,7 @@
<%= render "public/boards/columns/list", cards: @page.records %>
<% end %>
<% else %>
<div class="card blank-slate blank-slate--card">
<p class="txt-align-center txt-normal">No cards here</p>
</div>
<div class="blank-slate blank-slate--empty">No cards here</div>
<% end %>
<% end %>
</section>
app/views/public/boards/columns/not_nows/show.html.erb
+1 -3
View File
@@ -17,9 +17,7 @@
<%= render "public/boards/columns/list", cards: @page.records %>
<% end %>
<% else %>
<div class="card blank-slate blank-slate--card">
<p class="txt-align-center txt-normal">No cards here</p>
</div>
<div class="blank-slate blank-slate--empty">No cards here</div>
<% end %>
<% end %>
</section>
app/views/public/boards/columns/show.html.erb
+1 -3
View File
@@ -17,9 +17,7 @@
<%= render "public/boards/columns/list", cards: @page.records %>
<% end %>
<% else %>
<div class="card blank-slate blank-slate--card">
<p class="txt-align-center txt-normal">No cards here</p>
</div>
<div class="blank-slate blank-slate--empty">No cards here</div>
<% end %>
<% end %>
</section>
app/views/public/boards/columns/streams/show.html.erb
+1 -3
View File
@@ -17,9 +17,7 @@
<%= render "public/boards/columns/list", cards: @page.records %>
<% end %>
<% else %>
<div class="card blank-slate blank-slate--card">
<p class="txt-align-center txt-normal">No cards here</p>
</div>
<div class="blank-slate blank-slate--empty">No cards here</div>
<% end %>
<% end %>
</section>