From 879de35668adbb0d899e125b258e0c37f3efd566 Mon Sep 17 00:00:00 2001
From: Arnaud Levy <contact@arnaudlevy.com>
Date: Thu, 30 Jun 2022 17:32:26 +0200
Subject: [PATCH] working preview
---
.../javascripts/admin/communication/init.js | 1 +
.../admin/communication/preview.js | 17 ++++++++++
app/assets/stylesheets/admin/preview.sass | 22 ++++++++----
app/helpers/admin/application_helper.rb | 6 +++-
app/views/admin/application/_preview.html.erb | 34 ++++++++++++++-----
.../websites/pages/show.html.erb | 7 ----
config/locales/en.yml | 5 ++-
config/locales/fr.yml | 5 ++-
8 files changed, 73 insertions(+), 24 deletions(-)
create mode 100644 app/assets/javascripts/admin/communication/preview.js
diff --git a/app/assets/javascripts/admin/communication/init.js b/app/assets/javascripts/admin/communication/init.js
index 19ec2dabb..ab94a3b30 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 000000000..8ae8491eb
--- /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 49596e586..7db0e22bd 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 9d9510fe2..172a0b59c 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 922eb15bf..2df997249 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 fb7289a8a..8033ce53a 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 0f1eab65c..2c57fa25b 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 7c42c1d15..2482496e1 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
--
GitLab