dearwolf/aider
1
0
Fork 0
mirror of https://github.com/Aider-AI/aider.git synced 2025-06-02 10:45:00 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 5

feat: Introduce responsive font sizes based on screen width

Browse source
This commit is contained in:
Paul Gauthier (aider) 2024-09-26 18:55:56 -07:00
parent 5ac71d8b6d
commit d9e5d66957
1 changed files with 36 additions and 15 deletions
Download patch file Download diff file Expand all files Collapse all files

51
aider/website/_posts/2024-09-26-architect.md
View file

@ -54,10 +54,18 @@ top coding models, as compared to their previous "solo" scores (striped bars).
document.addEventListener("DOMContentLoaded", function() { document.addEventListener("DOMContentLoaded", function() {
var ctx = document.getElementById('passRateChart').getContext('2d'); var ctx = document.getElementById('passRateChart').getContext('2d');
// Function to determine aspect ratio based on screen width // Function to determine aspect ratio and base font size based on screen width
function getAspectRatio() { function getChartSettings() {
return window.innerWidth < 600 ? 1 : 1.5; if (window.innerWidth < 600) {
return { aspectRatio: 1.5, baseFontSize: 8 };
} else {
return { aspectRatio: 2, baseFontSize: 12 };
}
} }
var chartSettings = getChartSettings();
var baseFontSize = chartSettings.baseFontSize;
var labels = []; var labels = [];
var data = []; var data = [];
var colorMapping = { var colorMapping = {
@ -110,7 +118,7 @@ top coding models, as compared to their previous "solo" scores (striped bars).
options: { options: {
responsive: true, responsive: true,
maintainAspectRatio: true, maintainAspectRatio: true,
aspectRatio: getAspectRatio(), aspectRatio: chartSettings.aspectRatio,
scales: { scales: {
y: { y: {
beginAtZero: true, beginAtZero: true,
@ -118,12 +126,12 @@ top coding models, as compared to their previous "solo" scores (striped bars).
display: true, display: true,
text: 'Pass Rate (%)', text: 'Pass Rate (%)',
font: { font: {
size: 18 size: baseFontSize + 6
} }
}, },
ticks: { ticks: {
font: { font: {
size: 12 size: baseFontSize
} }
} }
}, },
@ -132,12 +140,12 @@ top coding models, as compared to their previous "solo" scores (striped bars).
display: true, display: true,
text: 'Editor model and edit format', text: 'Editor model and edit format',
font: { font: {
size: 18 size: baseFontSize + 6
} }
}, },
ticks: { ticks: {
font: { font: {
size: 16 size: baseFontSize + 4
} }
} }
} }
@ -158,7 +166,7 @@ top coding models, as compared to their previous "solo" scores (striped bars).
position: 'start', position: 'start',
xAdjust: 10, xAdjust: 10,
font: { font: {
size: 12 size: baseFontSize
} }
} }
} }
@ -170,13 +178,13 @@ top coding models, as compared to their previous "solo" scores (striped bars).
display: true, display: true,
text: 'Architect model', text: 'Architect model',
font: { font: {
size: 16, size: baseFontSize + 4,
weight: 'bold' weight: 'bold'
} }
}, },
labels: { labels: {
font: { font: {
size: 16 size: baseFontSize + 4
}, },
generateLabels: function(chart) { generateLabels: function(chart) {
var colorMapping = { var colorMapping = {
@ -196,13 +204,26 @@ top coding models, as compared to their previous "solo" scores (striped bars).
} }
} }
} }
}
} }
}}); });
// Update aspect ratio on window resize // Update aspect ratio and font sizes on window resize
window.addEventListener('resize', function() { window.addEventListener('resize', function() {
chart.options.aspectRatio = getAspectRatio(); var newSettings = getChartSettings();
chart.resize(); chart.options.aspectRatio = newSettings.aspectRatio;
baseFontSize = newSettings.baseFontSize;
// Update font sizes
chart.options.scales.y.title.font.size = baseFontSize + 6;
chart.options.scales.y.ticks.font.size = baseFontSize;
chart.options.scales.x.title.font.size = baseFontSize + 6;
chart.options.scales.x.ticks.font.size = baseFontSize + 4;
chart.options.plugins.annotation.annotations.line1.label.font.size = baseFontSize;
chart.options.plugins.legend.title.font.size = baseFontSize + 4;
chart.options.plugins.legend.labels.font.size = baseFontSize + 4;
chart.update();
}); });
}); });