Skip to content

Fix/mobile optimisation #117

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
VirginiaDooley merged 6 commits into from
Dec 3, 2025
Merged

Fix/mobile optimisation #117

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
cc0f466
Optimise nav for mobile
VirginiaDooley Nov 13, 2025
9181f91
Don't commit data files
VirginiaDooley Nov 13, 2025
b5b1170
consolidate divs to reduce padding
VirginiaDooley Dec 1, 2025
1fef73a
reduce the button size to fit the label
VirginiaDooley Dec 1, 2025
cb58bb7
hide table headers on smaller devices
VirginiaDooley Dec 1, 2025
a536105
add margin between flexbox elements
VirginiaDooley Dec 2, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions .gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,3 +48,4 @@ node_modules
!/app/assets/builds/.keep

/vendor/bundle
/data/*
56 changes: 18 additions & 38 deletions app/views/dashboard/_address_search.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,44 +1,24 @@
<turbo-frame id="main-panel">
<div class="w-full px-4 py-6">
<script src="/assets/tabs.js"></script>
<div class="flex justify-center mx-auto">
<div class="w-full">
<div class="bg-gray-50 rounded-lg h-fit mx-4 my-6 shadow-sm">
<div class="p-6">
<%= form_with url: dashboard_panel_path('address_search'), method: :post, data: { turbo_frame: 'main-panel' }, html: { class: "space-y-4" } do |form| %>
<div class="relative">
<%= form.label :address, "Enter your address", class: "block text-sm font-medium text-gray-700 mb-1" %>
<%= form.text_field :address, placeholder: "e.g., 123 Main St, City, State, Zip Code", class: "w-full py-3 px-4 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500", autocomplete: "off" %>
</div>
<div class="flex justify-center w-full">
<%= form.submit "Find My Representatives", class: "w-full sm:w-auto bg-blue-500 hover:bg-blue-700 text-white font-bold py-3 px-6 border border-blue-700 rounded-lg text-lg" %>
</div>
<% end %>

<%# Support both locals and instance variables for Turbo and non-Turbo renders %>
<% reps = (defined?(representatives) ? representatives : @representatives) %>
<% did_search = (defined?(searched) ? searched : @searched) %>
<% if did_search %>
<div class="mt-8 mb-4 px-2">
<%= render partial: 'representatives_table', locals: { representatives: reps } %>
</div>
<% end %>
<div class="w-full px-4 py-4">
<div class="bg-gray-50 rounded-lg shadow-sm max-w-xl mx-auto p-4 sm:p-6">
<%= form_with url: dashboard_panel_path('address_search'), method: :post, data: { turbo_frame: 'main-panel' }, html: { class: "space-y-4" } do |form| %>
<div class="relative">
<%= form.label :address, "Enter your address", class: "block text-sm font-medium text-gray-700 mb-1" %>
<%= form.text_field :address, placeholder: "e.g., 123 Main St, City, State, Zip Code", class: "w-full py-3 px-4 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500", autocomplete: "off" %>
</div>
<div class="flex justify-center w-full mb-4">
<%= form.submit "Find My Representatives", class: "inline-flex items-center bg-blue-500 hover:bg-blue-700 text-white font-semibold py-3 px-4 border border-blue-700 rounded-lg text-base sm:text-lg" %>
</div>
<div id="search-results" class="w-full px-6 py-4 hidden">
<div id="loading-message" class="text-center px-4 py-3 text-gray-500 text-sm hidden">
<span class="mr-1">Finding your representatives</span>
<span class="animate-pulse">...</span>
</div>
<div id="error-message" class="bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded-md hidden">
<p class="font-medium">Unable to find representatives</p>
<p class="text-sm mt-1">Please check your address and try again.</p>
</div>
<div id="representatives-list" class="space-y-3 hidden">
<!-- Representatives will be populated here -->
</div>
<% end %>

<%# Support both locals and instance variables for Turbo and non-Turbo renders %>
<% reps = (defined?(representatives) ? representatives : @representatives) %>
<% did_search = (defined?(searched) ? searched : @searched) %>
<% if did_search %>
<div class="mt-6 mb-2">
<%= render partial: 'representatives_table', locals: { representatives: reps } %>
</div>
</div>
<% end %>
</div>
</div>
</div>
</turbo-frame>
14 changes: 7 additions & 7 deletions app/views/dashboard/_home.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,20 +1,20 @@
<div class="min-h-[600px]">
<div class="mb-6">
<h3 class="text-lg font-medium text-gray-900 mb-4 mt-4">
<div class="min-h-[400px] sm:min-h-[600px]">
<div class="mb-4 sm:mb-6">
<h3 class="text-base sm:text-lg font-medium text-gray-900 mb-3 mt-2 sm:mt-4">
CivicPatch is an open-source, distributed data collection framework aimed at collecting contact information for local representatives.
</h3>
<h5 class="text-gray-900 mb-4 mt-4">
<h5 class="text-sm sm:text-base text-gray-900 mb-2 sm:mb-4 mt-3 sm:mt-4">
Where is the data stored?
</h5>
<ul>
<ul class="space-y-1 text-sm">
<li><a href="https://github.com/civicpatch/open-data" target="_blank" rel="noopener">https://github.com/civicpatch/open-data</a></li>
<li><a href="https://github.com/openstates/people" target="_blank" rel="noopener">https://github.com/openstates/people</a></li>
</ul>

<h5 class="text-gray-900 mb-4 mt-4">
<h5 class="text-sm sm:text-base text-gray-900 mb-2 sm:mb-4 mt-3 sm:mt-4">
Who can run it?
</h5>
<p>Anyone. Volunteers can deploy CivicPatch servers to collect information. Our roadmap and project planning is open for anyone to view. Check it out <a href="https://github.com/orgs/CivicPatch/projects/3/views/1" target="_blank" rel="noopener">here</a>.</p>
<p class="text-sm leading-relaxed">Anyone. Volunteers can deploy CivicPatch servers to collect information. Our roadmap and project planning is open for anyone to view. Check it out <a href="https://github.com/orgs/CivicPatch/projects/3/views/1" target="_blank" rel="noopener">here</a>.</p>
</div>


Expand Down
32 changes: 16 additions & 16 deletions app/views/dashboard/_progress_map.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,32 +1,32 @@
<div class="max-w-7xl mx-auto">

<div id="progress-map-container" style="background-color: #f8f9fa; padding: 20px; margin: 20px 0; border-radius: 8px;">
<h2 style="color: #333; margin-bottom: 20px;">CivicPatch Municipal Data Collection Progress</h2>
<div id="progress-map-container" style="background-color:#f8f9fa;padding:12px 10px;margin:12px 0;border-radius:8px;">
<h2 style="color:#333;margin-bottom:12px;font-size:16px;font-weight:600;">CivicPatch Municipal Data Collection Progress</h2>

<!-- US Map Visualization -->
<div id="us-map-container" style="text-align: center; margin-bottom: 30px; max-width: 100%; overflow-x: auto;">
<!-- US Map Visualization -->
<div id="us-map-container" style="text-align:center;margin-bottom:20px;max-width:100%;overflow-x:auto;">
<svg id="us-map" viewBox="0 0 960 500" width="100%" height="auto" style="max-width: 100%; height: auto; background-color: white; border-radius: 4px; border: 1px solid #ddd; display: block; margin: 0 auto;"></svg>

<!-- Legend -->
<div id="map-legend" style="display: flex; justify-content: center; align-items: center; margin-top: 15px; gap: 15px;">
<span style="font-weight: bold; color: #333;">Completion Rate:</span>
<div style="display: flex; align-items: center; gap: 5px;">
<div id="map-legend" style="display:flex;flex-wrap:wrap;justify-content:center;align-items:center;margin-top:10px;gap:8px;font-size:11px;">
<span style="font-weight:bold;color:#333;flex-basis:100%;text-align:center;margin-bottom:2px;">Completion Rate:</span>
<div style="display:flex;align-items:center;gap:5px;">
<div style="width: 20px; height: 15px; background: #2d5016; border-radius: 3px;"></div>
<span style="font-size: 12px;">70%+</span>
</div>
<div style="display: flex; align-items: center; gap: 5px;">
<div style="display:flex;align-items:center;gap:5px;">
<div style="width: 20px; height: 15px; background: #5a9216; border-radius: 3px;"></div>
<span style="font-size: 12px;">50-69%</span>
</div>
<div style="display: flex; align-items: center; gap: 5px;">
<div style="display:flex;align-items:center;gap:5px;">
<div style="width: 20px; height: 15px; background: #8eb021; border-radius: 3px;"></div>
<span style="font-size: 12px;">30-49%</span>
</div>
<div style="display: flex; align-items: center; gap: 5px;">
<div style="display:flex;align-items:center;gap:5px;">
<div style="width: 20px; height: 15px; background: #d4a574; border-radius: 3px;"></div>
<span style="font-size: 12px;">10-29%</span>
</div>
<div style="display: flex; align-items: center; gap: 5px;">
<div style="display:flex;align-items:center;gap:5px;">
<div style="width: 20px; height: 15px; background: #8b4513; border-radius: 3px;"></div>
<span style="font-size: 12px;">0-9%</span>
</div>
Expand All @@ -36,8 +36,8 @@
</div>
</div>

<!-- Tooltip -->
<div id="map-tooltip" style="position: absolute; padding: 8px 12px; background: rgba(0,0,0,0.8); color: white; border-radius: 4px; font-size: 12px; pointer-events: none; opacity: 0; transition: opacity 0.2s;"></div>
<!-- Tooltip -->
<div id="map-tooltip" style="position:absolute;padding:6px 10px;background:rgba(0,0,0,0.8);color:white;border-radius:4px;font-size:11px;pointer-events:none;opacity:0;transition:opacity 0.2s;"></div>
</div>


Expand Down Expand Up @@ -69,10 +69,10 @@
if (progress >= 10) return '#d4a574';
if (progress > 0) return '#8b4513';
return '#e5e5e5';
}

// Check if D3 is available
if (typeof d3 === 'undefined') {

<div style="margin-top:12px;padding:10px;background:#d1ecf1;border-radius:6px;color:#0c5460;font-size:12px;line-height:1.4;">
<strong>Summary:</strong> 7 states tracked  702 of 1,639 municipalities scraped  42.8% average completion
console.log('D3 not available, showing static visualization only');
document.getElementById('us-map-container').innerHTML =
'<p style="text-align: center; padding: 40px; color: #666;">Interactive map requires D3.js. See detailed progress below.</p>';
Expand Down
10 changes: 5 additions & 5 deletions app/views/dashboard/index.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,14 +1,14 @@
<div class="min-h-screen bg-gray-50 p-6 container max-w-6xl mx-auto">
<div class="flex flex-col md:flex-row gap-6 mb-8">
<div class="order-1 md:order-1 w-full md:w-1/3 bg-white rounded-lg shadow-sm p-6 flex flex-col justify-between">
<div class="min-h-screen bg-gray-50 px-3 py-4 sm:p-6 container max-w-6xl mx-auto">
<div class="flex flex-col md:flex-row gap-4 sm:gap-6 mb-6 sm:mb-8 md:mx-4">
<div class="order-1 md:order-1 w-full md:w-1/3 bg-white rounded-lg shadow-sm p-4 sm:p-6 flex flex-col justify-between mb-6 md:mb-0">
<%= render 'dashboard/home' %>
</div>
<div class="order-3 md:order-2 w-full md:w-2/3 bg-white rounded-lg shadow-sm p-6">
<div class="order-3 md:order-2 w-full md:w-2/3 bg-white rounded-lg shadow-sm p-4 sm:p-6">
<%= render 'dashboard/progress_map' %>
</div>
</div>
<turbo-frame id="main-panel" class="order-2 md:order-3 w-full">
<div class="bg-white rounded-lg shadow-sm p-6">
<div class="bg-white rounded-lg shadow-sm p-4 sm:p-6">
<%= render 'dashboard/address_search' %>
</div>
</turbo-frame>
Expand Down
27 changes: 15 additions & 12 deletions app/views/layouts/application.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,19 +14,21 @@

<%= yield :head %>

<%# Enable PWA manifest for installable apps (make sure to enable in config/routes.rb too!) %>
<%#= tag.link rel: "manifest", href: pwa_manifest_path(format: :json) %>

<link rel="apple-touch-icon" sizes="180x180" href="/favicon/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon/favicon-16x16.png">
<link rel="manifest" href="/favicon/site.webmanifest">
<%= tag.link rel: "manifest", href: "/manifest.json" %>

<%# Includes all stylesheet files in app/assets/stylesheets %>
<%= stylesheet_link_tag :app, "data-turbo-track": "reload" %>

<%= stylesheet_link_tag "https://unpkg.com/leaflet@1.9.4/dist/leaflet.css", integrity: "sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=", crossorigin: "" %>
<%= javascript_importmap_tags 'application' %>
<%= stylesheet_link_tag "tailwind", "data-turbo-track": "reload" %>
<%= tag.link rel: "stylesheet", href: "https://unpkg.com/leaflet@1.9.4/dist/leaflet.css", integrity: "sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=", crossorigin: "anonymous" %>
<%= javascript_importmap_tags %>
<style>
@media (max-width: 767px) {
#nav-toggle:checked + label + #nav-menu {
display: flex !important;
}
}
</style>
</head>

<body class="min-h-screen bg-gray-50">
Expand All @@ -39,8 +41,9 @@
</div>
</nav>
</header>
<main class="container max-w-6xl mx-auto min-h-[600px] mt-28 px-5 flex">
<main class="container max-w-6xl mx-auto min-h-[600px] px-5 flex">
<%= yield %>
</main>
</main>
</body>
</html>
</html>

Loading