ActionTextのデザインをちょろっと変更する

微妙なところを修正したい

f:id:zykb:20220405215905g:plain

微妙なところ
・大きな画像を表示するとフォームが伸びてしまう
・投稿するとファイル名(nailchip.jpg)とサイズが表示されてしまう

キャプションが表示されないようにする

views/active_storage/blobs/_blob.html.erb

<figure class="attachment attachment--<%= blob.representable? ? "preview" : "file" %> attachment--<%= blob.filename.extension %>">
   <% if blob.representable? %>
      <%= image_tag blob.representation(resize_to_limit: local_assigns[:in_gallery] ? [ 800, 600 ] : [ 1024, 768 ]) %>
    <% end %>

     # ここから
    <figcaption class="attachment__caption"> 
      <% if caption = blob.try(:caption) %>
        <%= caption %>
      <% else %>
        <span class="attachment__name"><%= blob.filename %></span>
        <span class="attachment__size"><%= number_to_human_size blob.byte_size %></span>
      <% end %>
    </figcaption>
     # ここまで消す
 </figure>

見るとattachment_captionというクラス名がついたfigcaptionタグがあるのでごそっと消します

<figure class="attachment attachment--<%= blob.representable? ? "preview" : "file" %> attachment--<%= blob.filename.extension %>">
  <% if blob.representable? %>
    <%= image_tag blob.representation(resize_to_limit: local_assigns[:in_gallery] ? [ 800, 600 ] : [ 1024, 768 ]) %>
  <% end %>
</figure>

入力フォームが伸びないようにする

actiontext.scssが生成されているのでそこに新しくcssを記述します

app/javascript/stylesheets/layouts/actiontext.scss

trix-editor {
  min-height: 20em;
  max-height: 20em;
  overflow-y: auto;
}

overflow-y: auto;を記述することではみ出した分はスクロールされるようになります

ちょっといい感じになりました
f:id:zykb:20220405222749g:plain

おまけ

このwebアプリはスマートフォンがメインの利用想定なのですが、スマホで画面を表示するとツールバーにスクロールバーが表示されてしまうのがもやもやするのではみ出た、はみ出たところは折り返すようにしました。(はてなブログは2列表示だったので)
f:id:zykb:20220405223033p:plain

app/javascript/stylesheets/layouts/actiontext.scss

trix-toolbar {
  .trix-button-row {
    flex-wrap: wrap;
    justify-content: start;
  }
  .trix-button-group:not(:first-child) {
    margin-left: 0;
  }
  .trix-button-group {
    margin-right: 1.5vw;
  }
}