harmonize card admin

app/assets/stylesheets/admin-procedures-list.scss

@@ -1,17 +0,0 @@
-// Push the timestamps column to the right of the row
-@import "colors";
-
-.admin-procedures-list-timestamps {
-  margin-left: auto;
-}
-
-// Fix a Safari flexbox bug where the inner procedure logo
-// would stretch the container vertically.
-// See https://stackoverflow.com/questions/57516373/image-stretching-in-flexbox-in-safari
-.admin-procedures-list-row.infos {
-  align-items: flex-start;
-
-  a:not(:hover) {
-    background-image: none; // remove DSFR underline
-  }
-}

app/assets/stylesheets/card.scss

@@ -20,6 +20,13 @@
     }
   }
 
+  .logo {
+    width: auto;
+    max-width: 50px;
+    height: fit-content;
+    margin-right: $default-spacer * 2;
+  }
+
   &.feedback {
     max-width: 600px;
     margin: 30px auto;

app/views/administrateurs/procedures/_procedures_list.html.haml

@@ -1,41 +1,61 @@
 - procedures.each do |procedure|
   .card
-    .admin-procedures-list-row.infos.flex
-      - if procedure.logo.present?
-        = image_tag procedure.logo, alt: procedure.libelle, width: '100'
-      .flex.column.ml-1
-        .card-title
-          = link_to procedure.libelle, admin_procedure_path(procedure)
-        = link_to commencer_url(procedure.path), commencer_url(procedure.path), class: 'fr-link fr-mb-1w'
-
-      .admin-procedures-list-timestamps
-        %p N° #{procedure.id}
-        %p créée le #{procedure.created_at.strftime('%d/%m/%Y')}
-        - if procedure.published_at.present?
-          %p publiée le #{procedure.published_at.strftime('%d/%m/%Y')}
-
-        - if procedure.updated_at.today?
-          %p modifiée à #{procedure.updated_at.strftime('%H:%M')}
-        - else
-          %p modifiée le #{procedure.updated_at.strftime('%d/%m/%Y %H:%M')}
-
-        - if procedure.closed_at.present?
-          %p archivée le #{procedure.closed_at.strftime('%d/%m/%Y')}
-        - elsif procedure.auto_archive_on&.future?
-          %p sera clôturée le #{procedure.auto_archive_on.strftime('%d/%m/%Y')}
-
-    .admin-procedures-list-row.actions.flex.justify-between
+    .flex.justify-between
       %div
-        - if procedure.routing_enabled?
-          %span.icon.person
-          %span.badge.baseline= procedure.groupe_instructeurs.count
+        .flex
+          - if procedure.logo.present?
+            = image_tag procedure.logo, alt: procedure.libelle, class: 'logo'
+
+          %div
+            .card-title
+              = link_to procedure.libelle, admin_procedure_path(procedure)
+
+            = link_to commencer_url(procedure.path), commencer_url(procedure.path), class: 'fr-link fr-mb-1w'
+
+            %p.fr-mt-1w.fr-mb-1w
+              créée le #{procedure.created_at.strftime('%d/%m/%Y')}
+              - if procedure.published_at.present?
+                %span publiée le #{procedure.published_at.strftime('%d/%m/%Y')}
+
+              - if procedure.updated_at.today?
+                %span modifiée à #{procedure.updated_at.strftime('%H:%M')}
+              - else
+                %span modifiée le #{procedure.updated_at.strftime('%d/%m/%Y %H:%M')}
+
+              - if procedure.closed_at.present?
+                %span archivée le #{procedure.closed_at.strftime('%d/%m/%Y')}
+              - elsif procedure.auto_archive_on&.future?
+                %span sera clôturée le #{procedure.auto_archive_on.strftime('%d/%m/%Y')}
+
+            %div
+              - if procedure.routing_enabled?
+                %span.icon.person
+                %span.fr-badge= procedure.groupe_instructeurs.count
+              - else
+                %span.icon.person
+                %span.fr-badge= procedure.instructeurs.count
+
+              %span.icon.folder.fr-ml-1w
+              %span.fr-badge= procedure.dossiers.state_not_brouillon.visible_by_administration.count
+
+      .text-right
+        %p.fr-mb-0 N° #{procedure.id}
+        - if procedure.close?
+
+          %span.fr-badge.fr-badge--sm.fr-badge--warning
+            = t('closed', scope: [:layouts, :breadcrumb])
+
+        - elsif procedure.locked?
+
+          %span.fr-badge.fr-badge--sm.fr-badge--success
+            = t('published', scope: [:layouts, :breadcrumb])
+
+
         - else
-          %span.icon.person
-          %span.badge.baseline= procedure.instructeurs.count
-
-        %span.icon.folder
-        %span.badge.baseline= procedure.dossiers.state_not_brouillon.visible_by_administration.count
+          %span.fr-badge.fr-badge--sm.fr-badge--new
+            = t('draft', scope: [:layouts, :breadcrumb])
 
+    .flex.justify-end
       %ul.fr-btns-group.fr-btns-group--sm.fr-btns-group--inline.fr-btns-group--icon-right
         - unless procedure.discarded?
           %li

app/views/users/dossiers/_dossier_actions.html.haml

@@ -14,7 +14,6 @@
     - else
       = link_to t('views.users.dossiers.dossier_action.edit_dossier'), modifier_dossier_path(dossier), class: 'fr-btn fr-btn--tertiary fr-mr-1w'
 
-
   = render Dropdown::MenuComponent.new(wrapper: :div, wrapper_options: {class: 'invite-user-actions'}, menu_options: {id: dom_id(dossier, :actions_menu)}, button_options: {class: 'fr-btn--tertiary'}) do |menu|
     - menu.with_button_inner_html do
       - if has_edit_action

spec/system/administrateurs/procedure_cloning_spec.rb

@@ -34,7 +34,7 @@ describe 'As an administrateur I wanna clone a procedure', js: true do
     scenario do
       visit admin_procedures_path
       expect(page.find_by_id('procedures')['data-item-count']).to eq('1')
-      page.all('.admin-procedures-list-row .dropdown .fr-btn').first.click
+      page.all('.card .dropdown .fr-btn').first.click
       page.all('.clone-btn').first.click
       visit admin_procedures_path(statut: "brouillons")
       expect(page.find_by_id('procedures')['data-item-count']).to eq('1')