layout for timeline

app/models/communication/block/template/timeline.rb

 class Communication::Block::Template::Timeline < Communication::Block::Template::Base
 
   has_elements
+  has_layouts [:vertical, :horizontal]
 
 end

app/views/admin/communication/blocks/templates/timeline/_edit.html.erb

-<% element = @block.template.default_element %>
-
+<%= block_component_edit :layout, horizontal: true %>
 <%= block_component_add_element t('.add_event') %>
 
 <draggable :list="data.elements" handle=".dragHandle" class="row">
@@ -13,8 +12,8 @@
             </a>
           </div>
           <div class="flex-fill">
-            <%= block_component_edit :title, template: element %>
-            <%= block_component_edit :text, template: element %>
+            <%= block_component_edit :title, template: @element %>
+            <%= block_component_edit :text, template: @element %>
           </div>
           <div>
             <a  class="btn btn-sm btn-danger ms-3"

app/views/admin/communication/blocks/templates/timeline/_static.html.erb

+<%= block_component_static :layout %>
       events:
 <% block.template.elements.each do |element| %>
 <%= block_component_static :title, template: element, depth: 4, list: true %>

config/locales/communication/en.yml

@@ -383,6 +383,13 @@ en:
                   remove_photo: Remove photo
           timeline:
             description: A list of events with their description, on a timeline.
+            layouts:
+              horizontal:
+                label: Horizontal
+                description: Events are shown left to right, and can be browsed with arrows.
+              vertical:
+                label: Vertical
+                description: Events are shown vertically, along the page.
             edit:
               add_event: Add event
               remove_event: Delete event

config/locales/communication/fr.yml

@@ -387,6 +387,13 @@ fr:
                   remove_photo: Enlever la photo
           timeline:
             description: Une liste d'événements avec leur description, présentés en frise.
+            layouts:
+              horizontal:
+                label: Horizontal
+                description: Les événements sont présentés de gauche à droite, navigables avec des flèches.
+              vertical:
+                label: Vertical
+                description: Les événements sont présentés verticalement, dans la continuité de la page.
             edit:
               add_event: Ajouter un événement
               remove_event: Supprimer l'événement