Affichage plus propre du tableau des emails
This commit is contained in:
parent
ff244a7e83
commit
0349efb3e3
|
@ -5,26 +5,31 @@
|
|||
.email_attribute_server {
|
||||
background-color: cyan;
|
||||
padding: 1px 2px;
|
||||
color: #666666;
|
||||
}
|
||||
.email_attribute_organisation {
|
||||
background-color: yellow;
|
||||
padding: 1px 2px;
|
||||
color: #666666;
|
||||
}
|
||||
.email_attribute_issue {
|
||||
background-color: orange;
|
||||
padding: 1px 2px;
|
||||
color: #666666;
|
||||
}
|
||||
.email_attribute_cron {
|
||||
background-color: #cdcdcd;
|
||||
padding: 1px 2px;
|
||||
color: #666666;
|
||||
}
|
||||
.email_attribute_mailing_list {
|
||||
background-color: #99ff00;
|
||||
padding: 1px 2px;
|
||||
color: #666666;
|
||||
}
|
||||
.email_attribute_junk {
|
||||
background-color: #222222;
|
||||
color: #cccccc;
|
||||
color: #666666;
|
||||
padding: 1px 2px;
|
||||
}
|
||||
|
||||
|
|
|
@ -1,37 +1,40 @@
|
|||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Date</th>
|
||||
<th>Subject</th>
|
||||
<th>Metadata</th>
|
||||
<th colspan="3"></th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tbody class="text-sm">
|
||||
<% emails.each do |email| %>
|
||||
<%= render partial: "list_row", object: email, as: :email %>
|
||||
<% end %>
|
||||
</tbody>
|
||||
</table>
|
||||
<div class="shadow overflow-auto border-b border-gray-200 rounded-lg">
|
||||
<table class="min-w-full divide-y divide-gray-200">
|
||||
<thead class="bg-gray-50">
|
||||
<tr>
|
||||
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Date</th>
|
||||
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Subject</th>
|
||||
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Metadata</th>
|
||||
<th scope="col" class="relative px-6 py-3"><span class="sr-only">Show, Edit, Destroy</span></th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<div class="bg-white px-4 py-3 flex items-center justify-between border-t border-gray-200 sm:px-6">
|
||||
<div class="flex-1 flex justify-between sm:hidden">
|
||||
<%= link_to_previous_page @emails, 'Previous page', class: "ml-3 paginate-page paginate-page-single" %>
|
||||
<%= link_to_next_page @emails, 'Next Page', class: "paginate-page paginate-page-single" %>
|
||||
</div>
|
||||
<div class="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between">
|
||||
<div>
|
||||
<p class="text-sm text-gray-700">
|
||||
Showing
|
||||
<span class="font-medium"><%= @emails.offset_value + 1 %></span>
|
||||
to
|
||||
<span class="font-medium"><%= @emails.offset_value + (@emails.respond_to?(:records) ? @emails.records : @emails.to_a).size %></span>
|
||||
of
|
||||
<span class="font-medium"><%= @emails.total_count %></span>
|
||||
results
|
||||
</p>
|
||||
<tbody class="text-sm bg-white divide-y divide-gray-200">
|
||||
<% emails.each do |email| %>
|
||||
<%= render partial: "list_row", object: email, as: :email %>
|
||||
<% end %>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<div class="bg-white px-4 py-3 flex items-center justify-between border-t border-gray-200 sm:px-6">
|
||||
<div class="flex-1 flex justify-between sm:hidden">
|
||||
<%= link_to_previous_page @emails, 'Previous page', class: "ml-3 paginate-page paginate-page-single" %>
|
||||
<%= link_to_next_page @emails, 'Next Page', class: "paginate-page paginate-page-single" %>
|
||||
</div>
|
||||
<div class="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between">
|
||||
<div>
|
||||
<p class="text-sm text-gray-700">
|
||||
Showing
|
||||
<span class="font-medium"><%= @emails.offset_value + 1 %></span>
|
||||
to
|
||||
<span class="font-medium"><%= @emails.offset_value + (@emails.respond_to?(:records) ? @emails.records : @emails.to_a).size %></span>
|
||||
of
|
||||
<span class="font-medium"><%= @emails.total_count %></span>
|
||||
results
|
||||
</p>
|
||||
</div>
|
||||
<%= paginate @emails %>
|
||||
</div>
|
||||
<%= paginate @emails %>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
@ -1,24 +1,26 @@
|
|||
<tr>
|
||||
<td><%= email.date.strftime("%Y-%m-%d %H:%M") %></td>
|
||||
<td><%= email.subject %></td>
|
||||
<td>
|
||||
<tr class="<%= cycle('bg-white', 'bg-gray-50', :name => 'zebra') %>">
|
||||
<td class="px-6 py-4 whitespace-nowrap"><%= email.date.strftime("%Y-%m-%d %H:%M") %></td>
|
||||
<td class="px-6 py-4"><%= email.subject %></td>
|
||||
<td class="px-2 py-1 space-x-1">
|
||||
<% email.organisations.each do |organisation| %>
|
||||
<span class="email_attribute_organisation"><%= organisation %></span>
|
||||
<span class="flex px-2 inline-flex text-xs leading-5 font-semibold rounded-full email_attribute_organisation"><%= organisation %></span>
|
||||
<% end if email.organisations %>
|
||||
<% email.servers.each do |server| %>
|
||||
<span class="email_attribute_server"><%= server %></span>
|
||||
<span class="flex px-2 inline-flex text-xs leading-5 font-semibold rounded-full email_attribute_server"><%= server %></span>
|
||||
<% end if email.servers %>
|
||||
<% if email.cron? %>
|
||||
<span class="email_attribute_cron">cron</span>
|
||||
<span class="flex px-2 inline-flex text-xs leading-5 font-semibold rounded-full email_attribute_cron">cron</span>
|
||||
<% end %>
|
||||
<% if email.mailing_list? %>
|
||||
<span class="email_attribute_mailing_list">list</span>
|
||||
<span class="flex px-2 inline-flex text-xs leading-5 font-semibold rounded-full email_attribute_mailing_list">list</span>
|
||||
<% end %>
|
||||
<% if email.junk? %>
|
||||
<span class="email_attribute_junk">junk</span>
|
||||
<span class="flex px-2 inline-flex text-xs leading-5 font-semibold rounded-full email_attribute_junk">junk</span>
|
||||
<% end %>
|
||||
</td>
|
||||
<td><%= link_to 'Show', email, "data-turbo-frame": "_top" %></td>
|
||||
<td><%= link_to 'Edit', edit_email_path(email), "data-turbo-frame": "_top" %></td>
|
||||
<td><%= link_to 'Destroy', email, method: :delete, data: { confirm: 'Are you sure?' }, "data-turbo-frame": "_top" %></td>
|
||||
<td class="px-2 py-1">
|
||||
<%= link_to 'Show', email, "data-turbo-frame": "_top", class: "flex" %>
|
||||
<%= link_to 'Edit', edit_email_path(email), "data-turbo-frame": "_top", class: "flex" %>
|
||||
<%= link_to 'Destroy', email, method: :delete, data: { confirm: 'Are you sure?' }, "data-turbo-frame": "_top", class: "flex" %>
|
||||
</td>
|
||||
</tr>
|
||||
|
|
|
@ -4,31 +4,51 @@
|
|||
|
||||
<p id="notice"><%= notice %></p>
|
||||
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Description</th>
|
||||
<th>Enabled</th>
|
||||
<th>Operator</th>
|
||||
<th>Inverted</th>
|
||||
<th colspan="3"></th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tbody>
|
||||
<% @filters.each do |filter| %>
|
||||
<div class="shadow overflow-hidden border-b border-gray-200 rounded-lg">
|
||||
<table class="min-w-full divide-y divide-gray-200">
|
||||
<thead class="bg-gray-50">
|
||||
<tr>
|
||||
<td><%= filter.description %></td>
|
||||
<td><%= filter.enabled %></td>
|
||||
<td><%= filter.operator %></td>
|
||||
<td><%= filter.inverted %></td>
|
||||
<td><%= link_to 'Show', filter %></td>
|
||||
<td><%= link_to 'Edit', edit_filter_path(filter) %></td>
|
||||
<td><%= link_to 'Destroy', filter, method: :delete, data: { confirm: 'Are you sure?' } %></td>
|
||||
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Description</th>
|
||||
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Enabled</th>
|
||||
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Operator</th>
|
||||
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Inverted</th>
|
||||
<th scope="col" class="relative px-6 py-3"><span class="sr-only">Show, Edit, Destroy</span></th>
|
||||
</tr>
|
||||
<% end %>
|
||||
</tbody>
|
||||
</table>
|
||||
</thead>
|
||||
|
||||
<tbody class="bg-white divide-y divide-gray-200">
|
||||
<% @filters.each do |filter| %>
|
||||
<tr class="<%= cycle('bg-white', 'bg-gray-50', :name => 'zebra') %>">
|
||||
<td class="px-6 py-4 whitespace-nowrap">
|
||||
<%= filter.description %>
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap">
|
||||
<% if filter.enabled? %>
|
||||
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">
|
||||
<%= filter.enabled %>
|
||||
</span>
|
||||
<% else %>
|
||||
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800">
|
||||
<%= filter.enabled %>
|
||||
</span>
|
||||
<% end %>
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap">
|
||||
<%= filter.operator %>
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap">
|
||||
<%= filter.inverted %>
|
||||
</td>
|
||||
<td>
|
||||
<%= link_to 'Show', filter %>
|
||||
<%= link_to 'Edit', edit_filter_path(filter) %>
|
||||
<%= link_to 'Destroy', filter, method: :delete, data: { confirm: 'Are you sure?' } %>
|
||||
</td>
|
||||
</tr>
|
||||
<% end %>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<br>
|
||||
|
||||
|
|
|
@ -114,7 +114,7 @@
|
|||
</div>
|
||||
</header>
|
||||
<main>
|
||||
<div class="max-w-7xl mt-6 mx-auto py-6 sm:px-6 lg:px-8 bg-white shadow">
|
||||
<div class="max-w-7xl my-6 mx-auto py-6 sm:px-6 lg:px-8 bg-white shadow">
|
||||
<%= yield %>
|
||||
</div>
|
||||
</main>
|
||||
|
|
Loading…
Reference in a new issue