diff --git a/app/assets/stylesheets/card-perma.css b/app/assets/stylesheets/card-perma.css index be59dac52..7a249ec62 100644 --- a/app/assets/stylesheets/card-perma.css +++ b/app/assets/stylesheets/card-perma.css @@ -90,9 +90,20 @@ @media (max-width: 639px) { border: 1px solid var(--card-color); border-radius: 0.25em; - overflow: hidden; + flex-direction: row; + gap: 0; + overflow: auto; max-inline-size: 100%; padding: 0; + position: relative; + + & > form { + max-inline-size: 25ch; + } + + & > form + form:not(:has(.card__column-name--current)) { + box-shadow: -1px 0 0 0 var(--color-container); + } } } diff --git a/app/helpers/columns_helper.rb b/app/helpers/columns_helper.rb index 222d41357..8c7bc0c0e 100644 --- a/app/helpers/columns_helper.rb +++ b/app/helpers/columns_helper.rb @@ -6,8 +6,8 @@ module ColumnsHelper method: :post, class: [ "card__column-name btn", { "card__column-name--current": column == card.column && card.open? } ], style: "--column-color: #{column.color}", - form_class: "flex align-center gap-half", - data: { turbo_frame: "_top" } + form_class: "flex gap-half", + data: { turbo_frame: "_top", scroll_to_target: column == card.column && card.open? ? "target" : nil } end def column_tag(id:, name:, drop_url:, collapsed: true, selected: nil, card_color: "var(--color-card-default)", data: {}, **properties, &block) diff --git a/app/javascript/controllers/scroll_to_controller.js b/app/javascript/controllers/scroll_to_controller.js new file mode 100644 index 000000000..aad761fd8 --- /dev/null +++ b/app/javascript/controllers/scroll_to_controller.js @@ -0,0 +1,19 @@ +import { Controller } from "@hotwired/stimulus" + +export default class extends Controller { + static targets = [ "target" ] + + connect() { + this.#scrollTargetIntoView() + } + + #scrollTargetIntoView() { + if(this.hasTargetTarget) { + this.element.scrollTo({ + top: this.targetTarget.offsetTop - this.element.offsetHeight / 2 + this.targetTarget.offsetHeight / 2, + left: this.targetTarget.offsetLeft - this.element.offsetWidth / 2 + this.targetTarget.offsetWidth / 2, + behavior: "instant" + }) + } + } +} diff --git a/app/views/cards/columns/edit.html.erb b/app/views/cards/columns/edit.html.erb index a2ad2c819..586fac20f 100644 --- a/app/views/cards/columns/edit.html.erb +++ b/app/views/cards/columns/edit.html.erb @@ -1,5 +1,5 @@ <%= turbo_frame_tag @card, :columns do %> -