diff --git a/app/assets/stylesheets/admin/preview.sass b/app/assets/stylesheets/admin/preview.sass index 7db0e22bde6f5296ad0d3743e4a1a4acbdabbae7..3a78e66b89330dea7dd8a46262e9b1d4ecaed079 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 4a90bc7fe3250e74681f6d896dda9bbb9e42f1d8..71a273aacac194868332fa8eec2b78cac7cd7a1d 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>