From 97935c242fdb23f902936c24931be0c41688f36c Mon Sep 17 00:00:00 2001
From: Marvin Beckers <mail@embik.me>
Date: Wed, 13 Sep 2023 17:39:11 +0200
Subject: [PATCH 1/4] Wrap table in table-responsive div

Signed-off-by: Marvin Beckers <mail@embik.me>
---
 templates/index.html | 142 ++++++++++++++++++++++---------------------
 1 file changed, 72 insertions(+), 70 deletions(-)

diff --git a/templates/index.html b/templates/index.html
index 32b8cba..4c7c6e7 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -36,81 +36,83 @@
 
   <!-- the main page container -->
   <main class="site-container">
-    <table class="table non-roi-mode hide-archive container-xxl" id="release-megatable">
-      <thead>
-        <tr>
-          <th class="all-togglers">
-            <div class="btn-group" role="group">
-              <button type="button" class="btn btn-sm btn-outline-primary" id="expand-all">⊕ Expand all</button>
-              <button type="button" class="btn btn-sm btn-outline-secondary" id="collapse-all">⊙ Collapse all</button>
-            </div>
-          </th>
-          {{ range $idx, $rel := .Timeline.Releases }}
-          <th
-            class="{{ getReleaseHeaderClass $.Timeline $rel }}"
-            data-release="{{ $rel.Version }}"
-            data-released="{{ $rel.Released }}"
-            data-latest-version="{{ $rel.LatestVersion }}"
-            data-release-date="{{ $rel.ReleaseDate.Format "2006-01-02" }}"
-            data-eol-date="{{ with $rel.EndOfLifeDate }}{{ .Format "2006-01-02" }}{{ end }}"
-          >
-            <a tabindex="{{ $idx }}" role="button" data-bs-toggle="popover" data-release="{{ $rel.Version }}">{{ $rel.Version }}</a>
-          </th>
-          {{ end }}
-        </tr>
-      </thead>
+    <div class="table-responsive">
+      <table class="table non-roi-mode hide-archive container-xxl" id="release-megatable">
+        <thead>
+          <tr>
+            <th class="all-togglers">
+              <div class="btn-group" role="group">
+                <button type="button" class="btn btn-sm btn-outline-primary" id="expand-all">⊕ Expand all</button>
+                <button type="button" class="btn btn-sm btn-outline-secondary" id="collapse-all">⊙ Collapse all</button>
+              </div>
+            </th>
+            {{ range $idx, $rel := .Timeline.Releases }}
+            <th
+              class="{{ getReleaseHeaderClass $.Timeline $rel }}"
+              data-release="{{ $rel.Version }}"
+              data-released="{{ $rel.Released }}"
+              data-latest-version="{{ $rel.LatestVersion }}"
+              data-release-date="{{ $rel.ReleaseDate.Format "2006-01-02" }}"
+              data-eol-date="{{ with $rel.EndOfLifeDate }}{{ .Format "2006-01-02" }}{{ end }}"
+            >
+              <a tabindex="{{ $idx }}" role="button" data-bs-toggle="popover" data-release="{{ $rel.Version }}">{{ $rel.Version }}</a>
+            </th>
+            {{ end }}
+          </tr>
+        </thead>
 
-      {{ range $apiGroup := .Timeline.APIGroups }}
-      <tbody data-apigroup="{{ $apiGroup.Name }}" class="{{ getAPIGroupBodyClass $.Timeline $apiGroup }}">
-        <!-- row for the API group -->
-        <tr class="{{ getAPIGroupClass $.Timeline $apiGroup }}">
-          <th class="name">
-            <a href="#" class="toggle" title="expand/collapse this API group"><span class="icons hidden">⊕</span> <span class="name">{{ $apiGroup.Name }}</span></a>
-          </th>
-          {{ range $rel := $.Timeline.Releases }}
-          <td class="{{ getAPIGroupReleaseClass $.Timeline $apiGroup $rel }}">
-            <span class="badge text-bg">{{ $apiGroup.PreferredVersion $rel.Version }}</span>
-          </td>
-          {{ end }}
-        </tr>
+        {{ range $apiGroup := .Timeline.APIGroups }}
+        <tbody data-apigroup="{{ $apiGroup.Name }}" class="{{ getAPIGroupBodyClass $.Timeline $apiGroup }}">
+          <!-- row for the API group -->
+          <tr class="{{ getAPIGroupClass $.Timeline $apiGroup }}">
+            <th class="name">
+              <a href="#" class="toggle" title="expand/collapse this API group"><span class="icons hidden">⊕</span> <span class="name">{{ $apiGroup.Name }}</span></a>
+            </th>
+            {{ range $rel := $.Timeline.Releases }}
+            <td class="{{ getAPIGroupReleaseClass $.Timeline $apiGroup $rel }}">
+              <span class="badge text-bg">{{ $apiGroup.PreferredVersion $rel.Version }}</span>
+            </td>
+            {{ end }}
+          </tr>
 
-        {{ range $apiVersionIdx, $apiVersion := $apiGroup.APIVersions }}
-        <!-- row for the API version -->
-        <!-- TODO: collapsed should be applied via JS -->
-        <tr class="{{ getAPIVersionClass $.Timeline $apiGroup $apiVersion }} collapsed" data-apiversion="{{ $apiVersion.Version }}">
-          <th class="name">
-            <a href="#" class="toggle" title="expand/collapse this API version"><span class="icons">⊕</span> <span class="hidden">{{ $apiGroup.Name }}/</span><span class="name">{{ $apiVersion.Version }}</span></a>
-          </th>
-          {{ range $rel := $.Timeline.Releases }}
-          <td class="{{ getAPIVersionReleaseClass $.Timeline $apiGroup $apiVersion $rel }}">
-            <span class="badge text-bg">{{ getAPIVersionReleaseContent $.Timeline $apiGroup $apiVersion $rel }}</span>
-          </td>
-          {{ end }}
-        </tr>
+          {{ range $apiVersionIdx, $apiVersion := $apiGroup.APIVersions }}
+          <!-- row for the API version -->
+          <!-- TODO: collapsed should be applied via JS -->
+          <tr class="{{ getAPIVersionClass $.Timeline $apiGroup $apiVersion }} collapsed" data-apiversion="{{ $apiVersion.Version }}">
+            <th class="name">
+              <a href="#" class="toggle" title="expand/collapse this API version"><span class="icons">⊕</span> <span class="hidden">{{ $apiGroup.Name }}/</span><span class="name">{{ $apiVersion.Version }}</span></a>
+            </th>
+            {{ range $rel := $.Timeline.Releases }}
+            <td class="{{ getAPIVersionReleaseClass $.Timeline $apiGroup $apiVersion $rel }}">
+              <span class="badge text-bg">{{ getAPIVersionReleaseContent $.Timeline $apiGroup $apiVersion $rel }}</span>
+            </td>
+            {{ end }}
+          </tr>
 
-        {{ range $apiResource := $apiVersion.Resources }}
-        <!-- row for an API resource -->
-        <tr class="{{ getAPIResourceClass $.Timeline $apiGroup $apiVersion $apiResource }}" data-apiversion="{{ $apiVersion.Version }}" data-apiresource="{{ $apiResource.Plural }}">
-          <th class="name">
-            <span title="{{ $apiResource.Description }}">{{ $apiResource.Kind }}</span>
-            <span class="icons"><small><a href="{{ getResourceDocumentationLink $.Timeline $apiGroup $apiVersion $apiResource }}" class="docs" title="view documentation for most recent Kubernetes release" target="_blank"><i class="fa-solid fa-book"></i></a></small></span>
-          </th>
-          {{ range $rel := $.Timeline.Releases }}
-          <td class="{{ getAPIResourceReleaseClass $.Timeline $apiGroup $apiVersion $apiResource $rel }}">
-            <span class="badge text-bg">{{ getAPIResourceReleaseContent $.Timeline $apiGroup $apiVersion $apiResource $rel }}</span>
-          </td>
+          {{ range $apiResource := $apiVersion.Resources }}
+          <!-- row for an API resource -->
+          <tr class="{{ getAPIResourceClass $.Timeline $apiGroup $apiVersion $apiResource }}" data-apiversion="{{ $apiVersion.Version }}" data-apiresource="{{ $apiResource.Plural }}">
+            <th class="name">
+              <span title="{{ $apiResource.Description }}">{{ $apiResource.Kind }}</span>
+              <span class="icons"><small><a href="{{ getResourceDocumentationLink $.Timeline $apiGroup $apiVersion $apiResource }}" class="docs" title="view documentation for most recent Kubernetes release" target="_blank"><i class="fa-solid fa-book"></i></a></small></span>
+            </th>
+            {{ range $rel := $.Timeline.Releases }}
+            <td class="{{ getAPIResourceReleaseClass $.Timeline $apiGroup $apiVersion $apiResource $rel }}">
+              <span class="badge text-bg">{{ getAPIResourceReleaseContent $.Timeline $apiGroup $apiVersion $apiResource $rel }}</span>
+            </td>
+            {{ end }}
+          </tr>
           {{ end }}
-        </tr>
-        {{ end }}
+          {{ end }}
+        </tbody>
         {{ end }}
-      </tbody>
-      {{ end }}
-      <tfoot>
-        <tr class="no-notable-changes">
-          <td colspan="{{ add 1 (len .Timeline.Releases) }}" class="infotext">There are no notable API changes in this release.<br><i class="fa-solid fa-face-smile-beam"></i></td>
-        </tr>
-      </tfoot>
-    </table>
+        <tfoot>
+          <tr class="no-notable-changes">
+            <td colspan="{{ add 1 (len .Timeline.Releases) }}" class="infotext">There are no notable API changes in this release.<br><i class="fa-solid fa-face-smile-beam"></i></td>
+          </tr>
+        </tfoot>
+      </table>
+    </div>
   </main> <!-- main content done -->
 
   <div class="hidden">

From 00c03c61cfa2fe929679e996654f4706e442b0d1 Mon Sep 17 00:00:00 2001
From: Marvin Beckers <mail@embik.me>
Date: Wed, 13 Sep 2023 18:16:42 +0200
Subject: [PATCH 2/4] Make version table header cells disappear behind buttons

Signed-off-by: Marvin Beckers <mail@embik.me>
---
 templates/index.html | 1 +
 1 file changed, 1 insertion(+)

diff --git a/templates/index.html b/templates/index.html
index 4c7c6e7..00233cd 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -54,6 +54,7 @@
               data-latest-version="{{ $rel.LatestVersion }}"
               data-release-date="{{ $rel.ReleaseDate.Format "2006-01-02" }}"
               data-eol-date="{{ with $rel.EndOfLifeDate }}{{ .Format "2006-01-02" }}{{ end }}"
+              style="z-index:0;"
             >
               <a tabindex="{{ $idx }}" role="button" data-bs-toggle="popover" data-release="{{ $rel.Version }}">{{ $rel.Version }}</a>
             </th>

From 47cfb1c07baf72fe2fce912d8032e13388dc5255 Mon Sep 17 00:00:00 2001
From: Marvin Beckers <mail@embik.me>
Date: Wed, 13 Sep 2023 18:25:10 +0200
Subject: [PATCH 3/4] Limit responsive table on md breakpoint

Signed-off-by: Marvin Beckers <mail@embik.me>
---
 templates/index.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/templates/index.html b/templates/index.html
index 00233cd..830a9e1 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -36,7 +36,7 @@
 
   <!-- the main page container -->
   <main class="site-container">
-    <div class="table-responsive">
+    <div class="table-responsive-md">
       <table class="table non-roi-mode hide-archive container-xxl" id="release-megatable">
         <thead>
           <tr>

From 7570353ab06f9ca16c16ed9128ac185effd3c2c0 Mon Sep 17 00:00:00 2001
From: Marvin Beckers <mail@embik.me>
Date: Wed, 13 Sep 2023 18:36:48 +0200
Subject: [PATCH 4/4] Bump up .all-togglers z-index instead of lowering the the
 other header cells' one

Signed-off-by: Marvin Beckers <mail@embik.me>
---
 templates/index.html | 1 -
 templates/site.css   | 5 +++++
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/templates/index.html b/templates/index.html
index 830a9e1..bcac5f3 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -54,7 +54,6 @@
               data-latest-version="{{ $rel.LatestVersion }}"
               data-release-date="{{ $rel.ReleaseDate.Format "2006-01-02" }}"
               data-eol-date="{{ with $rel.EndOfLifeDate }}{{ .Format "2006-01-02" }}{{ end }}"
-              style="z-index:0;"
             >
               <a tabindex="{{ $idx }}" role="button" data-bs-toggle="popover" data-release="{{ $rel.Version }}">{{ $rel.Version }}</a>
             </th>
diff --git a/templates/site.css b/templates/site.css
index 8930926..6295181 100644
--- a/templates/site.css
+++ b/templates/site.css
@@ -184,6 +184,11 @@ a.toggle .name {
   padding: .2rem .2rem;
 }
 
+/* make sure the togglers always show when scrolling the table */
+.all-togglers {
+    z-index: 2 !important;
+}
+
 /* fix missing table borders in Firefox */
 /* thanks to https://stackoverflow.com/a/58319944 */
 .table tbody th {