Affichage plus propre du tableau des emails

This commit is contained in:
Jérémy Lecour 2021-02-28 11:46:19 +01:00 committed by Jérémy Lecour
parent ff244a7e83
commit 0349efb3e3
5 changed files with 99 additions and 69 deletions

View file

@ -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;
}

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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>