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

Merge pull request #2392 from basecamp/align-column-dialog

Browse Source 
Create popup initial alignment classes
This commit is contained in:
Andy Smith
2026-01-16 14:34:48 -06:00
committed by GitHub
parent ac481d34ff 036768fede
commit 9c6d6b2088
5 changed files with 9 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/assets/stylesheets/card-columns.css
+1
View File
@@ -378,6 +378,7 @@
}
.cards__menu {
position: relative;
z-index: var(--z-popup);
}
app/assets/stylesheets/cards.css
+1 -1
View File
@@ -83,7 +83,7 @@
}
dialog {
inset: 100% auto auto 0;
inset-block-start: 100%;
}
}
app/assets/stylesheets/popup.css
+5
View File
@@ -21,11 +21,16 @@
display: var(--popup-display);
}
/* The .pop-up--align-<drection> classes are used for initial alignment.
* The orient JS helper layers on the .orient-<direction> to avoid running
* off the edge of the screen and will override .popup--align */
&:where(.popup--align-left),
&.orient-left {
inset-inline: auto 0;
transform: translateX(0);
}
&:where(.popup--align-right),
&.orient-right {
inset-inline: 0 auto;
transform: translateX(0);
app/views/boards/show/menu/_column.html.erb
+1 -1
View File
@@ -3,7 +3,7 @@
<%= icon_tag "menu-dots-horizontal", class: "translucent" %>
<span class="for-screen-reader">Column options</span>
</button>
<dialog class="popup panel flex-column gap fill-white shadow txt-small margin-block-double" data-dialog-target="dialog">
<dialog class="popup popup--align-right panel flex-column gap fill-white shadow txt-small margin-block-double" data-dialog-target="dialog">
<ul class="popup__list">
<li class="popup__item">
<button class="popup__btn btn" data-action="click->clicker#click">
app/views/cards/display/perma/_board.html.erb
+1 -1
View File
@@ -3,7 +3,7 @@
<%= icon_tag "caret-down", class: "txt-xx-small", hidden: card.closed? %>
<% end %>
<button class="card__board-picker-button btn btn--plain" data-action="click->dialog#open:stop" aria-label="Choose a board for this card" <%= "hidden" if card.closed? %>></button>
<dialog class="popup panel flex-column align-start gap-half fill-white shadow" data-dialog-target="dialog" data-action="turbo:before-morph-attribute->dialog#preventCloseOnMorphing turbo:submit-end->dialog#close">
<dialog class="popup popup--align-right panel flex-column align-start gap-half fill-white shadow" data-dialog-target="dialog" data-action="turbo:before-morph-attribute->dialog#preventCloseOnMorphing turbo:submit-end->dialog#close">
<%= turbo_frame_tag "board_picker", src: edit_card_board_path(card), target: "_top", loading: :lazy, refresh: "morph" %>
</dialog>
</div>