images get ratios

app/views/merged/cards/select_image.haml

@@ -1,18 +1,17 @@
 = render "layouts/merged_header"
 
 .grid.grid-cols-6.gap-2.m-8
-  .relative.block.border.border-gray-100
-    %h3.mt-4.text-lg.font-bold Add new image or select (click)
-    = form_tag(merged.images_path, multipart: true) do
-      = text_field_tag 'filename'
-      %h5.mt-4.text-lg.font-bold Name is optional
-      %p will be taken from uploaded file
-      = hidden_field_tag :redirect , card_set_image_url(@card.id,image: "NEW")
-      = file_field_tag 'image_file'
-      = submit_button 'Submit'
+  - content_for :hidden do
+    = hidden_field_tag :redirect , card_set_image_url(@card.id,image: "NEW")
+  = form_tag(merged.images_path, multipart: true) do
+    = render "merged/images/new_image"
 
   -@images.each do |name , image|
-    .relative.block.border.border-gray-100
-      = link_to( card_set_image_path( image: name)) do
-        =image_tag("#{image_root}/#{name}" , class: "h-56 w-full object-contain lg:h-72")
-        = image.name
+    .flex.flex-col.justify-start.border.rounded.border-gray-100.drop-shadow-lg
+      .flex.justify-between
+        .text-xl.m-2= image.name
+        %strong.inline-block.rounded.bg-yellow-50.px-2.py-3.text-md.font-medium
+          = aspect_ratio(image)
+      .p-2.object-contain
+        = link_to( card_set_image_path( image: name)) do
+          =image_tag("#{image_root}/#{name}" )

app/views/merged/images/_new_image.haml

@@ -0,0 +1,7 @@
+.flex.flex-col.border.border-gray-100.rounded.p-4
+  %h3.my-4.text-xl.font-bold Add new image
+  = text_field_tag 'filename' ,nil, placeholder: "Optiona name", class: "rounded"
+  %p.my-4 Name will be taken from uploaded file
+  = yield :hidden
+  = file_field_tag 'image_file' , class: "mb-8 w-full px-2 text-xl bg-clip-padding border border-solid border-gray-300  rounded"
+  = submit_button 'Submit'

app/views/merged/images/index.haml

@@ -5,25 +5,21 @@
 = render "layouts/merged_header"
 
 .grid.grid-cols-6.gap-4.m-8
-  .relative.block.border.border-gray-100
-    %h3.mt-4.text-lg.font-bold Add new image
-    = form_tag({action: :create}, multipart: true) do
-      = text_field_tag 'filename'
-      %h5.mt-4.text-lg.font-bold Name is optional
-      %p will be taken from uploaded file
-      = file_field_tag 'image_file'
-      = submit_button 'Submit'
+  = form_tag({action: :create}, multipart: true) do
+    = render "new_image"
   -@images.each do |name , image|
-    .relative.block.border.border-gray-100
-      =image_tag("cms/#{name}" , class: "h-56 w-full object-contain lg:h-72")
-      .p-3
-      %strong.inline-block.bg-yellow-400.px-3.py-1.text-md.font-medium
-        = "#{image.size}k"
-      %strong.inline-block.bg-yellow-400.px-3.py-1.text-md.font-medium
-        = image.created_at.to_date
-      %h3.mt-4.text-lg.font-bold
-        = image.name
-        %strong.inline-block.bg-yellow-400.px-3.py-1.text-xs.font-medium
+    .flex.flex-col.border.border-gray-100.rounded
+      .flex.align-center.justify-between.mb-4
+        .text-lg.font-bold.mt-2.mx-2
+          = image.name
+        %strong.inline-block.rounded.bg-yellow-200.px-3.py-1.text-md.font-medium
+          = aspect_ratio(image)
+      .w-full.object-contain.h-72
+        =image_tag("cms/#{name}")
+      .flex.justify-between.mb-8
+        %strong.inline-block.rounded.bg-orange-50.px-3.py-1.text-md.font-medium
+          = "#{image.size}k"
+        %strong.inline-block.rounded.bg-orange-50.px-3.py-1.text-md.font-medium
+          = image.created_at.to_date
+        %strong.rounded.h-10.bg-orange-50.px-5.py-2.font-medium
           =image.type
-
-        %p.mt-2.text-sm.text-gray-700

app/views/merged/sections/select_image.haml

@@ -1,17 +1,17 @@
 = render "layouts/merged_header"
 
 .grid.grid-cols-6.gap-2.m-8
-  .relative.block.border.border-gray-100
-    %h3.mt-4.text-lg.font-bold Add new image or select (click)
-    = form_tag(merged.images_path, multipart: true) do
-      = text_field_tag 'filename'
-      %h5.mt-4.text-lg.font-bold Name is optional
-      %p will be taken from uploaded file
-      = hidden_field_tag :redirect , section_set_image_url(@section.id,image: "NEW")
-      = file_field_tag 'image_file'
-      = submit_button 'Submit'
+  - content_for :hidden do
+    = hidden_field_tag :redirect , section_set_image_url(@section.id,image: "NEW")
+  = form_tag(merged.images_path, multipart: true) do
+    = render "merged/images/new_image"
+
   -@images.each do |name , image|
-    .relative.block.border.border-gray-100
-      = link_to( section_set_image_path( image: name)) do
-        =image_tag("#{image_root}/#{name}" , class: "h-56 w-full object-contain lg:h-72")
-        = image.name
+    .flex.flex-col.justify-start.border.rounded.border-gray-100.drop-shadow-lg
+      .flex.justify-between
+        .text-xl.m-2= image.name
+        %strong.inline-block.rounded.bg-yellow-50.px-2.py-3.text-md.font-medium
+          = aspect_ratio(image)
+      .p-2.object-contain
+        = link_to( section_set_image_path( image: name)) do
+          =image_tag("#{image_root}/#{name}" )