adjust mobile ui

app/javascript/application.js

@@ -25,6 +25,7 @@ import PromptPassword from './elements/prompt_password'
 import EmailsTextarea from './elements/emails_textarea'
 import ToggleOnSubmit from './elements/toggle_on_submit'
 import PasswordInput from './elements/password_input'
+import SearchInput from './elements/search_input'
 
 import * as TurboInstantClick from './lib/turbo_instant_click'
 
@@ -87,6 +88,7 @@ safeRegisterElement('emails-textarea', EmailsTextarea)
 safeRegisterElement('toggle-cookies', ToggleCookies)
 safeRegisterElement('toggle-on-submit', ToggleOnSubmit)
 safeRegisterElement('password-input', PasswordInput)
+safeRegisterElement('search-input', SearchInput)
 
 safeRegisterElement('template-builder', class extends HTMLElement {
   connectedCallback () {

app/javascript/elements/search_input.js

@@ -0,0 +1,25 @@
+export default class extends HTMLElement {
+  connectedCallback () {
+    this.input.addEventListener('focus', () => {
+      if (this.title) {
+        this.title.classList.add('hidden', 'md:block')
+        this.input.classList.add('w-60')
+      }
+    })
+
+    this.input.addEventListener('blur', (e) => {
+      if (this.title && !e.target.value) {
+        this.title.classList.remove('hidden')
+        this.input.classList.remove('w-60')
+      }
+    })
+  }
+
+  get input () {
+    return this.querySelector('input')
+  }
+
+  get title () {
+    return document.querySelector(this.dataset.title)
+  }
+}

app/views/shared/_search_input.html.erb

@@ -1,4 +1,4 @@
-<form action="<%= url_for %>" method="get" class="items-center hidden md:flex">
+<form action="<%= url_for %>" method="get" class="items-center flex">
   <% if params[:status].present? %>
     <input name="status" value="<%= params[:status] %>" class="hidden">
   <% end %>
@@ -9,7 +9,9 @@
       </a>
     </div>
   <% end %>
-  <input id="search" name="q" value="<%= params[:q] %>" class="input input-ghost text-lg pr-10 -mr-12 <%= 'pl-8 input-outlined' if params[:q].present? %>" placeholder="<%= local_assigns[:placeholder] %>">
+  <search-input data-title="<%= local_assigns[:title_selector] || 'h1' %>">
+    <input id="search" name="q" value="<%= params[:q] %>" class="input input-ghost text-lg pr-10 -mr-12 w-0 md:w-64 <%= 'pl-8 input-outlined w-64' if params[:q].present? %>" placeholder="<%= local_assigns[:placeholder] %>">
+  </search-input>
   <button type="submit" title="Search" class="btn btn-ghost btn-circle" onclick="window.search.value || document.activeElement === window.search ? null : [event.preventDefault(), window.search.focus()]">
     <span class="enabled">
       <%= svg_icon('search', class: 'w-6 h-6 stroke-2') %>

app/views/submissions_archived/index.html.erb

@@ -5,7 +5,9 @@
   <% end %>
 </div>
 <div class="flex justify-between mb-4 items-center">
-  <h1 class="text-4xl font-bold">Submissions <span class="badge badge-outline badge-lg align-middle">Archived</span></h1>
+  <div>
+    <h1 class="text-4xl font-bold md:block <%= 'hidden' if params[:q].present? %>">Submissions <span class="badge badge-outline badge-lg align-middle">Archived</span></h1>
+  </div>
   <% if params[:q].present? || @pagy.pages > 1 %>
     <%= render 'shared/search_input', placeholder: 'Search...' %>
   <% end %>

app/views/submissions_dashboard/index.html.erb

@@ -5,7 +5,7 @@
     <div class="mr-2">
       <%= render 'dashboard/toggle_view', selected: 'submissions' %>
     </div>
-    <h1 class="text-3xl sm:text-4xl font-bold">Submissions</h1>
+    <h1 class="text-3xl sm:text-4xl font-bold md:block <%= 'hidden' if params[:q].present? %>">Submissions</h1>
   </div>
   <div class="flex space-x-2">
     <% if params[:q].present? || @pagy.pages > 1 %>

app/views/template_folders/show.html.erb

@@ -5,7 +5,7 @@
   <% end %>
 </div>
 <div class="flex justify-between mb-4 items-center">
-  <h1 class="text-4xl font-bold flex items-center space-x-2">
+  <h1 class="text-4xl font-bold flex items-center space-x-2 md:flex <%= 'hidden' if params[:q].present? %>">
     <%= svg_icon('folder', class: 'w-9 h-9 flex-shrink-0') %>
     <span class="peer">
       <%= @template_folder.name %>

app/views/templates/_submission.html.erb

@@ -7,12 +7,12 @@
         <div class="font-medium items-start w-full group-hover:link text-sm flex space-x-1">
           <%= svg_icon('file_text', class: 'w-4 h-4 mt-0.5 flex-shrink-0') %>
           <span style="overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;">
-            <%= template.name %>
+            <% template.name.split(/(_)/).each do |item| %><%= item %><wbr><% end %>
             <%= svg_icon('arrow_right', class: 'w-4 h-4 sm:inline group-hover:visible invisible hidden') %>
           </span>
         </div>
       </div>
-      <div class="flex-shrink-0 sm:mt-2">
+      <div class="flex-shrink-0 sm:mt-2 w-1/2 md:w-full">
         <div class="flex text-xs flex-col text-base-content/60  space-y-0.5">
           <span class="flex items-center space-x-1">
             <%= svg_icon('user', class: 'w-4 h-4 flex-shrink-0') %>
@@ -195,6 +195,11 @@
             <%= button_to button_title(title: nil, disabled_with: 'Arch', icon: svg_icon('archive', class: 'w-6 h-6')), submission_path(submission), class: 'btn btn-outline btn-sm w-full md:w-fit', form: { class: 'flex' }, title: 'Archive', method: :delete, onclick: 'event.stopPropagation()' %>
           </span>
         <% end %>
+        <% if local_assigns[:archived] && can?(:destroy, submission) %>
+          <span data-tip="Remove" class="sm:tooltip tooltip-top">
+            <%= button_to button_title(title: nil, disabled_with: 'Rem', icon: svg_icon('trash', class: 'w-6 h-6')), submission_path(submission, permanently: true), class: 'btn btn-outline btn-sm w-full md:w-fit', form: { class: 'flex' }, title: 'Remove', method: :delete, data: { turbo_confirm: 'Submission deletion is irreversible and will permanently remove all associated signed documents with it. Are you sure?' }, onclick: 'event.stopPropagation()' %>
+          </span>
+        <% end %>
       </div>
     <% end %>
   </a>

app/views/templates/_template.html.erb

@@ -1,7 +1,7 @@
 <div class="h-36 relative group">
   <a href="<%= template_path(template) %>" class="flex h-full flex-col justify-between rounded-2xl pt-6 px-7 w-full bg-base-200 peer">
     <div class="pb-4 text-xl font-semibold" style="overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;">
-      <%= template.name %>
+      <% template.name.split(/(_)/).each do |item| %><%= item %><wbr><% end %>
     </div>
     <div class="pb-6 pt-1 space-y-1">
       <p class="flex items-center space-x-1 text-xs text-base-content/60">

app/views/templates/show.html.erb

@@ -3,10 +3,12 @@
 <% if !@pagy.count.zero? || params[:q].present? || params[:status].present? %>
   <div class="<%= is_show_tabs ? 'mb-4' : 'mb-6' %>">
     <div class="flex justify-between items-center md:items-end">
-      <p class="text-3xl font-bold">Submissions</p>
+      <div>
+        <h2 class="text-3xl font-bold md:block <%= 'hidden' if params[:q].present? %>">Submissions</h2>
+      </div>
       <div class="flex justify-end space-x-2">
         <% if params[:q].present? || params[:status].present? || @pagy.pages > 1 %>
-          <%= render 'shared/search_input' %>
+          <%= render 'shared/search_input', title_selector: 'h2' %>
         <% end %>
         <%= link_to new_template_submissions_export_path(@template), class: 'hidden md:flex btn btn-ghost text-base', data: { turbo_frame: 'modal' } do %>
           <%= svg_icon('download', class: 'w-6 h-6 stroke-2') %>

app/views/templates_archived/index.html.erb

@@ -5,7 +5,9 @@
   <% end %>
 </div>
 <div class="flex justify-between mb-4 items-center">
-  <h1 class="text-4xl font-bold"><span class="hidden md:inline">Document</span> Templates <span class="badge badge-outline badge-lg align-middle">Archived</span></h1>
+  <div>
+  <h1 class="text-4xl font-bold md:block <%= 'hidden' if params[:q].present? %>"><span class="hidden md:inline">Document</span> Templates <span class="badge badge-outline badge-lg align-middle">Archived</span></h1>
+  </div>
   <% if params[:q].present? || @pagy.pages > 1 %>
     <%= render 'shared/search_input', placeholder: 'Search...' %>
   <% end %>

app/views/templates_archived_submissions/index.html.erb

@@ -6,7 +6,9 @@
   <% end %>
 </div>
 <div class="flex justify-between mb-6 md:items-end flex-col md:flex-row">
-  <p class="text-3xl font-bold">Submissions <span class="badge badge-outline badge-lg align-middle">Archived</span></p>
+  <div>
+    <h1 class="text-3xl font-bold md:block <%= 'hidden' if params[:q].present? %>">Submissions <span class="badge badge-outline badge-lg align-middle">Archived</span></h1>
+  </div>
   <div class="flex space-x-2 mt-3 md:mt-0">
     <% if params[:q].present? || @pagy.pages > 1 %>
       <%= render 'shared/search_input' %>

app/views/templates_dashboard/index.html.erb

@@ -7,7 +7,7 @@
         <%= render 'dashboard/toggle_view', selected: 'templates' %>
       </div>
     <% end %>
-    <h1 class="text-3xl sm:text-4xl font-bold"><span class="hidden md:inline">Document</span> Templates</h1>
+    <h1 class="text-3xl sm:text-4xl font-bold md:block <%= 'hidden' if params[:q].present? %>"><span class="hidden md:inline">Document</span> Templates</h1>
   </div>
   <div class="flex space-x-2">
     <% if params[:q].present? || @pagy.pages > 1 || @template_folders.present? %>