sibu 0.8.1 → 0.9.1

data/app/views/sibu/pages/_element_actions.html.erb

@@ -1,5 +1,5 @@
-<div id="element_actions">
-  <button id="clone_elt" onclick="cloneElement('<%= @entity_type %>', '<%= @section_id %>', '<%= @element_id %>')">Dupliquer</button>
-  <button id="duplicate_elt" onclick="deleteElement('<%= @entity_type %>', '<%= @section_id %>', '<%= @element_id %>')">Supprimer</button>
-  <button id="child_elt" onclick="addChildElement('<%= @entity_type %>', '<%= @section_id %>', '<%= @element_id %>')">Ajouter un sous-menu</button>
+<div id="element_actions">
+  <button id="clone_elt" onclick="cloneElement('<%= @entity_type %>', '<%= @section_id %>', '<%= @element_id %>')">Dupliquer</button>
+  <button id="duplicate_elt" onclick="deleteElement('<%= @entity_type %>', '<%= @section_id %>', '<%= @element_id %>')">Supprimer</button>
+  <button id="child_elt" onclick="addChildElement('<%= @entity_type %>', '<%= @section_id %>', '<%= @element_id %>')">Ajouter un sous-menu</button>
 </div>

data/app/views/sibu/pages/_error_panel.html.erb

@@ -1,4 +1,4 @@
-<div class="sibu_edit_form">
-  <p>Une erreur s'est produite lors de l'édition de cet élément.</p>
-  <%= link_to 'Annuler', '#', onclick: 'cancelEdit(); return false;' %>
-</div>
+<div class="sibu_edit_form">
+  <p>Une erreur s'est produite lors de l'édition de cet élément.</p>
+  <%= link_to 'Annuler', '#', onclick: 'cancelEdit(); return false;' %>
+</div>

data/app/views/sibu/pages/_form.html.erb

@@ -1,63 +1,63 @@
-<%= form_for([@site, @page]) do |f| %>
-  <div class="sibu_field">
-    <%= f.label :name, 'Nom de la page' %>
-    <div>
-      <%= f.text_field :name, placeholder: "Ex: Accueil, contact..." %>
-      <small>Libellé utilisé dans l'outil d'administration (non utilisé dans le site)</small>
-    </div>
-  </div>
-  <div class="sibu_field">
-    <%= f.label :path, "Chemin d'accès" %>
-    <div>
-      <%= f.text_field :path, placeholder: "Laisser vide pour le générer automatiquement" %>
-      <small>L'adresse (ou URL) de la page, utilisée par les navigateurs web pour y accéder</small>
-    </div>
-  </div>
-  <div class="sibu_field">
-    <%= f.label :is_home, "Page d'accueil" %>
-    <div>
-      <%= f.check_box :is_home, {}, 'true', 'false' %><span>Cocher pour faire de cette page la page d'accueil.</span>
-      <small>Le chemin d'accès de la page d'accueil sera automatiquement mis à jour.</small>
-    </div>
-  </div>
-  <div class="sibu_field">
-    <%= f.label :title, 'Titre' %>
-    <div>
-      <%= f.text_field :title, placeholder: "Maximum 80 caractères", maxlength: 80 %>
-      <small>Le titre sera affiché dans les résultats des moteurs de recherche et dans les onglets des navigateurs</small>
-    </div>
-  </div>
-  <div class="sibu_field">
-    <%= f.label :description, 'Description' %>
-    <div>
-      <%= f.text_area :description, placeholder: "Maximum 300 caractères", maxlength: 300 %>
-      <small>La description est affichée dans les résultats des moteurs de recherche</small>
-    </div>
-  </div>
-  <div class="sibu_field">
-    <%= f.label :keywords, 'Mots-clé' %>
-    <div>
-      <%= f.text_area :keywords, placeholder: "Mots-clé utilisés dans votre site" %>
-      <small>Une liste de mots-clé décrivant le contenu de votre site (optionnelle)</small>
-    </div>
-  </div>
-  <div class="sibu_field">
-    <%= f.label :header_code, "Code d'entête personnalisé" %>
-    <div>
-      <%= f.text_area :header_code, placeholder: "Code JS ou CSS (avec les balises <script> ou <style>)", rows: 6 %>
-      <small>Ce code javascript ou CSS sera inséré dans l'entête du site pour cette page uniquement</small>
-    </div>
-  </div>
-  <div class="sibu_field">
-    <%= f.label :footer_code, 'Code de pied de page personnalisé' %>
-    <div>
-      <%= f.text_area :footer_code, placeholder: "Code JS ou CSS (avec les balises <script> ou <style>)", rows: 6 %>
-      <small>Ce code javascript ou CSS sera inséré juste avant la balide fermante &lt;/body&gt; pour cette page uniquement</small>
-    </div>
-  </div>
-  <%= f.hidden_field :site_id %>
-  <div class="sibu_actions">
-    <%= f.submit 'Valider' %>
-    <%= link_to 'Annuler', :back %>
-  </div>
+<%= form_for([@site, @page]) do |f| %>
+  <div class="sibu_field">
+    <%= f.label :name, 'Nom de la page' %>
+    <div>
+      <%= f.text_field :name, placeholder: "Ex: Accueil, contact..." %>
+      <small>Libellé utilisé dans l'outil d'administration (non utilisé dans le site)</small>
+    </div>
+  </div>
+  <div class="sibu_field">
+    <%= f.label :path, "Chemin d'accès" %>
+    <div>
+      <%= f.text_field :path, placeholder: "Laisser vide pour le générer automatiquement" %>
+      <small>L'adresse (ou URL) de la page, utilisée par les navigateurs web pour y accéder</small>
+    </div>
+  </div>
+  <div class="sibu_field">
+    <%= f.label :is_home, "Page d'accueil" %>
+    <div>
+      <%= f.check_box :is_home, {}, 'true', 'false' %><span>Cocher pour faire de cette page la page d'accueil.</span>
+      <small>Le chemin d'accès de la page d'accueil sera automatiquement mis à jour.</small>
+    </div>
+  </div>
+  <div class="sibu_field">
+    <%= f.label :title, 'Titre' %>
+    <div>
+      <%= f.text_field :title, placeholder: "Maximum 80 caractères", maxlength: 80 %>
+      <small>Le titre sera affiché dans les résultats des moteurs de recherche et dans les onglets des navigateurs</small>
+    </div>
+  </div>
+  <div class="sibu_field">
+    <%= f.label :description, 'Description' %>
+    <div>
+      <%= f.text_area :description, placeholder: "Maximum 300 caractères", maxlength: 300 %>
+      <small>La description est affichée dans les résultats des moteurs de recherche</small>
+    </div>
+  </div>
+  <div class="sibu_field">
+    <%= f.label :keywords, 'Mots-clé' %>
+    <div>
+      <%= f.text_area :keywords, placeholder: "Mots-clé utilisés dans votre site" %>
+      <small>Une liste de mots-clé décrivant le contenu de votre site (optionnelle)</small>
+    </div>
+  </div>
+  <div class="sibu_field">
+    <%= f.label :header_code, "Code d'entête personnalisé" %>
+    <div>
+      <%= f.text_area :header_code, placeholder: "Code JS ou CSS (avec les balises <script> ou <style>)", rows: 6 %>
+      <small>Ce code javascript ou CSS sera inséré dans l'entête du site pour cette page uniquement</small>
+    </div>
+  </div>
+  <div class="sibu_field">
+    <%= f.label :footer_code, 'Code de pied de page personnalisé' %>
+    <div>
+      <%= f.text_area :footer_code, placeholder: "Code JS ou CSS (avec les balises <script> ou <style>)", rows: 6 %>
+      <small>Ce code javascript ou CSS sera inséré juste avant la balide fermante &lt;/body&gt; pour cette page uniquement</small>
+    </div>
+  </div>
+  <%= f.hidden_field :site_id %>
+  <div class="sibu_actions">
+    <%= f.submit 'Valider' %>
+    <%= link_to 'Annuler', :back %>
+  </div>
 <% end %>

data/app/views/sibu/pages/_group_edit_panel.html.erb

@@ -1,3 +1,3 @@
-<h2>Modifier le groupe</h2>
-<div id="edit_msg"></div>
-<%= render 'element_actions' %>
+<h2>Modifier le groupe</h2>
+<div id="edit_msg"></div>
+<%= render 'element_actions' %>

data/app/views/sibu/pages/_link_edit_panel.html.erb

@@ -1,50 +1,50 @@
-<h2>Modifier le lien</h2>
-<div id="edit_msg"></div>
-<%= render 'element_actions' %>
-<div class="sibu_edit_form">
-  <%= form_tag(update_element_site_page_path(@site.id, @page.id), method: :patch, remote: true) do |f| %>
-    <% current_type = link_type(@element["value"]) %>
-    <div class="sibu_field">
-      <%= label_tag 'element[text]', 'Libellé' %>
-      <%= text_field_tag 'element[text]', @element["text"] %>
-    </div>
-    <div id="link_internal" class="sibu_field link_mode">
-      <%= radio_button_tag :mode, 'internal', current_type == 'internal', class: 'radio' %>
-      <%= label_tag 'mode_internal', 'Lien vers une page du site' %>
-      <%= select_tag 'element[value]', available_links, prompt: 'Sélectionnez une page', disabled: current_type != 'internal' %>
-      <%= hidden_field_tag 'element[target]', '_self', disabled: current_type != 'internal' %>
-    </div>
-    <div id="link_external" class="sibu_field link_mode">
-      <%= radio_button_tag :mode, 'external', current_type == 'external', class: 'radio' %>
-      <%= label_tag 'mode_external', 'Lien personnalisé' %>
-      <%= text_field_tag 'element[value]', (@element["value"] if current_type == 'external'), placeholder: 'Ex : http://www.un-site.com', disabled: current_type != 'external' %>
-      <%= hidden_field_tag 'element[target]', '_blank', disabled: current_type != 'external' %>
-    </div>
-    <div id="link_email" class="sibu_field link_mode">
-      <%= radio_button_tag :mode, 'email', current_type == 'email', class: 'radio' %>
-      <%= label_tag 'mode_external', 'Lien vers un Email' %>
-      <%= text_field_tag 'element[value]', (@element["value"] if current_type == 'email'), placeholder: 'Ex : email@exemple.fr', disabled: current_type != 'email' %>
-      <%= hidden_field_tag 'element[target]', '_blank', disabled: current_type != 'email' %>
-    </div>
-    <div id="link_document" class="sibu_field link_mode">
-      <%= radio_button_tag :mode, 'document', current_type == 'document', class: 'radio' %>
-      <%= label_tag 'mode_document', 'Lien vers un document' %>
-      <%= select_tag 'element[value]', available_docs, prompt: 'Sélectionnez un document', disabled: current_type != 'document' %>
-      <%= hidden_field_tag 'element[target]', '_blank', disabled: current_type != 'document' %>
-    </div>
-    <%= hidden_field_tag 'element[id]', @element["id"] %>
-    <!-- Note : to be tested on multiple nested elements -->
-    <% (@element["elements"] || []).each do |e| %>
-      <% e.each_pair do |k, v| %>
-        <%= hidden_field_tag("element[elements][][#{k}]", v) unless v.blank? %>
-      <% end %>
-    <% end %>
-    <%= hidden_field_tag :element_id, @element_id %>
-    <%= hidden_field_tag :section_id, @section_id %>
-    <%= hidden_field_tag :entity, @entity_type %>
-    <div class="sibu_actions">
-      <%= submit_tag 'Valider' %>
-      <%= link_to 'Annuler', '#', onclick: 'cancelEdit(); return false;' %>
-    </div>
-  <% end %>
-</div>
+<h2>Modifier le lien</h2>
+<div id="edit_msg"></div>
+<%= render 'element_actions' %>
+<div class="sibu_edit_form">
+  <%= form_tag(update_element_site_page_path(@site.id, @page.id), method: :patch, remote: true) do |f| %>
+    <% current_type = link_type(@element["value"]) %>
+    <div class="sibu_field">
+      <%= label_tag 'element[text]', 'Libellé' %>
+      <%= text_field_tag 'element[text]', @element["text"] %>
+    </div>
+    <div id="link_internal" class="sibu_field link_mode">
+      <%= radio_button_tag :mode, 'internal', current_type == 'internal', class: 'radio' %>
+      <%= label_tag 'mode_internal', 'Lien vers une page du site' %>
+      <%= select_tag 'element[value]', available_links, prompt: 'Sélectionnez une page', disabled: current_type != 'internal' %>
+      <%= hidden_field_tag 'element[target]', '_self', disabled: current_type != 'internal' %>
+    </div>
+    <div id="link_external" class="sibu_field link_mode">
+      <%= radio_button_tag :mode, 'external', current_type == 'external', class: 'radio' %>
+      <%= label_tag 'mode_external', 'Lien personnalisé' %>
+      <%= text_field_tag 'element[value]', (@element["value"] if current_type == 'external'), placeholder: 'Ex : http://www.un-site.com', disabled: current_type != 'external' %>
+      <%= hidden_field_tag 'element[target]', '_blank', disabled: current_type != 'external' %>
+    </div>
+    <div id="link_email" class="sibu_field link_mode">
+      <%= radio_button_tag :mode, 'email', current_type == 'email', class: 'radio' %>
+      <%= label_tag 'mode_external', 'Lien vers un Email' %>
+      <%= text_field_tag 'element[value]', (@element["value"] if current_type == 'email'), placeholder: 'Ex : email@exemple.fr', disabled: current_type != 'email' %>
+      <%= hidden_field_tag 'element[target]', '_blank', disabled: current_type != 'email' %>
+    </div>
+    <div id="link_document" class="sibu_field link_mode">
+      <%= radio_button_tag :mode, 'document', current_type == 'document', class: 'radio' %>
+      <%= label_tag 'mode_document', 'Lien vers un document' %>
+      <%= select_tag 'element[value]', available_docs, prompt: 'Sélectionnez un document', disabled: current_type != 'document' %>
+      <%= hidden_field_tag 'element[target]', '_blank', disabled: current_type != 'document' %>
+    </div>
+    <%= hidden_field_tag 'element[id]', @element["id"] %>
+    <!-- Note : to be tested on multiple nested elements -->
+    <% (@element["elements"] || []).each do |e| %>
+      <% e.each_pair do |k, v| %>
+        <%= hidden_field_tag("element[elements][][#{k}]", v) unless v.blank? %>
+      <% end %>
+    <% end %>
+    <%= hidden_field_tag :element_id, @element_id %>
+    <%= hidden_field_tag :section_id, @section_id %>
+    <%= hidden_field_tag :entity, @entity_type %>
+    <div class="sibu_actions">
+      <%= submit_tag 'Valider' %>
+      <%= link_to 'Annuler', '#', onclick: 'cancelEdit(); return false;' %>
+    </div>
+  <% end %>
+</div>

data/app/views/sibu/pages/_map_edit_panel.html.erb

@@ -1,27 +1,27 @@
-<h2>Modifier la carte</h2>
-<div id="edit_msg"></div>
-<div class="sibu_edit_form">
-  <%= form_tag(update_element_site_page_path(@site.id, @page.id), method: :patch, remote: true) do |f| %>
-    <div class="sibu_field">
-      <%= label_tag 'element[data-lat]', 'Latitude' %>
-      <%= text_field_tag 'element[data-lat]', @element["data-lat"] %>
-    </div>
-    <div class="sibu_field">
-      <%= label_tag 'element[data-lng]', 'Longitude' %>
-      <%= text_field_tag 'element[data-lng]', @element["data-lng"] %>
-    </div>
-    <div class="sibu_field">
-      <%= label_tag 'element[data-title]', 'Libellé' %>
-      <%= text_field_tag 'element[data-title]', @element["data-title"] %>
-    </div>
-    <%= hidden_field_tag 'element[id]', @element["id"] %>
-    <%= hidden_field_tag :element_id, @element_id %>
-    <%= hidden_field_tag :section_id, @section_id %>
-    <%= hidden_field_tag :entity, @entity_type %>
-    <%= hidden_field_tag :refresh, true %>
-    <div class="sibu_actions">
-      <%= submit_tag 'Valider' %>
-      <%= link_to 'Annuler', '#', onclick: 'cancelEdit(); return false;' %>
-    </div>
-  <% end %>
-</div>
+<h2>Modifier la carte</h2>
+<div id="edit_msg"></div>
+<div class="sibu_edit_form">
+  <%= form_tag(update_element_site_page_path(@site.id, @page.id), method: :patch, remote: true) do |f| %>
+    <div class="sibu_field">
+      <%= label_tag 'element[data-lat]', 'Latitude' %>
+      <%= text_field_tag 'element[data-lat]', @element["data-lat"] %>
+    </div>
+    <div class="sibu_field">
+      <%= label_tag 'element[data-lng]', 'Longitude' %>
+      <%= text_field_tag 'element[data-lng]', @element["data-lng"] %>
+    </div>
+    <div class="sibu_field">
+      <%= label_tag 'element[data-title]', 'Libellé' %>
+      <%= text_field_tag 'element[data-title]', @element["data-title"] %>
+    </div>
+    <%= hidden_field_tag 'element[id]', @element["id"] %>
+    <%= hidden_field_tag :element_id, @element_id %>
+    <%= hidden_field_tag :section_id, @section_id %>
+    <%= hidden_field_tag :entity, @entity_type %>
+    <%= hidden_field_tag :refresh, true %>
+    <div class="sibu_actions">
+      <%= submit_tag 'Valider' %>
+      <%= link_to 'Annuler', '#', onclick: 'cancelEdit(); return false;' %>
+    </div>
+  <% end %>
+</div>

data/app/views/sibu/pages/_media_edit_panel.html.erb

@@ -1,47 +1,64 @@
-<h2>Modifier l'image</h2>
-<div id="edit_msg"></div>
-<%= render 'element_actions' %>
-<div class="sibu_edit_form">
-  <%= form_tag(update_element_site_page_path(@site.id, @page.id), method: :patch, remote: true) do |f| %>
-    <div class="sibu_image_selection">
-      <div class="sibu_select_images sibu_field">
-        <p>Sélectionnez ou <%= link_to 'téléchargez', new_image_path(page_id: @page.id, section_id: @section_id, entity_type: @entity_type,
-                                                                     element_id: @element_id, img_id: @element["id"], size: @size) %> une image</p>
-        <% site_images.each_with_index do |image, i| %>
-          <div class="sibu_image" data-img-id="<%= image.id %>">
-            <% if i == 0 %><span>Aucune image</span><% end %>
-            <%= image_tag image.file_url(:small), class: (@element["src"] == image.file_url(@size) ? 'selected' : ''),
-                          data: {src: image.file_url(@size), alt: image.alt} %>
-          </div>
-        <% end %>
-      </div>
-      <div class="sibu_selected_image">
-        <% if @element["src"] == DEFAULT_IMG || @element["src"].blank? %>
-          <p>Veuillez sélectionner une image.</p>
-        <% end %>
-        <div class="sibu_custom_center" style="display: <%= (@element["src"] == DEFAULT_IMG || @element["src"].blank?) ? 'none' : 'block' %>">
-          <%= check_box_tag('custom_center', true, (!@element["class"].blank? && @element["class"].include?('posx')), id: 'custom_center', class: 'checkbox') %>
-          <%= label_tag 'custom_center', "Recentrer l'image" %>
-        </div>
-        <div class="sibu_center">
-          <%= image_tag(@element["src"]) unless @element["src"] == DEFAULT_IMG || @element["src"].blank? %>
-          <div id="sibu_center_pos" style="display: none;">✕</div>
-        </div>
-        <div class="sibu_field" style="display: <%= (@element["src"] == DEFAULT_IMG || @element["src"].blank?) ? 'none' : 'block' %>">
-          <%= label_tag 'element[alt]', 'Légende / texte alternatif' %>
-          <%= text_field_tag 'element[alt]', @element["alt"] %>
-        </div>
-      </div>
-    </div>
-    <%= hidden_field_tag 'element[id]', @element["id"] %>
-    <%= hidden_field_tag 'element[src]', @element["src"] %>
-    <%= hidden_field_tag 'element[class]', @element["class"] %>
-    <%= hidden_field_tag :element_id, @element_id %>
-    <%= hidden_field_tag :section_id, @section_id %>
-    <%= hidden_field_tag :entity, @entity_type %>
-    <div class="sibu_actions">
-      <%= submit_tag 'Valider' %>
-      <%= link_to 'Annuler', '#', onclick: 'cancelEdit(); return false;' %>
-    </div>
-  <% end %>
+<h2>Modifier l'image</h2>
+<div id="edit_msg"></div>
+<%= render 'element_actions' %>
+<div class="sibu_edit_form">
+  <%= form_tag(update_element_site_page_path(@site.id, @page.id), method: :patch, remote: true) do |f| %>
+    <div class="sibu_image_selection">
+      <div class="sibu_select_images sibu_field">
+        <p>Sélectionnez ou <%= link_to 'téléchargez', new_image_path(page_id: @page.id, section_id: @section_id, entity_type: @entity_type,
+                                                                     element_id: @element_id, img_id: @element["id"], size: @size) %> une image</p>
+        <table class="sibu_images">
+          <thead>
+          <tr>
+            <th>Aperçu</th>
+            <th>Descriptif</th>
+            <th>Crédits</th>
+          </tr>
+          </thead>
+          <tbody>
+            <% site_images.each do |image| %>
+              <tr>
+                <td>
+                  <span class="sibu_image" data-img-id="<%= image.id %>">
+                    <%= image_tag image.file_url(:small), class: (@element["src"] == image.file_url(@size) ? 'selected' : ''),
+                                  data: {src: image.file_url(@size), alt: image.alt} %>
+                  </span>
+                </td>
+                <td><%= image.alt %></td>
+                <td><%= image.credits %></td>
+              </tr>
+            <% end %>
+          </tbody>
+        </table>
+      </div>
+      <div class="sibu_selected_image">
+        <% if @element["src"] == DEFAULT_IMG || @element["src"].blank? %>
+          <p>Veuillez sélectionner une image.</p>
+        <% end %>
+        <div class="sibu_custom_center" style="display: <%= (@element["src"] == DEFAULT_IMG || @element["src"].blank?) ? 'none' : 'block' %>">
+          <%= check_box_tag('custom_center', true, (!@element["class"].blank? && @element["class"].include?('posx')), id: 'custom_center', class: 'checkbox') %>
+          <%= label_tag 'custom_center', "Recentrer l'image" %>
+        </div>
+        <div class="sibu_center">
+          <%= image_tag(@element["src"]) unless @element["src"] == DEFAULT_IMG || @element["src"].blank? %>
+          <div id="sibu_center_pos" style="display: none;">✕</div>
+          <div id="sibu_center_desc" style="display: none;"><em>Cliquez sur l'image pour la recentrer sur un point donné (à utiliser lorsque l'image est tronquée car la zone d'affichage est trop petite).</em></div>
+        </div>
+        <div class="sibu_field" style="display: <%= (@element["src"] == DEFAULT_IMG || @element["src"].blank?) ? 'none' : 'block' %>">
+          <%= label_tag 'element[alt]', 'Légende / texte alternatif' %>
+          <%= text_field_tag 'element[alt]', @element["alt"] %>
+        </div>
+      </div>
+    </div>
+    <%= hidden_field_tag 'element[id]', @element["id"] %>
+    <%= hidden_field_tag 'element[src]', @element["src"] %>
+    <%= hidden_field_tag 'element[class]', @element["class"] %>
+    <%= hidden_field_tag :element_id, @element_id %>
+    <%= hidden_field_tag :section_id, @section_id %>
+    <%= hidden_field_tag :entity, @entity_type %>
+    <div class="sibu_actions">
+      <%= submit_tag 'Valider' %>
+      <%= link_to 'Annuler', '#', onclick: 'cancelEdit(); return false;' %>
+    </div>
+  <% end %>
 </div>

data/app/views/sibu/pages/_new_section_panel.html.erb

@@ -1,43 +1,43 @@
-<div class="sibu_panel sibu_view">
-  <h2>Choix du type de section</h2>
-  <div id="edit_msg"></div>
-</div>
-<div>
-  <div class="sibu_sections sibu_site_content">
-    <div id="<%= "#{@site.site_template.reference}_sections" %>" class="sibu_sections_tabs">
-      <% sections_by_category = sections_templates.group_by {|st| st['category']} %>
-      <div class="js-tabs">
-        <ul class="js-tablist" data-existing-hx="h3">
-          <% sections_by_category.keys.each do |cat| %>
-            <li class="js-tablist__item">
-              <a href="#<%= cat %>" class="js-tablist__link" data-selected="1"><%= t "sibu.section.category.#{cat}" %></a>
-            </li>
-          <% end %>
-        </ul>
-        <% sections_by_category.each_pair do |cat, sections| %>
-          <div id="<%= cat %>" class="js-tabcontent">
-            <h3 style="display: none;"><%= t "sibu.section.category.#{cat}" %></h3>
-            <% sections.each do |st| %>
-              <div data-sb-template="<%= st["template"] %>" data-sb-category="<%= st["category"] %>">
-                <%= render "shared/#{@site.section_template(st)}", sec: st %>
-              </div>
-            <% end %>
-          </div>
-        <% end %>
-      </div>
-    </div>
-  </div>
-  <%= form_tag(create_section_site_page_path(@site.id, @page.id), method: :post, remote: true) do |f| %>
-    <%= hidden_field_tag 'section[template]', '' %>
-    <%= hidden_field_tag 'section[category]', '' %>
-    <%= hidden_field_tag :section_id, @section_id %>
-    <%= hidden_field_tag :after, @after%>
-    <%= hidden_field_tag :entity, @entity_type %>
-    <div class="sibu_panel sibu_view">
-      <div class="sibu_actions">
-        <%= submit_tag 'Valider' %>
-        <%= link_to 'Annuler', '#', onclick: 'cancelSectionsEdit(); return false;' %>
-      </div>
-    </div>
-  <% end %>
-</div>
+<div class="sibu_panel sibu_view">
+  <h2>Choix du type de section</h2>
+  <div id="edit_msg"></div>
+</div>
+<div>
+  <div class="sibu_sections sibu_site_content">
+    <div id="<%= "#{@site.site_template.reference}_sections" %>" class="sibu_sections_tabs">
+      <% sections_by_category = sections_templates.group_by {|st| st['category']} %>
+      <div class="js-tabs">
+        <ul class="js-tablist" data-existing-hx="h3">
+          <% sections_by_category.keys.each do |cat| %>
+            <li class="js-tablist__item">
+              <a href="#<%= cat %>" class="js-tablist__link" data-selected="1"><%= t "sibu.section.category.#{cat}" %></a>
+            </li>
+          <% end %>
+        </ul>
+        <% sections_by_category.each_pair do |cat, sections| %>
+          <div id="<%= cat %>" class="js-tabcontent">
+            <h3 style="display: none;"><%= t "sibu.section.category.#{cat}" %></h3>
+            <% sections.each do |st| %>
+              <div data-sb-template="<%= st["template"] %>" data-sb-category="<%= st["category"] %>">
+                <%= render "shared/#{@site.section_template(st)}", sec: st %>
+              </div>
+            <% end %>
+          </div>
+        <% end %>
+      </div>
+    </div>
+  </div>
+  <%= form_tag(create_section_site_page_path(@site.id, @page.id), method: :post, remote: true) do |f| %>
+    <%= hidden_field_tag 'section[template]', '' %>
+    <%= hidden_field_tag 'section[category]', '' %>
+    <%= hidden_field_tag :section_id, @section_id %>
+    <%= hidden_field_tag :after, @after%>
+    <%= hidden_field_tag :entity, @entity_type %>
+    <div class="sibu_panel sibu_view">
+      <div class="sibu_actions">
+        <%= submit_tag 'Valider' %>
+        <%= link_to 'Annuler', '#', onclick: 'cancelSectionsEdit(); return false;' %>
+      </div>
+    </div>
+  <% end %>
+</div>