index.html.erb in madmin-2.0.0

- old
+ new
@@ -1,62 +1,68 @@
-<div class="md:flex justify-between items-center space-y-4 md:space-y-0">
-  <h1 class="text-xl font-semibold"><%= resource.friendly_name.pluralize %></h1>
+<%= content_for :title, resource.friendly_name.pluralize %>
 
-  <div class="flex-grow flex md:justify-end gap-4">
-    <form class="flex items-center gap-2 relative">
-      <%= hidden_field_tag :page, params[:page], value: 1, class: "hidden" %>
-      <%= search_field_tag :q, params[:q], placeholder: "Search", class: "rounded-full px-4 focus:bg-white focus:border-blue-500" %>
-      <%= link_to clear_search_params, class: "absolute top-1/2 right-3 text-gray-500 bg-white transform -translate-y-1/2" do %>
-        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
-          <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd" />
-        </svg>
-      <% end %>
+<header class="header">
+  <h1><%= resource.friendly_name.pluralize %></h1>
+
+  <div class="actions">
+    <form class="search">
+      <%= hidden_field_tag :page, params[:page], value: 1 %>
+      <%= search_field_tag :q, params[:q], placeholder: "Search" %>
     </form>
 
-    <%= link_to resource.new_path, class: "bg-white hover:bg-gray-100 text-gray-800 font-semibold py-2 px-4 border border-gray-400 rounded shadow" do %>
-      New <span class="hidden md:inline"><%= resource.friendly_name %></span>
-    <% end %>
+    <%= link_to clear_search_params, class: "btn btn-secondary" do %>
+      <svg xmlns="http://www.w3.org/2000/svg" height="1rem" width="1rem" viewBox="0 0 20 20" fill="currentColor">
+        <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd" />
+      </svg>
+      <% end if params[:q].present? %>
+
+    <%= link_to "New #{resource.friendly_name}", resource.new_path, class: "btn btn-secondary" %>
   </div>
-</div>
+</header>
 
-<div class="mb-4">
+<nav class="scopes">
   <% if resource.scopes.any? %>
-    <%= link_to "All", resource.index_path, class: class_names("p-2 rounded", {"bg-gray-100" =>  params[:scope].blank?}) %>
+    <%= link_to "All", resource.index_path, class: class_names("btn btn-secondary", {"active" => params[:scope].blank?}) %>
   <% end %>
 
   <% resource.scopes.each do |scope| %>
-    <%= link_to scope.to_s.humanize, resource.index_path(scope: scope), class: class_names("p-2 rounded", {"bg-gray-100" => params[:scope] == scope.to_s}) %>
+    <%= link_to scope.to_s.humanize, resource.index_path(scope: scope), class: class_names("btn btn-secondary", {"active" => params[:scope] == scope.to_s}) %>
   <% end %>
-</div>
-<div class="min-w-full max-w-xl overflow-x-auto pb-4">
-  <table class="min-w-full divide-y divide-gray-200">
+</nav>
+
+<div class="table-scroll">
+  <table>
     <thead>
-      <tr class="border-b border-gray-200">
+      <tr>
         <% resource.attributes.values.each do |attribute| %>
           <% next if attribute.field.nil? %>
           <% next unless attribute.field.visible?(action_name) %>
 
-          <th class="py-2 px-4 text-left text-xs text-gray-500 font-medium uppercase whitespace-nowrap"><%= sortable attribute.name, attribute.name.to_s.titleize %></th>
+          <th><%= sortable attribute.name, attribute.name.to_s.titleize %></th>
         <% end %>
-        <th class="py-2 px-4 text-left text-xs text-gray-500 font-medium uppercase">Actions</th>
+        <th></th>
       </tr>
     </thead>
 
-    <tbody class="text-sm divide-y">
+    <tbody>
       <% @records.each do |record| %>
         <tr>
           <% resource.attributes.values.each do |attribute| %>
             <% next if attribute.field.nil? %>
             <% next unless attribute.field.visible?(action_name) %>
-            <td class="px-4 py-2"><%= render partial: attribute.field.to_partial_path("index"), locals: { field: attribute.field, record: record, resource: resource } %></td>
+            <td><%= render partial: attribute.field.to_partial_path("index"), locals: { field: attribute.field, record: record, resource: resource } %></td>
           <% end %>
 
-          <td class="px-4 py-2 text-center">
-            <%= link_to "View", resource.show_path(record), class: "text-blue-500" %>
-            <%= link_to "Edit", resource.edit_path(record), class: "text-blue-500" %>
+          <td>
+            <%= link_to "View", resource.show_path(record) %>
+            <%= link_to "Edit", resource.edit_path(record) %>
           </td>
         </tr>
       <% end %>
     </tbody>
   </table>
 </div>
-<%== pagy_nav @pagy %>
+
+<div class="pagination">
+  <%== pagy_nav @pagy if @pagy.pages > 1 %>
+  <span>Showing <%= tag.strong @pagy.in %> of <%= tag.strong @pagy.count %></span>
+</div>