Tidy up homepage and navigation

2025-11-09 20:58:13 +11:00
parent c9e2992fe0
commit 1f4428348d
56 changed files with 2822 additions and 955 deletions
--- a/app/helpers/application_helper.rb
+++ b/app/helpers/application_helper.rb
@@ -1,3 +1,92 @@
 module ApplicationHelper
  include Pagy::Frontend if defined?(Pagy)
+
+  # Helper method for time period selector styling
+  def time_period_class(period)
+    base_classes = "px-4 py-2 text-sm font-medium border-r border-gray-300 last:border-r-0"
+
+    if @time_period == period
+      base_classes + " bg-blue-600 text-white"
+    else
+      base_classes + " text-gray-700 hover:bg-gray-50"
+    end
+  end
+
+  # Custom pagination with Tailwind CSS styling
+  def pagy_nav_tailwind(pagy, pagy_id: nil)
+    return '' if pagy.pages <= 1
+
+    html = '<nav class="flex items-center justify-between" aria-label="Pagination">'
+    html += '<div class="flex-1 flex justify-between sm:hidden">'
+
+    if pagy.prev
+      html += link_to('← Previous', pagy_url_for(pagy, pagy.prev),
+                      class: 'relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50')
+    else
+      html += '<span class="relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-300 bg-gray-100 cursor-not-allowed">← Previous</span>'
+    end
+
+    if pagy.next
+      html += link_to('Next →', pagy_url_for(pagy, pagy.next),
+                      class: 'ml-3 relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50')
+    else
+      html += '<span class="ml-3 relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-300 bg-gray-100 cursor-not-allowed">Next →</span>'
+    end
+
+    html += '</div>'
+    html += '<div class="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between">'
+    html += '<div>'
+    html += '<p class="text-sm text-gray-700">'
+    html += 'Showing'
+    html += " <span class=\"font-medium\">#{pagy.from}</span>"
+    html += ' to'
+    html += " <span class=\"font-medium\">#{pagy.to}</span>"
+    html += ' of'
+    html += " <span class=\"font-medium\">#{pagy.count}</span>"
+    html += ' results'
+    html += '</p>'
+    html += '</div>'
+    html += '<div>'
+    html += '<nav class="relative z-0 inline-flex rounded-md shadow-sm -space-x-px" aria-label="Pagination">'
+
+    # Previous button
+    if pagy.prev
+      html += link_to('←', pagy_url_for(pagy, pagy.prev),
+                      class: 'relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50')
+    else
+      html += '<span class="relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 bg-gray-50 text-sm font-medium text-gray-300 cursor-not-allowed">←</span>'
+    end
+
+    # Page numbers
+    pagy.series.each do |item|
+      case item
+      when Integer
+        if item == pagy.page
+          html += "<span aria-current=\"page\" class=\"relative inline-flex items-center px-4 py-2 border border-blue-500 bg-blue-500 text-sm font-medium text-white\">#{item}</span>"
+        else
+          html += link_to(item, pagy_url_for(pagy, item),
+                          class: 'relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50')
+        end
+      when String
+        html += "<span class=\"relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700\">#{item}</span>"
+      when :gap
+        html += "<span class=\"relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700\">...</span>"
+      end
+    end
+
+    # Next button
+    if pagy.next
+      html += link_to('→', pagy_url_for(pagy, pagy.next),
+                      class: 'relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50')
+    else
+      html += '<span class="relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 bg-gray-50 text-sm font-medium text-gray-300 cursor-not-allowed">→</span>'
+    end
+
+    html += '</nav>'
+    html += '</div>'
+    html += '</div>'
+    html += '</nav>'
+
+    raw html
+  end
 end