#2 Replace Flexbox with Grid, Replace ems and px with rem in media qu…

…eries, Continue Adapting Article
tugraz-isds · Jan 18, 2023 · 755b244 · 755b244
1 parent 6ea1347
commit 755b244
Show file tree

Hide file tree

Showing 10 changed files with 150 additions and 123 deletions.
diff --git a/src/examples/article/article.html b/src/examples/article/article.html
@@ -12,85 +12,121 @@
   <body>
     <h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit!</h1>
     <div class="grid-article">
-      <div class="col-1">
-        <div class="article article-1">
-          <h2>Lorem ipsum dolor sit amet, consectetur adipiscing elit!</h2>
-          <div id="market-shares-chart" class="chart-container"></div>
-          <p>
-            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.
-          </p>
-        </div>
-        <div class="article article-4">
-          <h3>Lorem ipsum dolor sit amet, consectetur adipiscing elit!</h3>
-          <p>
-            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.
-          </p>
-        </div>
+      <div class="article" id="article-1">
+      <h2>Lorem ipsum dolor sit amet, consectetur adipiscing elit!</h2>
+      <div id="market-shares-chart" class="chart-container"></div>
+      <p>
+        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.
+      </p>
+    </div>
+      <div class="article" id="article-2">
+        <h3>Lorem ipsum dolor sit amet, consectetur adipiscing elit!</h3>
+        <p>
+          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.
+        </p>
+        <p>
+          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.
+        </p>
+        <p>
+          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.
+        </p>
+      </div>
+      <div class="article" id="article-3">
+        <h3>Lorem ipsum dolor sit amet, consectetur adipiscing elit!</h3>
+        <p>
+          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.
+        </p>
+        <h3>Lorem ipsum dolor sit amet, consectetur adipiscing elit!</h3>
+        <div id="electric-power-consumption" class="chart-container"></div>
+      </div>
+      <div class="article" id="article-4">
+        <h3>Lorem ipsum dolor sit amet, consectetur adipiscing elit!</h3>
+        <p>
+          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.
+        </p>
+        <p>
+          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.
+        </p>
+        <p>
+          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.
+        </p>
       </div>
-      <div class="col-2">
-        <div class="article article-2">
-          <h3>Lorem ipsum dolor sit amet, consectetur adipiscing elit!</h3>
-          <p>
-            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.
-          </p>
-          <h3>Lorem ipsum dolor sit amet, consectetur adipiscing elit!</h3>
-          <div id="electric-power-consumption" class="chart-container"></div>
-        </div>
-        <div class="article article-5">
-          <p>
-            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.
-          </p>
-        </div>
+      <div class="article" id="article-5">
+        <h3>Lorem ipsum dolor sit amet, consectetur adipiscing elit!</h3>
+        <div id="electric-power-consumption2" class="chart-container"></div>
+        <p>
+          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.
+        </p>
       </div>
-      <div class="col-3">
-        <div class="article article-3">
-          <h3>Lorem ipsum dolor sit amet, consectetur adipiscing elit!</h3>
-          <div id="electric-power-consumption2" class="chart-container"></div>
-          <p>
-            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.
-          </p>
-        </div>
-        <div class="article article-6">
-          <p>
-            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.
-          </p>
-        </div>
+      <div class="article" id="article-6">
+        <h3>Lorem ipsum dolor sit amet, consectetur adipiscing elit!</h3>
+        <p>
+          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.
+        </p>
+        <p>
+          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.
+        </p>
+        <p>
+          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.
+        </p>
       </div>
     </div>
 

diff --git a/src/examples/article/electric-power-consumption.css b/src/examples/article/electric-power-consumption.css
diff --git 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}<br/>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
@@ -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
@@ -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
diff --git 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
diff --git a/src/examples/article/styles.css.map b/src/examples/article/styles.css.map