fix open modal mobile

app/controllers/submission_events_controller.rb

@@ -24,5 +24,7 @@ class SubmissionEventsController < ApplicationController
 
   load_and_authorize_resource :submission
 
-  def index; end
+  def index
+    render :index, layout: 'plain'
+  end
 end

app/controllers/submissions_controller.rb

@@ -33,6 +33,8 @@ class SubmissionsController < ApplicationController
 
   def new
     authorize!(:new, Submission)
+
+    render :new, layout: 'plain'
   end
 
   def create

app/controllers/submitters_controller.rb

@@ -8,6 +8,8 @@ class SubmittersController < ApplicationController
       if @submitter.preferences['email_message_uuid'].present?
         @submitter.account.email_messages.find_by(uuid: @submitter.preferences['email_message_uuid'])
       end
+
+    render :edit, layout: 'plain'
   end
 
   def update

app/controllers/templates_controller.rb

@@ -25,7 +25,9 @@ class TemplatesController < ApplicationController
     redirect_to root_path
   end
 
-  def new; end
+  def new
+    render :new, layout: 'plain'
+  end
 
   def edit
     @template_data = Templates.serialize_for_builder(@template)

app/controllers/templates_preferences_controller.rb

@@ -14,7 +14,9 @@ class TemplatesPreferencesController < ApplicationController
                                                        completed_notification_email_body]
   }.freeze
 
-  def show; end
+  def show
+    render :show, layout: 'plain'
+  end
 
   def create
     authorize!(:update, @template)

app/controllers/templates_share_link_controller.rb

@@ -3,7 +3,9 @@
 class TemplatesShareLinkController < ApplicationController
   load_and_authorize_resource :template
 
-  def show; end
+  def show
+    render :show, layout: 'plain'
+  end
 
   def create
     authorize!(:update, @template)

app/javascript/application.js

@@ -57,7 +57,8 @@ import BarChart from './elements/bar_chart'
 import FieldCondition from './elements/field_condition'
 import ConfirmUpload from './elements/confirm_upload'
 import ScrollFade from './elements/scroll_fade'
-import ConvertModalLinks from './elements/convert_modal_links'
+import OpenModalMobile from './elements/open_modal_mobile'
+import HistoryBack from './elements/history_back'
 
 import * as TurboInstantClick from './lib/turbo_instant_click'
 
@@ -153,7 +154,8 @@ safeRegisterElement('bar-chart', BarChart)
 safeRegisterElement('field-condition', FieldCondition)
 safeRegisterElement('confirm-upload', ConfirmUpload)
 safeRegisterElement('scroll-fade', ScrollFade)
-safeRegisterElement('convert-modal-links', ConvertModalLinks)
+safeRegisterElement('open-modal-mobile', OpenModalMobile)
+safeRegisterElement('history-back', HistoryBack)
 
 safeRegisterElement('template-builder', class extends HTMLElement {
   connectedCallback () {

app/javascript/elements/history_back.js

@@ -0,0 +1,15 @@
+export default class extends HTMLElement {
+  connectedCallback () {
+    this.addEventListener('click', this.onClick)
+  }
+
+  disconnectedCallback () {
+    this.removeEventListener('click', this.onClick)
+  }
+
+  onClick = (e) => {
+    e.preventDefault()
+
+    window.history.back()
+  }
+}

app/javascript/elements/open_modal_mobile.js

@@ -1,8 +1,9 @@
 export default class extends HTMLElement {
   connectedCallback () {
     if (!this.isMobile()) return
+    if (window.innerWidth >= 768) return
 
-    document.querySelectorAll('a[data-turbo-frame="modal"]').forEach((link) => {
+    this.querySelectorAll('a[data-turbo-frame]').forEach((link) => {
       link.dataset.turboFrame = '_top'
     })
   }

app/javascript/elements/turbo_modal.js

@@ -42,10 +42,6 @@ export default actionable(class extends HTMLElement {
   close = (e) => {
     e?.preventDefault()
 
-    if (!this.closest('turbo-frame')?.src && window.history.length > 1) {
+    this.remove()
-      window.history.back()
-    } else {
-      this.remove()
-    }
   }
 })

app/javascript/template_builder/builder.vue

@@ -164,7 +164,7 @@
             v-if="withSendButton"
             id="send_button"
             :href="`/templates/${template.id}/submissions/new?with_link=true`"
-            data-turbo-frame="modal"
+            :data-turbo-frame="isMobile && isBreakpointLg ? '_top' : 'modal'"
             class="white-button md:!px-6"
             @click="maybeShowErrorTemplateAlert"
           >
@@ -229,7 +229,7 @@
                 <li>
                   <a
                     :href="`/templates/${template.id}/preferences`"
-                    data-turbo-frame="modal"
+                    :data-turbo-frame="isMobile && isBreakpointLg ? '_top' : 'modal'"
                     class="flex space-x-2"
                     @click="closeDropdown"
                   >

app/views/layouts/application.html.erb

@@ -27,7 +27,6 @@
       <% end %>
     <% end %>
     <turbo-frame id="modal"></turbo-frame>
-    <convert-modal-links></convert-modal-links>
     <turbo-frame id="drawer"></turbo-frame>
     <%= render 'shared/navbar' %>
     <% if flash.present? %><%= render 'shared/flash' %><% end %>

app/views/shared/_turbo_modal_large.html.erb

@@ -1,18 +1,34 @@
-<turbo-frame id="modal">
+<% if turbo_frame_request? %>
-  <turbo-modal class="modal modal-open items-start !animate-none overflow-y-auto !justify-normal md:!justify-center" data-close-after-submit="<%= local_assigns.key?(:close_after_submit) ? local_assigns[:close_after_submit] : true %>">
+  <turbo-frame id="modal">
-    <div class="absolute top-0 bottom-0 right-0 left-0" data-action="click:turbo-modal#close"></div>
+    <turbo-modal class="modal modal-open items-start !animate-none overflow-y-auto !justify-normal md:!justify-center" data-close-after-submit="<%= local_assigns.key?(:close_after_submit) ? local_assigns[:close_after_submit] : true %>">
-    <div class="bg-base-100 min-h-screen max-h-screen md:min-h-fit md:mt-3 md:rounded-2xl relative w-full relative overflow-y-auto">
+      <div class="absolute top-0 bottom-0 right-0 left-0" data-action="click:turbo-modal#close"></div>
-      <% if local_assigns[:title] %>
+      <div class="bg-base-100 min-h-screen max-h-screen md:min-h-fit md:mt-3 md:rounded-2xl relative w-full relative overflow-y-auto">
-        <div class="flex justify-between bg-base-100 py-2 px-5 items-center border-b pb-2 font-medium mt-0.5">
+        <% if local_assigns[:title] %>
-          <span>
+          <div class="flex justify-between bg-base-100 py-2 px-5 items-center border-b pb-2 font-medium mt-0.5">
-            <%= local_assigns[:title] %>
+            <span>
-          </span>
+              <%= local_assigns[:title] %>
-          <a href="#" class="text-xl" data-action="click:turbo-modal#close">&times;</a>
+            </span>
+            <a href="#" class="text-xl" data-action="click:turbo-modal#close">&times;</a>
+          </div>
+        <% end %>
+        <div class="w-full md:w-[590px] overflow-y-auto" style="max-height: calc(100vh - 14px - 45px); max-height: calc(100dvh - 14px - 45px)">
+          <%= yield %>
         </div>
-      <% end %>
-      <div class="w-full md:w-[590px] overflow-y-auto" style="max-height: calc(100vh - 14px - 45px); max-height: calc(100dvh - 14px - 45px)">
-        <%= yield %>
       </div>
+    </turbo-modal>
+  </turbo-frame>
+<% else %>
+  <% if local_assigns[:title] %>
+    <div class="sticky top-0 z-10 flex justify-between bg-base-100 py-2 px-5 items-center border-b pb-2 font-medium">
+      <span>
+        <%= local_assigns[:title] %>
+      </span>
+      <history-back>
+        <a href="#" class="text-xl">&times;</a>
+      </history-back>
     </div>
-  </turbo-modal>
+  <% end %>
-</turbo-frame>
+  <div class="w-full">
+    <%= yield %>
+  </div>
+<% end %>

app/views/submissions/show.html.erb

@@ -25,10 +25,12 @@
           <span class="hidden md:inline"><%= t('audit_log') %></span>
         </a>
       <% elsif signed_in? %>
-        <%= link_to submission_events_path(@submission), class: 'white-button', data: { turbo_frame: :modal } do %>
+        <open-modal-mobile class="flex">
-          <%= svg_icon('logs', class: 'w-6 h-6') %>
+          <%= link_to submission_events_path(@submission), class: 'white-button', data: { turbo_frame: :modal } do %>
-          <span class="hidden md:block"><%= t('event_log') %></span>
+            <%= svg_icon('logs', class: 'w-6 h-6') %>
-        <% end %>
+            <span class="hidden md:block"><%= t('event_log') %></span>
+          <% end %>
+        </open-modal-mobile>
       <% end %>
       <% if signed_in? && !@submission.completed_at? && can?(:manage, :resend_all) && @submission.submitters.to_a.size > 3 && !@submission.archived_at? && !@submission.template&.archived_at? && !@submission.expired? && can?(:update, @submission) %>
         <% pending_submitters_count = @submission.submitters.to_a.count { |s| !s.completed_at? && s.email.present? && !s.declined_at? } %>
@@ -181,9 +183,11 @@
               </div>
               <% if signed_in? && can?(:update, @submission) && submitter && !submitter.completed_at? && !@submission.completed_at? && !submitter.declined_at? && !@submission.archived_at? && !@submission.template&.archived_at? && !@submission.expired? && !submitter.start_form_submission_events.any? %>
                 <span class="tooltip tooltip-left tooltip-no-touch" data-tip="<%= t('edit') %>">
-                  <%= link_to edit_submitter_path(submitter), class: 'shrink-0 inline md:hidden md:group-hover:inline', data: { turbo_frame: 'modal' } do %>
+                  <open-modal-mobile>
-                    <%= svg_icon('pencil', class: 'w-5 h-5') %>
+                    <%= link_to edit_submitter_path(submitter), class: 'shrink-0 inline md:hidden md:group-hover:inline', data: { turbo_frame: 'modal' } do %>
-                  <% end %>
+                      <%= svg_icon('pencil', class: 'w-5 h-5') %>
+                    <% end %>
+                  </open-modal-mobile>
                 </span>
               <% end %>
             </div>

app/views/submissions_dashboard/index.html.erb

@@ -18,10 +18,12 @@
       <span class="hidden sm:block">
         <%= render 'templates/upload_button' %>
       </span>
-      <%= link_to new_template_path, class: 'white-button !border gap-2', data: { turbo_frame: :modal } do %>
+      <open-modal-mobile class="flex">
-        <%= svg_icon('plus', class: 'w-6 h-6 stroke-2') %>
+        <%= link_to new_template_path, class: 'white-button !border gap-2', data: { turbo_frame: :modal } do %>
-        <span class="hidden md:block"><%= t('create') %></span>
+          <%= svg_icon('plus', class: 'w-6 h-6 stroke-2') %>
-      <% end %>
+          <span class="hidden md:block"><%= t('create') %></span>
+        <% end %>
+      </open-modal-mobile>
     <% end %>
   </div>
 </div>

app/views/template_folders/show.html.erb

@@ -37,10 +37,12 @@
         <span class="hidden sm:block">
           <%= render 'templates/upload_button', folder_name: @template_folder.full_name %>
         </span>
-        <%= link_to new_template_path(folder_name: @template_folder.full_name), class: 'white-button !border gap-2', data: { turbo_frame: :modal } do %>
+        <open-modal-mobile class="flex">
-          <%= svg_icon('plus', class: 'w-6 h-6 stroke-2') %>
+          <%= link_to new_template_path(folder_name: @template_folder.full_name), class: 'white-button !border gap-2', data: { turbo_frame: :modal } do %>
-          <span class="hidden md:block"><%= t('create') %></span>
+            <%= svg_icon('plus', class: 'w-6 h-6 stroke-2') %>
-        <% end %>
+            <span class="hidden md:block"><%= t('create') %></span>
+          <% end %>
+        </open-modal-mobile>
       <% end %>
     </div>
   </div>

app/views/templates/_submission.html.erb

@@ -53,9 +53,11 @@
               </a>
               <% if !submitter.completed_at? && !submission.completed_at? && can?(:update, submission) && !submitter.start_form_submission_events.any? && !submission.archived_at? && !submission.expired? && !submitter.declined_at? %>
                 <span class="pl-0.5 tooltip tooltip-top tooltip-no-touch md:opacity-0 md:hover:opacity-100 md:peer-hover:opacity-100" data-tip="<%= t('edit') %>">
-                  <%= link_to edit_submitter_path(submitter), class: 'shrink-0', data: { turbo_frame: 'modal' } do %>
+                  <open-modal-mobile>
-                    <%= svg_icon('pencil', class: 'w-5 h-5') %>
+                    <%= link_to edit_submitter_path(submitter), class: 'shrink-0', data: { turbo_frame: 'modal' } do %>
-                  <% end %>
+                      <%= svg_icon('pencil', class: 'w-5 h-5') %>
+                    <% end %>
+                  </open-modal-mobile>
                 </span>
               <% end %>
             </span>
@@ -146,9 +148,11 @@
                     </a>
                     <% if !submitter.completed_at? && !submission.completed_at? && can?(:update, submission) && !submitter.start_form_submission_events.any? && !submission.archived_at? && !submission.expired? && !submitter.declined_at? %>
                       <span class="pl-0.5 tooltip tooltip-top tooltip-no-touch md:opacity-0 md:hover:opacity-100 md:peer-hover:opacity-100" data-tip="<%= t('edit') %>">
-                        <%= link_to edit_submitter_path(submitter), class: 'shrink-0', data: { turbo_frame: 'modal' } do %>
+                        <open-modal-mobile>
-                          <%= svg_icon('pencil', class: 'w-5 h-5') %>
+                          <%= link_to edit_submitter_path(submitter), class: 'shrink-0', data: { turbo_frame: 'modal' } do %>
-                        <% end %>
+                            <%= svg_icon('pencil', class: 'w-5 h-5') %>
+                          <% end %>
+                        </open-modal-mobile>
                       </span>
                     <% end %>
                   </span>

app/views/templates/_title.html.erb

@@ -52,12 +52,14 @@
             <% end %>
           </div>
         <% end %>
-        <%= link_to template_share_link_path(template), class: 'absolute md:relative bottom-0 right-0 btn btn-xs md:btn-sm whitespace-nowrap btn-neutral text-white mt-1 px-2', data: { turbo_frame: :modal } do %>
+        <open-modal-mobile class="absolute md:relative bottom-0 right-0 mt-1">
-          <span class="flex items-center justify-center space-x-2">
+          <%= link_to template_share_link_path(template), class: 'btn btn-xs md:btn-sm whitespace-nowrap btn-neutral text-white px-2', data: { turbo_frame: :modal } do %>
-            <%= svg_icon('link', class: 'w-4 h-4 md:w-6 md:h-6') %>
+            <span class="flex items-center justify-center space-x-2">
-            <span><%= t('link') %></span>
+              <%= svg_icon('link', class: 'w-4 h-4 md:w-6 md:h-6') %>
-          </span>
+              <span><%= t('link') %></span>
-        <% end %>
+            </span>
+          <% end %>
+        </open-modal-mobile>
       </div>
     <% end %>
   </div>

app/views/templates/show.html.erb

@@ -18,10 +18,12 @@
           <span><%= t('export') %></span>
         <% end %>
         <% if !@template.archived_at? && can?(:create, Submission) %>
-          <%= link_to new_template_submission_path(@template), id: 'add_recipients_button', class: 'white-button !border', data: { turbo_frame: 'modal' } do %>
+          <open-modal-mobile class="flex">
-            <%= svg_icon('plus', class: 'w-6 h-6 stroke-2') %>
+            <%= link_to new_template_submission_path(@template), id: 'add_recipients_button', class: 'white-button !border', data: { turbo_frame: 'modal' } do %>
-            <%= t('add_recipients_html') %>
+              <%= svg_icon('plus', class: 'w-6 h-6 stroke-2') %>
-          <% end %>
+              <%= t('add_recipients_html') %>
+            <% end %>
+          </open-modal-mobile>
         <% end %>
       </div>
     </div>

app/views/templates_dashboard/index.html.erb

@@ -30,10 +30,12 @@
         <span class="hidden sm:block">
           <%= render 'templates/upload_button' %>
         </span>
-        <%= link_to new_template_path, class: 'white-button !border gap-2', data: { turbo_frame: :modal } do %>
+        <open-modal-mobile class="flex">
-          <%= svg_icon('plus', class: 'w-6 h-6 stroke-2') %>
+          <%= link_to new_template_path, class: 'white-button !border gap-2', data: { turbo_frame: :modal } do %>
-          <span class="hidden md:block"><%= t('create') %></span>
+            <%= svg_icon('plus', class: 'w-6 h-6 stroke-2') %>
-        <% end %>
+            <span class="hidden md:block"><%= t('create') %></span>
+          <% end %>
+        </open-modal-mobile>
       <% end %>
     </div>
   </div>