update post form, add turbo

Zoncovsky · Apr 8, 2024 · e597ab1 · e597ab1
1 parent b865138
commit e597ab1
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 11 deletions.
diff --git a/app/views/main/posts/_form.html.erb b/app/views/main/posts/_form.html.erb
@@ -9,15 +9,15 @@
   </div>
 <% end %>
 
-<%= form_with(model: [:main, post], class: 'contents') do |f| %>
-  <div class="max-w-sm bg-white border border-gray-200 rounded-lg shadow dark:bg-gray-800 dark:border-gray-700">
-    <div class="py-8 px-4 mx-auto max-w-2xl">
-      <div class="grid gap-4 sm:grid-cols-2 sm:gap-6">
-        <div class="sm:col-span-2">
+<%= turbo_frame_tag post do %>
+  <%= form_with(model: [:main, post], class: 'contents') do |f| %>
+    <div class="flex flex-col items-center bg-white border border-gray-200 rounded-lg shadow md:flex-row md:max-w-xl hover:bg-gray-100 dark:border-gray-700 dark:bg-gray-800 dark:hover:bg-gray-700 mt-2">
+      <div class="flex flex-col justify-between p-4 leading-normal">
+        <div>
           <%= f.label :note, class: 'block mb-2 text-sm font-medium text-gray-900 dark:text-white' %>
           <%= f.text_area :note, class: 'bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500' %>
         </div>
-        <div class="sm:col-span-2">
+        <div>
           <% if @post.persisted? && @post.images.any? %>
             <% @post.images.each do |image| %>
               <%= image_tag image, class: 'w-20 h-20 object-cover rounded-md mt-1' %>
@@ -26,9 +26,10 @@
           <%= f.label :images, class: 'block mb-2 text-sm font-medium text-gray-900 dark:text-white' %>
           <%= f.file_field :images, class: 'block w-full text-sm text-gray-900 border border-gray-300 rounded-lg cursor-pointer bg-gray-100 dark:text-gray-400 focus:outline-none dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400' %>
         </div>
+        <div>
+          <%= f.submit class: 'inline-flex items-center px-5 py-2.5 mt-4 sm:mt-6 text-sm font-medium text-center text-white bg-primary-700 rounded-lg focus:ring-4 focus:ring-primary-200 dark:focus:ring-primary-900 hover:bg-primary-800' %>
+        </div>
       </div>
-      <%= f.submit class: 'inline-flex items-center px-5 py-2.5 mt-4 sm:mt-6 text-sm font-medium text-center text-white bg-primary-700 rounded-lg focus:ring-4 focus:ring-primary-200 dark:focus:ring-primary-900 hover:bg-primary-800' %>
-      <%= link_to 'Back', main_posts_path, class: 'inline-flex items-center px-5 py-2.5 mt-4 sm:mt-6 text-sm font-medium text-center text-white bg-primary-700 rounded-lg focus:ring-4 focus:ring-primary-200 dark:focus:ring-primary-900 hover:bg-primary-800' %>
     </div>
-  </div>
+  <% end %>
 <% end %>
diff --git a/app/views/main/posts/index.html.erb b/app/views/main/posts/index.html.erb
@@ -1,7 +1,11 @@
 <div class="w-full">
   <section class="bg-gray-50 dark:bg-gray-900 p-3 sm:p-5">
-    <div class="flex justify-between items-center">
-      <%= link_to 'New post', new_main_post_path, class: 'rounded-lg py-3 px-5 bg-blue-600 text-white block font-medium' %>
+    <div class="flex justify-center items-center">
+      <%= link_to 'New Post', new_main_post_path, class: 'rounded-lg py-3 px-5 bg-blue-600 text-white block font-medium',
+        data: {turbo_frame: dom_id(Post.new)} %>
+    </div>
+    <div class="flex justify-center items-center">
+      <%= turbo_frame_tag Post.new %>
     </div>
 
     <div class="flex justify-center items-center">