wip

assets/main.scss

@@ -46,6 +46,9 @@ $maxwidthwide: 1400px;
 $contentwidth: 80%;
 $contentwidthwide: 92%;
 
+$enable-grid-classes: false;
+$enable-cssgrid: true;
+
 @font-face {
     font-family: "Inter";
     src: url("fonts/Inter/Inter-VariableFont_slnt,wght.ttf");
@@ -910,6 +913,48 @@ body {
     // TODO: I think this shouldn't be neccesary
     border-top: 0px;
 }
+/**
+  *
+  * Define toggled state
+  * @ change the appropriate row's height on the parent grid to 0 via `grid-template-rows`
+  * @ change the element to hide's visibility to 'hidden'
+  *
+**/
+
+.ecosystem-grid {
+    grid-auto-rows: var(--rowHeight);
+    display: grid;
+    // grid-template-columns: 1fr 1fr 1fr 1fr;
+    // grid-auto-rows: var(--rowHeight);
+    grid-auto-rows: 1fr;
+    /* Or use grid-template-rows if row heights will need to be varied / manually set */
+}
+.eco-table {
+    display: grid;
+    flex-wrap: wrap;
+    margin-bottom: 5rem;
+
+    grid-auto-flow: row;
+    // grid-template-columns: 1fr 1fr;
+    gap: 2rem;
+
+    @media (max-width: 50rem), (max-device-width: 40rem) {
+        grid-template-rows: 1fr;
+    }
+}
+.eco-table-entry {
+    // grid-column: span 4;
+    justify-content: flex-end;
+}
+
+.grid-hiderows {
+    grid-template-rows: var(--rowHeight) 0;
+}
+
+.grid-hiderows {
+    visibility: hidden;
+    backface-visibility: hidden !important;
+}
 
 // Specific to /tutorials
 

layouts/packages/list.html

@@ -58,24 +58,19 @@ <h2 id="ecosystem">Ecosystem</h2>
                       placeholder="Search through {{ len $pkgs }} packages"
                       title="Type in your search query"
                     />
-                    <table class="table" id="eco-table">
-                      <thead>
-                        <tr>
-                          <th scope="col">Package</th>
-                          <th scope="col">Description</th>
-                        </tr>
-                      </thead>
-                      <tbody>
-                        {{ range $lib := $pkgs }}
-                          <tr class="package-links eco-table-row">
-                            <td>
-                              <a href="{{ $lib.package_home }}" target="_blank">{{ $lib.name }}</a>
-                            </td>
-                            <td>{{ $lib.description | markdownify }}</td>
-                          </tr>
-                        {{ end }}
-                      </tbody>
-                    </table>
+                    <!-- <div class="grid ecosystem-grid"> -->
+                    <div class="row row-cols-1 eco-table">
+                      {{ range $lib := $pkgs }}
+                        <div class="card eco-table-entry">
+                          <div class="card-body">
+                            <h5 class="card-title">
+                              <a href="{{ $lib.package_home }}">{{ $lib.name }}</a>
+                            </h5>
+                            <p class="card-text">{{ $lib.description | markdownify }}</p>
+                          </div>
+                        </div>
+                      {{ end }}
+                    </div>
                   </div>
                 {{ end }}
               {{ end }}

static/main.js

@@ -1,13 +1,56 @@
 const filterPackages = () => {
-  const trs = document.querySelectorAll('.eco-table-row');
-  const filter = document.querySelector('#eco-filter').value;
-  const regex = new RegExp(filter, 'i');
-  const tdFound = td => regex.test(td.innerHTML);
-  const pkgFound = childrenArr => childrenArr.some(tdFound);
-  const toggleTrs = ({ style, children }) => {
-    style.display = pkgFound([
-      ...children
-    ]) ? '' : 'none' ;
+  trs = document.querySelectorAll('.eco-table-entry');
+  filter = document.querySelector('#eco-filter').value;
+  regex = new RegExp(filter, 'i');
+  function toggleTrs(tr) {
+    if (regex.test(tr.innerText)) {
+      tr.style.display = ""
+      // tr.classList.add("grid-hiderows")
+    } else {
+      tr.style.display = "none"
+      // tr.classList.remove("grid-hiderows")
+    }
   };
   trs.forEach(toggleTrs);
 }
+
+// trs = document.querySelectorAll('.eco-table-entry');
+// tr = trs[0]
+// regex = new RegExp("oracle", 'i');
+// function toggleTrs(tr) {
+//     console.log(regex.test(tr.innerText))
+//     if (regex.test(tr.innerText)) {
+//       tr.classList.add("grid-hiderows")
+//       console.log("hid")
+//     } else {
+//       tr.classList.remove("grid-hiderows")
+//       console.log("revealed")
+//     }
+// }
+// toggleTrs2 = (tr) => {
+//     console.log(regex.test(tr.innerText))
+//     // if (pkgFound([...tr.children])) {
+//     if (regex.test(tr.innerText)) {
+//       tr.classList.add("grid-hiderows")
+//     } else {
+//       tr.classList.remove("grid-hiderows")
+//     }
+//   };
+
+
+// const filterPackages = () => {
+//   const trs = document.querySelectorAll('.eco-table-entry');
+//   console.log(trs)
+//   const filter = document.querySelector('#eco-filter').value;
+//   const regex = new RegExp(filter, 'i');
+//   function pkgFound(childrenArr) { return childrenArr.some(td => regex.test(td.innerHTML)) };
+//   const toggleTrs = ({ style, children }) => {
+//     console.log(children.length)
+//     console.log(pkgFound([...children]))
+//     style.display = pkgFound([
+//       ...children
+//     ]) ? '' : 'none' ;
+//     console.log(style)
+//   };
+//   trs.forEach(toggleTrs);
+// }