Skip to content

Commit ae2d624

Browse files
benbelbenbel
authored
Merge pull request #2 from benbel/claude/clean-chart-display-KqgpE
Refactor visualization layout to single-column design
2 parents fd28a04 + 908de8d commit ae2d624

3 files changed

Lines changed: 150 additions & 377 deletions

File tree

‎docs/css/styles.css‎

Lines changed: 33 additions & 124 deletions
Original file line numberDiff line numberDiff line change
@@ -26,70 +26,11 @@ body {
2626
}
2727

2828
.container {
29-
max-width: 1400px;
29+
max-width: 100%;
3030
margin: 0 auto;
3131
padding: 0 20px;
3232
}
3333

34-
/* Header */
35-
header {
36-
background-color: var(--color-bg);
37-
border-bottom: 1px solid var(--color-border);
38-
padding: 40px 0;
39-
margin-bottom: 40px;
40-
}
41-
42-
h1 {
43-
font-size: 32px;
44-
font-weight: 600;
45-
margin-bottom: 12px;
46-
}
47-
48-
.subtitle {
49-
font-size: 16px;
50-
color: var(--color-text-secondary);
51-
line-height: 1.6;
52-
}
53-
54-
.subtitle a {
55-
color: #0969da;
56-
text-decoration: none;
57-
}
58-
59-
.subtitle a:hover {
60-
text-decoration: underline;
61-
}
62-
63-
/* Stats */
64-
.stats {
65-
display: grid;
66-
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
67-
gap: 20px;
68-
margin-bottom: 40px;
69-
}
70-
71-
.stat-card {
72-
background: var(--color-hover);
73-
border: 1px solid var(--color-border);
74-
border-radius: 6px;
75-
padding: 20px;
76-
text-align: center;
77-
}
78-
79-
.stat-value {
80-
display: block;
81-
font-size: 32px;
82-
font-weight: 600;
83-
color: var(--color-text);
84-
margin-bottom: 4px;
85-
}
86-
87-
.stat-label {
88-
display: block;
89-
font-size: 14px;
90-
color: var(--color-text-secondary);
91-
}
92-
9334
/* Loading */
9435
.loading {
9536
text-align: center;
@@ -123,13 +64,16 @@ h1 {
12364
display: flex;
12465
justify-content: space-between;
12566
align-items: center;
126-
margin-bottom: 24px;
127-
padding: 16px;
67+
margin-bottom: 16px;
68+
padding: 12px 16px;
12869
background: var(--color-hover);
12970
border: 1px solid var(--color-border);
13071
border-radius: 6px;
13172
gap: 20px;
13273
flex-wrap: wrap;
74+
position: sticky;
75+
top: 0;
76+
z-index: 100;
13377
}
13478

13579
.toggle-button {
@@ -174,43 +118,43 @@ h1 {
174118
border: 1px solid var(--color-border);
175119
}
176120

177-
/* Charts Grid */
121+
/* Charts Container - Single Column */
178122
.charts-grid {
179-
display: grid;
180-
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
181-
gap: 24px;
182-
margin-bottom: 60px;
123+
display: flex;
124+
flex-direction: column;
125+
gap: 8px;
126+
margin-bottom: 20px;
183127
}
184128

185129
/* Chart Card */
186130
.chart-card {
187131
background: var(--color-bg);
188132
border: 1px solid var(--color-border);
189133
border-radius: 6px;
190-
padding: 16px;
134+
padding: 8px 12px;
191135
transition: box-shadow 0.2s;
192136
}
193137

194138
.chart-card:hover {
195139
box-shadow: 0 3px 12px rgba(0, 0, 0, 0.1);
196140
}
197141

142+
.chart-header {
143+
display: flex;
144+
justify-content: space-between;
145+
align-items: center;
146+
margin-bottom: 4px;
147+
}
148+
198149
.chart-title {
199-
font-size: 14px;
150+
font-size: 13px;
200151
font-weight: 600;
201-
margin-bottom: 12px;
202152
color: var(--color-text);
203153
white-space: nowrap;
204154
overflow: hidden;
205155
text-overflow: ellipsis;
206156
}
207157

208-
.chart-subtitle {
209-
font-size: 12px;
210-
color: var(--color-text-secondary);
211-
margin-bottom: 12px;
212-
}
213-
214158
.chart-svg {
215159
width: 100%;
216160
display: block;
@@ -224,10 +168,11 @@ h1 {
224168
border-radius: 6px;
225169
padding: 12px;
226170
font-size: 12px;
227-
pointer-events: none;
171+
pointer-events: auto;
228172
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
229173
max-width: 320px;
230174
z-index: 1000;
175+
display: none;
231176
}
232177

233178
.tooltip-title {
@@ -275,58 +220,22 @@ h1 {
275220
text-decoration: underline;
276221
}
277222

278-
/* Footer */
279-
footer {
280-
border-top: 1px solid var(--color-border);
281-
padding: 40px 0;
282-
margin-top: 60px;
283-
text-align: center;
284-
color: var(--color-text-secondary);
285-
font-size: 12px;
286-
}
287-
288-
footer a {
289-
color: #0969da;
290-
text-decoration: none;
291-
}
292-
293-
footer a:hover {
294-
text-decoration: underline;
295-
}
296-
297-
/* Axes des graphiques */
298-
.axis {
299-
font-size: 10px;
300-
color: var(--color-text-secondary);
301-
}
302-
303-
.axis-line {
304-
stroke: var(--color-border);
305-
stroke-width: 1;
306-
}
307-
308-
.axis-tick {
309-
stroke: var(--color-border);
310-
stroke-width: 1;
311-
}
312-
313-
.zero-line {
314-
stroke: var(--color-text-secondary);
315-
stroke-width: 1;
316-
stroke-dasharray: 2, 2;
317-
}
318-
319223
/* Responsive */
320224
@media (max-width: 768px) {
321-
.charts-grid {
322-
grid-template-columns: 1fr;
225+
.container {
226+
padding: 0 10px;
227+
}
228+
229+
.controls {
230+
flex-direction: column;
231+
align-items: flex-start;
323232
}
324233

325-
h1 {
326-
font-size: 24px;
234+
.chart-card {
235+
padding: 6px 8px;
327236
}
328237

329-
.subtitle {
330-
font-size: 14px;
238+
.chart-title {
239+
font-size: 12px;
331240
}
332241
}

‎docs/index.html‎

Lines changed: 5 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -9,50 +9,24 @@
99
<script src="https://d3js.org/d3.v7.min.js"></script>
1010
</head>
1111
<body>
12-
<header>
13-
<div class="container">
14-
<h1>📖 Évolution des codes législatifs français</h1>
15-
<p class="subtitle">
16-
Visualisation interactive des modifications apportées aux codes législatifs français au fil du temps.
17-
<br>
18-
Données issues de <a href="https://git.tricoteuses.fr/codes" target="_blank">git.tricoteuses.fr/codes</a>
19-
</p>
20-
</div>
21-
</header>
22-
2312
<main class="container">
2413
<div id="loading" class="loading">
2514
<div class="spinner"></div>
2615
<p>Chargement des données...</p>
2716
</div>
2817

29-
<div id="stats" class="stats" style="display: none;">
30-
<div class="stat-card">
31-
<span class="stat-value" id="total-codes">-</span>
32-
<span class="stat-label">Codes législatifs</span>
33-
</div>
34-
<div class="stat-card">
35-
<span class="stat-value" id="total-commits">-</span>
36-
<span class="stat-label">Modifications</span>
37-
</div>
38-
<div class="stat-card">
39-
<span class="stat-value" id="date-range">-</span>
40-
<span class="stat-label">Période</span>
41-
</div>
42-
</div>
43-
4418
<div class="controls" style="display: none;" id="controls">
45-
<button id="toggle-mode" class="toggle-button" onclick="toggleMode()" title="Afficher le solde (net)">
46-
📊 Mode Net
19+
<button id="toggle-scale" class="toggle-button" onclick="toggleScale()" title="Forcer une échelle commune pour tous les graphiques">
20+
Échelle par code
4721
</button>
4822
<div class="legend">
4923
<span class="legend-item">
5024
<span class="legend-color" style="background: #2ea043;"></span>
51-
<span id="legend-add">Additions</span>
25+
<span>Additions</span>
5226
</span>
5327
<span class="legend-item">
5428
<span class="legend-color" style="background: #cf222e;"></span>
55-
<span id="legend-del">Délétions</span>
29+
<span>Délétions</span>
5630
</span>
5731
</div>
5832
</div>
@@ -64,17 +38,7 @@ <h1>📖 Évolution des codes législatifs français</h1>
6438
</div>
6539
</main>
6640

67-
<footer>
68-
<div class="container">
69-
<p>
70-
Données : <a href="https://git.tricoteuses.fr/codes" target="_blank">Tricoteuses</a>
71-
| Code source : <a href="https://github.com/benbel/legiquanti" target="_blank">GitHub</a>
72-
| Mis à jour : <span id="last-update">-</span>
73-
</p>
74-
</div>
75-
</footer>
76-
77-
<div id="tooltip" class="tooltip" style="display: none;"></div>
41+
<div id="tooltip" class="tooltip"></div>
7842

7943
<script src="js/visualization.js"></script>
8044
</body>

0 commit comments

Comments
 (0)