diff --git a/app/assets/stylesheets/buttons.css b/app/assets/stylesheets/buttons.css index 11e52668c..e2710006d 100644 --- a/app/assets/stylesheets/buttons.css +++ b/app/assets/stylesheets/buttons.css @@ -39,6 +39,31 @@ opacity: 0.3; pointer-events: none; } + + [aria-busy] &:disabled { + position: relative; + + > * { + visibility: hidden; + } + + &::after { + --mask: no-repeat radial-gradient(#000 68%,#0000 71%); + --size: 1.25em; + + -webkit-mask: var(--mask), var(--mask), var(--mask); + -webkit-mask-size: 28% 45%; + animation: submitting 1s infinite linear; + aspect-ratio: 8/5; + background: currentColor; + content: ""; + inline-size: var(--size); + inset: 50%; + margin-block: calc((var(--size) / 3) * -1); + margin-inline: calc((var(--size) / 2) * -1); + position: absolute; + } + } } /* Variants diff --git a/app/assets/stylesheets/card-columns.css b/app/assets/stylesheets/card-columns.css index 7f64f7814..2e38b9447 100644 --- a/app/assets/stylesheets/card-columns.css +++ b/app/assets/stylesheets/card-columns.css @@ -208,6 +208,10 @@ z-index: -1; } + .no-transitions &:after { + transition: none; + } + .cards.is-collapsed & { block-size: 100%; flex-direction: column; diff --git a/app/assets/stylesheets/comments.css b/app/assets/stylesheets/comments.css index 33aacc74a..6720fa258 100644 --- a/app/assets/stylesheets/comments.css +++ b/app/assets/stylesheets/comments.css @@ -126,6 +126,7 @@ } .comment__body { + padding: 0; text-align: center; } @@ -135,6 +136,7 @@ var(--color-canvas) 0 1px, var(--color-ink-lightest) 1px 10px ); + padding-inline: var(--comment-padding-inline); } .reactions { diff --git a/app/assets/stylesheets/popup.css b/app/assets/stylesheets/popup.css index b258086d0..852787701 100644 --- a/app/assets/stylesheets/popup.css +++ b/app/assets/stylesheets/popup.css @@ -8,7 +8,6 @@ --popup-item-padding-inline: 0.5rem; inset: 0 auto auto 50%; - max-block-size: 80vh; min-inline-size: min(25ch, calc(100dvw - var(--block-space-double))); max-inline-size: min(55ch, calc(100dvw - var(--block-space-double))); overflow: auto; @@ -32,6 +31,10 @@ &.orient-top { inset-block: auto 0; + + &.orient-bottom { + inset-block: 0 auto; + } } &:has(.popup__footer) { diff --git a/app/assets/stylesheets/tooltips.css b/app/assets/stylesheets/tooltips.css index 9a31f48d8..20a02985b 100644 --- a/app/assets/stylesheets/tooltips.css +++ b/app/assets/stylesheets/tooltips.css @@ -19,12 +19,12 @@ text-overflow: ellipsis; &.orient-right { - inset-inline-start: 0; + inset-inline: 0 auto; translate: 0 -100%; } &.orient-left { - inset-inline-end: 0; + inset-inline: auto 0; translate: 0 -100%; } } diff --git a/app/helpers/columns_helper.rb b/app/helpers/columns_helper.rb index 793103aa7..56699d584 100644 --- a/app/helpers/columns_helper.rb +++ b/app/helpers/columns_helper.rb @@ -4,7 +4,7 @@ module ColumnsHelper tag.span(column.name, class: "overflow-ellipsis"), card_triage_path(card, column_id: column), method: :post, - class: [ "card__column-name btn", { "card__column-name--current": column == card.column } ], + class: [ "card__column-name btn", { "card__column-name--current": column == card.column && card.open? } ], form_class: "flex align-center gap-half", data: { turbo_frame: "_top" } end diff --git a/app/javascript/controllers/closureover_controller.js b/app/javascript/controllers/closureover_controller.js deleted file mode 100644 index 3c872f071..000000000 --- a/app/javascript/controllers/closureover_controller.js +++ /dev/null @@ -1,43 +0,0 @@ -import { Controller } from "@hotwired/stimulus" - -const BOTTOM_THRESHOLD = 0 - -export default class extends Controller { - static targets = [ "menu" ] - static classes = [ "orientationTop" ] - - close() { - this.menuTarget.close() - this.#orient() - } - - open() { - this.menuTarget.show() - this.#orient() - } - - toggle() { - this.menuTarget.open ? this.close() : this.open() - } - - closeOnClickOutside({ target }) { - if (!this.element.contains(target)) this.close() - } - - #orient() { - this.element.classList.toggle(this.orientationTopClass, this.#distanceToBottom < BOTTOM_THRESHOLD) - this.menuTarget.style.setProperty("--max-width", this.#maxWidth + "px") - } - - get #distanceToBottom() { - return window.innerHeight - this.#boundingClientRect.bottom - } - - get #maxWidth() { - return window.innerWidth - this.#boundingClientRect.left - } - - get #boundingClientRect() { - return this.menuTarget.getBoundingClientRect() - } -} diff --git a/app/javascript/controllers/dialog_controller.js b/app/javascript/controllers/dialog_controller.js index e9f8f990c..16204bd28 100644 --- a/app/javascript/controllers/dialog_controller.js +++ b/app/javascript/controllers/dialog_controller.js @@ -1,5 +1,6 @@ import { Controller } from "@hotwired/stimulus" import { orient } from "helpers/orientation_helpers" +import { limitHeightToViewport } from "helpers/sizing_helpers" export default class extends Controller { static targets = [ "dialog" ] @@ -21,6 +22,8 @@ export default class extends Controller { orient(this.dialogTarget) } + limitHeightToViewport(this.dialogTarget, true) + this.dialogTarget.setAttribute("aria-hidden", "false") this.dispatch("show") } @@ -38,6 +41,7 @@ export default class extends Controller { this.dialogTarget.setAttribute("aria-hidden", "true") this.dialogTarget.blur() orient(this.dialogTarget, false) + limitHeightToViewport(this.dialogTarget, false) } closeOnClickOutside({ target }) { diff --git a/app/javascript/controllers/toggle_class_controller.js b/app/javascript/controllers/toggle_class_controller.js index 039ad2e65..357525f67 100644 --- a/app/javascript/controllers/toggle_class_controller.js +++ b/app/javascript/controllers/toggle_class_controller.js @@ -24,6 +24,7 @@ export default class extends Controller { checkNone() { this.checkboxTargets.forEach(checkbox => { + if (checkbox.dataset.collectionsFormTarget === "meCheckbox") return checkbox.checked = false }) } diff --git a/app/javascript/helpers/orientation_helpers.js b/app/javascript/helpers/orientation_helpers.js index 4e3f1a3a5..672275778 100644 --- a/app/javascript/helpers/orientation_helpers.js +++ b/app/javascript/helpers/orientation_helpers.js @@ -4,7 +4,8 @@ export function orient(el, orient = true) { const directions = [ ["orient-left", spaceOnRight], ["orient-right", spaceOnLeft], - ["orient-top", spaceOnBottom] + ["orient-top", spaceOnBottom], + ["orient-bottom", spaceOnTop] ]; directions.forEach(([className, fn]) => @@ -23,3 +24,7 @@ function spaceOnRight(el) { function spaceOnBottom(el) { return window.innerHeight - el.getBoundingClientRect().bottom } + +function spaceOnTop(el) { + return el.getBoundingClientRect().top +} diff --git a/app/javascript/helpers/sizing_helpers.js b/app/javascript/helpers/sizing_helpers.js new file mode 100644 index 000000000..4b7e99645 --- /dev/null +++ b/app/javascript/helpers/sizing_helpers.js @@ -0,0 +1,12 @@ +export function limitHeightToViewport(el, sizing = true, margin = 64) { + if (!el) return + + if (sizing) { + const rect = el.getBoundingClientRect() + const top = Math.max(rect.top, margin) + const max = Math.max(0, window.innerHeight - margin - top) + el.style.maxHeight = `${max}px` + } else { + el.style.maxHeight = "" + } +} \ No newline at end of file diff --git a/app/views/cards/_container.html.erb b/app/views/cards/_container.html.erb index 32220398a..e7a673554 100644 --- a/app/views/cards/_container.html.erb +++ b/app/views/cards/_container.html.erb @@ -19,7 +19,10 @@ <%= render "cards/container/title", card: card %> <%= render "cards/display/perma/steps", card: card %> - <%= render "cards/triage/columns", card: card %> + + <% if card.published? %> + <%= render "cards/triage/columns", card: card %> + <% end %>