diff --git a/app/assets/images/communication/blocks/templates/chapter.jpg b/app/assets/images/communication/blocks/templates/chapter.jpg
index 58c250a4de4690d0339e225541b16e77c41667f4..fc5b66a30e0513eee757ccf3123870dee2d14219 100644
Binary files a/app/assets/images/communication/blocks/templates/chapter.jpg and b/app/assets/images/communication/blocks/templates/chapter.jpg differ
diff --git a/app/assets/images/communication/blocks/templates/datatable.jpg b/app/assets/images/communication/blocks/templates/datatable.jpg
index de66f462ccf6e2ca5a376e7c32a6da9919036d5b..9d48836cdb9e38fb82e353be43a802ff50d87f5f 100644
Binary files a/app/assets/images/communication/blocks/templates/datatable.jpg and b/app/assets/images/communication/blocks/templates/datatable.jpg differ
diff --git a/app/assets/images/communication/blocks/templates/embed.jpg b/app/assets/images/communication/blocks/templates/embed.jpg
index de66f462ccf6e2ca5a376e7c32a6da9919036d5b..997bc384f4d75afc7cfa9dcd5fa97998b8c628ae 100644
Binary files a/app/assets/images/communication/blocks/templates/embed.jpg and b/app/assets/images/communication/blocks/templates/embed.jpg differ
diff --git a/app/assets/images/communication/blocks/templates/files.jpg b/app/assets/images/communication/blocks/templates/files.jpg
index de66f462ccf6e2ca5a376e7c32a6da9919036d5b..205148939609de1b78fbede980368218c8801897 100644
Binary files a/app/assets/images/communication/blocks/templates/files.jpg and b/app/assets/images/communication/blocks/templates/files.jpg differ
diff --git a/app/assets/images/communication/blocks/templates/gallery.jpg b/app/assets/images/communication/blocks/templates/gallery.jpg
index 60cf4ffcc87ff8929a55bdffd81db9b3d2a143eb..45afa470ce8e5838321fb9b90f5f58de8af61407 100644
Binary files a/app/assets/images/communication/blocks/templates/gallery.jpg and b/app/assets/images/communication/blocks/templates/gallery.jpg differ
diff --git a/app/assets/images/communication/blocks/templates/gallery/carousel.png b/app/assets/images/communication/blocks/templates/gallery/carousel.png
new file mode 100644
index 0000000000000000000000000000000000000000..a501916c49d13df62df70ae84b970d6946ec8c05
Binary files /dev/null and b/app/assets/images/communication/blocks/templates/gallery/carousel.png differ
diff --git a/app/assets/images/communication/blocks/templates/gallery/grid.png b/app/assets/images/communication/blocks/templates/gallery/grid.png
new file mode 100644
index 0000000000000000000000000000000000000000..1ea31c57506b2c621da78b27a68afc8d5046b559
Binary files /dev/null and b/app/assets/images/communication/blocks/templates/gallery/grid.png differ
diff --git a/app/assets/images/communication/blocks/templates/image.jpg b/app/assets/images/communication/blocks/templates/image.jpg
index 2655d4549f569d44d5ef2f38d143f04d28a4c8f4..9d977c6f29a6b9b92cc4c9dea8fb0e114aabe075 100644
Binary files a/app/assets/images/communication/blocks/templates/image.jpg and b/app/assets/images/communication/blocks/templates/image.jpg differ
diff --git a/app/assets/images/communication/blocks/templates/key_figures.jpg b/app/assets/images/communication/blocks/templates/key_figures.jpg
index de66f462ccf6e2ca5a376e7c32a6da9919036d5b..cc2ea4e13b522da3b69998accfe2abc7c3a11d45 100644
Binary files a/app/assets/images/communication/blocks/templates/key_figures.jpg and b/app/assets/images/communication/blocks/templates/key_figures.jpg differ
diff --git a/app/assets/images/communication/blocks/templates/pages/cards.png b/app/assets/images/communication/blocks/templates/pages/cards.png
index ed9736d2345e6cef341922794bc84c1cfde498ba..b753b43ffd23dd83e1ba09a525b0d149bd07bfc6 100644
Binary files a/app/assets/images/communication/blocks/templates/pages/cards.png and b/app/assets/images/communication/blocks/templates/pages/cards.png differ
diff --git a/app/assets/images/communication/blocks/templates/pages/grid.png b/app/assets/images/communication/blocks/templates/pages/grid.png
index 1a4c8c09c66707d73601cd22b37bf1634a85b853..94238864c2e4b7f0d71dedd2aa97e76a48098f5d 100644
Binary files a/app/assets/images/communication/blocks/templates/pages/grid.png and b/app/assets/images/communication/blocks/templates/pages/grid.png differ
diff --git a/app/assets/images/communication/blocks/templates/pages/list.png b/app/assets/images/communication/blocks/templates/pages/list.png
index 2c9bf9b8c6267b543e165f16c7f27dadac5af22e..7bad244337f02a5db45b0297b2862ab9023c9358 100644
Binary files a/app/assets/images/communication/blocks/templates/pages/list.png and b/app/assets/images/communication/blocks/templates/pages/list.png differ
diff --git a/app/assets/images/communication/blocks/templates/video.jpg b/app/assets/images/communication/blocks/templates/video.jpg
index de66f462ccf6e2ca5a376e7c32a6da9919036d5b..234cf1fdfb7b17dcca55e2dd3db6bbba97044d43 100644
Binary files a/app/assets/images/communication/blocks/templates/video.jpg and b/app/assets/images/communication/blocks/templates/video.jpg differ
diff --git a/app/models/communication/block/template/gallery.rb b/app/models/communication/block/template/gallery.rb
index 91e6e4c22e2e55734d1fd6dc1d955ebab4135b36..d0f7136c07ced04bc783f6eb707aedea4a1d68d0 100644
--- a/app/models/communication/block/template/gallery.rb
+++ b/app/models/communication/block/template/gallery.rb
@@ -1,4 +1,9 @@
class Communication::Block::Template::Gallery < Communication::Block::Template
+ LAYOUTS = [
+ :grid,
+ :carousel
+ ]
+
def build_git_dependencies
add_dependency active_storage_blobs
end
diff --git a/app/models/communication/block/template/page.rb b/app/models/communication/block/template/page.rb
index 108f5501e371b751cbff5ffafb113c6ab8c79278..73ea5deea61ff7d4f23c73d592539b6cf2bcc684 100644
--- a/app/models/communication/block/template/page.rb
+++ b/app/models/communication/block/template/page.rb
@@ -1,4 +1,11 @@
class Communication::Block::Template::Page < Communication::Block::Template
+
+ LAYOUTS = [
+ :grid,
+ :list,
+ :cards
+ ]
+
def build_git_dependencies
add_dependency main_page
selected_pages.each do |page|
diff --git a/app/views/admin/communication/blocks/_layouts.html.erb b/app/views/admin/communication/blocks/_layouts.html.erb
new file mode 100644
index 0000000000000000000000000000000000000000..90f5434265bf59934063fb23ba497793ba68dd2e
--- /dev/null
+++ b/app/views/admin/communication/blocks/_layouts.html.erb
@@ -0,0 +1,42 @@
+<%
+horizontal ||= false
+%>
+<% if horizontal %><div class="row"><% end %>
+<% layouts.each do |layout| %>
+ <%
+ name = t "admin.communication.blocks.templates.#{template}.layouts.#{layout}.label"
+ description = t "admin.communication.blocks.templates.#{template}.layouts.#{layout}.description"
+ %>
+ <% if horizontal %><div class="col-md-4"><% end %>
+ <div class="card mb-4">
+ <label for="layout-<%= layout %>">
+ <div class="row">
+ <div class="col-md-6">
+ <div class="card-body">
+ <div class="form-check">
+ <input class="form-check-input"
+ type="radio"
+ name="layout"
+ v-model="data.layout"
+ value="<%= layout %>"
+ id="layout-<%= layout %>">
+ <h3 class="h4">
+ <%= name %>
+ </h3>
+ </div>
+ <p>
+ <%= description %>
+ </p>
+ </div>
+ </div>
+ <div class="col-md-6">
+ <%= image_tag "communication/blocks/templates/#{template}/#{layout}.png",
+ alt: name,
+ class: 'img-fluid' %>
+ </div %>
+ </label %>
+ </div>
+ </div>
+ <% if horizontal %></div><% end %>
+<% end %>
+<% if horizontal %></div><% end %>
diff --git a/app/views/admin/communication/blocks/templates/gallery/_edit.html.erb b/app/views/admin/communication/blocks/templates/gallery/_edit.html.erb
index 8ac88883e05e4594248bbe503f7a90fd1a114945..d91f60fb465eff1b0e561147c683d178c2a6068b 100644
--- a/app/views/admin/communication/blocks/templates/gallery/_edit.html.erb
+++ b/app/views/admin/communication/blocks/templates/gallery/_edit.html.erb
@@ -1,3 +1,8 @@
+<%= render 'admin/communication/blocks/layouts',
+ layouts: Communication::Block::Template::Gallery::LAYOUTS,
+ template: 'gallery',
+ horizontal: true %>
+
<a class="<%= button_classes('mb-4') %>"
v-on:click="data.elements.push({alt: '', credit: '', file: {}})">
<%= t '.add_image' %>
diff --git a/app/views/admin/communication/blocks/templates/pages/_edit.html.erb b/app/views/admin/communication/blocks/templates/pages/_edit.html.erb
index bb6af5961b2d91a57fef9acbd682778658df6b7c..c71c2283f3bee8a031bd5fa14b338c2affed4137 100644
--- a/app/views/admin/communication/blocks/templates/pages/_edit.html.erb
+++ b/app/views/admin/communication/blocks/templates/pages/_edit.html.erb
@@ -1,9 +1,9 @@
<% pages = collection_tree(@block.about&.website.pages) %>
<div class="row mb-4">
- <div class="col-md-6">
+ <div class="col-lg-6">
<div class="mb-4">
- <h2 class="h3">Type de liste</h2>
+ <h2 class="h3"><%= t '.kind.title' %></h2>
<div class="form-check form-check-inline mb-3">
<input class="form-check-input"
type="radio"
@@ -12,7 +12,7 @@
value="children"
id="kind-children">
<label class="form-check-label" for="kind-children">
- La page principale et ses enfants
+ <%= t '.kind.children' %>
</label>
</div>
<div class="form-check form-check-inline">
@@ -23,31 +23,31 @@
value="selection"
id="kind-selection">
<label class="form-check-label" for="kind-selection">
- Une sélection spécifique de pages
+ <%= t '.kind.selection' %>
</label>
</div>
</div>
<div class="mb-4">
- <h2 class="h3">Page principale</h2>
- <label class="form-label"
- for="page_id">Sélectionnez une page principale</label>
+ <h2 class="h3"><%= t '.main_page.title' %></h2>
+ <label class="form-label"
+ for="page_id"><%= t '.main_page.label' %></label>
<select id="page_id"
class="form-select select"
v-model="data.page_id">
- <option value="">Aucune page sélectionnée</option>
+ <option value=""><%= t '.main_page.none' %></option>
<% pages.each_with_index do |page, index| %>
<option value="<%= page[:id] %>"><%= page[:label].html_safe %></option>
<% end %>
</select>
- <div class="form-text">Cette page principale définira le titre et le lien du bloc. Si vous choisissez une page sans remplir le titre ci-dessus, le titre de la page sera utilisé. Si le titre est rempli, il remplacera le titre de la page sélectionnée, en utilisant le lien de la page.</div>
+ <div class="form-text"><%= t '.main_page.hint' %></div>
</div>
<div class="mb-4" v-if="data.kind == 'selection'">
- <h2 class="h3">Pages sélectionnées</h2>
+ <h2 class="h3"><%= t '.selection.title' %></h2>
<a class="<%= button_classes('mb-3') %>"
v-on:click="data.elements.push({id: ''})">
- <%= t '.add_page' %>
+ <%= t '.selection.add' %>
</a>
<draggable :list="data.elements" handle=".dragHandle" class="list-group">
<div v-for="(page, index) in data.elements" class="list-group-item">
@@ -59,11 +59,11 @@
</div>
<div class="flex-fill">
<label class="form-label d-none"
- :for="'page-' + index + '-name'">Page</label>
+ :for="'page-' + index + '-name'"><%= t '.selection.label' %></label>
<select :id="'page-' + index + '-name'"
class="form-select select"
v-model="page.id">
- <option value="" disabled>Aucune page</option>
+ <option value="" disabled><%= t '.selection.none' %></option>
<% pages.each_with_index do |page, index| %>
<option value="<%= page[:id] %>"><%= page[:label].html_safe %></option>
<% end %>
@@ -81,89 +81,43 @@
</draggable>
</div>
</div>
- <div class="col-md-6">
- <h2 class="h3">Options d'affichage</h2>
- <div class="form-check">
- <input v-model="data.show_main_description"
- class="form-check-input boolean optional"
- id="show_main_description"
- type="checkbox">
- <label class="form-check-label boolean optional"
- for="show_main_description">
- Afficher la description courte de la page principale
- </label>
- </div>
- <div class="form-check">
- <input v-model="data.show_description"
- class="form-check-input boolean optional"
- id="show_description"
- type="checkbox">
- <label class="form-check-label boolean optional"
- for="show_description">
- Afficher les descriptions courtes des pages
- </label>
- </div>
- <div class="form-check">
- <input v-model="data.show_image"
- class="form-check-input boolean optional"
- id="show_image"
- type="checkbox">
- <label class="form-check-label boolean optional"
- for="show_image">
- Afficher les images des pages
- </label>
- </div>
- <hr>
-
- <div class="row">
- <div class="col-md-4">
- <div class="form-check form-check-inline mb-3">
- <input class="form-check-input"
- type="radio"
- name="layout"
- v-model="data.layout"
- value="grid"
- id="layout-grid">
- <label class="form-check-label" for="layout-grid">
- Grille
- <%= image_tag 'communication/blocks/templates/pages/grid.png',
- alt: 'Grille',
- class: 'img-fluid' %>
- </label>
- </div>
+ <div class="col-lg-6">
+ <h2 class="h3"><%= t '.display.title' %></h2>
+ <div class="mb-4">
+ <div class="form-check">
+ <input v-model="data.show_main_description"
+ class="form-check-input boolean optional"
+ id="show_main_description"
+ type="checkbox">
+ <label class="form-check-label boolean optional"
+ for="show_main_description">
+ <%= t '.display.main_description' %>
+ </label>
</div>
- <div class="col-md-4">
- <div class="form-check form-check-inline">
- <input class="form-check-input"
- type="radio"
- name="layout"
- v-model="data.layout"
- value="list"
- id="layout-list">
- <label class="form-check-label" for="layout-list">
- Liste
- <%= image_tag 'communication/blocks/templates/pages/list.png',
- alt: 'Liste',
- class: 'img-fluid' %>
- </label>
- </div>
+ <div class="form-check">
+ <input v-model="data.show_description"
+ class="form-check-input boolean optional"
+ id="show_description"
+ type="checkbox">
+ <label class="form-check-label boolean optional"
+ for="show_description">
+ <%= t '.display.pages_descriptions' %>
+ </label>
</div>
- <div class="col-md-4">
- <div class="form-check form-check-inline">
- <input class="form-check-input"
- type="radio"
- name="layout"
- v-model="data.layout"
- value="cards"
- id="layout-cards">
- <label class="form-check-label" for="layout-cards">
- Cartes
- <%= image_tag 'communication/blocks/templates/pages/cards.png',
- alt: 'Grille',
- class: 'img-fluid' %>
- </label>
- </div>
+ <div class="form-check">
+ <input v-model="data.show_image"
+ class="form-check-input boolean optional"
+ id="show_image"
+ type="checkbox">
+ <label class="form-check-label boolean optional"
+ for="show_image">
+ <%= t '.display.pages_images' %>
+ </label>
</div>
</div>
+
+ <%= render 'admin/communication/blocks/layouts',
+ layouts: Communication::Block::Template::Page::LAYOUTS,
+ template: 'pages' %>
</div>
</div>
diff --git a/config/locales/communication/en.yml b/config/locales/communication/en.yml
index cd6b7dba1818fa50c32c0aee7086652725a5f7bf..45fb35a7900e2a3d9a26290ea0c8e33daf1d46c7 100644
--- a/config/locales/communication/en.yml
+++ b/config/locales/communication/en.yml
@@ -189,6 +189,13 @@ en:
title_placeholder: Enter title here
remove_file: Remove a file
gallery:
+ layouts:
+ grid:
+ label: Grid
+ description: Images are presented as a grid, from left to right and top to bottom, with constant width.
+ carousel:
+ label: Carousel
+ description: Images are big, with a previous / next navigation and a constant height.
edit:
add_image: Add image
image_label: Image (.png, .jpg)
@@ -219,8 +226,36 @@ en:
drag_title: Drag and drop to organize persons
delete_title: Remove person
pages:
+ layouts:
+ cards:
+ label: Cards
+ description: Side by side cards, same height, strong color on rollover. Perfect for a small amount of pages.
+ grid:
+ label: Grid
+ description: As a grid, left to right and top to bottom.
+ list:
+ label: List
+ description: The main page's short description is used as a big text, and the pages are listed on the right.
edit:
- add_page: Select a page
+ kind:
+ title: List kind
+ children: Main page and children
+ selection: A specific selection of pages
+ main_page:
+ title: Main page
+ label: Select the main page
+ none: No page selected
+ hint: This page will set the title and main link of the block on the website. If you select a page and fill no title above, the page title will be used. If you set a title, it will replace the main page's title.
+ selection:
+ add: Select a page
+ label: Page
+ none: No page
+ title: Selected pages
+ display:
+ title: Layout options
+ main_description: Show main page short description
+ pages_descriptions: Show pages short descriptions
+ pages_images: Show pages images
partners:
edit:
add_partner: Add partner
diff --git a/config/locales/communication/fr.yml b/config/locales/communication/fr.yml
index 838825281a4c80cbd5ae665e2b8a039cb4846064..e464d5ca1a8e64b411fedc1b407909c9ae7f79a5 100644
--- a/config/locales/communication/fr.yml
+++ b/config/locales/communication/fr.yml
@@ -190,6 +190,13 @@ fr:
title_placeholder: Entrer le titre du fichier
remove_file: Supprimer le fichier
gallery:
+ layouts:
+ grid:
+ label: Grille
+ description: Les images sont présentées en grille, de gauche à droite puis de haut en bas.
+ carousel:
+ label: Carrousel
+ description: Les images sont présentées en grand, avec une navigation suivant / précédent.
edit:
add_image: Ajouter une image
image_label: Image (.png, .jpg)
@@ -220,8 +227,36 @@ fr:
drag_title: Glisser-déposer pour organiser les personnes
delete_title: Enlever la personne
pages:
+ layouts:
+ cards:
+ label: Cartes
+ description: Des cartes côte à côte, de même hauteur, avec une couleur forte au survol. Ce format est idéal pour un petit nombre de pages.
+ grid:
+ label: Grille
+ description: Les pages sont présentées en grille, de gauche à droite puis de haut en bas.
+ list:
+ label: Liste
+ description: Le chapô de la page principale sert d'édito en gros et les pages sont présentées sous forme de liste à droite.
edit:
- add_page: Sélectionner une page
+ kind:
+ title: Type de liste
+ children: La page principale et ses enfants
+ selection: Une sélection spécifique de pages
+ main_page:
+ title: Page principale
+ label: Sélectionnez une page principale
+ none: Aucune page sélectionnée
+ hint: Cette page principale définira le titre et le lien du bloc. Si vous choisissez une page sans remplir le titre ci-dessus, le titre de la page sera utilisé. Si le titre est rempli, il remplacera le titre de la page sélectionnée, en utilisant le lien de la page.
+ selection:
+ add: Sélectionner une page
+ label: Page
+ none: Aucune page
+ title: Pages sélectionnées
+ display:
+ title: Options d'affichage
+ main_description: Afficher la description courte de la page principale
+ pages_descriptions: Afficher les descriptions courtes des pages
+ pages_images: Afficher les images des pages
partners:
edit:
add_partner: Ajouter un partenaire
@@ -386,6 +421,7 @@ fr:
files: Fichiers
gallery: Galerie
image: Image
+ key_figures: Chiffres-clés
organization_chart: Organigramme
pages: Liste de pages
partners: Partenaires