Feature: Implement Mobile Responsiveness #2092

Merged
neo773 merged 53 commits from responsive-design-2077 into main 2025-04-18 21:23:10 +08:00
2 changed files with 12 additions and 10 deletions
Showing only changes of commit 63bc1c4bcb - Show all commits

View File

@@ -37,16 +37,18 @@
<div class="pb-12">
<div class="bg-container-inset rounded-xl p-1 mb-6">
<div style="grid-template-columns: repeat(<%= @import.column_keys.count %>, 1fr)" class="grid items-center uppercase text-xs font-medium text-secondary py-3">
<% @import.column_keys.each do |key| %>
<div class="px-5"><%= import_col_label(key) %></div>
<% end %>
</div>
<div class="overflow-x-auto">
<div style="grid-template-columns: repeat(<%= @import.column_keys.count %>, minmax(150px, 1fr)); min-width: max-content;" class="grid items-center uppercase text-xs font-medium text-secondary py-3">
<% @import.column_keys.each do |key| %>
<div class="px-5"><%= import_col_label(key) %></div>
<% end %>
</div>
<div class="bg-container shadow-border-xs rounded-xl divide-y divide-alpha-black-200">
<% @rows.each do |row| %>
<%= render "import/rows/form", row: row %>
<% end %>
<div class="bg-container shadow-border-xs rounded-xl divide-y divide-alpha-black-200">
<% @rows.each do |row| %>
<%= render "import/rows/form", row: row %>
<% end %>
</div>
</div>
</div>
</div>

View File

@@ -1,6 +1,6 @@
<%# locals: (row:) %>
<div style="grid-template-columns: repeat(<%= row.import.column_keys.count %>, 1fr)" class="first:rounded-tl-lg first:rounded-tr-lg last:rounded-bl-lg last:rounded-br-lg grid divide-x divide-alpha-black-200 group">
<div style="grid-template-columns: repeat(<%= row.import.column_keys.count %>, minmax(150px, 1fr)); min-width: max-content;" class="first:rounded-tl-lg first:rounded-tr-lg last:rounded-bl-lg last:rounded-br-lg grid divide-x divide-alpha-black-200 group">
<% row.import.column_keys.each_with_index do |key, idx| %>
<%= turbo_frame_tag dom_id(row, key), title: row.valid? ? nil : row.errors.full_messages.join(", ") do %>
<%= form_with(