From 321d198f64b7a9dc511ed44a4da41614cdca87cc Mon Sep 17 00:00:00 2001 From: Eric Leroy-Terquem Date: Mon, 8 Apr 2024 10:22:45 +0200 Subject: [PATCH] feat(gallery): add gallery to demande page --- app/assets/stylesheets/gallery.scss | 41 +++++++++++++++---- .../dossiers/pieces_jointes.html.haml | 32 ++++++++------- .../piece_justificative/_show.html.haml | 21 ++++++++-- app/views/shared/dossiers/_demande.html.haml | 2 +- 4 files changed, 71 insertions(+), 25 deletions(-) diff --git a/app/assets/stylesheets/gallery.scss b/app/assets/stylesheets/gallery.scss index 720505ca1..059a67128 100644 --- a/app/assets/stylesheets/gallery.scss +++ b/app/assets/stylesheets/gallery.scss @@ -1,11 +1,4 @@ .gallery { - display: flex; - flex-wrap: wrap; - - .gallery-item { - display: block; - } - a { background-image: none; } @@ -50,6 +43,40 @@ } } +.gallery-pieces-jointes { + display: flex; + flex-wrap: wrap; + + .gallery-item { + margin: 1.5rem 2rem; + } + + img { + height: 200px; + width: 200px; + } +} + +.gallery-demande { + img { + height: 150px; + width: 150px; + } + + .gallery-item { + margin-bottom: 2rem; + } + + .fr-download { + margin-bottom: 0.5rem; + } + + .thumbnail { + width: fit-content; + margin-bottom: 1rem; + } +} + .lg-has-iframe { width: 80% !important; margin-top: 50px; diff --git a/app/views/instructeurs/dossiers/pieces_jointes.html.haml b/app/views/instructeurs/dossiers/pieces_jointes.html.haml index 0575dcd4b..e4ef2686a 100644 --- a/app/views/instructeurs/dossiers/pieces_jointes.html.haml +++ b/app/views/instructeurs/dossiers/pieces_jointes.html.haml @@ -3,20 +3,24 @@ = render partial: "header", locals: { dossier: @dossier } .fr-container - .gallery{ "data-controller": "lightbox"} - - @champs_with_pieces_jointes.each do |champ| - - champ.piece_justificative_file.each do |attachment| - .gallery-item - - blob = attachment.blob - - if blob.content_type.in?(AUTHORIZED_PDF_TYPES) - = link_to blob.url, id: blob.id, data: { iframe: true, src: blob.url }, class: 'gallery-link', type: blob.content_type, title: "#{champ.libelle} -- #{blob.filename}" do - .thumbnail - = image_tag("pdf-placeholder.png") - .fr-btn.fr-btn--tertiary.fr-btn--icon-left.fr-icon-eye{ role: :button } - Visualiser - .champ-libelle - = champ.libelle.truncate(25) - = render Attachment::ShowComponent.new(attachment: attachment, new_tab: true, truncate: true) + - if @champs_with_pieces_jointes.map(&:piece_justificative_file).flatten.none? + .empty-text + Ce dossier ne contient pas de pièces jointes + - else + .gallery.gallery-pieces-jointes{ "data-controller": "lightbox" } + - @champs_with_pieces_jointes.each do |champ| + - champ.piece_justificative_file.each do |attachment| + .gallery-item + - blob = attachment.blob + - if blob.content_type.in?(AUTHORIZED_PDF_TYPES) + = link_to blob.url, id: blob.id, data: { iframe: true, src: blob.url }, class: 'gallery-link', type: blob.content_type, title: "#{champ.libelle} -- #{blob.filename}" do + .thumbnail + = image_tag("pdf-placeholder.png") + .fr-btn.fr-btn--tertiary.fr-btn--icon-left.fr-icon-eye{ role: :button } + Visualiser + .champ-libelle + = champ.libelle.truncate(25) + = render Attachment::ShowComponent.new(attachment: attachment, truncate: true) - elsif blob.content_type.in?(AUTHORIZED_IMAGE_TYPES) = link_to image_url(blob.url), title: "#{champ.libelle} -- #{blob.filename}", data: { src: blob.url }, class: 'gallery-link' do diff --git a/app/views/shared/champs/piece_justificative/_show.html.haml b/app/views/shared/champs/piece_justificative/_show.html.haml index dd81dde84..9098e88fb 100644 --- a/app/views/shared/champs/piece_justificative/_show.html.haml +++ b/app/views/shared/champs/piece_justificative/_show.html.haml @@ -1,4 +1,19 @@ .fr-downloads-group - %ul - - champ.piece_justificative_file.attachments.each do |attachment| - %li= render Attachment::ShowComponent.new(attachment:, new_tab: true) + - champ.piece_justificative_file.attachments.each do |attachment| + %ul + %li= render Attachment::ShowComponent.new(attachment:, new_tab: true, truncate: true) + .gallery-item + - blob = attachment.blob + - if blob.content_type.in?(AUTHORIZED_PDF_TYPES) + = link_to blob.url, id: blob.id, data: { iframe: true, src: blob.url }, class: 'gallery-link', type: blob.content_type, title: "#{champ.libelle} -- #{blob.filename}" do + .thumbnail + = image_tag("pdf-placeholder.png") + .fr-btn.fr-btn--tertiary.fr-btn--icon-left.fr-icon-eye{ role: :button } + = 'Visualiser' + + - elsif blob.content_type.in?(AUTHORIZED_IMAGE_TYPES) + = link_to image_url(blob.url), title: "#{champ.libelle} -- #{blob.filename}", data: { src: blob.url }, class: 'gallery-link' do + .thumbnail + = image_tag(blob.url) + .fr-btn.fr-btn--tertiary.fr-btn--icon-left.fr-icon-eye{ role: :button } + = 'Visualiser' diff --git a/app/views/shared/dossiers/_demande.html.haml b/app/views/shared/dossiers/_demande.html.haml index 4a7e9d1d9..6c6e6d601 100644 --- a/app/views/shared/dossiers/_demande.html.haml +++ b/app/views/shared/dossiers/_demande.html.haml @@ -2,7 +2,7 @@ - content_for(:notice_info) do = render partial: "shared/dossiers/france_connect_informations_notice", locals: { user_information: dossier.user.france_connect_informations.first } -.fr-container.counter-start-header-section.dossier-show{ class: class_names("dossier-show-instructeur" => profile =="instructeur") } +.fr-container.counter-start-header-section.dossier-show.gallery.gallery-demande{ class: class_names("dossier-show-instructeur" => profile =="instructeur"), "data-controller": "lightbox" } .fr-grid-row.fr-grid-row--center .fr-col-12.fr-col-xl-8 - if profile == 'instructeur' && dossier.termine_and_accuse_lecture?