add mobile filters

app/javascript/application.js

@@ -56,6 +56,7 @@ import OpenModal from './elements/open_modal'
 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 * as TurboInstantClick from './lib/turbo_instant_click'
 
@@ -150,6 +151,7 @@ safeRegisterElement('open-modal', OpenModal)
 safeRegisterElement('bar-chart', BarChart)
 safeRegisterElement('field-condition', FieldCondition)
 safeRegisterElement('confirm-upload', ConfirmUpload)
+safeRegisterElement('scroll-fade', ScrollFade)
 
 safeRegisterElement('template-builder', class extends HTMLElement {
   connectedCallback () {

app/javascript/elements/scroll_fade.js

@@ -0,0 +1,40 @@
+export default class extends HTMLElement {
+  connectedCallback () {
+    this.addEventListener('scroll', this.updateFade, { passive: true })
+    window.addEventListener('resize', this.updateFade)
+
+    this.updateFade()
+  }
+
+  disconnectedCallback () {
+    window.removeEventListener('resize', this.updateFade)
+  }
+
+  updateFade = () => {
+    const maxScroll = this.scrollWidth - this.clientWidth
+    const fadeGradient = {
+      right: 'linear-gradient(to right, black calc(100% - 24px), transparent)',
+      left: 'linear-gradient(to right, transparent, black 24px)',
+      both: 'linear-gradient(to right, transparent, black 24px, black calc(100% - 24px), transparent)'
+    }
+
+    let state = 'none'
+
+    if (maxScroll > 4) {
+      if (this.scrollLeft <= 4) {
+        state = 'right'
+      } else if (this.scrollLeft >= maxScroll - 4) {
+        state = 'left'
+      } else {
+        state = 'both'
+      }
+    }
+
+    this.applyFade(fadeGradient[state] || '')
+  }
+
+  applyFade (gradient) {
+    this.style.maskImage = gradient
+    this.style.webkitMaskImage = gradient
+  }
+}

app/views/shared/_classes.html.erb

@@ -1 +1 @@
-<% 'stats stat stat-figure stat-title stat-value text-accent w-fit hover:bg-white dropdown-open border-base-content/30 before:border-base-content/30' %>
+<% 'stats stat stat-figure stat-title stat-value text-accent w-fit hover:bg-white dropdown-open border-base-content/30 before:border-base-content/30 order-none order-1 order-2 order-3 order-4 order-5' %>

app/views/submissions_archived/index.html.erb

@@ -16,7 +16,7 @@
       <% end %>
     </div>
   </div>
-  <div class="flex flex-col items-end md:flex-row gap-2">
+  <div class="flex items-center md:items-end gap-2">
     <%= render 'submissions_filters/applied_filters', filter_params: %>
     <%= render 'submissions_filters/filter_button', filter_params: %>
   </div>

app/views/submissions_dashboard/index.html.erb

@@ -34,7 +34,7 @@
 <% end %>
 <% if is_show_tabs %>
   <div class="flex items-center flex-col md:flex-row md:flex-wrap gap-2 mb-4">
-    <div class="flex items-center md:items-end flex-col md:flex-row gap-2 w-full md:w-fit">
+    <div class="hidden md:flex md:items-end gap-2 md:w-fit">
       <a href="<%= url_for(params: request.query_parameters.except('status')) %>" class="<%= params[:status].blank? ? 'border-neutral-700' : 'border-neutral-300' %> flex h-10 px-2 py-1 text-lg items-center justify-between border text-center text-neutral font-semibold rounded-xl w-full md:w-48 hover:border-neutral-600">
         <div class="flex items-center space-x-1">
           <%= svg_icon('list', class: 'w-5 h-5') %>
@@ -54,8 +54,8 @@
         </div>
       </a>
     </div>
-    <div class="flex items-end flex-col md:flex-row gap-2 w-full md:w-fit">
+    <div class="flex items-center md:items-end gap-2 w-full md:w-fit">
-      <%= render 'submissions_filters/applied_filters', filter_params: %>
+      <%= render 'submissions_filters/applied_filters', filter_params:, with_status: true %>
       <%= render 'submissions_filters/filter_button', filter_params: %>
       <%= render 'submissions_filters/actions', filter_params: %>
     </div>

app/views/submissions_filters/_applied_filters.html.erb

@@ -1,6 +1,20 @@
 <% query_params = params.permit(:q).merge(filter_params) %>
+<% filter_names = %w[status folder author completed_at created_at] %>
+<% ordered_filters = request.query_parameters.keys.filter_map { |key| filter_names.find { |name| key.start_with?(name) } }.uniq %>
+<% chip_order = ordered_filters.reverse.each_with_index.to_h { |name, index| [name, index + 1] } %>
+<% chip_order.default = ordered_filters.size + 1 %>
+<scroll-fade class="flex items-center gap-2 overflow-x-auto flex-1 min-w-0 [scrollbar-width:none] [&::-webkit-scrollbar]:hidden [&::-webkit-scrollbar]:h-0 [&::-webkit-scrollbar]:w-0 md:contents">
+  <% if local_assigns[:with_status] %>
+    <% status_icons = { 'all' => 'list', 'pending' => 'clock', 'completed' => 'circle_check', 'partially_completed' => 'clock_edit', 'sent' => 'send', 'opened' => 'mail_opened', 'declined' => 'x_circle', 'expired' => 'clock_cancel' } %>
+    <% current_status = status_icons.key?(params[:status].to_s) ? params[:status] : 'all' %>
+    <a href="<%= submissions_filter_path('status', query_params.merge(path: url_for)) %>" data-turbo-frame="modal" class="order-<%= current_status == 'all' ? 'none' : chip_order['status'] %> md:hidden flex h-10 px-2 py-1 space-x-1 text-base items-center border text-neutral rounded-xl shrink-0 <%= current_status == 'all' ? 'border-neutral-300' : 'border-neutral-700' %>">
+      <%= svg_icon(status_icons[current_status], class: 'w-5 h-5 shrink-0') %>
+      <span><%= t(current_status) %></span>
+      <%= svg_icon('chevron_down', class: 'w-4 h-4 shrink-0') %>
+    </a>
+  <% end %>
   <% if icon = { 'declined' => 'x_circle', 'expired' => 'clock_cancel', 'partially_completed' => 'clock_edit', 'sent' => 'send', 'opened' => 'mail_opened' }[params[:status]] %>
-  <div class="flex h-10 px-2 py-1 text-lg items-center justify-between border text-center text-neutral font-semibold rounded-xl w-full md:w-36 border-neutral-700">
+    <div class="order-<%= chip_order['status'] %> md:order-none <%= 'hidden md:flex' if local_assigns[:with_status] %> flex h-10 px-2 py-1 text-base md:text-lg items-center justify-between border text-center text-neutral font-semibold rounded-xl shrink-0 max-w-[60vw] md:w-36 border-neutral-700">
       <%= link_to submissions_filter_path('status', query_params.merge(path: url_for, with_remove: true)), data: { turbo_frame: 'modal' }, class: 'flex items-center space-x-1 flex-1 min-w-0 pr-1' do %>
         <%= svg_icon(icon, class: 'w-5 h-5 shrink-0') %>
         <span class="font-normal truncate"><%= t(params[:status]) %></span>
@@ -11,7 +25,7 @@
     </div>
   <% end %>
   <% if params[:folder].present? %>
-  <div class="tooltip tooltip-no-touch tooltip-bottom flex h-10 px-2 py-1 text-lg items-center justify-between border text-center text-neutral font-semibold rounded-xl w-full md:w-36 border-neutral-700" data-tip="<%= t('folder') %>">
+    <div class="order-<%= chip_order['folder'] %> md:order-none md:tooltip tooltip-no-touch tooltip-bottom flex md:flex h-10 px-2 py-1 text-base md:text-lg items-center justify-between border text-center text-neutral font-semibold rounded-xl shrink-0 max-w-[60vw] md:w-36 border-neutral-700" data-tip="<%= t('folder') %>">
       <%= link_to submissions_filter_path('folder', query_params.merge(path: url_for, with_remove: true)), data: { turbo_frame: 'modal' }, class: 'flex items-center space-x-1 flex-1 min-w-0 pr-1' do %>
         <%= svg_icon('folder', class: 'w-5 h-5 shrink-0') %>
         <span class="font-normal truncate"><%= params[:folder] %></span>
@@ -22,7 +36,7 @@
     </div>
   <% end %>
   <% if params[:author].present? %>
-  <div class="tooltip tooltip-no-touch tooltip-bottom flex h-10 px-2 py-1 text-lg items-center justify-between border text-center text-neutral font-semibold rounded-xl w-full md:w-36 border-neutral-700" data-tip="<%= t('author') %>">
+    <div class="order-<%= chip_order['author'] %> md:order-none md:tooltip tooltip-no-touch tooltip-bottom flex md:flex h-10 px-2 py-1 text-base md:text-lg items-center justify-between border text-center text-neutral font-semibold rounded-xl shrink-0 max-w-[60vw] md:w-36 border-neutral-700" data-tip="<%= t('author') %>">
       <%= link_to submissions_filter_path('author', query_params.merge(path: url_for, with_remove: true)), data: { turbo_frame: 'modal' }, class: 'flex items-center space-x-1 flex-1 min-w-0 pr-1' do %>
         <%= svg_icon('user', class: 'w-5 h-5 shrink-0') %>
         <span class="font-normal truncate"><%= current_account.users.accessible_by(current_ability).where(account: current_account).find_by(email: params[:author])&.full_name || 'NA' %></span>
@@ -33,15 +47,14 @@
     </div>
   <% end %>
   <% if query_params[:completed_at_from].present? || query_params[:completed_at_to].present? %>
-  <div class="tooltip tooltip-no-touch tooltip-bottom flex h-10 px-2 py-1 text-lg items-center justify-between border text-center text-neutral font-semibold rounded-xl w-full md:w-36 border-neutral-700" data-tip="<%= t('completed_at') %>">
+    <div class="order-<%= chip_order['completed_at'] %> md:order-none md:tooltip tooltip-no-touch tooltip-bottom flex md:flex h-10 px-2 py-1 text-base md:text-lg items-center justify-between border text-center text-neutral font-semibold rounded-xl shrink-0 max-w-[60vw] md:w-36 border-neutral-700" data-tip="<%= t('completed_at') %>">
       <%= link_to submissions_filter_path('completed_at', query_params.merge(path: url_for, with_remove: true)), data: { turbo_frame: 'modal' }, class: 'flex items-center space-x-1 flex-1 min-w-0 pr-1' do %>
         <%= svg_icon('calendar_check', class: 'w-5 h-5 shrink-0') %>
-      <span class="flex flex-row md:flex-col font-normal text-left md:text-center md:text-xs">
+        <span class="flex flex-col font-normal text-left md:text-center text-xs">
           <% if query_params[:completed_at_from] == query_params[:completed_at_to] %>
             <span><%= l(Date.parse(query_params[:completed_at_from]), locale: current_account.locale) %></span>
           <% else %>
             <span><%= query_params[:completed_at_from].present? ? l(Date.parse(query_params[:completed_at_from]), locale: current_account.locale) : '∞' %></span>
-          <span class="px-1 md:px-0 md:hidden">-</span>
             <span><%= query_params[:completed_at_to].present? ? l(Date.parse(query_params[:completed_at_to]), locale: current_account.locale) : t('today') %></span>
           <% end %>
         </span>
@@ -52,15 +65,14 @@
     </div>
   <% end %>
   <% if query_params[:created_at_from].present? || query_params[:created_at_to].present? %>
-  <div class="tooltip tooltip-no-touch tooltip-bottom flex h-10 px-2 py-1 text-lg items-center justify-between border text-center text-neutral font-semibold rounded-xl w-full md:w-36 border-neutral-700" data-tip="<%= t('created_at') %>">
+    <div class="order-<%= chip_order['created_at'] %> md:order-none md:tooltip tooltip-no-touch tooltip-bottom flex md:flex h-10 px-2 py-1 text-base md:text-lg items-center justify-between border text-center text-neutral font-semibold rounded-xl shrink-0 max-w-[60vw] md:w-36 border-neutral-700" data-tip="<%= t('created_at') %>">
       <%= link_to submissions_filter_path('created_at', query_params.merge(path: url_for, with_remove: true)), data: { turbo_frame: 'modal' }, class: 'flex items-center space-x-1 flex-1 min-w-0 pr-1' do %>
         <%= svg_icon('calendar', class: 'w-5 h-5 shrink-0') %>
-      <span class="flex flex-row md:flex-col font-normal text-left md:text-center md:text-xs">
+        <span class="flex flex-col font-normal text-left md:text-center text-xs">
           <% if query_params[:created_at_from] == query_params[:created_at_to] %>
             <span><%= l(Date.parse(query_params[:created_at_from]), locale: current_account.locale) %></span>
           <% else %>
             <span><%= query_params[:created_at_from].present? ? l(Date.parse(query_params[:created_at_from]), locale: current_account.locale) : '∞' %></span>
-          <span class="px-1 md:px-0 md:hidden">-</span>
             <span><%= query_params[:created_at_to].present? ? l(Date.parse(query_params[:created_at_to]), locale: current_account.locale) : t('today') %></span>
           <% end %>
         </span>
@@ -70,3 +82,4 @@
       <% end %>
     </div>
   <% end %>
+</scroll-fade>

app/views/submissions_filters/_filter_button.html.erb

@@ -1,8 +1,9 @@
 <% query_params = params.permit(:q).merge(filter_params) %>
-<div class="dropdown dropdown-end">
+<% advanced_filters = filter_params.then { |f| f[:status].in?(%w[pending completed]) ? f.except(:status) : f } %>
-  <label tabindex="0" class="cursor-pointer flex h-10 px-3 py-1 space-x-1 text-lg items-center justify-between border text-center text-neutral rounded-xl border-neutral-300 hover:border-neutral-700">
+<div class="dropdown dropdown-end shrink-0">
+  <label tabindex="0" class="cursor-pointer flex h-10 py-1 w-10 md:w-auto px-0 md:px-3 space-x-0 md:space-x-1 justify-center md:justify-between text-lg items-center border text-center text-neutral rounded-xl <%= advanced_filters.present? ? 'border-neutral-700 md:border-neutral-300' : 'border-neutral-300' %> hover:border-neutral-700">
     <%= svg_icon('filter', class: 'w-5 h-5 flex-shrink-0 stroke-2') %>
-    <span class="<%= filter_params.then { |f| f[:status].in?(%w[pending completed]) ? f.except(:status) : f }.present? ? 'md:hidden' : '' %>">Filter</span>
+    <span class="hidden <%= 'md:inline' if advanced_filters.blank? %>">Filter</span>
   </label>
   <ul tabindex="0" class="z-10 dropdown-content p-2 mt-2 shadow menu text-base bg-base-100 rounded-box min-w-[180px] text-right">
     <li class="flex">
@@ -17,7 +18,7 @@
         <span><%= t('created_at') %></span>
       <% end %>
     </li>
-    <li class="flex">
+    <li class="hidden md:flex">
       <%= link_to submissions_filter_path('status', query_params.merge(path: url_for)), data: { turbo_frame: 'modal' } do %>
         <%= svg_icon('info_circle', class: 'w-5 h-5 flex-shrink-0 stroke-2') %>
         <span><%= t('status') %></span>

app/views/template_folders/show.html.erb

@@ -1,5 +1,5 @@
 <div>
-  <%= link_to @template_folder.parent_folder ? folder_path(@template_folder.parent_folder) : root_path, class: 'flex items-center mb-1 md:mb-0' do %>
+  <%= link_to @template_folder.parent_folder ? folder_path(@template_folder.parent_folder) : root_path, class: 'flex items-center' do %>
     <%= svg_icon('chevron_left', class: 'w-5 h-5') %>
     <span style="margin-left: 3px"><%= @template_folder.parent_folder&.name || t('home') %></span>
   <% end %>

app/views/templates/show.html.erb

@@ -29,7 +29,7 @@
 <% end %>
 <% if is_show_tabs %>
   <div class="flex items-center flex-col md:flex-row md:flex-wrap gap-2 mb-4">
-    <div class="flex items-center md:items-end flex-col md:flex-row gap-2 w-full md:w-fit">
+    <div class="hidden md:flex md:items-end gap-2 md:w-fit">
       <a href="<%= url_for(params: request.query_parameters.except('status')) %>" class="<%= params[:status].blank? ? 'border-neutral-700' : 'border-neutral-300' %> flex h-10 px-2 py-1 text-lg items-center justify-between border text-center text-neutral font-semibold rounded-xl w-full md:w-48 hover:border-neutral-700">
         <div class="flex items-center space-x-1">
           <%= svg_icon('list', class: 'w-5 h-5') %>
@@ -64,8 +64,8 @@
         <% end %>
       </a>
     </div>
-    <div class="flex items-end flex-col md:flex-row gap-2 w-full md:w-fit">
+    <div class="flex items-center md:items-end gap-2 w-full md:w-fit">
-      <%= render 'submissions_filters/applied_filters', filter_params: %>
+      <%= render 'submissions_filters/applied_filters', filter_params:, with_status: true %>
       <%= render 'submissions_filters/filter_button', filter_params: %>
       <% unless @template.archived_at? %>
         <%= render 'submissions_filters/actions', filter_params: filter_params.merge(template_id: @template.id) %>

app/views/templates_archived_submissions/index.html.erb

@@ -18,12 +18,12 @@
       <% end %>
     </div>
   </div>
-  <div class="flex flex-wrap justify-end items-center gap-2">
+  <div class="flex flex-nowrap md:flex-wrap justify-end items-center gap-2">
     <%= render 'submissions_filters/applied_filters', filter_params: %>
     <div class="shrink-0 md:order-first">
       <%= link_to new_template_submissions_export_path(@template, archived: true), class: 'btn btn-ghost text-base h-10 min-h-10', data: { turbo_frame: 'modal' } do %>
         <%= svg_icon('download', class: 'w-6 h-6 stroke-2') %>
-        <span><%= t('export') %></span>
+        <span class="hidden md:inline"><%= t('export') %></span>
       <% end %>
     </div>
     <%= render 'submissions_filters/filter_button', filter_params: %>