admin/freealberta
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

mobile friendliness

Browse Source
This commit is contained in:
admin 2025-07-30 09:15:56 -06:00
parent 373018cebb
commit d775dea0dc
2 changed files with 188 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

60
map/app/public/css/modules/dashboard.css
View File

@ -51,6 +51,8 @@
padding: 1.5rem;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
border: 1px solid #e0e0e0;
position: relative;
min-height: 350px;
}
.chart-container h3 {
@ -61,25 +63,83 @@
.chart-container canvas {
height: 300px !important;
max-width: 100%;
width: 100% !important;
touch-action: pan-y; /* Allow vertical scrolling on mobile */
}
/* Responsive design */
@media (max-width: 768px) {
.dashboard-container {
gap: 1.5rem;
}
.dashboard-cards {
grid-template-columns: repeat(2, 1fr);
gap: 1rem;
}
.dashboard-charts {
grid-template-columns: 1fr;
gap: 1.5rem;
}
.dashboard-card {
padding: 1rem;
}
.card-value {
font-size: 2rem;
}
.chart-container {
padding: 1rem;
min-height: 300px;
}
.chart-container canvas {
height: 250px !important;
}
}
@media (max-width: 480px) {
.dashboard-container {
gap: 1rem;
}
.dashboard-cards {
grid-template-columns: 1fr;
gap: 0.75rem;
}
.dashboard-card {
padding: 0.75rem;
}
.dashboard-card h3 {
font-size: 0.875rem;
margin-bottom: 0.75rem;
}
.card-value {
font-size: 1.75rem;
}
.card-subtitle {
font-size: 0.75rem;
}
.chart-container {
padding: 0.75rem;
min-height: 250px;
}
.chart-container h3 {
font-size: 1rem;
margin-bottom: 1rem;
}
.chart-container canvas {
height: 200px !important;
}
}

132
map/app/public/js/dashboard.js
View File

@ -38,6 +38,9 @@ function createSupportLevelChart(supportLevels) {
supportChart.destroy();
}
// Check if mobile
const isMobile = window.innerWidth <= 480;
supportChart = new Chart(ctx, {
type: 'doughnut',
data: {
@ -62,7 +65,26 @@ function createSupportLevelChart(supportLevels) {
maintainAspectRatio: false,
plugins: {
legend: {
position: 'bottom'
position: isMobile ? 'bottom' : 'bottom',
labels: {
padding: isMobile ? 10 : 20,
font: {
size: isMobile ? 10 : 12
},
usePointStyle: true,
pointStyle: 'circle'
}
},
tooltip: {
callbacks: {
label: function(context) {
const label = context.label || '';
const value = context.parsed || 0;
const total = context.dataset.data.reduce((a, b) => a + b, 0);
const percentage = total > 0 ? ((value / total) * 100).toFixed(1) : 0;
return `${label}: ${value} (${percentage}%)`;
}
}
}
}
}
@ -78,6 +100,10 @@ function createEntriesChart(dailyEntries) {
entriesChart.destroy();
}
// Check if mobile
const isMobile = window.innerWidth <= 480;
const isTablet = window.innerWidth <= 768;
// Generate last 30 days
const labels = [];
const data = [];
@ -87,7 +113,16 @@ function createEntriesChart(dailyEntries) {
const date = new Date(today);
date.setDate(date.getDate() - i);
const dateKey = date.toISOString().split('T')[0];
labels.push(date.toLocaleDateString('en-US', { month: 'short', day: 'numeric' }));
// Format labels based on screen size
if (isMobile) {
labels.push(date.toLocaleDateString('en-US', { day: 'numeric' }));
} else if (isTablet) {
labels.push(date.toLocaleDateString('en-US', { month: 'numeric', day: 'numeric' }));
} else {
labels.push(date.toLocaleDateString('en-US', { month: 'short', day: 'numeric' }));
}
data.push(dailyEntries[dateKey] || 0);
}
@ -100,17 +135,65 @@ function createEntriesChart(dailyEntries) {
data: data,
borderColor: 'rgb(75, 192, 192)',
backgroundColor: 'rgba(75, 192, 192, 0.2)',
tension: 0.1
tension: 0.1,
fill: true,
pointRadius: isMobile ? 2 : 3,
pointHoverRadius: isMobile ? 4 : 5
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
interaction: {
intersect: false,
mode: 'index'
},
plugins: {
legend: {
display: !isMobile,
labels: {
font: {
size: isMobile ? 10 : 12
}
}
},
tooltip: {
callbacks: {
title: function(context) {
const index = context[0].dataIndex;
const date = new Date(today);
date.setDate(date.getDate() - (29 - index));
return date.toLocaleDateString('en-US', {
month: 'short',
day: 'numeric',
year: 'numeric'
});
}
}
}
},
scales: {
x: {
ticks: {
maxTicksLimit: isMobile ? 6 : isTablet ? 10 : 15,
font: {
size: isMobile ? 9 : 11
}
},
grid: {
display: !isMobile
}
},
y: {
beginAtZero: true,
ticks: {
stepSize: 1
stepSize: 1,
font: {
size: isMobile ? 9 : 11
}
},
grid: {
color: 'rgba(0, 0, 0, 0.1)'
}
}
}
@ -147,4 +230,45 @@ document.addEventListener('DOMContentLoaded', () => {
loadDashboardData();
});
}
// Handle window resize for chart responsiveness
let resizeTimeout;
window.addEventListener('resize', () => {
clearTimeout(resizeTimeout);
resizeTimeout = setTimeout(() => {
// Only refresh charts if dashboard is visible
const dashboardSection = document.getElementById('dashboard');
if (dashboardSection && dashboardSection.style.display !== 'none') {
// Refresh charts with current data
if (supportChart) {
const currentData = supportChart.data.datasets[0].data;
const supportLevels = {
'1': currentData[0] || 0,
'2': currentData[1] || 0,
'3': currentData[2] || 0,
'4': currentData[3] || 0
};
createSupportLevelChart(supportLevels);
}
if (entriesChart) {
const currentLabels = entriesChart.data.labels;
const currentData = entriesChart.data.datasets[0].data;
// Reconstruct dailyEntries object from current chart data
const dailyEntries = {};
const today = new Date();
currentData.forEach((value, index) => {
const date = new Date(today);
date.setDate(date.getDate() - (29 - index));
const dateKey = date.toISOString().split('T')[0];
dailyEntries[dateKey] = value;
});
createEntriesChart(dailyEntries);
}
}
}, 250);
});
});