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

Safari doesn't support CSS field-sizing: content so we can shim it for now

Browse Source
This commit is contained in:
Jason Zimdars
2025-05-29 14:19:48 -05:00
parent 6a88655ed1
commit 32ae94524a
5 changed files with 56 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/assets/stylesheets/autoresize.css
+27
View File
@@ -0,0 +1,27 @@
@layer components {
@supports not (field-sizing: content) {
.autoresize__wrapper {
display: grid !important;
position: relative;
> *, &::after {
grid-area: 1 / 1 / 2 / 2;
}
&::after {
content: attr(data-autoresize-clone-value) " ";
font: inherit;
line-height: inherit;
visibility: hidden;
white-space: pre-wrap;
}
}
.autoresize__textarea {
inset: 0;
overflow: hidden;
position: absolute;
resize: none;
}
}
}
app/assets/stylesheets/cards.css
+6
View File
@@ -174,6 +174,12 @@
line-height: 1.2;
text-wrap: balance;
@supports not (field-sizing: content) {
&:has(textarea) {
text-wrap: unset; /* Safari is annoying if you have text-wrap: balance in textareas */
}
}
.card-field__title {
&:is(textarea)::placeholder {
color: inherit;
app/javascript/controllers/autoresize_controller.js
+13
View File
@@ -0,0 +1,13 @@
import { Controller } from "@hotwired/stimulus"
export default class extends Controller {
static targets = ["textarea", "wrapper"]
connect() {
this.resize()
}
resize() {
this.wrapperTarget.setAttribute("data-autoresize-clone-value", this.textareaTarget.value)
}
}
app/views/cards/container/_title.html.erb
+5 -5
View File
@@ -10,12 +10,12 @@
</div>
<% end %>
<% else %>
<%= form_with model: card, url: collection_card_path(card.collection, card), id: "card_form", class: "card__content", data: { controller: "auto-save" } do |form| %>
<h1 class="card__title">
<%= form_with model: card, url: collection_card_path(card.collection, card), id: "card_form", class: "card__content", data: { controller: "autoresize auto-save" } do |form| %>
<h1 class="card__title autoresize__wrapper" data-autoresize-target="wrapper" data-autoresize-clone-value="">
<%= form.text_area :title, placeholder: "Name it…",
class: "input input--textarea full-width borderless txt-align-start",
autofocus: card.title.blank?,
data: { action: "auto-save#change blur->auto-save#submit keydown.enter->auto-save#submit:prevent keydown.ctrl+enter->auto-save#submit:prevent" } %>
class: "input input--textarea full-width borderless txt-align-start autoresize__textarea",
autofocus: card.title.blank?, rows: 1,
data: { autoresize_target: "textarea", action: "input->autoresize#resize auto-save#change blur->auto-save#submit keydown.enter->auto-save#submit:prevent keydown.ctrl+enter->auto-save#submit:prevent" } %>
</h1>
<div class="card__description rich-text-content margin-block-start-half margin-block-end">
<%= form.rich_textarea :description, class: "card-field__description",
app/views/cards/edit.html.erb
+5 -6
View File
@@ -1,11 +1,10 @@
<%= turbo_frame_tag @card, :edit do %>
<%= form_with model: @card, url: collection_card_path(@card.collection, @card), class: "card__content", data: { controller: "form" } do |form| %>
<%= form_with model: @card, url: collection_card_path(@card.collection, @card), class: "card__content", data: { controller: "autoresize form" } do |form| %>
<h1 class="card__title">
<%= form.label :title, class: "flex flex-column align-center" do %>
<%= form.text_area :title, class: "input input--textarea full-width borderless txt-align-start card-field__title",
required: true, autofocus: true, placeholder: "Name it…",
rows: 1,
data: { action: "keydown.enter->form#submit:prevent keydown.ctrl+enter->form#submit:prevent keydown.meta+enter->form#submit:prevent keydown.esc->form#cancel focus->form#select" } %>
<%= form.label :title, class: "flex flex-column align-center autoresize__wrapper", data: { autoresize_target: "wrapper", autoresize_clone_value: "" } do %>
<%= form.text_area :title, class: "input input--textarea full-width borderless txt-align-start card-field__title autoresize__textarea",
required: true, autofocus: true, placeholder: "Name it…", rows: 1,
data: { autoresize_target: "textarea", action: "input->autoresize#resize keydown.enter->form#submit:prevent keydown.ctrl+enter->form#submit:prevent keydown.meta+enter->form#submit:prevent keydown.esc->form#cancel focus->form#select" } %>
<% end %>
</h1>