From 4035aad4ae521b18ccdc125ce08ad25556185788 Mon Sep 17 00:00:00 2001 From: Toon Claes Date: Wed, 16 Oct 2024 16:08:00 +0200 Subject: [PATCH 1/2] sass: move about styling into separate file assets/sass/application.scss is the main entry point for all sub stylesheets. Recently we've added `.bar-chart` to that file, while it's only used on one of the /about pages. We're about to add more styling to the /about pages, so split out it's styling into a separate file. --- assets/sass/about.scss | 60 ++++++++++++++++++++++++++++++++++ assets/sass/application.scss | 62 +----------------------------------- 2 files changed, 61 insertions(+), 61 deletions(-) create mode 100644 assets/sass/about.scss diff --git a/assets/sass/about.scss b/assets/sass/about.scss new file mode 100644 index 0000000000..3d4e67e03d --- /dev/null +++ b/assets/sass/about.scss @@ -0,0 +1,60 @@ +.bar-chart { + display: inline-grid; + + /* Got the idea of using
,
, and
from: + * https://css-tricks.com/making-charts-with-css/ */ + dt { + grid-column: 1 / 4; + text-align: center; + } + + dd { + padding: 5px; + margin: 0; + text-align: center; + display: flex; + flex-direction: column; + } + + dd + dd { + border-left: 1px solid #ccc; + } + + progress { + /* Reset the default appearance */ + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + + writing-mode: vertical-lr; + + width: 2em; + height: 5em; + background: none; + border: none; + position: relative; + } + + progress::-webkit-progress-bar { + background: none; + } + + progress::-webkit-progress-value { + /* Chrome (and derivatives) are stubborn to attach the bar to the top */ + bottom: 0; + position: absolute; + } + + progress.git::-moz-progress-bar { + background-color: #E09FA0; + } + progress.git::-webkit-progress-value { + background-color: #E09FA0; + } + progress.svn::-moz-progress-bar { + background-color: #E05F49; + } + progress.svn::-webkit-progress-value { + background-color: #E05F49; + } +} diff --git a/assets/sass/application.scss b/assets/sass/application.scss index 4663c4c47b..9509993b44 100644 --- a/assets/sass/application.scss +++ b/assets/sass/application.scss @@ -26,6 +26,7 @@ $baseurl: "{{ .Site.BaseURL }}{{ if (and (ne .Site.BaseURL "/") (ne .Site.BaseUR @import 'book'; @import 'book2'; @import 'lists'; +@import 'about'; code { display: inline; @@ -49,64 +50,3 @@ pre { .d-flex{ display: flex; } - -.bar-chart { - display: inline-grid; - - /* Got the idea of using
,
, and
from: - * https://css-tricks.com/making-charts-with-css/ */ - dt { - grid-column: 1 / 4; - text-align: center; - } - - dd { - padding: 5px; - margin: 0; - text-align: center; - display: flex; - flex-direction: column; - } - - dd + dd { - border-left: 1px solid #ccc; - } - - progress { - /* Reset the default appearance */ - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; - - writing-mode: vertical-lr; - - width: 2em; - height: 5em; - background: none; - border: none; - position: relative; - } - - progress::-webkit-progress-bar { - background: none; - } - - progress::-webkit-progress-value { - /* Chrome (and derivatives) are stubborn to attach the bar to the top */ - bottom: 0; - position: absolute; - } - - progress.git::-moz-progress-bar { - background-color: #E09FA0; - } - progress.git::-webkit-progress-value { - background-color: #E09FA0; - } - progress.svn::-moz-progress-bar { - background-color: #E05F49; - } - progress.svn::-webkit-progress-value { - background-color: #E05F49; - } -} From 77d0c6303a5ee6973623da72aaba1ea53bed048d Mon Sep 17 00:00:00 2001 From: Toon Claes Date: Wed, 16 Oct 2024 16:10:33 +0200 Subject: [PATCH 2/2] 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. --- assets/sass/about.scss | 11 + content/about/small-and-fast.html | 328 +++++++++++++++--------------- tests/git-scm.spec.js | 14 +- 3 files changed, 185 insertions(+), 168 deletions(-) diff --git a/assets/sass/about.scss b/assets/sass/about.scss index 3d4e67e03d..e0ac055e75 100644 --- a/assets/sass/about.scss +++ b/assets/sass/about.scss @@ -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; diff --git a/content/about/small-and-fast.html b/content/about/small-and-fast.html index f5e3e6204a..05057ffb70 100644 --- a/content/about/small-and-fast.html +++ b/content/about/small-and-fast.html @@ -27,173 +27,167 @@

Benchmarks

to CVS or Perforce. Smaller is faster.

- - - - - - - - - - - - - - - - - - - -
-
-
Commit A
-
- - git -
-
- - svn -
-
- 		-
-
Commit B
-
- - git -
-
- - svn -
-
- 		-
-
Diff Curr
-
- - git -
-
- - svn -
-
- 		-
-
Diff Rec
-
- - git -
-
- - svn -
-
- 		-
-
Diff Tags
-
- - git -
-
- - svn -
-
- 		-
-
Clone
-
- - git* -
-
- - git -
-
- -
-
-
-
-
Log (50)
-
- - git -
-
- - svn -
-
- 		-
-
Log (All)
-
- - git -
-
- - svn -
-
- 		-
-
Log (File)
-
- - git -
-
- - svn -
-
- 		-
-
Update
-
- - git -
-
- - svn -
-
- 		-
-
Blame
-
- - git -
-
- - svn -
-
- 		-
-
Size
-
- - git -
-
- - svn -
-
-
+
+
+
+
Commit A
+
+ + git +
+
+ + svn +
+
+
+
+
+
Commit B
+
+ + git +
+
+ + svn +
+
+
+
+
+
Diff Curr
+
+ + git +
+
+ + svn +
+
+
+
+
+
Diff Rec
+
+ + git +
+
+ + svn +
+
+
+
+
+
Diff Tags
+
+ + git +
+
+ + svn +
+
+
+
+
+
Clone
+
+ + git* +
+
+ + git +
+
+ +
+
+
+
+
+
Log (50)
+
+ + git +
+
+ + svn +
+
+
+
+
+
Log (All)
+
+ + git +
+
+ + svn +
+
+
+
+
+
Log (File)
+
+ + git +
+
+ + svn +
+
+
+
+
+
Update
+
+ + git +
+
+ + svn +
+
+
+
+
+
Blame
+
+ + git +
+
+ + svn +
+
+
+
+
+
Size
+
+ + git +
+
+ + svn +
+
+
+

For testing, large AWS instances were set up in the same availability zone. diff --git a/tests/git-scm.spec.js b/tests/git-scm.spec.js index 5616bd3e25..f47f98792b 100644 --- a/tests/git-scm.spec.js +++ b/tests/git-scm.spec.js @@ -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(/[^/]$/, '$&/') @@ -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(); +});