diff --git a/app/assets/stylesheets/bubbles.css b/app/assets/stylesheets/bubbles.css index ab390d71e..f5b592485 100644 --- a/app/assets/stylesheets/bubbles.css +++ b/app/assets/stylesheets/bubbles.css @@ -351,31 +351,42 @@ } .bubble__title { - -webkit-line-clamp: var(--lines, 4); - -webkit-box-orient: vertical; - display: -webkit-box; - font-size: 9cqi; - line-height: 1.2; + align-items: center; + display: flex; + flex-direction: column; + justify-content: center; margin: auto; - max-block-size: 60cqi; - max-inline-size: 60cqi; - overflow: hidden; - text-overflow: clip; - white-space: normal; - + max-block-size: 90cqi; + max-inline-size: 70cqi; + .windshield & { pointer-events: none; } a { color: var(--splat-color); + + &.bubble__title-rendered { + -webkit-line-clamp: var(--lines, 4); + -webkit-box-orient: vertical; + display: -webkit-box; + font-size: 9cqi; + font-weight: 800; + line-height: 1.2; + overflow: hidden; + text-overflow: clip; + white-space: normal; + } } textarea { --input-color: var(--bubble-color); + --input-border-radius: 0; + + font-size: 9cqi; + font-weight: 800; + line-height: 1.2; - hyphens: none; - &::selection { background-color: var(--bubble-color); color: var(--color-ink-reversed); diff --git a/app/assets/stylesheets/comments.css b/app/assets/stylesheets/comments.css index a151fd241..35a53dec5 100644 --- a/app/assets/stylesheets/comments.css +++ b/app/assets/stylesheets/comments.css @@ -12,10 +12,13 @@ } .comment { - max-inline-size: 66ch; margin-block: calc(var(--comment-padding-block) * 0.3); margin-inline: 0 auto; position: relative; + + &:not(.comment--new) { + max-inline-size: 66ch; + } } .comment--new { diff --git a/app/views/bubbles/_bubble.html.erb b/app/views/bubbles/_bubble.html.erb index f45b98c41..134b83352 100644 --- a/app/views/bubbles/_bubble.html.erb +++ b/app/views/bubbles/_bubble.html.erb @@ -10,17 +10,17 @@

<% if bubble.creating? %> <%= form_with model: bubble, url: bucket_bubble_path(bubble.bucket, bubble), data: { controller: "auto-save" } do |form| %> - <%= form.text_area :title, placeholder: "Name it…", class: "input txt-align-center full-width borderless", autofocus: bubble.title.blank?, data: { action: "auto-save#change blur->auto-save#submit keydown.enter->auto-save#submit:prevent keydown.ctrl+enter->auto-save#submit:prevent" }, rows: 5 %> + <%= form.text_area :title, placeholder: "Name it…", class: "input input--textara txt-align-center full-width borderless bubble__title-rendered", autofocus: bubble.title.blank?, data: { action: "auto-save#change blur->auto-save#submit keydown.enter->auto-save#submit:prevent keydown.ctrl+enter->auto-save#submit:prevent" }, rows: 5 %> <% end %> <% else %> <%= turbo_frame_tag bubble, :edit do %> - <%= link_to bubble_title(bubble), edit_bucket_bubble_path(bubble.bucket, bubble), class: "txt-undecorated" %> - -
- <%= render "bubbles/tags", bubble: bubble %> -
+ <%= link_to bubble_title(bubble), edit_bucket_bubble_path(bubble.bucket, bubble), class: "txt-undecorated bubble__title-rendered" %> <% end %> <% end %> + +
+ <%= render "bubbles/tags", bubble: bubble %> +

diff --git a/app/views/bubbles/edit.html.erb b/app/views/bubbles/edit.html.erb index 57bbed5c1..d84b50e2d 100644 --- a/app/views/bubbles/edit.html.erb +++ b/app/views/bubbles/edit.html.erb @@ -1,12 +1,12 @@ <%= turbo_frame_tag @bubble, :edit do %> <%= form_with model: @bubble, url: bucket_bubble_path(@bubble.bucket, @bubble), class: "flex flex-column justify-center gap full-width", data: { controller: "form" } do |form| %> <%= form.label :title, class: "flex flex-column justify-center align-center" do %> - <%= form.text_area :title, class: "input input--textara txt-align-center full-width borderless", - required: true, rows: 5, autofocus: true, placeholder: "Name it…", - data: { action: "keydown.ctrl+enter->form#submit:prevent keydown.meta+enter->form#submit:prevent keydown.esc->form#cancel focus->form#select" }, + <%= form.text_area :title, class: "input input--textara txt-align-center full-width borderless bubble__title-rendered", + required: true, autofocus: true, placeholder: "Name it…", + 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" }, style: "color: var(--spat-color); --input-border-radius: 0" %> <% end %> - <%= form.button "Save", class: "btn btn--reversed txt-small center", type: :submit do %> + <%= form.button "Save", class: "btn btn--reversed txt-small center", type: :submit, hidden: true do %> <%= image_tag "check.svg", aria: { hidden: true }, size: 24 %> Save <% end %> diff --git a/app/views/bubbles/show.html.erb b/app/views/bubbles/show.html.erb index 7d69ddfa1..5e13be7d8 100644 --- a/app/views/bubbles/show.html.erb +++ b/app/views/bubbles/show.html.erb @@ -92,17 +92,21 @@
<%= render "bubbles/bubble", bubble: @bubble %>
- - <% if @bubble.creating? %> -
- <%= button_to "Create bubble", bucket_bubble_publish_path(@bubble.bucket, @bubble), class: "btn btn--reversed" %> - <%= button_to "Save as draft", bucket_bubble_path(@bubble.bucket, @bubble), name: "bubble[status]", value: "drafted", method: :put, class: "btn btn--plain borderless fill-transparent" %> -
- <% elsif !@bubble.drafted? %> + + <% unless @bubble.drafted? || @bubble.creating? %> <%= render "bubbles/pop_toggle", bubble: @bubble %> <% end %> - <%= render "bubbles/messages", bubble: @bubble %> +
+ <%= render "bubbles/messages", bubble: @bubble %> +
+ + <% if @bubble.creating? %> +
+ <%= button_to "Save as draft", bucket_bubble_path(@bubble.bucket, @bubble), name: "bubble[status]", value: "drafted", method: :put, class: "btn btn--plain borderless fill-transparent" %> + <%= button_to "Create bubble", bucket_bubble_publish_path(@bubble.bucket, @bubble), class: "btn btn--reversed" %> +
+ <% end %>