Skip to content

Commit

Permalink
small-and-fast: make bar-graph table responsive
Browse files Browse the repository at this point in the history 
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.
  • Loading branch information
@To1ne
To1ne committed Oct 17, 2024
1 parent 4035aad commit 77d0c63
Show file tree
Hide file tree
Showing 3 changed files with 185 additions and 168 deletions.
11 changes: 11 additions & 0 deletions assets/sass/about.scss
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,14 @@
.bar-chart-grid {
display: grid;
grid-template-columns: repeat(6, 1fr);
}

@media (max-width: 760px) {
.bar-chart-grid {
grid-template-columns: repeat(auto-fill, minmax(115px, 1fr));
}
}

.bar-chart {
display: inline-grid;

Expand Down
328 changes: 161 additions & 167 deletions content/about/small-and-fast.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,173 +27,167 @@ <h3>Benchmarks</h3>
to CVS or Perforce. <em>Smaller is faster.</em>
</p>

<table width="100%">
<tbody>
<tr>
<td>
<dl class="bar-chart">
<dt>Commit A</dt>
<dd>
<progress value="0.649" max="3" class="git"></progress>
<span>git</span>
</dd>
<dd>
<progress value="2.6" max="3" class="svn"></progress>
<span>svn</span>
</dd>
</dl>
</td>
<td>
<dl class="bar-chart">
<dt>Commit B</dt>
<dd>
<progress value="1.53" max="25" class="git"></progress>
<span>git</span>
</dd>
<dd>
<progress value="24.7" max="25" class="svn"></progress>
<span>svn</span>
</dd>
</dl>
</td>
<td>
<dl class="bar-chart">
<dt>Diff Curr</dt>
<dd>
<progress value="0.257" max="1.2" class="git"></progress>
<span>git</span>
</dd>
<dd>
<progress value="1.09" max="1.2" class="svn"></progress>
<span>svn</span>
</dd>
</dl>
</td>
<td>
<dl class="bar-chart">
<dt>Diff Rec</dt>
<dd>
<progress value="0.248" max="4" class="git"></progress>
<span>git</span>
</dd>
<dd>
<progress value="3.99" max="4" class="svn"></progress>
<span>svn</span>
</dd>
</dl>
</td>
<td>
<dl class="bar-chart">
<dt>Diff Tags</dt>
<dd>
<progress value="1.17" max="85" class="git"></progress>
<span>git</span>
</dd>
<dd>
<progress value="83.57" max="85" class="svn"></progress>
<span>svn</span>
</dd>
</dl>
</td>
<td>
<dl class="bar-chart">
<dt>Clone</dt>
<dd>
<progress value="21.0" max="110" class="git"></progress>
<span>git*</span>
</dd>
<dd>
<progress value="107.5" max="110" class="git"></progress>
<span>git</span>
</dd>
<dd>
<progress value="14.0" max="110" class="svn"></progress>
</dd>
</dl>
</td>
</tr>
<tr>
<td>
<dl class="bar-chart">
<dt>Log (50)</dt>
<dd>
<progress value="0.012" max="0.4" class="git"></progress>
<span>git</span>
</dd>
<dd>
<progress value="0.381" max="0.4" class="svn"></progress>
<span>svn</span>
</dd>
</dl>
</td>
<td>
<dl class="bar-chart">
<dt>Log (All)</dt>
<dd>
<progress value="0.519" max="170" class="git"></progress>
<span>git</span>
</dd>
<dd>
<progress value="169.197" max="170" class="svn"></progress>
<span>svn</span>
</dd>
</dl>
</td>
<td>
<dl class="bar-chart">
<dt>Log (File)</dt>
<dd>
<progress value="0.601" max="83" class="git"></progress>
<span>git</span>
</dd>
<dd>
<progress value="82.843" max="83" class="svn"></progress>
<span>svn</span>
</dd>
</dl>
</td>
<td>
<dl class="bar-chart">
<dt>Update</dt>
<dd>
<progress value="0.896" max="2.9" class="git"></progress>
<span>git</span>
</dd>
<dd>
<progress value="2.816" max="2.9" class="svn"></progress>
<span>svn</span>
</dd>
</dl>
</td>
<td>
<dl class="bar-chart">
<dt>Blame</dt>
<dd>
<progress value="1.91" max="3.1" class="git"></progress>
<span>git</span>
</dd>
<dd>
<progress value="3.04" max="3.1" class="svn"></progress>
<span>svn</span>
</dd>
</dl>
</td>
<td>
<dl class="bar-chart">
<dt>Size</dt>
<dd>
<progress value="181" max="182" class="git"></progress>
<span>git</span>
</dd>
<dd>
<progress value="132" max="182" class="svn"></progress>
<span>svn</span>
</dd>
</dl>
</td>
</tr>
</tbody>
</table>
<div class="bar-chart-grid">
<div>
<dl class="bar-chart">
<dt>Commit A</dt>
<dd>
<progress value="0.649" max="3" class="git"></progress>
<span>git</span>
</dd>
<dd>
<progress value="2.6" max="3" class="svn"></progress>
<span>svn</span>
</dd>
</dl>
</div>
<div>
<dl class="bar-chart">
<dt>Commit B</dt>
<dd>
<progress value="1.53" max="25" class="git"></progress>
<span>git</span>
</dd>
<dd>
<progress value="24.7" max="25" class="svn"></progress>
<span>svn</span>
</dd>
</dl>
</div>
<div>
<dl class="bar-chart">
<dt>Diff Curr</dt>
<dd>
<progress value="0.257" max="1.2" class="git"></progress>
<span>git</span>
</dd>
<dd>
<progress value="1.09" max="1.2" class="svn"></progress>
<span>svn</span>
</dd>
</dl>
</div>
<div>
<dl class="bar-chart">
<dt>Diff Rec</dt>
<dd>
<progress value="0.248" max="4" class="git"></progress>
<span>git</span>
</dd>
<dd>
<progress value="3.99" max="4" class="svn"></progress>
<span>svn</span>
</dd>
</dl>
</div>
<div>
<dl class="bar-chart">
<dt>Diff Tags</dt>
<dd>
<progress value="1.17" max="85" class="git"></progress>
<span>git</span>
</dd>
<dd>
<progress value="83.57" max="85" class="svn"></progress>
<span>svn</span>
</dd>
</dl>
</div>
<div>
<dl class="bar-chart">
<dt>Clone</dt>
<dd>
<progress value="21.0" max="110" class="git"></progress>
<span>git*</span>
</dd>
<dd>
<progress value="107.5" max="110" class="git"></progress>
<span>git</span>
</dd>
<dd>
<progress value="14.0" max="110" class="svn"></progress>
</dd>
</dl>
</div>
<div>
<dl class="bar-chart">
<dt>Log (50)</dt>
<dd>
<progress value="0.012" max="0.4" class="git"></progress>
<span>git</span>
</dd>
<dd>
<progress value="0.381" max="0.4" class="svn"></progress>
<span>svn</span>
</dd>
</dl>
</div>
<div>
<dl class="bar-chart">
<dt>Log (All)</dt>
<dd>
<progress value="0.519" max="170" class="git"></progress>
<span>git</span>
</dd>
<dd>
<progress value="169.197" max="170" class="svn"></progress>
<span>svn</span>
</dd>
</dl>
</div>
<div>
<dl class="bar-chart">
<dt>Log (File)</dt>
<dd>
<progress value="0.601" max="83" class="git"></progress>
<span>git</span>
</dd>
<dd>
<progress value="82.843" max="83" class="svn"></progress>
<span>svn</span>
</dd>
</dl>
</div>
<div>
<dl class="bar-chart">
<dt>Update</dt>
<dd>
<progress value="0.896" max="2.9" class="git"></progress>
<span>git</span>
</dd>
<dd>
<progress value="2.816" max="2.9" class="svn"></progress>
<span>svn</span>
</dd>
</dl>
</div>
<div>
<dl class="bar-chart">
<dt>Blame</dt>
<dd>
<progress value="1.91" max="3.1" class="git"></progress>
<span>git</span>
</dd>
<dd>
<progress value="3.04" max="3.1" class="svn"></progress>
<span>svn</span>
</dd>
</dl>
</div>
<div>
<dl class="bar-chart">
<dt>Size</dt>
<dd>
<progress value="181" max="182" class="git"></progress>
<span>git</span>
</dd>
<dd>
<progress value="132" max="182" class="svn"></progress>
<span>svn</span>
</dd>
</dl>
</div>
</div>

<p>
For testing, large AWS instances were set up in the same availability zone.
Expand Down
14 changes: 13 additions & 1 deletion tests/git-scm.spec.js
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
const { test, expect, selectors } = require('@playwright/test')
const { test, expect, selectors, devices } = require('@playwright/test')

const url = process.env.PLAYWRIGHT_TEST_URL
? process.env.PLAYWRIGHT_TEST_URL.replace(/[^/]$/, '$&/')
Expand Down Expand Up @@ -288,3 +288,15 @@ test('sidebar', async ({ page }) => {
await about.click();
await expect(page.getByRole('heading', { name: 'About - Branching and Merging' })).toBeVisible();
});

test('small-and-fast', async ({ page }) => {
await page.setViewportSize(devices['iPhone X'].viewport);

await page.goto(`${url}about/small-and-fast`);

// Scroll to text right below the graphs
await page.getByText('For testing, large AWS instances').scrollIntoViewIfNeeded();

const lastGraph = page.locator('.bar-chart').last();
await expect(lastGraph).toBeInViewport();
});

0 comments on commit 77d0c63

Please sign in to comment.