diff --git a/app/assets/javascripts/admin/communication/init.js b/app/assets/javascripts/admin/communication/init.js
index 19ec2dabb9dcf27049b92fe63ba758ef05065377..ab94a3b301ba8ab4a94bf8818c36b6e1025c164a 100644
--- a/app/assets/javascripts/admin/communication/init.js
+++ b/app/assets/javascripts/admin/communication/init.js
@@ -1,4 +1,5 @@
//= require_self
//= require ./menu_items
+//= require ./preview
window.osuny.communication = {};
diff --git a/app/assets/javascripts/admin/communication/preview.js b/app/assets/javascripts/admin/communication/preview.js
new file mode 100644
index 0000000000000000000000000000000000000000..8ae8491ebbf5b71affdb9bc9479dfb0320d3f8c7
--- /dev/null
+++ b/app/assets/javascripts/admin/communication/preview.js
@@ -0,0 +1,17 @@
+$(function() {
+ $('.preview__button__mobile').on('click', function(){
+ $('.preview__button').removeClass('btn-primary').addClass('btn-light');
+ $('.preview__button__mobile').removeClass('btn-light').addClass('btn-primary');
+ $('#preview').removeClass('preview--desktop').removeClass('preview--tablet').addClass('preview--mobile');
+ });
+ $('.preview__button__tablet').on('click', function(){
+ $('.preview__button').removeClass('btn-primary').addClass('btn-light');
+ $('.preview__button__tablet').removeClass('btn-light').addClass('btn-primary');
+ $('#preview').removeClass('preview--mobile').removeClass('preview--desktop').addClass('preview--tablet');
+ });
+ $('.preview__button__desktop').on('click', function(){
+ $('.preview__button').removeClass('btn-primary').addClass('btn-light');
+ $('.preview__button__desktop').removeClass('btn-light').addClass('btn-primary');
+ $('#preview').removeClass('preview--mobile').removeClass('preview--tablet').addClass('preview--desktop');
+ });
+ });
\ No newline at end of file
diff --git a/app/assets/stylesheets/admin/preview.sass b/app/assets/stylesheets/admin/preview.sass
index 49596e58697528e98f5785bc863163d63fee1b70..7db0e22bde6f5296ad0d3743e4a1a4acbdabbae7 100644
--- a/app/assets/stylesheets/admin/preview.sass
+++ b/app/assets/stylesheets/admin/preview.sass
@@ -1,7 +1,17 @@
.preview
- img
- height: auto
- max-width: 100%
- iframe
- height: 220px
- max-width: 100%
+ .modal-body
+ background: black
+ text-align: center
+ overflow: hidden
+ iframe
+ height: 100%
+ transition: width 0.5s ease
+ &--mobile
+ iframe
+ width: 415px
+ &--tablet
+ iframe
+ width: 768px
+ &--desktop
+ iframe
+ width: 100%
diff --git a/app/helpers/admin/application_helper.rb b/app/helpers/admin/application_helper.rb
index 9d9510fe2853d8a921240de1542eab66d31e9b2b..172a0b59cf999863426330d2436783dfd1cbfc25 100644
--- a/app/helpers/admin/application_helper.rb
+++ b/app/helpers/admin/application_helper.rb
@@ -38,7 +38,11 @@ module Admin::ApplicationHelper
end
def preview_link
- raw "<button class=\"btn btn-primary\" type=\"button\" data-bs-toggle=\"offcanvas\" data-bs-target=\"#preview\" aria-controls=\"preview\">#{ t 'preview.button'}</button>"
+ raw "<button class=\"btn btn-primary\"
+ type=\"button\"
+ data-bs-toggle=\"modal\"
+ data-bs-target=\"#preview\"
+ aria-controls=\"preview\">#{ t 'preview.button'}</button>"
end
def button_classes(additional = '', **options)
diff --git a/app/views/admin/application/_preview.html.erb b/app/views/admin/application/_preview.html.erb
index 922eb15bfb434c14c90a5ee5acfe8a3a77a01e88..2df997249cdce7f0565b78c57b5b60d2051a5591 100644
--- a/app/views/admin/application/_preview.html.erb
+++ b/app/views/admin/application/_preview.html.erb
@@ -1,9 +1,27 @@
-<div class="offcanvas offcanvas-start preview" tabindex="-1" id="preview" aria-labelledby="offcanvasRightLabel" aria-modal="true" role="dialog">
- <div class="offcanvas-header border-bottom">
- <h5 id="offcanvasRightLabel" class="pt-2"><%= t 'preview.title' %></h5>
- <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
+<div id="preview" class="preview modal fade preview--mobile">
+ <div class="modal-dialog modal-fullscreen">
+ <div class="modal-content">
+ <div class="modal-header">
+ <h5 class="modal-title h4"><%= t 'preview.title' %></h5>
+ <div class="btn-group m-auto" role="group" aria-label="Basic example">
+ <button type="button" class="btn btn-primary preview__button preview__button__mobile">
+ <i class="fas fa-mobile"></i>
+ <%= t 'preview.mobile' %>
+ </button>
+ <button type="button" class="btn btn-light preview__button preview__button__tablet">
+ <i class="fas fa-tablet"></i>
+ <%= t 'preview.tablet' %>
+ </button>
+ <button type="button" class="btn btn-light preview__button preview__button__desktop">
+ <i class="fas fa-desktop"></i>
+ <%= t 'preview.desktop' %>
+ </button>
+ </div>
+ <button type="button" class="btn-close ms-0" data-bs-dismiss="modal" aria-label="Close"></button>
+ </div>
+ <div class="modal-body p-2">
+ <iframe src="<%= request.path %>/preview" loading="lazy"></iframe>
+ </div>
+ </div>
</div>
- <div class="offcanvas-body">
- <%= yield :preview %>
- </div>
-</div>
+</div>
\ No newline at end of file
diff --git a/app/views/admin/communication/websites/pages/show.html.erb b/app/views/admin/communication/websites/pages/show.html.erb
index fb7289a8af95548992dcce722c1e19bc43c6410b..8033ce53aecdb494ddc7e9e0f40951c2002a86a6 100644
--- a/app/views/admin/communication/websites/pages/show.html.erb
+++ b/app/views/admin/communication/websites/pages/show.html.erb
@@ -107,13 +107,6 @@
</div>
<% end %>
-<% content_for :preview do %>
- <%= @page.text.to_s %>
- <% @page.blocks.ordered.each do |block| %>
- <%= render 'admin/communication/blocks/preview', block: block %>
- <% end %>
-<% end %>
-
<% content_for :action_bar_left do %>
<%= destroy_link @page if @page.is_regular_page? %>
<%= link_to t('static'),
diff --git a/config/locales/en.yml b/config/locales/en.yml
index 0f1eab65c075872450d938ca347a083d43250f91..2c57fa25b03437b8f9b46a1e774716cdb5345e9a 100644
--- a/config/locales/en.yml
+++ b/config/locales/en.yml
@@ -226,7 +226,10 @@ en:
please_confirm_with_children: "WARNING: deleting this element will also remove every child. Are you sure?"
preview:
button: Preview
- title: Mobile preview
+ title: Preview
+ mobile: Mobile
+ tablet: Tablet
+ desktop: Desktop
privacy_policy: Privacy policy
privacy_policy_url: https://osuny.org/politique-de-confidentialite
quit: Quit
diff --git a/config/locales/fr.yml b/config/locales/fr.yml
index 7c42c1d15057e1e772f3879165e743dd791dc69c..2482496e188f3ae1dfef099eaedf4d1d0cdb6f66 100644
--- a/config/locales/fr.yml
+++ b/config/locales/fr.yml
@@ -229,7 +229,10 @@ fr:
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
+ title: Prévisualisation
+ mobile: Mobile
+ tablet: Tablette
+ desktop: Ordinateur de bureau
privacy_policy: Politique de confidentialité
privacy_policy_url: https://osuny.org/politique-de-confidentialite
quit: Quitter