Basic turbo todo list implementation

Based on:

https://webcrunch.com/posts/digging-into-turbo-with-ruby-on-rails-7
This commit is contained in:
2024-07-28 23:53:35 +02:00
parent 84e6e43812
commit ea5d597fc7
8 changed files with 72 additions and 66 deletions

View File

@@ -1,4 +1,4 @@
<%= form_with(model: todo, class: "contents") do |form| %>
<%= form_with(model: todo, class: "contents", id: "#{dom_id(todo)}_form") do |form| %>
<% if todo.errors.any? %>
<div id="error_explanation" class="bg-red-50 text-red-500 px-3 py-2 font-medium rounded-lg mt-3">
<h2><%= pluralize(todo.errors.count, "error") %> prohibited this todo from being saved:</h2>
@@ -11,17 +11,14 @@
</div>
<% end %>
<div class="my-5">
<%= form.label :title %>
<%= form.text_field :title, class: "block shadow rounded-md border border-gray-400 outline-none px-3 py-2 mt-2 w-full" %>
</div>
<div class="mb-6">
<%= form.label :title, class: "sr-only" %>
<div class="relative">
<%= form.text_field :title, class: "block shadow-sm rounded-full border border-gray-200 outline-none px-6 py-4 w-full focus:border-sky-300 focus:outline-none focus:ring-4 focus:ring-sky-50 text-lg placeholder:text-gray-400", placeholder: "Add a new todo" %>
<div class="my-5">
<%= form.label :status %>
<%= form.number_field :status, class: "block shadow rounded-md border border-gray-400 outline-none px-3 py-2 mt-2 w-full" %>
</div>
<div class="inline">
<%= form.submit class: "rounded-lg py-3 px-5 bg-blue-600 text-white inline-block font-medium cursor-pointer" %>
<div class="absolute top-0 right-0">
<%= form.submit class: "mt-px rounded-full py-4 px-5 bg-sky-500 text-white font-medium cursor-pointer border-2 border-sky-500 hover:bg-sky-600 hover:border-sky-600" %>
</div>
</div>
</div>
<% end %>