Remove column container

Instead of using a flexbox column container, dynamically set each card element's row span on the grid. This change makes the tab order more logical and keeps the HTML simpler.

diff --git a/script.js b/script.js
index 813470abe347a8717f038c52f7877574cb5b8aa8..59437ded06947ddc72981d8f010c861853e8998a 100644 (file)
--- a/script.js
+++ b/script.js
@@ -3,15 +3,9 @@ if ('serviceWorker' in navigator) {
 }
 
 const main = document.getElementsByTagName('main')[0];
-const initialColumns = Math.max(1, Math.floor(main.clientWidth / 320) - 1);
+const halfRemHeight = parseFloat(getComputedStyle(document.documentElement).fontSize) / 2;
 
 /* Generic element builders */
-const createColumnElement = () => {
-  const el = document.createElement('div');
-  el.classList.add('column');
-  return el;
-};
-
 const createSkeletonElement = () => {
   const el = document.createElement('article');
   el.classList.add('card');
@@ -26,27 +20,28 @@ const createArticleElement = (article) => {
   return el;
 };
 
-/* Inject placeholder skeleton loaders */
-for (let i = 0; i < initialColumns; i++) {
-  const col = createColumnElement();
-  for (let j = 0; j < 12; j++) {
-    const a = createSkeletonElement();
-    col.insertAdjacentElement('beforeend', a);
+const setRowSpan = (card) => {
+  let contentHeight = 0;
+  for (let child of card.children) {
+    contentHeight += child.clientHeight;
   }
-  main.insertAdjacentElement('beforeend', col);
+  card.style.gridRowEnd = `span ${Math.ceil(contentHeight / halfRemHeight)}` // Fit the card's row span to the height of the card's content
+  console.log(contentHeight, Math.ceil(contentHeight / halfRemHeight));
 }
 
+/* Inject placeholder skeleton loaders */
+for (let i = 0; i < 12; i++) {
+  const a = createSkeletonElement();
+  main.insertAdjacentElement('beforeend', a);
+};
+
 /* Callback to inject content from API */
 const inject = (resp) => {
   main.innerHTML = '';
-  const chunkSize = Math.ceil(resp.length / initialColumns);
-  for (let i = 0; i < initialColumns; i++) {
-    const col = createColumnElement();
-    const chunk = resp.splice(0, chunkSize);
-    for (let a of chunk) {
-      col.insertAdjacentElement('beforeend', createArticleElement(a));
-    }
-    main.insertAdjacentElement('beforeend', col);
+  for (let a of resp) {
+    const card = createArticleElement(a);
+    main.insertAdjacentElement('beforeend', card); // Must insert the element first because contentHeight is dynamic on card width
+    setRowSpan(card);
   }
 };
 

diff --git a/style.css b/style.css
index 6bbbc437f2e4919368018683c96d4b14b4192746..2acb35458cb41d635318f37866695d19bf936458 100644 (file)
--- a/style.css
+++ b/style.css
@@ -51,17 +51,14 @@ kbd {
   max-width: 1440px;
 }
 
-.column {
-  display: flex;
-  flex-wrap: wrap;
-  align-content: flex-start;
-  width: 100%;
-}
-
 .card {
-  margin-block-end: 1rem;
-  padding: 0 1rem;
-  width: 100%;
+  grid-row-end: span 16; /* Will be updated to fit the content in each card by JavaScript */
+  box-sizing: border-box;
+  display: flex;
+  flex-flow: column;
+  justify-content: center;
+  gap: 1rem;
+  padding: 1rem;
   border: solid hsl(0deg 0% 55% / .1);
   border-radius: 1rem;
   box-shadow:
@@ -72,6 +69,10 @@ kbd {
     0.1px 16px 18px -2.5px hsl(0deg 0% 69% / 0.17);
 }
 
+.card > * {
+  margin: 0; /* Margins for children elements are already handled by gap in .card */
+}
+
 @keyframes shimmer {
   100% {
     background: hsl(0deg 0% 75%);
@@ -79,7 +80,6 @@ kbd {
 }
 
 .skeleton-line {
-  margin: 1rem;
   height: 1rem;
   animation: shimmer 1s alternate infinite;
   background: hsl(0deg 0% 50%);