This is an automated email from the ASF dual-hosted git repository.
Abacn pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/beam.git
The following commit(s) were added to refs/heads/master by this push:
new 1318bfe2039 Fix runner compatibility matrix (#39682)
1318bfe2039 is described below
commit 1318bfe2039aa3d5b421bf1f23f9fcc338916750
Author: Yi Hu <[email protected]>
AuthorDate: Fri Aug 7 15:58:25 2026 -0400
Fix runner compatibility matrix (#39682)
---
.../www/site/assets/scss/_capability-matrix.scss | 123 ++++++---------------
.../www/site/assets/scss/capability-matrix.scss | 121 ++++++--------------
.../documentation/capability-matrix-big.html | 36 ++----
.../documentation/capability-matrix-single.html | 37 ++-----
4 files changed, 88 insertions(+), 229 deletions(-)
diff --git a/website/www/site/assets/scss/_capability-matrix.scss
b/website/www/site/assets/scss/_capability-matrix.scss
index a3b59a84441..b55f2ac9143 100644
--- a/website/www/site/assets/scss/_capability-matrix.scss
+++ b/website/www/site/assets/scss/_capability-matrix.scss
@@ -128,61 +128,13 @@
}
}
.table-container {
- display: -webkit-box;
display: flex;
- -webkit-box-orient: horizontal;
- -webkit-box-direction: normal;
flex-direction: row;
margin-bottom: 32px;
+ width: 100%;
table {
margin: 0;
}
- .big-right {
- max-width: 1240px;
- }
- .table-right {
- overflow-x: scroll;
- padding: 1px;
- scrollbar-width: none;
- &::-webkit-scrollbar {
- width: 0;
- background: 0 0;
- }
- }
- .table-headers {
- overflow-x: scroll;
- border-spacing: 0;
- border: solid 1px #d8d8d8;
- border-bottom: none;
- mix-blend-mode: multiply;
- -ms-overflow-style: none;
- scrollbar-width: none;
- scroll-behavior: auto;
- &::-webkit-scrollbar {
- width: 0;
- background: 0 0;
- }
- table {
- height: 48px;
- table-layout: fixed;
- width: 710px;
- th {
- text-align: center;
- width: 142px;
- font-size: 12px;
- font-weight: 500;
- line-height: normal;
- letter-spacing: normal;
- padding-left: 10px;
- @media(max-width: $mobile) {
- width: 73px;
- }
- }
- }
- }
- .big-headers table th {
- width: 249px;
- }
.table-center {
overflow-x: scroll;
border-spacing: 0;
@@ -192,6 +144,7 @@
padding-bottom: 8px;
scrollbar-color: #ff6d00;
scroll-behavior: auto;
+ width: 100%;
&::-webkit-scrollbar {
height: 8px;
width: 25px !important;
@@ -209,9 +162,17 @@
transform: rotateX(180deg);
border-collapse: separate;
table-layout: fixed;
- width: 710px;
+ width: max-content;
+ thead tr th {
+ text-align: center;
+ vertical-align: middle;
+ padding: 6px;
+ background-color: #fff;
+ border: 1px solid #d8d8d8;
+ }
th, td {
width: 142px;
+ min-width: 142px;
height: 48px;
font-size: 12px;
font-weight: 500;
@@ -220,17 +181,37 @@
border: 1px solid #fff;
@media(max-width:640px) {
width: 73px;
+ min-width: 73px;
}
}
+ th.table-left-header {
+ position: sticky;
+ left: 0;
+ z-index: 2;
+ background-color: #fff;
+ border: solid 1px #f6f6f6;
+ border-right: 1px solid #d8d8d8;
+ padding: 6px;
+ text-align: start;
+ }
+ thead tr th.table-left-header {
+ z-index: 3;
+ border: none;
+ border-right: 1px solid #d8d8d8;
+ }
}
}
.big-center {
table {
+ th, td {
+ width: 249px;
+ min-width: 249px;
+ }
tr {
vertical-align: baseline;
- th,td {
- width: 249px;
- height: 352px;
+ th, td {
+ height: auto;
+ min-height: 352px;
padding: 6px;
font-weight: 400;
p {
@@ -242,41 +223,9 @@
}
}
}
- }
- }
- .table-left table {
- width: 142px;
- @media(max-width:640px) {
- width: 73px;
- }
- tr:first-child th {
- height: 83px;
- border: none;
- @media(max-width: $mobile) {
- height: 119px;
+ th.table-left-header {
+ text-align: start;
}
- @-moz-document url-prefix() {
- height: 77px;
- }
- }
- th {
- height: 48px;
- font-size: 12px;
- font-weight: 500;
- line-height: normal;
- letter-spacing: normal;
- border: solid 1px #f6f6f6;
- border-right: none;
- padding: 6px;
- }
- }
- .big-left table {
- text-align: start;
- tr {
- vertical-align: baseline;
- }
- th {
- height: 352px;
}
}
}
diff --git a/website/www/site/assets/scss/capability-matrix.scss
b/website/www/site/assets/scss/capability-matrix.scss
index d5e5fc348aa..005b1729f82 100644
--- a/website/www/site/assets/scss/capability-matrix.scss
+++ b/website/www/site/assets/scss/capability-matrix.scss
@@ -128,60 +128,13 @@
}
}
.table-container {
- display: -webkit-box;
display: flex;
- -webkit-box-orient: horizontal;
- -webkit-box-direction: normal;
flex-direction: row;
margin-bottom: 32px;
+ width: 100%;
table {
margin: 0;
}
- .big-right {
- max-width: 1240px;
- }
- .table-right {
- overflow-x: scroll;
- padding: 1px;
- scrollbar-width: none;
- &::-webkit-scrollbar {
- width: 0;
- background: 0 0;
- }
- }
- .table-headers {
- overflow-x: scroll;
- border-spacing: 0;
- border: solid 1px #d8d8d8;
- border-bottom: none;
- mix-blend-mode: multiply;
- -ms-overflow-style: none;
- scrollbar-width: none;
- &::-webkit-scrollbar {
- width: 0;
- background: 0 0;
- }
- table {
- height: 48px;
- table-layout: fixed;
- width: 710px;
- th {
- text-align: center;
- width: 142px;
- font-size: 12px;
- font-weight: 500;
- line-height: normal;
- letter-spacing: normal;
- padding-left: 10px;
- @media (max-width: $mobile) {
- width: 73px;
- }
- }
- }
- }
- .big-headers table th {
- width: 249px;
- }
.table-center {
overflow-x: scroll;
border-spacing: 0;
@@ -190,6 +143,7 @@
transform: rotateX(180deg);
padding-bottom: 8px;
scrollbar-color: #ff6d00;
+ width: 100%;
&::-webkit-scrollbar {
height: 8px;
width: 25px !important;
@@ -207,10 +161,18 @@
transform: rotateX(180deg);
border-collapse: separate;
table-layout: fixed;
- width: 710px;
+ width: max-content;
+ thead tr th {
+ text-align: center;
+ vertical-align: middle;
+ padding: 6px;
+ background-color: #fff;
+ border: 1px solid #d8d8d8;
+ }
th,
td {
width: 142px;
+ min-width: 142px;
height: 48px;
font-size: 12px;
font-weight: 500;
@@ -219,18 +181,39 @@
border: 1px solid #fff;
@media (max-width: 640px) {
width: 73px;
+ min-width: 73px;
}
}
+ th.table-left-header {
+ position: sticky;
+ left: 0;
+ z-index: 2;
+ background-color: #fff;
+ border: solid 1px #f6f6f6;
+ border-right: 1px solid #d8d8d8;
+ padding: 6px;
+ text-align: start;
+ }
+ thead tr th.table-left-header {
+ z-index: 3;
+ border: none;
+ border-right: 1px solid #d8d8d8;
+ }
}
}
.big-center {
table {
+ th,
+ td {
+ width: 249px;
+ min-width: 249px;
+ }
tr {
vertical-align: baseline;
th,
td {
- width: 249px;
- height: 352px;
+ height: auto;
+ min-height: 352px;
padding: 6px;
font-weight: 400;
p {
@@ -242,41 +225,9 @@
}
}
}
- }
- }
- .table-left table {
- width: 142px;
- @media (max-width: 640px) {
- width: 73px;
- }
- tr:first-child th {
- height: 83px;
- border: none;
- @media (max-width: $mobile) {
- height: 119px;
+ th.table-left-header {
+ text-align: start;
}
- @-moz-document url-prefix() {
- height: 77px;
- }
- }
- th {
- height: 48px;
- font-size: 12px;
- font-weight: 500;
- line-height: normal;
- letter-spacing: normal;
- border: solid 1px #f6f6f6;
- border-right: none;
- padding: 6px;
- }
- }
- .big-left table {
- text-align: start;
- tr {
- vertical-align: baseline;
- }
- th {
- height: 352px;
}
}
}
diff --git
a/website/www/site/layouts/shortcodes/documentation/capability-matrix-big.html
b/website/www/site/layouts/shortcodes/documentation/capability-matrix-big.html
index 95166f0e04d..e42caddb7a7 100644
---
a/website/www/site/layouts/shortcodes/documentation/capability-matrix-big.html
+++
b/website/www/site/layouts/shortcodes/documentation/capability-matrix-big.html
@@ -24,32 +24,20 @@
</a>
<h4>{{ $category.description }}</h4>
<div class="table-container">
- <div class="table-left big-left">
+ <div id="{{ $category.description | urlize }}" class="table-center
big-center">
<table>
- <tr>
- <th></th>
- </tr>
- {{ range $row := $category.rows }}
- <tr>
- <th>{{ $row.name }}</th>
- </tr>
- {{ end }}
- </table>
- </div>
- <div class="table-right big-right">
- <div id="{{ $category.description | urlize }}"
class="table-headers big-headers">
- <table>
+ <thead>
<tr>
+ <th class="table-left-header"></th>
{{ range $column := $cap_data.columns }}
<th>{{ $column.name }}</th>
{{ end }}
</tr>
- </table>
- </div>
- <div id="{{ $category.description | urlize }}"
class="table-center big-center">
- <table>
+ </thead>
+ <tbody>
{{ range $row := $category.rows }}
<tr>
+ <th class="table-left-header">{{ $row.name
}}</th>
{{ range $val := $row.values }}
<td style='background-color:#{{ if eq
$val.l1 "Yes" }}{{ index $category "color-y" }}{{ else if eq $val.l1
"Partially" }}{{ index $category "color-p" }}{{ else }}{{ index $category
"color-n" }}{{ end }};border-color:#{{ if eq $val.l1 "Yes" }}{{ index $category
"color-yb" }}{{ else if eq $val.l1 "Partially" }}{{ index $category "color-pb"
}}{{ else }}{{ index $category "color-nb" }}{{ end }}'>
{{ partial
"documentation/capability-matrix-row" (dict "type" $cap_view "val" $val) }}
@@ -57,18 +45,10 @@
{{ end }}
</tr>
{{ end }}
- </table>
- </div>
+ </tbody>
+ </table>
</div>
</div>
{{ end }}
{{ end }}
-<script>
- $('.table-headers').bind('wheel',function(e){
- $('#'+this.id+'.table-center').scrollLeft($(this).scrollLeft());
- });
- $('.table-center').bind('wheel',function(e){
- $('#'+this.id+'.table-headers').scrollLeft($(this).scrollLeft());
- });
-</script>
diff --git
a/website/www/site/layouts/shortcodes/documentation/capability-matrix-single.html
b/website/www/site/layouts/shortcodes/documentation/capability-matrix-single.html
index da436257fe7..8c63b5c49bd 100644
---
a/website/www/site/layouts/shortcodes/documentation/capability-matrix-single.html
+++
b/website/www/site/layouts/shortcodes/documentation/capability-matrix-single.html
@@ -55,32 +55,20 @@
{{ range $category := $cap_data.categories }}
<h4>{{ $category.description }}</h4>
<div class="table-container">
- <div class="table-left">
+ <div id="{{ $category.description | urlize }}" class="table-center">
<table>
- <tr>
- <th></th>
- </tr>
- {{ range $row := $category.rows }}
- <tr>
- <th>{{ $row.name }}</th>
- </tr>
- {{ end }}
- </table>
- </div>
- <div class="table-right">
- <div id="{{ $category.description | urlize }}"
class="table-headers">
- <table>
+ <thead>
<tr>
+ <th class="table-left-header"></th>
{{ range $column := $cap_data.columns }}
<th>{{ $column.name }}</th>
{{ end }}
</tr>
- </table>
- </div>
- <div id="{{ $category.description | urlize }}"
class="table-center">
- <table>
+ </thead>
+ <tbody>
{{ range $row := $category.rows }}
<tr>
+ <th class="table-left-header">{{ $row.name }}</th>
{{ range $val := $row.values }}
<td style='background-color:#{{ if eq $val.l1
"Yes" }}{{ index $category "color-y" }}{{ else if eq $val.l1 "Partially" }}{{
index $category "color-p" }}{{ else }}{{ index $category "color-n" }}{{ end
}};border-color:#{{ if eq $val.l1 "Yes" }}{{ index $category "color-yb" }}{{
else if eq $val.l1 "Partially" }}{{ index $category "color-pb" }}{{ else }}{{
index $category "color-nb" }}{{ end }}'>
{{ partial
"documentation/capability-matrix-row" (dict "type" $cap_view "val" $val) }}
@@ -88,19 +76,10 @@
{{ end }}
</tr>
{{ end }}
- </table>
- </div>
+ </tbody>
+ </table>
</div>
</div>
<a id="table-link" href="/documentation/runners/capability-matrix/{{
$category.description | urlize }}/">{{ T "capability-go-big" }}</a>
{{ end }}
-<script>
- $('.table-headers').scroll(function(e){
- $('#'+this.id+'.table-center').scrollLeft($(this).scrollLeft());
- });
- $('.table-center').scroll(function(e){
- $('#'+this.id+'.table-headers').scrollLeft($(this).scrollLeft());
- });
-
-</script>
