This is an automated email from the ASF dual-hosted git repository. Abacn pushed a commit to branch website-fix in repository https://gitbox.apache.org/repos/asf/beam.git
commit 9deaa5d0ded24e5fece056e224f0bb44dc083081 Author: Yi Hu <[email protected]> AuthorDate: Fri Aug 7 11:33:18 2026 -0400 Fix runner compatibility matrix --- .../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>
