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

Merge pull request #995 from basecamp/hover-cols

Browse Source 
Add a focus effect when hovering columns
This commit is contained in:
Jason Zimdars
2025-08-28 12:16:47 -05:00
committed by GitHub
parent 3db7644c06 3d252850fb
commit ce1b47ce41
6 changed files with 33 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/assets/stylesheets/card-columns.css
+13
View File
@@ -119,6 +119,19 @@
}
}
.cards--related:not(:hover):not(.drag-and-drop__hover-container) {
.card {
box-shadow: 0 0 1px var(--color-ink-medium);
opacity: 0.9;
transition: box-shadow 450ms ease-in-out, opacity 150ms ease-in-out;
@media (prefers-color-scheme: dark) {
opacity: 0.8;
transition: opacity 150ms ease-in-out;
}
}
}
/* Column elements
/* ------------------------------------------------------------------------ */
app/views/cards/index.html.erb
+1 -1
View File
@@ -37,7 +37,7 @@
dragover->drag-and-drop#dragOver
drop->drag-and-drop#drop
dragend->drag-and-drop#dragEnd" } do %>
<div class="card-columns">
<div class="card-columns" data-controller="related-element" data-related-element-highlight-class="cards--related">
<%= render "cards/index/engagement/on_deck", **@on_deck.to_h %>
<%= render "cards/index/engagement/considering", **@considering.to_h %>
<%= render "cards/index/engagement/doing", **@doing.to_h %>
app/views/cards/index/engagement/_considering.html.erb
+6 -1
View File
@@ -1,4 +1,9 @@
<section id="considering-cards" class="cards cards--considering" data-drag-and-drop-target="container" data-drop-target="considering">
<section id="considering-cards" class="cards cards--considering"
data-drag-and-drop-target="container"
data-drop-target="considering"
data-related-element-target="related"
data-related-element-group-value="card-columns"
data-action="mouseover->related-element#highlight mouseout->related-element#unhighlight">
<div class="cards__decoration"></div>
<%= render "cards/index/add_card_button", user_filtering: @user_filtering %>
<% if page.used? %>
app/views/cards/index/engagement/_doing.html.erb
+6 -1
View File
@@ -1,4 +1,9 @@
<section id="doing-cards" class="cards cards--doing" style="view-transition-name: cards-container;" data-drag-and-drop-target="container" data-drop-target="doing">
<section id="doing-cards" class="cards cards--doing"
data-drag-and-drop-target="container"
data-drop-target="doing"
data-related-element-target="related"
data-related-element-group-value="card-columns"
data-action="mouseover->related-element#highlight mouseout->related-element#unhighlight">
<% if workflow = filter.single_workflow %>
<%= render "cards/index/workflow_filter", workflow: workflow, filter: filter %>
<% else %>
app/views/cards/index/engagement/_on_deck.html.erb
+6 -1
View File
@@ -1,4 +1,9 @@
<section id="on-deck-cards" class="cards cards--on-deck" data-drag-and-drop-target="container" data-drop-target="on_deck">
<section id="on-deck-cards" class="cards cards--on-deck"
data-drag-and-drop-target="container"
data-drop-target="on_deck"
data-related-element-target="related"
data-related-element-group-value="card-columns"
data-action="mouseover->related-element#highlight mouseout->related-element#unhighlight">
<h2 class="cards__heading">On Deck</h2>
<% if page.used? %>
app/views/public/collections/show/_doing.html.erb
+1 -1
View File
@@ -1,4 +1,4 @@
<section id="doing-cards" class="cards cards--doing" style="view-transition-name: cards-container;">
<section id="doing-cards" class="cards cards--doing">
<h2 class="cards__heading">
Working On
</h2>