refactor: preview field tweaks (#2911)

avo-hq · Jun 28, 2024 · 7cdc586 · 7cdc586
1 parent 17335f9
commit 7cdc586
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 9 deletions.
diff --git a/app/components/avo/field_wrapper_component.html.erb b/app/components/avo/field_wrapper_component.html.erb
@@ -7,7 +7,7 @@
     "h-full md:pt-0": !stacked?,
     "md:h-10 ": !stacked? && short?,
     "md:h-14 ": !stacked? && !short?,
-    "md:w-48 xl:w-64": compact?,
+    "md:w-48": compact?,
     "md:w-64": !compact?,
   }), data: {slot: "label"} do %>
     <% if form.present? %>
@@ -17,9 +17,13 @@
     <% end %>
     <% if on_edit? && field.is_required? %> <span class="text-red-600 ml-1">*</span> <% end %>
   <% end %>
-  <%= content_tag :div, class: class_names("flex-1 flex flex-row md:min-h-inherit py-2 px-6", @field.get_html(:classes, view: view, element: :content), {
-    "pb-4": stacked?,
-  }), data: {slot: "value"} do %>
+  <%= content_tag :div, class: class_names("flex-1 flex flex-row md:min-h-inherit px-6",
+    @field.get_html(:classes, view: view, element: :content),
+      {
+        "pb-4": stacked?,
+        "py-2": !compact?,
+        "py-1": compact?,
+      }), data: {slot: "value"} do %>
     <div class="self-center w-full <% unless full_width? || compact? || stacked? %> md:w-8/12 has-sidebar:w-full <% end %>">
       <% if on_show? %>
         <% if field.value.blank? and dash_if_blank %>

diff --git a/app/components/avo/field_wrapper_component.rb b/app/components/avo/field_wrapper_component.rb
@@ -48,7 +48,20 @@ def initialize(
   end
 
   def classes(extra_classes = "")
-    "field-wrapper relative flex flex-col grow pb-2 md:pb-0 leading-tight min-h-14 h-full #{stacked? ? "field-wrapper-layout-stacked" : "field-wrapper-layout-inline md:flex-row md:items-center"} #{compact? ? "field-wrapper-size-compact" : "field-wrapper-size-regular"} #{full_width? ? "field-width-full" : "field-width-regular"} #{@classes || ""} #{extra_classes || ""} #{@field.get_html(:classes, view: view, element: :wrapper)}"
+    class_names("field-wrapper relative flex flex-col grow pb-2 md:pb-0 leading-tight h-full",
+      @classes,
+      extra_classes,
+      @field.get_html(:classes, view: view, element: :wrapper),
+      {
+        "min-h-14": !short?,
+        "min-h-10": short?,
+        "field-wrapper-size-compact": compact?,
+        "field-wrapper-size-regular": !compact?,
+        "field-width-full": full_width?,
+        "field-width-regular": !full_width?,
+        "field-wrapper-layout-stacked": stacked?,
+        "field-wrapper-layout-inline md:flex-row md:items-center": !stacked?
+      })
   end
 
   def style

diff --git a/app/views/avo/base/preview.html.erb b/app/views/avo/base/preview.html.erb
@@ -1,16 +1,16 @@
 <%= turbo_frame_tag params[:turbo_frame] do %>
   <%= content_tag :div, class: "-mx-2" do %>
-    <%= content_tag :div, class: "px-4 py-2" do %>
-      <div class="text-base font-semibold text-gray-800">Previewing <%= @resource.record_title %></div>
+    <%= content_tag :div, class: "px-6 py-4" do %>
+      <div class="text-md font-semibold uppercase text-gray-800">Previewing <%= @resource.record_title %></div>
     <% end %>
 
     <% if @resource.get_preview_fields.present? %>
-      <div class="mt-4 divide-y border-t">
+      <div class="mt-0 divide-y border-t">
         <% @resource.get_preview_fields.each_with_index do |field, index| %>
           <%= render field
             .hydrate(resource: @resource, record: @resource.record, user: @resource.user, view: :show)
             .component_for_view(:show)
-            .new(field: field, resource: @resource, index: index, compact: true, short: true, stacked: false)
+            .new(field: field, resource: @resource, index: index, compact: true, short: true)
           %>
         <% end %>
       </div>