From accde5e9aa237b6e7f2045f943234d63d6bd264f Mon Sep 17 00:00:00 2001
From: Arnaud Levy <contact@arnaudlevy.com>
Date: Tue, 5 Jul 2022 19:45:05 +0200
Subject: [PATCH] better preview
---
app/assets/stylesheets/admin/preview.sass | 15 ++++++++++++---
app/views/admin/application/_preview.html.erb | 6 +++---
2 files changed, 15 insertions(+), 6 deletions(-)
diff --git a/app/assets/stylesheets/admin/preview.sass b/app/assets/stylesheets/admin/preview.sass
index 7db0e22bd..3a78e66b8 100644
--- a/app/assets/stylesheets/admin/preview.sass
+++ b/app/assets/stylesheets/admin/preview.sass
@@ -1,11 +1,20 @@
.preview
.modal-body
- background: black
- text-align: center
+ background: #EEEEEE
overflow: hidden
+ padding: 0
+ text-align: center
+ transition: padding 0.5s ease
iframe
+ background: white
+ box-shadow: 0 3px 20px rgba(0, 0, 0, 0.1)
height: 100%
- transition: width 0.5s ease
+ transition: width 0.5s ease, height 0.5s ease
+ &--mobile, &--tablet
+ .modal-body
+ padding: 2rem
+ iframe
+ border-radius: 10px
&--mobile
iframe
width: 415px
diff --git a/app/views/admin/application/_preview.html.erb b/app/views/admin/application/_preview.html.erb
index 4a90bc7fe..71a273aac 100644
--- a/app/views/admin/application/_preview.html.erb
+++ b/app/views/admin/application/_preview.html.erb
@@ -5,11 +5,11 @@
<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" data-mode="mobile">
- <i class="fas fa-mobile"></i>
+ <i class="fas fa-mobile-alt"></i>
<%= t 'preview.mobile' %>
</button>
<button type="button" class="btn btn-light preview__button" data-mode="tablet">
- <i class="fas fa-tablet"></i>
+ <i class="fas fa-tablet-alt"></i>
<%= t 'preview.tablet' %>
</button>
<button type="button" class="btn btn-light preview__button" data-mode="desktop">
@@ -19,7 +19,7 @@
</div>
<button type="button" class="btn-close ms-0" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
- <div class="modal-body p-2">
+ <div class="modal-body">
<iframe src="<%= request.path %>/preview" loading="lazy"></iframe>
</div>
</div>
--
GitLab