From 755b244b32affbd1b24a6b9dad930d345582362d Mon Sep 17 00:00:00 2001 From: David Egger Date: Wed, 18 Jan 2023 03:56:30 +0100 Subject: [PATCH] #2 Replace Flexbox with Grid, Replace ems and px with rem in media queries, Continue Adapting Article --- src/examples/article/article.html | 190 +++++++++++------- .../article/electric-power-consumption.css | 4 +- .../article/electric-power-consumption.js | 26 +-- .../article/electric-power-consumption.scss | 4 +- src/examples/article/market-shares-chart.js | 13 +- src/examples/article/market-shares.css | 2 +- src/examples/article/market-shares.scss | 2 +- src/examples/article/styles.css | 15 +- src/examples/article/styles.css.map | 2 +- src/examples/article/styles.scss | 15 +- 10 files changed, 150 insertions(+), 123 deletions(-) diff --git a/src/examples/article/article.html b/src/examples/article/article.html index c854c5b0..e40a3cb1 100644 --- a/src/examples/article/article.html +++ b/src/examples/article/article.html @@ -12,85 +12,121 @@

Lorem ipsum dolor sit amet, consectetur adipiscing elit!

-
-
-

Lorem ipsum dolor sit amet, consectetur adipiscing elit!

-
-

- Vivamus iaculis augue elit, sit amet consectetur dui condimentum a. Vivamus arcu diam, commodo - id dictum et, fermentum eget tellus. Etiam mattis purus vitae volutpat luctus. Cras et nisi - risus. Suspendisse potenti. Donec ut rutrum magna. Aenean a ligula in erat sodales posuere at - sed quam. Etiam feugiat faucibus est id laoreet. Aliquam egestas euismod lectus, in finibus - sem pulvinar fringilla. Vestibulum justo lacus, gravida sed dolor sit amet, lacinia varius - augue. Aenean sollicitudin eleifend enim, sagittis viverra eros fringilla eget. -

-
-
-

Lorem ipsum dolor sit amet, consectetur adipiscing elit!

-

- Etiam rhoncus interdum urna, vel tincidunt justo consequat sit amet. Quisque pellentesque - sagittis feugiat. Morbi vel ultricies ligula. Sed faucibus enim dui, in dictum lectus gravida - ac. Aliquam commodo metus sed dui malesuada, nec commodo leo rutrum. Integer ut nulla blandit - libero finibus dignissim suscipit pretium elit. Morbi convallis ex eget leo semper volutpat. - Nulla feugiat dapibus porttitor. Praesent nec sodales urna. Nam lacinia odio sit amet arcu - mattis, ac imperdiet nibh accumsan. Phasellus congue congue arcu nec vulputate. In non commodo - felis, at tristique ante. Cras volutpat ante ex, in venenatis nunc blandit ut. -

-
+
+

Lorem ipsum dolor sit amet, consectetur adipiscing elit!

+
+

+ Vivamus iaculis augue elit, sit amet consectetur dui condimentum a. Vivamus arcu diam, commodo + id dictum et, fermentum eget tellus. Etiam mattis purus vitae volutpat luctus. Cras et nisi + risus. Suspendisse potenti. Donec ut rutrum magna. Aenean a ligula in erat sodales posuere at + sed quam. Etiam feugiat faucibus est id laoreet. Aliquam egestas euismod lectus, in finibus + sem pulvinar fringilla. Vestibulum justo lacus, gravida sed dolor sit amet, lacinia varius + augue. Aenean sollicitudin eleifend enim, sagittis viverra eros fringilla eget. +

+
+
+

Lorem ipsum dolor sit amet, consectetur adipiscing elit!

+

+ Etiam rhoncus interdum urna, vel tincidunt justo consequat sit amet. Quisque pellentesque + sagittis feugiat. Morbi vel ultricies ligula. Sed faucibus enim dui, in dictum lectus gravida + ac. Aliquam commodo metus sed dui malesuada, nec commodo leo rutrum. Integer ut nulla blandit + libero finibus dignissim suscipit pretium elit. Morbi convallis ex eget leo semper volutpat. + Nulla feugiat dapibus porttitor. Praesent nec sodales urna. Nam lacinia odio sit amet arcu + mattis, ac imperdiet nibh accumsan. Phasellus congue congue arcu nec vulputate. In non commodo + felis, at tristique ante. Cras volutpat ante ex, in venenatis nunc blandit ut. +

+

+ Etiam rhoncus interdum urna, vel tincidunt justo consequat sit amet. Quisque pellentesque + sagittis feugiat. Morbi vel ultricies ligula. Sed faucibus enim dui, in dictum lectus gravida + ac. Aliquam commodo metus sed dui malesuada, nec commodo leo rutrum. Integer ut nulla blandit + libero finibus dignissim suscipit pretium elit. Morbi convallis ex eget leo semper volutpat. + Nulla feugiat dapibus porttitor. Praesent nec sodales urna. Nam lacinia odio sit amet arcu + mattis, ac imperdiet nibh accumsan. Phasellus congue congue arcu nec vulputate. In non commodo + felis, at tristique ante. Cras volutpat ante ex, in venenatis nunc blandit ut. +

+

+ Etiam rhoncus interdum urna, vel tincidunt justo consequat sit amet. Quisque pellentesque + sagittis feugiat. Morbi vel ultricies ligula. Sed faucibus enim dui, in dictum lectus gravida + ac. Aliquam commodo metus sed dui malesuada, nec commodo leo rutrum. +

+
+
+

Lorem ipsum dolor sit amet, consectetur adipiscing elit!

+

+ Vivamus iaculis augue elit, sit amet consectetur dui condimentum a. Vivamus arcu diam, commodo + id dictum et, fermentum eget tellus. Etiam mattis purus vitae volutpat luctus. Cras et nisi + risus. Suspendisse potenti. Donec ut rutrum magna. Aenean a ligula in erat sodales posuere at + sed quam. Etiam feugiat faucibus est id laoreet. Aliquam egestas euismod lectus, in finibus + sem pulvinar fringilla. Vestibulum justo lacus, gravida sed dolor sit amet, lacinia varius + augue. Aenean sollicitudin eleifend enim, sagittis viverra eros fringilla eget. +

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit!

+
+
+
+

Lorem ipsum dolor sit amet, consectetur adipiscing elit!

+

+ Etiam rhoncus interdum urna, vel tincidunt justo consequat sit amet. Quisque pellentesque + sagittis feugiat. Morbi vel ultricies ligula. Sed faucibus enim dui, in dictum lectus gravida + ac. Aliquam commodo metus sed dui malesuada, nec commodo leo rutrum. Integer ut nulla blandit + libero finibus dignissim suscipit pretium elit. Morbi convallis ex eget leo semper volutpat. + Nulla feugiat dapibus porttitor. Praesent nec sodales urna. Nam lacinia odio sit amet arcu + mattis, ac imperdiet nibh accumsan. Phasellus congue congue arcu nec vulputate. In non commodo + felis, at tristique ante. Cras volutpat ante ex, in venenatis nunc blandit ut. +

+

+ Etiam rhoncus interdum urna, vel tincidunt justo consequat sit amet. Quisque pellentesque + sagittis feugiat. Morbi vel ultricies ligula. Sed faucibus enim dui, in dictum lectus gravida + ac. Aliquam commodo metus sed dui malesuada, nec commodo leo rutrum. Integer ut nulla blandit + libero finibus dignissim suscipit pretium elit. Morbi convallis ex eget leo semper volutpat. + Nulla feugiat dapibus porttitor. Praesent nec sodales urna. Nam lacinia odio sit amet arcu + mattis, ac imperdiet nibh accumsan. Phasellus congue congue arcu nec vulputate. In non commodo + felis, at tristique ante. Cras volutpat ante ex, in venenatis nunc blandit ut. +

+

+ Etiam rhoncus interdum urna, vel tincidunt justo consequat sit amet. Quisque pellentesque + sagittis feugiat. Morbi vel ultricies ligula. Sed faucibus enim dui, in dictum lectus gravida + ac. Aliquam commodo metus sed dui malesuada, nec commodo leo rutrum. +

-
-
-

Lorem ipsum dolor sit amet, consectetur adipiscing elit!

-

- Vivamus iaculis augue elit, sit amet consectetur dui condimentum a. Vivamus arcu diam, commodo - id dictum et, fermentum eget tellus. Etiam mattis purus vitae volutpat luctus. Cras et nisi - risus. Suspendisse potenti. Donec ut rutrum magna. Aenean a ligula in erat sodales posuere at - sed quam. Etiam feugiat faucibus est id laoreet. Aliquam egestas euismod lectus, in finibus - sem pulvinar fringilla. Vestibulum justo lacus, gravida sed dolor sit amet, lacinia varius - augue. Aenean sollicitudin eleifend enim, sagittis viverra eros fringilla eget. -

-

Lorem ipsum dolor sit amet, consectetur adipiscing elit!

-
-
-
-

- Nunc eu eros tincidunt, aliquam ipsum non, auctor ipsum. Fusce et sem fermentum nisl pulvinar - vulputate id a dui. Curabitur id aliquet magna. Donec laoreet ante at dapibus sagittis. - Maecenas id varius risus. Curabitur eros leo, pretium in ipsum eu, mollis interdum justo. - Curabitur sodales, erat quis ultricies consectetur, tortor velit condimentum mi, et pulvinar - tellus arcu sit amet magna. Integer iaculis diam vel lacus sodales consequat. Pellentesque - habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec semper - molestie massa, ut vehicula justo porttitor nec. Vestibulum vulputate purus turpis, eu cursus - ipsum consectetur sit amet. Mauris hendrerit venenatis porttitor. Fusce vel arcu nec ligula - scelerisque euismod. Ut sed sagittis justo. Aliquam eget dignissim risus, vitae ultrices - felis. -

-
+
+

Lorem ipsum dolor sit amet, consectetur adipiscing elit!

+
+

+ Etiam rhoncus interdum urna, vel tincidunt justo consequat sit amet. Quisque pellentesque + sagittis feugiat. Morbi vel ultricies ligula. Sed faucibus enim dui, in dictum lectus gravida + ac. Aliquam commodo metus sed dui malesuada, nec commodo leo rutrum. Integer ut nulla blandit + libero finibus dignissim suscipit pretium elit. Morbi convallis ex eget leo semper volutpat. + Nulla feugiat dapibus porttitor. Praesent nec sodales urna. Nam lacinia odio sit amet arcu + mattis, ac imperdiet nibh accumsan. Phasellus congue congue arcu nec vulputate. In non commodo + felis, at tristique ante. Cras volutpat ante ex, in venenatis nunc blandit ut. +

-
-
-

Lorem ipsum dolor sit amet, consectetur adipiscing elit!

-
-

- Etiam rhoncus interdum urna, vel tincidunt justo consequat sit amet. Quisque pellentesque - sagittis feugiat. Morbi vel ultricies ligula. Sed faucibus enim dui, in dictum lectus gravida - ac. Aliquam commodo metus sed dui malesuada, nec commodo leo rutrum. Integer ut nulla blandit - libero finibus dignissim suscipit pretium elit. Morbi convallis ex eget leo semper volutpat. - Nulla feugiat dapibus porttitor. Praesent nec sodales urna. Nam lacinia odio sit amet arcu - mattis, ac imperdiet nibh accumsan. Phasellus congue congue arcu nec vulputate. In non commodo - felis, at tristique ante. Cras volutpat ante ex, in venenatis nunc blandit ut. -

-
-
-

- Etiam at turpis metus. Aliquam ut tellus at erat ultrices dapibus. Curabitur vestibulum - dignissim efficitur. Etiam sed mi quis orci interdum gravida. Curabitur eget massa quam. Morbi - leo leo, consectetur a nibh a, consectetur rhoncus ipsum. Pellentesque ultrices eros vel neque - lobortis, et cursus enim bibendum. Curabitur non elit quam. Aliquam vitae urna ut urna aliquet - lobortis sed in eros. Mauris sed euismod velit, quis tempus orci. Integer vehicula bibendum - libero non lobortis. -

-
+
+

Lorem ipsum dolor sit amet, consectetur adipiscing elit!

+

+ Etiam rhoncus interdum urna, vel tincidunt justo consequat sit amet. Quisque pellentesque + sagittis feugiat. Morbi vel ultricies ligula. Sed faucibus enim dui, in dictum lectus gravida + ac. Aliquam commodo metus sed dui malesuada, nec commodo leo rutrum. Integer ut nulla blandit + libero finibus dignissim suscipit pretium elit. Morbi convallis ex eget leo semper volutpat. + Nulla feugiat dapibus porttitor. Praesent nec sodales urna. Nam lacinia odio sit amet arcu + mattis, ac imperdiet nibh accumsan. Phasellus congue congue arcu nec vulputate. In non commodo + felis, at tristique ante. Cras volutpat ante ex, in venenatis nunc blandit ut. +

+

+ Etiam rhoncus interdum urna, vel tincidunt justo consequat sit amet. Quisque pellentesque + sagittis feugiat. Morbi vel ultricies ligula. Sed faucibus enim dui, in dictum lectus gravida + ac. Aliquam commodo metus sed dui malesuada, nec commodo leo rutrum. Integer ut nulla blandit + libero finibus dignissim suscipit pretium elit. Morbi convallis ex eget leo semper volutpat. + Nulla feugiat dapibus porttitor. Praesent nec sodales urna. Nam lacinia odio sit amet arcu + mattis, ac imperdiet nibh accumsan. Phasellus congue congue arcu nec vulputate. In non commodo + felis, at tristique ante. Cras volutpat ante ex, in venenatis nunc blandit ut. +

+

+ Etiam rhoncus interdum urna, vel tincidunt justo consequat sit amet. Quisque pellentesque + sagittis feugiat. Morbi vel ultricies ligula. Sed faucibus enim dui, in dictum lectus gravida + ac. Aliquam commodo metus sed dui malesuada, nec commodo leo rutrum. +

diff --git a/src/examples/article/electric-power-consumption.css b/src/examples/article/electric-power-consumption.css index a8330b61..c6dc009a 100644 --- a/src/examples/article/electric-power-consumption.css +++ b/src/examples/article/electric-power-consumption.css @@ -24,7 +24,7 @@ justify-content: space-evenly; } -@media (min-width: 25em) { +@media (min-width: 25rem) { #electric-power-consumption .point, #electric-power-consumption .axis-x .tick, #electric-power-consumption .axis-y .tick { display: none; } @@ -32,7 +32,7 @@ display: block; } } -@media (max-width: 25em) { +@media (max-width: 25rem) { #electric-power-consumption .point, #electric-power-consumption .axis { display: none; } diff --git a/src/examples/article/electric-power-consumption.js b/src/examples/article/electric-power-consumption.js index 73390afc..b898096e 100644 --- a/src/examples/article/electric-power-consumption.js +++ b/src/examples/article/electric-power-consumption.js @@ -19,16 +19,16 @@ const yAsia= xValues.map(year => asiaData[year]) const chartData = { xValues: xValues, - yValues: [yAsia, yUSA, yEurope], - xAxis: { title: 'Years' }, + yValues: [yUSA, yEurope, yAsia], + xAxis: { title: 'Year' }, yAxis: { title: 'Consumption' }, markerTooltips: { tooltips: (_, { xValue, yValue }) => `Year: ${xValue}
Pow. Consumption: ${yValue}kWh` }, legend: { title: 'Legend', - keys: ['East Asia', 'USA', 'Europe'], - labels: ['East Asia', 'USA', 'Europe'], + keys: ['USA', 'Europe', 'East Asia'], + labels: ['USA', 'Europe', 'East Asia'], } } @@ -40,9 +40,9 @@ const chart = select('#electric-power-consumption') .call(chartWindowLineAutoResize) .on('resize', () => { - const mediumWidth = window.matchMedia('(min-width: 25em)').matches && window.matchMedia('(min-width: 25em)').matches; - const largeWidth = window.matchMedia('(min-width: 43.5em)').matches; - const minWidth = window.matchMedia('(max-width: 25em)').matches; + const mediumWidth = window.matchMedia('(min-width: 25rem)').matches && window.matchMedia('(min-width: 25rem)').matches; + const largeWidth = window.matchMedia('(min-width: 43.5rem)').matches; + const minWidth = window.matchMedia('(max-width: 25rem)').matches; chartData.title = chooseTitle() @@ -57,14 +57,14 @@ const chooseTitle = () => { const smallTitle = 'Pow. Cons.' const middleTitle = 'Power Consumption (kWh)' const largeTitle = 'Electric power consumption (kWh per capita)' - if (window.matchMedia('(max-width: 27.5em)').matches || - window.matchMedia('(min-width: 68.75em)').matches) return smallTitle - // if (window.matchMedia('(min-width: 600px)').matches) return largeTitle + if (window.matchMedia('(max-width: 27.5rem)').matches || + window.matchMedia('(min-width: 77rem)').matches) return smallTitle return middleTitle } const chooseXTickFormat = () => { - if (window.matchMedia('(min-width: 550px)').matches && - window.matchMedia('(max-width: 700px)').matches) return (v) => v - return (v) => `'${v.slice(-2)}` + const firstChange = window.matchMedia('(max-width: 56.25rem)').matches && window.matchMedia('(min-width: 52rem)').matches + const secondChange = window.matchMedia('(max-width: 30rem)').matches + if (firstChange || secondChange) return (v) => `'${v.slice(-2)}` + return (v) => v } diff --git a/src/examples/article/electric-power-consumption.scss b/src/examples/article/electric-power-consumption.scss index 52e37ca5..494dd78c 100644 --- a/src/examples/article/electric-power-consumption.scss +++ b/src/examples/article/electric-power-consumption.scss @@ -30,7 +30,7 @@ } } -@media (min-width: 25em) { +@media (min-width: 25rem) { #electric-power-consumption { .point, .axis-x .tick, .axis-y .tick { display: none; @@ -41,7 +41,7 @@ } } -@media (max-width: 25em) { +@media (max-width: 25rem) { #electric-power-consumption { .point, .axis { display: none; diff --git a/src/examples/article/market-shares-chart.js b/src/examples/article/market-shares-chart.js index 8fa1377a..1940092a 100644 --- a/src/examples/article/market-shares-chart.js +++ b/src/examples/article/market-shares-chart.js @@ -41,9 +41,9 @@ const chartWindow = d3 .call(chartWindowBarStackedAutoFilterCategories(data)) .call(chartWindowBarStackedAutoFilterSubcategories(data)) .on('resize', function (e, d) { - const hasSmallTitle = window.matchMedia('(max-width: 27.5em)').matches - const mediumWidth = window.matchMedia('(min-width: 40em)').matches; - const largeWidth = window.matchMedia('(min-width: 60em)').matches; + const hasSmallTitle = window.matchMedia('(max-width: 27.5rem)').matches + const mediumWidth = window.matchMedia('(min-width: 40rem)').matches; + const largeWidth = window.matchMedia('(min-width: 60rem)').matches; data.flipped = chooseDataFlipped() data.legend.title = mediumWidth ? 'Platforms' : '' @@ -55,8 +55,9 @@ const chartWindow = d3 }); const chooseDataFlipped = () => { - // if (window.matchMedia('(min-width: 25em)').matches && - // window.matchMedia('(max-width: 37.5em)').matches) return true - if (window.matchMedia('(max-width: 31.25em)').matches ) return true + // if (window.matchMedia('(min-width: 25rem)').matches && + // window.matchMedia('(max-width: 37.5rem)').matches) return true + const firstChange = window.matchMedia('(min-width: 77rrem)').matches + if (firstChange || window.matchMedia('(max-width: 31.25rem)').matches ) return true return false } diff --git a/src/examples/article/market-shares.css b/src/examples/article/market-shares.css index 724345b3..ded9960a 100644 --- a/src/examples/article/market-shares.css +++ b/src/examples/article/market-shares.css @@ -10,7 +10,7 @@ display: none; } } -@media (max-width: 25em) { +@media (max-width: 25rem) { #market-shares-chart .point, #market-shares-chart .axis { display: none; } diff --git a/src/examples/article/market-shares.scss b/src/examples/article/market-shares.scss index 84680b5c..323cba6e 100644 --- a/src/examples/article/market-shares.scss +++ b/src/examples/article/market-shares.scss @@ -18,7 +18,7 @@ } } - @media (max-width: 25em) { + @media (max-width: 25rem) { .point, .axis { display: none; } diff --git a/src/examples/article/styles.css b/src/examples/article/styles.css index 487876fe..bf3605c0 100644 --- a/src/examples/article/styles.css +++ b/src/examples/article/styles.css @@ -18,21 +18,16 @@ h1 { } .grid-article { - display: flex; - flex-wrap: wrap; - max-width: 1400px; + display: grid; + grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); + max-width: 87.5rem; margin: 0 auto; } -.col-1, .col-2, .col-3 { - width: 100%; - flex-grow: 1; -} - .article { padding: 1rem; - border-right: 1px solid #DADCE0; - border-bottom: 1px solid #DADCE0; + border-right: 0.063rem solid #DADCE0; + border-bottom: 0.063rem solid #DADCE0; } @media (min-width: 700px) { diff --git a/src/examples/article/styles.css.map b/src/examples/article/styles.css.map index f7fe9ba1..6fc51ef3 100644 --- a/src/examples/article/styles.css.map +++ b/src/examples/article/styles.css.map @@ -1 +1 @@ -{"version":3,"sourceRoot":"","sources":["styles.scss"],"names":[],"mappings":"AAAA;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;EAEA;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;IAAS;;EACT;IAAS;;EACT;IAAS;;;AAGX;EACE;IAAS;;EACT;IAAS;;EACT;IAAS;;;AAGX;EACE","file":"styles.css"} \ No newline at end of file +{"version":3,"sourceRoot":"","sources":["styles.scss"],"names":[],"mappings":"AAAA;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;EAEA;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;IAAS;;EACT;IAAS;;EACT;IAAS;;;AAGX;EACE;IAAS;;EACT;IAAS;;EACT;IAAS;;;AAGX;EACE","file":"styles.css"} \ No newline at end of file diff --git a/src/examples/article/styles.scss b/src/examples/article/styles.scss index 81d2daac..d097857d 100644 --- a/src/examples/article/styles.scss +++ b/src/examples/article/styles.scss @@ -19,21 +19,16 @@ h1 { } .grid-article { - display: flex; - flex-wrap: wrap; - max-width: 1400px; + display: grid; + grid-template-columns: repeat( auto-fit, minmax(400px, 1fr)); + max-width: 87.5rem; margin: 0 auto; } -.col-1, .col-2, .col-3 { - width: 100%; - flex-grow: 1; -} - .article { padding: 1rem; - border-right: 1px solid #DADCE0; - border-bottom: 1px solid #DADCE0; + border-right: 0.063rem solid #DADCE0; + border-bottom: 0.063rem solid #DADCE0; } @media (min-width: 700px) {