Skip to content

Commit 77d0c63

Browse files
To1neTo1ne
committed
small-and-fast: make bar-graph table responsive
The bar charts are shown in a table. This doesn't work well when viewed on mobile, because the screen is a lot narrower than the content. Use CSS grid to responsively show bar charts on a single line depending on the available horizontal space. This change includes a Playwright test that opens the page on an iPhone X and scrolls to the text right below the graphs to see if the last graph then is within the viewport.
1 parent 4035aad commit 77d0c63

File tree

3 files changed

+185
-168
lines changed

3 files changed

+185
-168
lines changed

‎assets/sass/about.scss‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,14 @@
1+
.bar-chart-grid {
2+
display: grid;
3+
grid-template-columns: repeat(6, 1fr);
4+
}
5+
6+
@media (max-width: 760px) {
7+
.bar-chart-grid {
8+
grid-template-columns: repeat(auto-fill, minmax(115px, 1fr));
9+
}
10+
}
11+
112
.bar-chart {
213
display: inline-grid;
314

‎content/about/small-and-fast.html‎

Lines changed: 161 additions & 167 deletions
Original file line numberDiff line numberDiff line change
@@ -27,173 +27,167 @@ <h3>Benchmarks</h3>
2727
to CVS or Perforce. <em>Smaller is faster.</em>
2828
</p>
2929

30-
<table width="100%">
31-
<tbody>
32-
<tr>
33-
<td>
34-
<dl class="bar-chart">
35-
<dt>Commit A</dt>
36-
<dd>
37-
<progress value="0.649" max="3" class="git"></progress>
38-
<span>git</span>
39-
</dd>
40-
<dd>
41-
<progress value="2.6" max="3" class="svn"></progress>
42-
<span>svn</span>
43-
</dd>
44-
</dl>
45-
</td>
46-
<td>
47-
<dl class="bar-chart">
48-
<dt>Commit B</dt>
49-
<dd>
50-
<progress value="1.53" max="25" class="git"></progress>
51-
<span>git</span>
52-
</dd>
53-
<dd>
54-
<progress value="24.7" max="25" class="svn"></progress>
55-
<span>svn</span>
56-
</dd>
57-
</dl>
58-
</td>
59-
<td>
60-
<dl class="bar-chart">
61-
<dt>Diff Curr</dt>
62-
<dd>
63-
<progress value="0.257" max="1.2" class="git"></progress>
64-
<span>git</span>
65-
</dd>
66-
<dd>
67-
<progress value="1.09" max="1.2" class="svn"></progress>
68-
<span>svn</span>
69-
</dd>
70-
</dl>
71-
</td>
72-
<td>
73-
<dl class="bar-chart">
74-
<dt>Diff Rec</dt>
75-
<dd>
76-
<progress value="0.248" max="4" class="git"></progress>
77-
<span>git</span>
78-
</dd>
79-
<dd>
80-
<progress value="3.99" max="4" class="svn"></progress>
81-
<span>svn</span>
82-
</dd>
83-
</dl>
84-
</td>
85-
<td>
86-
<dl class="bar-chart">
87-
<dt>Diff Tags</dt>
88-
<dd>
89-
<progress value="1.17" max="85" class="git"></progress>
90-
<span>git</span>
91-
</dd>
92-
<dd>
93-
<progress value="83.57" max="85" class="svn"></progress>
94-
<span>svn</span>
95-
</dd>
96-
</dl>
97-
</td>
98-
<td>
99-
<dl class="bar-chart">
100-
<dt>Clone</dt>
101-
<dd>
102-
<progress value="21.0" max="110" class="git"></progress>
103-
<span>git*</span>
104-
</dd>
105-
<dd>
106-
<progress value="107.5" max="110" class="git"></progress>
107-
<span>git</span>
108-
</dd>
109-
<dd>
110-
<progress value="14.0" max="110" class="svn"></progress>
111-
</dd>
112-
</dl>
113-
</td>
114-
</tr>
115-
<tr>
116-
<td>
117-
<dl class="bar-chart">
118-
<dt>Log (50)</dt>
119-
<dd>
120-
<progress value="0.012" max="0.4" class="git"></progress>
121-
<span>git</span>
122-
</dd>
123-
<dd>
124-
<progress value="0.381" max="0.4" class="svn"></progress>
125-
<span>svn</span>
126-
</dd>
127-
</dl>
128-
</td>
129-
<td>
130-
<dl class="bar-chart">
131-
<dt>Log (All)</dt>
132-
<dd>
133-
<progress value="0.519" max="170" class="git"></progress>
134-
<span>git</span>
135-
</dd>
136-
<dd>
137-
<progress value="169.197" max="170" class="svn"></progress>
138-
<span>svn</span>
139-
</dd>
140-
</dl>
141-
</td>
142-
<td>
143-
<dl class="bar-chart">
144-
<dt>Log (File)</dt>
145-
<dd>
146-
<progress value="0.601" max="83" class="git"></progress>
147-
<span>git</span>
148-
</dd>
149-
<dd>
150-
<progress value="82.843" max="83" class="svn"></progress>
151-
<span>svn</span>
152-
</dd>
153-
</dl>
154-
</td>
155-
<td>
156-
<dl class="bar-chart">
157-
<dt>Update</dt>
158-
<dd>
159-
<progress value="0.896" max="2.9" class="git"></progress>
160-
<span>git</span>
161-
</dd>
162-
<dd>
163-
<progress value="2.816" max="2.9" class="svn"></progress>
164-
<span>svn</span>
165-
</dd>
166-
</dl>
167-
</td>
168-
<td>
169-
<dl class="bar-chart">
170-
<dt>Blame</dt>
171-
<dd>
172-
<progress value="1.91" max="3.1" class="git"></progress>
173-
<span>git</span>
174-
</dd>
175-
<dd>
176-
<progress value="3.04" max="3.1" class="svn"></progress>
177-
<span>svn</span>
178-
</dd>
179-
</dl>
180-
</td>
181-
<td>
182-
<dl class="bar-chart">
183-
<dt>Size</dt>
184-
<dd>
185-
<progress value="181" max="182" class="git"></progress>
186-
<span>git</span>
187-
</dd>
188-
<dd>
189-
<progress value="132" max="182" class="svn"></progress>
190-
<span>svn</span>
191-
</dd>
192-
</dl>
193-
</td>
194-
</tr>
195-
</tbody>
196-
</table>
30+
<div class="bar-chart-grid">
31+
<div>
32+
<dl class="bar-chart">
33+
<dt>Commit A</dt>
34+
<dd>
35+
<progress value="0.649" max="3" class="git"></progress>
36+
<span>git</span>
37+
</dd>
38+
<dd>
39+
<progress value="2.6" max="3" class="svn"></progress>
40+
<span>svn</span>
41+
</dd>
42+
</dl>
43+
</div>
44+
<div>
45+
<dl class="bar-chart">
46+
<dt>Commit B</dt>
47+
<dd>
48+
<progress value="1.53" max="25" class="git"></progress>
49+
<span>git</span>
50+
</dd>
51+
<dd>
52+
<progress value="24.7" max="25" class="svn"></progress>
53+
<span>svn</span>
54+
</dd>
55+
</dl>
56+
</div>
57+
<div>
58+
<dl class="bar-chart">
59+
<dt>Diff Curr</dt>
60+
<dd>
61+
<progress value="0.257" max="1.2" class="git"></progress>
62+
<span>git</span>
63+
</dd>
64+
<dd>
65+
<progress value="1.09" max="1.2" class="svn"></progress>
66+
<span>svn</span>
67+
</dd>
68+
</dl>
69+
</div>
70+
<div>
71+
<dl class="bar-chart">
72+
<dt>Diff Rec</dt>
73+
<dd>
74+
<progress value="0.248" max="4" class="git"></progress>
75+
<span>git</span>
76+
</dd>
77+
<dd>
78+
<progress value="3.99" max="4" class="svn"></progress>
79+
<span>svn</span>
80+
</dd>
81+
</dl>
82+
</div>
83+
<div>
84+
<dl class="bar-chart">
85+
<dt>Diff Tags</dt>
86+
<dd>
87+
<progress value="1.17" max="85" class="git"></progress>
88+
<span>git</span>
89+
</dd>
90+
<dd>
91+
<progress value="83.57" max="85" class="svn"></progress>
92+
<span>svn</span>
93+
</dd>
94+
</dl>
95+
</div>
96+
<div>
97+
<dl class="bar-chart">
98+
<dt>Clone</dt>
99+
<dd>
100+
<progress value="21.0" max="110" class="git"></progress>
101+
<span>git*</span>
102+
</dd>
103+
<dd>
104+
<progress value="107.5" max="110" class="git"></progress>
105+
<span>git</span>
106+
</dd>
107+
<dd>
108+
<progress value="14.0" max="110" class="svn"></progress>
109+
</dd>
110+
</dl>
111+
</div>
112+
<div>
113+
<dl class="bar-chart">
114+
<dt>Log (50)</dt>
115+
<dd>
116+
<progress value="0.012" max="0.4" class="git"></progress>
117+
<span>git</span>
118+
</dd>
119+
<dd>
120+
<progress value="0.381" max="0.4" class="svn"></progress>
121+
<span>svn</span>
122+
</dd>
123+
</dl>
124+
</div>
125+
<div>
126+
<dl class="bar-chart">
127+
<dt>Log (All)</dt>
128+
<dd>
129+
<progress value="0.519" max="170" class="git"></progress>
130+
<span>git</span>
131+
</dd>
132+
<dd>
133+
<progress value="169.197" max="170" class="svn"></progress>
134+
<span>svn</span>
135+
</dd>
136+
</dl>
137+
</div>
138+
<div>
139+
<dl class="bar-chart">
140+
<dt>Log (File)</dt>
141+
<dd>
142+
<progress value="0.601" max="83" class="git"></progress>
143+
<span>git</span>
144+
</dd>
145+
<dd>
146+
<progress value="82.843" max="83" class="svn"></progress>
147+
<span>svn</span>
148+
</dd>
149+
</dl>
150+
</div>
151+
<div>
152+
<dl class="bar-chart">
153+
<dt>Update</dt>
154+
<dd>
155+
<progress value="0.896" max="2.9" class="git"></progress>
156+
<span>git</span>
157+
</dd>
158+
<dd>
159+
<progress value="2.816" max="2.9" class="svn"></progress>
160+
<span>svn</span>
161+
</dd>
162+
</dl>
163+
</div>
164+
<div>
165+
<dl class="bar-chart">
166+
<dt>Blame</dt>
167+
<dd>
168+
<progress value="1.91" max="3.1" class="git"></progress>
169+
<span>git</span>
170+
</dd>
171+
<dd>
172+
<progress value="3.04" max="3.1" class="svn"></progress>
173+
<span>svn</span>
174+
</dd>
175+
</dl>
176+
</div>
177+
<div>
178+
<dl class="bar-chart">
179+
<dt>Size</dt>
180+
<dd>
181+
<progress value="181" max="182" class="git"></progress>
182+
<span>git</span>
183+
</dd>
184+
<dd>
185+
<progress value="132" max="182" class="svn"></progress>
186+
<span>svn</span>
187+
</dd>
188+
</dl>
189+
</div>
190+
</div>
197191

198192
<p>
199193
For testing, large AWS instances were set up in the same availability zone.

‎tests/git-scm.spec.js‎

Lines changed: 13 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
const { test, expect, selectors } = require('@playwright/test')
1+
const { test, expect, selectors, devices } = require('@playwright/test')
22

33
const url = process.env.PLAYWRIGHT_TEST_URL
44
? process.env.PLAYWRIGHT_TEST_URL.replace(/[^/]$/, '$&/')
@@ -288,3 +288,15 @@ test('sidebar', async ({ page }) => {
288288
await about.click();
289289
await expect(page.getByRole('heading', { name: 'About - Branching and Merging' })).toBeVisible();
290290
});
291+
292+
test('small-and-fast', async ({ page }) => {
293+
await page.setViewportSize(devices['iPhone X'].viewport);
294+
295+
await page.goto(`${url}about/small-and-fast`);
296+
297+
// Scroll to text right below the graphs
298+
await page.getByText('For testing, large AWS instances').scrollIntoViewIfNeeded();
299+
300+
const lastGraph = page.locator('.bar-chart').last();
301+
await expect(lastGraph).toBeInViewport();
302+
});

0 commit comments

Comments
 (0)