preview

app/assets/stylesheets/admin/preview.sass

+.preview
+    img
+        max-width: 100%

app/views/admin/communication/website/posts/show.html.erb

@@ -62,6 +62,17 @@
   </div>
 <% end %>
 
+<div class="offcanvas offcanvas-start preview" tabindex="-1" id="preview" aria-labelledby="offcanvasRightLabel" aria-modal="true" role="dialog">
+  <div class="offcanvas-header">
+    <h5 id="offcanvasRightLabel"><%= t 'preview.title' %></h5>
+    <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
+  </div>
+  <div class="offcanvas-body">
+    <%= @post.text.to_s %>
+  </div>
+</div>
+
 <% content_for :action_bar_right do %>
+  <button class="btn btn-primary my-1" type="button" data-bs-toggle="offcanvas" data-bs-target="#preview" aria-controls="preview"><%= t 'preview.button' %></button>
   <%= edit_link @post %>
 <% end %>

config/locales/en.yml

@@ -116,6 +116,9 @@ en:
   metadata: Metadata
   please_confirm: Are you sure?
   please_confirm_with_children: "WARNING: deleting this element will also remove every child. Are you sure?"
+  preview:
+    button: Preview
+    title: Mobile preview
   privacy_policy: Privacy policy
   privacy_policy_url: https://osuny.org/politique-de-confidentialite
   quit: Quit

config/locales/fr.yml

@@ -116,6 +116,9 @@ fr:
   metadata: Informations
   please_confirm: Est-ce que vous confirmez ?
   please_confirm_with_children: "ATTENTION : effacer cet élément supprimera aussi tous ses enfants. Est-ce que vous confirmez ?"
+  preview:
+    button: Prévisualiser
+    title: Prévisualisation mobile
   privacy_policy: Politique de confidentialité
   privacy_policy_url: https://osuny.org/politique-de-confidentialite
   quit: Quitter