From ae1f14a3f96f87c10b3112bc4287eb2324d2170a Mon Sep 17 00:00:00 2001 From: Pierre de La Morinerie Date: Tue, 1 Sep 2020 17:57:10 +0200 Subject: [PATCH 1/2] views: reduce nested flex containers in admin procedures list We can achieve the same layout with fewer nested flex containers. --- .../new_design/admin-procedures-list.scss | 4 ++++ .../procedures/_procedures_list.html.haml | 17 ++++++++--------- 2 files changed, 12 insertions(+), 9 deletions(-) create mode 100644 app/assets/stylesheets/new_design/admin-procedures-list.scss diff --git a/app/assets/stylesheets/new_design/admin-procedures-list.scss b/app/assets/stylesheets/new_design/admin-procedures-list.scss new file mode 100644 index 000000000..3ac4dcc5c --- /dev/null +++ b/app/assets/stylesheets/new_design/admin-procedures-list.scss @@ -0,0 +1,4 @@ +// Push the timestamps column to the right of the row +.admin-procedures-list-timestamps { + margin-left: auto; +} diff --git a/app/views/new_administrateur/procedures/_procedures_list.html.haml b/app/views/new_administrateur/procedures/_procedures_list.html.haml index 8923f657e..c59bca47d 100644 --- a/app/views/new_administrateur/procedures/_procedures_list.html.haml +++ b/app/views/new_administrateur/procedures/_procedures_list.html.haml @@ -1,15 +1,14 @@ - procedures.each do |procedure| .card - .flex.justify-between - .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), style: 'color: black;' - = link_to(procedure_lien(procedure), procedure_lien(procedure), class: 'procedure-lien mb-1') + .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), style: 'color: black;' + = link_to(procedure_lien(procedure), procedure_lien(procedure), class: 'procedure-lien mb-1') - %div + .admin-procedures-list-timestamps %p.notice N° #{procedure.id} %p.notice créée le #{procedure.created_at.strftime('%d/%m/%Y')} - if procedure.published_at.present? From d5a2fc0788cd0031d48ac573b74a1ac71960c756 Mon Sep 17 00:00:00 2001 From: Pierre de La Morinerie Date: Tue, 1 Sep 2020 17:57:51 +0200 Subject: [PATCH 2/2] views: fix Safari stretching logos in admin procedures list --- .../stylesheets/new_design/admin-procedures-list.scss | 7 +++++++ .../procedures/_procedures_list.html.haml | 4 ++-- 2 files changed, 9 insertions(+), 2 deletions(-) diff --git a/app/assets/stylesheets/new_design/admin-procedures-list.scss b/app/assets/stylesheets/new_design/admin-procedures-list.scss index 3ac4dcc5c..ece3f2726 100644 --- a/app/assets/stylesheets/new_design/admin-procedures-list.scss +++ b/app/assets/stylesheets/new_design/admin-procedures-list.scss @@ -2,3 +2,10 @@ .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; +} diff --git a/app/views/new_administrateur/procedures/_procedures_list.html.haml b/app/views/new_administrateur/procedures/_procedures_list.html.haml index c59bca47d..2641df629 100644 --- a/app/views/new_administrateur/procedures/_procedures_list.html.haml +++ b/app/views/new_administrateur/procedures/_procedures_list.html.haml @@ -1,6 +1,6 @@ - procedures.each do |procedure| .card - .flex + .admin-procedures-list-row.infos.flex - if procedure.logo.present? = image_tag procedure.logo, alt: procedure.libelle, width: '100' .flex.column.ml-1 @@ -16,7 +16,7 @@ - if procedure.closed_at.present? %p.notice archivée le #{procedure.closed_at.strftime('%d/%m/%Y')} - .flex.justify-between + .admin-procedures-list-row.actions.flex.justify-between %div - if feature_enabled?(:administrateur_routage) %span.icon.person