Set focus on first element of modal, fixes #1

Remove inline update of card title. At this point it's not necessary. When implemented in the future, it should not prevent mouse control of the cursor in the text box.
jbigler · Feb 25, 2024 · 99f3496 · 99f3496
1 parent c7cbae8
commit 99f3496
Show file tree

Hide file tree

Showing 4 changed files with 10 additions and 28 deletions.
diff --git a/app/views/cards/_card.html.erb b/app/views/cards/_card.html.erb
@@ -1,18 +1,10 @@
+<% url = policy(card).update? ? edit_card_path(card) : card_path(card) %>
 <li id="<%= dom_id card %>"
-    class="draggable block shadow-gray-500 max-w-sm p-3 m-2 bg-white border border-gray-200 rounded-lg shadow hover:bg-gray-100 dark:bg-gray-800 dark:border-gray-700 dark:hover:bg-gray-700 "
+    class="draggable" 
     data-sortable-update-url="<%= card_path(card) %>">
-
-    <% card_frame_id = dom_id(card, "turbo_frame") %>
-    <%= form_with model: card, class: "contents inline-edit", data: { turbo_frame: card_frame_id } do %>
-        <%= turbo_frame_tag card_frame_id, class: "contents" do %>
-            <% if policy(card).update? %>
-            <a href="<%= edit_card_path(card) %>" class="float-right">
-                <svg class="w-5 h-5" aria-hidden="true" focusable="false" data-prefix="fab" data-icon="edit" role="img" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"><path fill-rule="evenodd" clip-rule="evenodd" d="m3.99 16.854-1.314 3.504a.75.75 0 0 0 .966.965l3.503-1.314a3 3 0 0 0 1.068-.687L18.36 9.175s-.354-1.061-1.414-2.122c-1.06-1.06-2.122-1.414-2.122-1.414L4.677 15.786a3 3 0 0 0-.687 1.068zm12.249-12.63 1.383-1.383c.248-.248.579-.406.925-.348.487.08 1.232.322 1.934 1.025.703.703.945 1.447 1.025 1.934.058.346-.1.677-.348.925L19.774 7.76s-.353-1.06-1.414-2.12c-1.06-1.062-2.121-1.415-2.121-1.415z" fill="currentColor"></path></g></svg>
-            </a>
-            <%= link_to card.title, edit_card_path(card), class: "font-normal text-gray-700 dark:text-gray-400", data: { turbo_frame: "modal" } %>
-        <% else %>
-            <%= link_to card.title, card_path(card), class: "font-normal text-gray-700 dark:text-gray-400", data: { turbo_frame: "modal" } %>
-        <% end %>
-    <% end %>
-<% end %>
+    <a href="<%= url %>" data-turbo-frame="modal">
+        <div class="block shadow-gray-500 max-w-sm p-3 m-2 bg-white border border-gray-200 rounded-lg shadow hover:bg-gray-100 dark:bg-gray-800 dark:border-gray-700 dark:hover:bg-gray-700">
+            <p class="font-normal text-gray-700 dark:text-gray-400"><%= card.title %></p>
+        </div>
+    </a>
 </li>
diff --git a/app/views/cards/_inline_buttons.erb b/app/views/cards/_inline_buttons.erb
diff --git a/app/views/cards/_modal.html.erb b/app/views/cards/_modal.html.erb
@@ -17,14 +17,8 @@
     <div class="p-4 md:p-5">
       <div class="grid gap-4 mb-4 grid-cols-2">
         <div class="col-span-2">
-          <%= form.label :title, class: "block mb-2 text-sm font-medium text-gray-900 dark:text-white"  %>
-          <% card_frame_id = dom_id(card, "turbo_frame") %>
-          <%= turbo_frame_tag card_frame_id, class: "contents" do %>
-            <%= form.text_field :title, 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-600 dark:border-gray-500 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500", placeholder: "Title", required: "" %>
-            <% if card.persisted? %>
-              <%= render partial: 'inline_buttons', locals: { form: form, card: card } %>
-            <% end %>
-          <% end %>
+          <%= form.label :title, class: "block mb-2 text-sm font-medium text-gray-900 dark:text-white" %>
+          <%= form.text_field :title, 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-600 dark:border-gray-500 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500", placeholder: "Title", required: "", autofocus: "" %>
         </div>
         <div class="col-span-2">
           <%= form.label :description, class: "block mb-2 text-sm font-medium text-gray-900 dark:text-white" %>

diff --git a/app/views/lists/_modal.html.erb b/app/views/lists/_modal.html.erb
@@ -18,7 +18,7 @@
       <div class="grid gap-4 mb-4 grid-cols-2">
         <div class="col-span-2">
           <%= form.label :title, class: "block mb-2 text-sm font-medium text-gray-900 dark:text-white"  %>
-          <%= form.text_field :title, 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-600 dark:border-gray-500 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500", placeholder: "Title", required: "" %>
+          <%= form.text_field :title, 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-600 dark:border-gray-500 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500", placeholder: "Title", required: "", autofocus: "" %>
         </div>
       </div>
       <button type="submit" class="text-white inline-flex items-center bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">