fix(rwd): only add chaarts on big screen and improve scrollable regio…

…ns UX
ffoodd · Sep 27, 2023 · fd2e600 · fd2e600
1 parent 4a37606
commit fd2e600
Show file tree

Hide file tree

Showing 38 changed files with 1,284 additions and 1,279 deletions.
diff --git a/_site/js/script.js b/_site/js/script.js
@@ -15,15 +15,15 @@
 		});
 	});
 
-	// Scrollable tables
-	const regions = document.querySelectorAll('.table-container');
+	// Scrollable tables or code blocks
+	const regions = document.querySelectorAll('.scrollable-container, .chaarts-container');
 	if (window.matchMedia('(min-width: 30em)').matches) {
-		regions.forEach(el => {
-			const width = el.offsetWidth;
-			const table = el.querySelector('table');
+		regions.forEach(region => {
+			const width = region.offsetWidth;
+			const child = region.querySelector('table') || region.querySelector('code');
 
-			if (table.offsetWidth > width) {
-				el.setAttribute('tabindex', '0');
+			if (child.offsetWidth > width) {
+				region.setAttribute('tabindex', '0');
 			}
 		});
 	}

diff --git a/_site/templates/bar-charts.njk b/_site/templates/bar-charts.njk
@@ -129,7 +129,7 @@
 	<details>
 		<summary><abbr title="Cascading StyleSheet" aria-label="Cascading StyleSheet">css</abbr></summary>
 		<div>
-			<pre><code class="language-css">{% filter escape %}{% include 'css/examples/bar.css' %}{% endfilter %}</code></pre>
+			<pre class="scrollable-container"><code class="language-css">{% filter escape %}{% include 'css/examples/bar.css' %}{% endfilter %}</code></pre>
 		</div>
 	</details>
 
@@ -192,7 +192,7 @@
 	<details>
 		<summary><abbr title="Cascading StyleSheet" aria-label="Cascading StyleSheet">css</abbr></summary>
 		<div>
-			<pre><code class="language-css">{% filter escape %}{% include 'css/examples/waterfall.css' %}{% endfilter %}</code></pre>
+			<pre class="scrollable-container"><code class="language-css">{% filter escape %}{% include 'css/examples/waterfall.css' %}{% endfilter %}</code></pre>
 		</div>
 	</details>
 {% endblock %}
diff --git a/_site/templates/column-charts.njk b/_site/templates/column-charts.njk
@@ -116,7 +116,7 @@
 	<details>
 		<summary><abbr title="Cascading StyleSheet" aria-label="Cascading StyleSheet">css</abbr></summary>
 		<div>
-			<pre><code class="language-css">{% filter escape %}{% include 'css/examples/column.css' %}{% endfilter %}</code></pre>
+			<pre class="scrollable-container"><code class="language-css">{% filter escape %}{% include 'css/examples/column.css' %}{% endfilter %}</code></pre>
 		</div>
 	</details>
 
@@ -240,7 +240,7 @@
 	<details>
 		<summary><abbr title="Cascading StyleSheet" aria-label="Cascading StyleSheet">css</abbr></summary>
 		<div>
-			<pre><code class="language-css">{% filter escape %}{% include 'css/examples/columns.css' %}{% endfilter %}</code></pre>
+			<pre class="scrollable-container"><code class="language-css">{% filter escape %}{% include 'css/examples/columns.css' %}{% endfilter %}</code></pre>
 		</div>
 	</details>
 {% endblock %}
diff --git a/_site/templates/includes/_bar-markup.njk b/_site/templates/includes/_bar-markup.njk
@@ -1,4 +1,4 @@
-<pre><code class="language-markup">&lt;table class="chaarts bar" style="--scale: 3000"&gt;
+<pre class="scrollable-container"><code class="language-markup">&lt;table class="chaarts bar" style="--scale: 3000"&gt;
   &lt;caption id="caption-1"&gt;[…]&lt;/caption&gt;
   &lt;thead class="sr-only"&gt;
     &lt;tr&gt;

diff --git a/_site/templates/includes/_column-markup.njk b/_site/templates/includes/_column-markup.njk
@@ -1,4 +1,4 @@
-<pre><code class="language-markup">&lt;table class="chaarts column" id="column" style="--y: 7;"&gt;
+<pre class="scrollable-container"><code class="language-markup">&lt;table class="chaarts column" id="column" style="--y: 7;"&gt;
   &lt;caption id="caption-7"&gt;[…]&lt;/caption&gt;
   &lt;thead&gt;
     &lt;tr&gt;

diff --git a/_site/templates/includes/_columns-markup.njk b/_site/templates/includes/_columns-markup.njk
@@ -1,4 +1,4 @@
-<pre><code class="language-markup">&lt;table class="chaarts column-multiple" id="column-multiple" style="--y: 11; --span: 2;"&gt;
+<pre class="scrollable-container"><code class="language-markup">&lt;table class="chaarts column-multiple" id="column-multiple" style="--y: 11; --span: 2;"&gt;
   &lt;caption id="caption-8"&gt;[…]&lt;/caption&gt;
   &lt;thead&gt;
     &lt;tr&gt;

diff --git a/_site/templates/includes/_inclusive-toggle.njk b/_site/templates/includes/_inclusive-toggle.njk
@@ -1,4 +1,4 @@
-<pre><code class="language-javascript">document.addEventListener("DOMContentLoaded", function() {
+<pre class="scrollable-container"><code class="language-javascript">document.addEventListener("DOMContentLoaded", function() {
   var switches = document.querySelectorAll('[role="switch"]');
 
   Array.prototype.forEach.call(switches, function(el, i) {

diff --git a/_site/templates/includes/_line-markup.njk b/_site/templates/includes/_line-markup.njk
@@ -1,4 +1,4 @@
-<pre><code class="language-markup">&lt;table class="chaarts line" style="--y: 32; --x: 13; --t-1: 'Jan.'; --t-2: 'Feb.'; […]"&gt;
+<pre class="scrollable-container"><code class="language-markup">&lt;table class="chaarts line" style="--y: 32; --x: 13; --t-1: 'Jan.'; --t-2: 'Feb.'; […]"&gt;
   &lt;caption id="caption-3"&gt;[…]&lt;/caption&gt;
   &lt;thead&gt;
     &lt;tr&gt;

diff --git a/_site/templates/includes/_pie-markup.njk b/_site/templates/includes/_pie-markup.njk
@@ -1,4 +1,4 @@
-<pre><code class="language-markup">&lt;table class="chaarts pie"&gt;
+<pre class="scrollable-container"><code class="language-markup">&lt;table class="chaarts pie"&gt;
   &lt;caption id="caption-5"&gt;[…]&lt;/caption&gt;
   &lt;thead class="sr-only"&gt;
     &lt;tr&gt;

diff --git a/_site/templates/includes/_pie-styles:44.njk b/_site/templates/includes/_pie-styles:44.njk
@@ -1,4 +1,4 @@
-<pre data-line="8"><code class="language-css">td[style*="--value: 44;"]::before {
+<pre class="scrollable-container" data-line="8"><code class="language-css">td[style*="--value: 44;"]::before {
   clip-path: polygon(
     50% 50%,
     50% 0%,

diff --git a/_site/templates/includes/_pie-styles:64.njk b/_site/templates/includes/_pie-styles:64.njk
@@ -1,4 +1,4 @@
-<pre data-line="10"><code class="language-css">td[style*="--value: 64;"]::before {
+<pre class="scrollable-container" data-line="10"><code class="language-css">td[style*="--value: 64;"]::before {
   clip-path: polygon(
     50% 50%,
     50% 0%,

diff --git a/_site/templates/includes/_pie-styles:88.njk b/_site/templates/includes/_pie-styles:88.njk
@@ -1,4 +1,4 @@
-<pre data-line="12"><code class="language-css">td[style*="--value: 88;"]::before {
+<pre class="scrollable-container" data-line="12"><code class="language-css">td[style*="--value: 88;"]::before {
   clip-path: polygon(
     50% 50%,
     50% 0%,

diff --git a/_site/templates/includes/_radar-markup.njk b/_site/templates/includes/_radar-markup.njk
@@ -1,4 +1,4 @@
-<pre><code class="language-markup">&lt;table class="chaarts radar" id="radar" style="--scale: 20; --step: 5; --items: 7; --1: 14; --2: 11; --3: 13; --4: 16; --5: 10; --6: 12; --7: 4; --8: var(--1);"&gt;
+<pre class="scrollable-container"><code class="language-markup">&lt;table class="chaarts radar" id="radar" style="--scale: 20; --step: 5; --items: 7; --1: 14; --2: 11; --3: 13; --4: 16; --5: 10; --6: 12; --7: 4; --8: var(--1);"&gt;
   &lt;caption id="caption-9"&gt;[…]&lt;/caption&gt;
   &lt;thead&gt;
     &lt;tr&gt;

diff --git a/_site/templates/includes/_radars-markup.njk b/_site/templates/includes/_radars-markup.njk
@@ -1,4 +1,4 @@
-<pre><code class="language-markup">&lt;table class="chaarts radar-multiple" id="radar-multiple" style="--scale: 20; --step: 5; --items: 7; --areas: 2;"&gt;
+<pre class="scrollable-container"><code class="language-markup">&lt;table class="chaarts radar-multiple" id="radar-multiple" style="--scale: 20; --step: 5; --items: 7; --areas: 2;"&gt;
   &lt;caption id="caption-9"&gt;[…]&lt;/caption&gt;
   &lt;thead&gt;
     &lt;tr&gt;

diff --git a/_site/templates/includes/_svg-encoding.njk b/_site/templates/includes/_svg-encoding.njk
@@ -1,4 +1,4 @@
-<pre><code class="language-css">.chaarts {
+<pre class="scrollable-container"><code class="language-css">.chaarts {
   --stripes: url("data:image/svg+xml,&lt;svg width='6' height='6' viewBox='0 0 6 6' xmlns='http://www.w3.org/2000/svg'&gt;&lt;g fill='%23fff9' fill-rule='evenodd'&gt;&lt;path d='M5 0h1L0 6V5zM6 5v1H5z'/&gt;&lt;/g&gt;&lt;/svg&gt;");
 }
 

diff --git a/_site/templates/includes/_waterfall-markup.njk b/_site/templates/includes/_waterfall-markup.njk
@@ -1,3 +1,3 @@
-<pre><code class="language-markup">&lt;table class="chaarts bar waterfall"
+<pre class="scrollable-container"><code class="language-markup">&lt;table class="chaarts bar waterfall"
  style="--scale: 3000; --1: 4; --2: 96; --3: 102; --4: 129; --5: 188; --6: 194; --7: 326; --8: 836; --9: 836; --10: 2561; --11: 2980;"&gt;
 &lt;/table&gt;</code></pre>
diff --git a/_site/templates/line-charts.njk b/_site/templates/line-charts.njk
@@ -199,7 +199,7 @@
 	<details>
 		<summary><abbr title="Cascading StyleSheet" aria-label="Cascading StyleSheet">css</abbr></summary>
 		<div>
-			<pre><code class="language-css">{% filter escape %}{% include 'css/examples/line.css' %}{% endfilter %}</code></pre>
+			<pre class="scrollable-container"><code class="language-css">{% filter escape %}{% include 'css/examples/line.css' %}{% endfilter %}</code></pre>
 		</div>
 	</details>
 	<details>
@@ -336,7 +336,7 @@
 	<details>
 		<summary><abbr title="Cascading StyleSheet" aria-label="Cascading StyleSheet">css</abbr></summary>
 		<div>
-			<pre><code class="language-css">{% filter escape %}{% include 'css/examples/lines.css' %}{% endfilter %}</code></pre>
+			<pre class="scrollable-container"><code class="language-css">{% filter escape %}{% include 'css/examples/lines.css' %}{% endfilter %}</code></pre>
 		</div>
 	</details>
 

diff --git a/_site/templates/pie-charts.njk b/_site/templates/pie-charts.njk
@@ -196,7 +196,7 @@
 	<details>
 		<summary><abbr title="Cascading StyleSheet" aria-label="Cascading StyleSheet">css</abbr></summary>
 		<div>
-			<pre><code class="language-css">{% filter escape %}{% include 'css/examples/pie.css' %}{% endfilter %}</code></pre>
+			<pre class="scrollable-container"><code class="language-css">{% filter escape %}{% include 'css/examples/pie.css' %}{% endfilter %}</code></pre>
 		</div>
 	</details>
 	<details id="calculation-twist">
@@ -439,7 +439,7 @@
 	<details>
 		<summary><abbr title="Cascading StyleSheet" aria-label="Cascading StyleSheet">css</abbr></summary>
 		<div>
-			<pre><code class="language-css">{% filter escape %}{% include 'css/examples/donut.css' %}{% endfilter %}</code></pre>
+			<pre class="scrollable-container"><code class="language-css">{% filter escape %}{% include 'css/examples/donut.css' %}{% endfilter %}</code></pre>
 		</div>
 	</details>
 
@@ -504,7 +504,7 @@
 	<details>
 		<summary><abbr title="Cascading StyleSheet" aria-label="Cascading StyleSheet">css</abbr></summary>
 		<div>
-			<pre><code class="language-css">{% filter escape %}{% include 'css/examples/polar.css' %}{% endfilter %}</code></pre>
+			<pre class="scrollable-container"><code class="language-css">{% filter escape %}{% include 'css/examples/polar.css' %}{% endfilter %}</code></pre>
 		</div>
 	</details>
 {% endblock %}
diff --git a/_site/templates/radar-charts.njk b/_site/templates/radar-charts.njk
@@ -172,7 +172,7 @@
 	<details>
 		<summary><abbr title="Cascading StyleSheet" aria-label="Cascading StyleSheet">css</abbr></summary>
 		<div>
-			<pre><code class="language-css">{% filter escape %}{% include 'css/examples/radar.css' %}{% endfilter %}</code></pre>
+			<pre class="scrollable-container"><code class="language-css">{% filter escape %}{% include 'css/examples/radar.css' %}{% endfilter %}</code></pre>
 		</div>
 	</details>
 	<details>
@@ -344,7 +344,7 @@
 	<details>
 		<summary><abbr title="Cascading StyleSheet" aria-label="Cascading StyleSheet">css</abbr></summary>
 		<div>
-			<pre><code class="language-css">{% filter escape %}{% include 'css/examples/radars.css' %}{% endfilter %}</code></pre>
+			<pre class="scrollable-container"><code class="language-css">{% filter escape %}{% include 'css/examples/radars.css' %}{% endfilter %}</code></pre>
 		</div>
 	</details>
 {% endblock %}