More dashboard UI improvements

app/frontend/scss/components/checks.scss

@@ -2,8 +2,4 @@
   .action a {
     color: black;
   }
-
-  .kind .octicon {
-    vertical-align: middle;
-  }
 }

app/helpers/checks_helper.rb

@@ -9,17 +9,24 @@ module ChecksHelper
   end
 
   def checks_sort_links(field)
+    %i[asc desc].map { |direction|
+      checks_sort_link(field, direction)
+    }.join
+  end
+
+  def checks_sort_link(field, direction)
+    classes = "btn btn-light btn-sm mx-1 mx-1 px-1 py-0"
     current_sort_str = current_sort.to_a.join("_")
 
-    %i[asc desc].map { |direction|
-      sort = "#{field}_#{direction}"
+    sort = "#{field}_#{direction}"
 
-      icon = direction == :asc ? "chevron-up" : "chevron-down"
-      html = Octicons::Octicon.new(icon, class: "mx-1").to_svg.html_safe
+    icon = direction == :asc ? "chevron-up" : "chevron-down"
+    html = Octicons::Octicon.new(icon).to_svg.html_safe
 
-      filter_params = current_criterias.merge(sort: sort)
-      link_to_unless sort == current_sort_str, html, checks_path(filter_params)
-    }.join
+    filter_params = current_criterias.merge(sort: sort)
+    link_to_unless sort == current_sort_str, html, checks_path(filter_params), class: classes do
+      content_tag(:span, html, class: classes + " active")
+    end
   end
 
   def current_criterias

app/views/checks/_table.html.erb

@@ -4,18 +4,19 @@
       <tr>
         <th scope="col"></th>
         <th scope="col">
-          <%= t(".domain") %>
-          <span class="sort-links mx-sm-3 text-nowrap">
+          <%= t(".th.domain") %>
+          <span class="sort-links mx-sm-2 text-nowrap">
             <%== checks_sort_links(:domain) %>
           </span>
         </th>
         <th scope="col">
-          <%= t(".expiry_date") %>
-          <span class="sort-links mx-sm-3 text-nowrap">
+          <span class="d-none d-sm-inline"><%= t(".th.expiry_date") %></span>
+          <span class="d-inline d-sm-none"><%= t(".th.expiry_date_short") %></span>
+          <span class="sort-links mx-sm-2 text-nowrap">
             <%== checks_sort_links(:domain_expires_at) %>
           </span>
         </th>
-        <th scope="col" class="text-center"><%= t(".edit") %></th>
+        <th scope="col" class="text-right"><%= t(".th.edit") %></th>
       </tr>
     </thead>
     <tbody>
@@ -23,19 +24,19 @@
         <tr class="check-row <%= check_row_class(check) %>">
           <td class="kind">
             <span class="badge badge-info"><%= t(".kind_labels.#{check.kind}") %></span>
+          </td>
+          <td>
             <%- if check.in_error? %>
               <%== content_tag(
                 :span,
                 Octicons::Octicon.new("alert", class: "ml-1").to_svg.html_safe,
-                class: "text-danger",
+                class: "in-error text-danger",
                 data: {
                   toggle: "tooltip",
-                  placement: "right",
+                  placement: "bottom",
                   title: check_last_success_title(check)
                 }) %>
             <% end %>
-          </td>
-          <td>
             <strong><%= check.domain %></strong>
           </td>
           <td>
@@ -44,7 +45,7 @@
               <%= content_tag :span, format_date(check.domain_expires_at, format: :short), class: "d-inline d-md-none" %>
             <% end %>
           </td>
-          <td class="action text-center">
+          <td class="action text-right">
             <%= link_to edit_check_path(check) do %>
               <%== Octicons::Octicon.new("pencil").to_svg %>
             <% end %>

app/views/checks/index.html.erb

@@ -1,6 +1,6 @@
 <div class="container-fluid">
   <div class="row justify-content-center">
-    <div class="col-12 col-lg-10 col-xl-8">
+    <div class="col-12 col-lg-10 col-xl-9">
       <% if @checks.empty? && current_scopes.blank? %>
         <div class="alert alert-info">
           <%= t(".no_check_yet_html", new_domain_path: new_check_path(kind: :domain), new_ssl_path: new_check_path(kind: :ssl)) %>

config/locales/en.yml

@@ -103,9 +103,11 @@ en:
         expiration date is coming. The time is set in number of days.
 
     table:
-      domain: Name
-      expiry_date: Expiration
-      edit: Edit
+      th:
+        domain: Name
+        expiry_date: "Expiration date"
+        expiry_date_short: "Exp."
+        edit: Edit
       kind_labels:
         domain: Domain
         ssl: SSL

config/locales/fr.yml

@@ -138,9 +138,11 @@ fr:
         que la date d'expiration approche. Le délai est indiqué ennombre de jours.
 
     table:
-      domain: Nom
-      expiry_date: "Expiration"
-      edit: Modifier
+      th:
+        domain: Nom
+        expiry_date: "Date d'expiration"
+        expiry_date_short: "Exp."
+        edit: Modifier
       kind_labels:
         domain: Domaine
         ssl: SSL