Skip to content

Improve views for mobile devices #503

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Mar 2, 2025
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Improve views for mobile devices
  • Loading branch information
patriciomacadden committed Feb 20, 2025
commit 51f6aba9f37410e09f2b23b0dead3b61c3dc4278
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@
</div>

<div class="inline">
<%%= form.submit "Save", class: "rounded-md px-3.5 py-2.5 bg-blue-600 hover:bg-blue-500 text-white inline-block font-medium cursor-pointer" %>
<%%= form.submit "Save", class: "w-full sm:w-auto text-center rounded-md px-3.5 py-2.5 bg-blue-600 hover:bg-blue-500 text-white inline-block font-medium cursor-pointer" %>
</div>
<%% end %>
</div>
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@
</div>

<div class="inline">
<%%= form.submit "Email reset instructions", class: "rounded-lg px-3.5 py-2.5 bg-blue-600 hover:bg-blue-500 text-white inline-block font-medium cursor-pointer" %>
<%%= form.submit "Email reset instructions", class: "w-full sm:w-auto text-center rounded-lg px-3.5 py-2.5 bg-blue-600 hover:bg-blue-500 text-white inline-block font-medium cursor-pointer" %>
</div>
<%% end %>
</div>
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@

<div class="col-span-6 sm:flex sm:items-center sm:gap-4">
<div class="inline">
<%%= form.submit "Sign in", class: "rounded-md px-3.5 py-2.5 bg-blue-600 hover:bg-blue-500 text-white inline-block font-medium cursor-pointer" %>
<%%= form.submit "Sign in", class: "w-full sm:w-auto text-center rounded-md px-3.5 py-2.5 bg-blue-600 hover:bg-blue-500 text-white inline-block font-medium cursor-pointer" %>
</div>

<div class="mt-4 text-sm text-gray-500 sm:mt-0">
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,6 @@

<% end -%>
<div class="inline">
<%%= form.submit class: "rounded-md px-3.5 py-2.5 bg-blue-600 hover:bg-blue-500 text-white inline-block font-medium cursor-pointer" %>
<%%= form.submit class: "w-full sm:w-auto rounded-md px-3.5 py-2.5 bg-blue-600 hover:bg-blue-500 text-white inline-block font-medium cursor-pointer" %>
</div>
<%% end %>
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,6 @@

<%%= render "form", <%= singular_table_name %>: @<%= singular_table_name %> %>

<%%= link_to "Show this <%= human_name.downcase %>", <%= model_resource_name(prefix: "@") %>, class: "ml-2 rounded-md px-3.5 py-2.5 bg-gray-100 hover:bg-gray-50 inline-block font-medium" %>
<%%= link_to "Back to <%= human_name.pluralize.downcase %>", <%= index_helper(type: :path) %>, class: "ml-2 rounded-md px-3.5 py-2.5 bg-gray-100 hover:bg-gray-50 inline-block font-medium" %>
<%%= link_to "Show this <%= human_name.downcase %>", <%= model_resource_name(prefix: "@") %>, class: "w-full sm:w-auto text-center mt-2 sm:mt-0 sm:ml-2 rounded-md px-3.5 py-2.5 bg-gray-100 hover:bg-gray-50 inline-block font-medium" %>
<%%= link_to "Back to <%= human_name.pluralize.downcase %>", <%= index_helper(type: :path) %>, class: "w-full sm:w-auto text-center mt-2 sm:mt-0 sm:ml-2 rounded-md px-3.5 py-2.5 bg-gray-100 hover:bg-gray-50 inline-block font-medium" %>
</div>
12 changes: 6 additions & 6 deletions lib/generators/tailwindcss/scaffold/templates/index.html.erb.tt
Original file line number Diff line number Diff line change
Expand Up @@ -13,13 +13,13 @@
<div id="<%= plural_table_name %>" class="min-w-full divide-y divide-gray-200 space-y-5">
<%% if @<%= plural_table_name %>.any? %>
<%% @<%= plural_table_name %>.each do |<%= singular_table_name %>| %>
<div class="flex justify-between items-center">
<div class="flex flex-col sm:flex-row justify-between items-center pb-5 sm:pb-0">
<%%= render <%= singular_table_name %> %>
<div class="space-x-2">
<%%= link_to "Show", <%= model_resource_name(singular_table_name) %>, class: "rounded-md px-3.5 py-2.5 bg-gray-100 hover:bg-gray-50 inline-block font-medium" %>
<%%= link_to "Edit", <%= edit_helper(singular_table_name, type: :path) %>, class: "rounded-md px-3.5 py-2.5 bg-gray-100 hover:bg-gray-50 inline-block font-medium" %>
<div class="inline-block">
<%%= button_to "Destroy", <%= model_resource_name %>, method: :delete, class: "rounded-md px-3.5 py-2.5 text-white bg-red-600 hover:bg-red-500 font-medium cursor-pointer", data: { turbo_confirm: "Are you sure?" } %>
<div class="w-full sm:w-auto flex flex-col sm:flex-row space-x-2 space-y-2">
<%%= link_to "Show", <%= model_resource_name(singular_table_name) %>, class: "w-full sm:w-auto text-center rounded-md px-3.5 py-2.5 bg-gray-100 hover:bg-gray-50 inline-block font-medium" %>
<%%= link_to "Edit", <%= edit_helper(singular_table_name, type: :path) %>, class: "w-full sm:w-auto text-center rounded-md px-3.5 py-2.5 bg-gray-100 hover:bg-gray-50 inline-block font-medium" %>
<div class="sm:inline-block">
<%%= button_to "Destroy", <%= model_resource_name %>, method: :delete, class: "w-full sm:w-auto rounded-md px-3.5 py-2.5 text-white bg-red-600 hover:bg-red-500 font-medium cursor-pointer", data: { turbo_confirm: "Are you sure?" } %>
</div>
</div>
</div>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -5,5 +5,5 @@

<%%= render "form", <%= singular_table_name %>: @<%= singular_table_name %> %>

<%%= link_to "Back to <%= human_name.pluralize.downcase %>", <%= index_helper(type: :path) %>, class: "ml-2 rounded-md px-3.5 py-2.5 bg-gray-100 hover:bg-gray-50 inline-block font-medium" %>
<%%= link_to "Back to <%= human_name.pluralize.downcase %>", <%= index_helper(type: :path) %>, class: "w-full sm:w-auto text-center mt-2 sm:mt-0 sm:ml-2 rounded-md px-3.5 py-2.5 bg-gray-100 hover:bg-gray-50 inline-block font-medium" %>
</div>
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<div id="<%%= dom_id <%= singular_name %> %>" class="my-5 space-y-5">
<div id="<%%= dom_id <%= singular_name %> %>" class="w-full sm:w-auto my-5 space-y-5">
<% attributes.reject(&:password_digest?).each do |attribute| -%>
<div>
<strong class="block font-medium mb-1"><%= attribute.human_name %>:</strong>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -9,9 +9,9 @@

<%%= render @<%= singular_table_name %> %>

<%%= link_to "Edit this <%= human_name.downcase %>", <%= edit_helper(type: :path) %>, class: "mt-2 rounded-md px-3.5 py-2.5 bg-gray-100 hover:bg-gray-50 inline-block font-medium" %>
<%%= link_to "Back to <%= human_name.pluralize.downcase %>", <%= index_helper %>_path, class: "ml-2 rounded-md px-3.5 py-2.5 bg-gray-100 hover:bg-gray-50 inline-block font-medium" %>
<div class="inline-block ml-2">
<%%= button_to "Destroy this <%= human_name.downcase %>", <%= model_resource_name(prefix: "@") %>, method: :delete, class: "mt-2 rounded-md px-3.5 py-2.5 text-white bg-red-600 hover:bg-red-500 font-medium cursor-pointer", data: { turbo_confirm: "Are you sure?" } %>
<%%= link_to "Edit this <%= human_name.downcase %>", <%= edit_helper(type: :path) %>, class: "w-full sm:w-auto text-center rounded-md px-3.5 py-2.5 bg-gray-100 hover:bg-gray-50 inline-block font-medium" %>
<%%= link_to "Back to <%= human_name.pluralize.downcase %>", <%= index_helper %>_path, class: "w-full sm:w-auto text-center mt-2 sm:mt-0 sm:ml-2 rounded-md px-3.5 py-2.5 bg-gray-100 hover:bg-gray-50 inline-block font-medium" %>
<div class="sm:inline-block mt-2 sm:mt-0 sm:ml-2">
<%%= button_to "Destroy this <%= human_name.downcase %>", <%= model_resource_name(prefix: "@") %>, method: :delete, class: "w-full rounded-md px-3.5 py-2.5 text-white bg-red-600 hover:bg-red-500 font-medium cursor-pointer", data: { turbo_confirm: "Are you sure?" } %>
</div>
</div>