Sticky table headers

author: David O'Regan <doregan@gitlab.com> 2021-09-01 06:37:19 +0300
committer: Suzanne Selhorn <sselhorn@gitlab.com> 2021-09-01 06:37:19 +0300
commit: 20b11fb8529e2818dfe3da04524d897f2c5507d4 (patch)
tree: 9d9a46e60d54ed858c5de9de1933fdef32e99f9e
parent: 638e2aa3b635cf635380cade1488f7f2716d2a70 (diff)
9 files changed, 32 insertions, 49 deletions
diff --git a/.tool-versions b/.tool-versions
index 7935f902..5780ed95 100644
--- a/.tool-versions
+++ b/.tool-versions
@@ -1,3 +1,3 @@
-ruby 2.7.4
-nodejs 14.17.5
-yarn 1.22.11
+ruby 2.7.2
+nodejs 14.17.2
+yarn 1.22.10
diff --git a/Rules b/Rules
index d6818725..c52823f8 100644
--- a/Rules
+++ b/Rules
@@ -95,7 +95,6 @@ compile '/**/*.md' do
     filter :admonition
     filter :icons
     filter :introduced_in
-    filter :table_sticky_headings
 
     if item[:layout].nil?
       layout '/default.*'
diff --git a/content/assets/javascripts/docs.js b/content/assets/javascripts/docs.js
index d68fc76b..b5d3d976 100644
--- a/content/assets/javascripts/docs.js
+++ b/content/assets/javascripts/docs.js
@@ -67,6 +67,5 @@ if (landingHeaderBar) {
         globalNav.style.top = '';
       }
     });
-
   });
 })();
diff --git a/content/assets/javascripts/tables.js b/content/assets/javascripts/tables.js
index 79ae616a..449d12f3 100644
--- a/content/assets/javascripts/tables.js
+++ b/content/assets/javascripts/tables.js
@@ -1,5 +1,5 @@
 ---
-version: 1
+version: 2
 ---
 
 (function() {
diff --git a/content/assets/stylesheets/_tables.scss b/content/assets/stylesheets/_tables.scss
index 0553ede9..a628bded 100644
--- a/content/assets/stylesheets/_tables.scss
+++ b/content/assets/stylesheets/_tables.scss
@@ -1,5 +1,5 @@
 ---
-version: 3
+version: 4
 ---
 
 @import 'variables';
@@ -9,23 +9,17 @@ version: 3
 table {
   margin-top: 1rem;
   font-weight: normal;
+  font-size: 0.875rem;
   letter-spacing: normal;
   margin-bottom: 1.5em;
   border-collapse: collapse;
   width: 100%;
+  position: relative;
+  table-layout: auto;
+  display: table;
+  line-height: 1.5;
   max-width: 100%;
-  overflow-x: auto;
-  display: block;
-
-  @include breakpoint(md) {
-    table-layout: auto;
-  }
-
-  @include breakpoint($max: $bp-md) {
-    display: block;
-    width: 100%;
-    overflow-x: auto;
-  }
+  overflow: auto;
 
   tr {
     border-top: 1px solid $gray-100;
@@ -45,16 +39,29 @@ table {
     padding: 1em;
   }
 
+  thead {
+    tr {
+      border-top: 0;
+    }
+  }
+
   th {
     background-color: $gray-50;
     color: $gray-900;
     line-height: 1.25;
     text-align: left;
+    position: sticky;
+    vertical-align: top;
+    z-index: 1;
+    top: 0;
+    box-shadow: 0 3px 0 0 var(--color-auto-gray-4);
+    padding: 12px 8px;
+    border: 0;
   }
 
   td {
     vertical-align: top;
-    min-width: 6rem;
+    max-width: 17rem;
 
     a {
       /* stylelint-disable declaration-no-important */
diff --git a/content/assets/stylesheets/stylesheet.scss b/content/assets/stylesheets/stylesheet.scss
index 75398ddf..ff7b650b 100644
--- a/content/assets/stylesheets/stylesheet.scss
+++ b/content/assets/stylesheets/stylesheet.scss
@@ -1,5 +1,5 @@
 ---
-version: 118
+version: 119
 ---
 
 @import 'variables';
@@ -79,7 +79,8 @@ ol {
   flex-direction: column;
   position: fixed;
   width: 50px;
-  height: calc(100% - 46px);
+  top: 0;
+  height: 100%;
   transition: all 0.3s;
   border-right: 1px solid $gds-gray-200;
   z-index: 2;
@@ -260,6 +261,7 @@ ol {
 .navbar {
   min-height: $header-height;
   background-color: $header-background-color;
+  z-index: 3;
 
   .navbar-brand {
     font-size: 1.15rem;
diff --git a/layouts/default.html b/layouts/default.html
index 830b0ef4..22a8a398 100644
--- a/layouts/default.html
+++ b/layouts/default.html
@@ -9,7 +9,7 @@
   <body itemscope itemtype="http://schema.org/WebPage" data-spy="scroll" data-target="#doc-nav" data-offset="90">
     <%= render '/gtm.*' %>
     <%= render '/header.*' %>
-    <section class="gl-docs container-fluid pt-5">
+    <section class="gl-docs container-fluid">
       <div class="row">
         <div class="col-0 col-lg-2 pl-0">
           <div class="nav-wrapper active">
@@ -98,6 +98,7 @@
     <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.bundle.min.js" integrity="sha384-LtrjvnR4Twt/qOuYxE721u19sVFLVSA4hf/rRt6PrZTmiPltdZcI7q7PXQBYTKyf" crossorigin="anonymous"></script>
     <script src="<%= @items['/assets/javascripts/toggle_popover.*'].path %>"></script>
     <script src="https://cdn.jsdelivr.net/npm/clipboard@2/dist/clipboard.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/floatthead/2.2.3/jquery.floatThead.min.js"></script>
     <script type="application/javascript" src="<%= @items['/assets/javascripts/clipboardjs.*'].path %>"></script>
     <script type="application/javascript" src="<%= @items['/assets/javascripts/badges.*'].path %>"></script>
     <%= render '/docsearch.*' %>
diff --git a/layouts/header.html b/layouts/header.html
index b2c7db54..b923de15 100644
--- a/layouts/header.html
+++ b/layouts/header.html
@@ -1,4 +1,4 @@
-<nav class="navbar navbar-expand-md navbar-dark fixed-top py-lg-0">
+<nav class="navbar navbar-expand-md navbar-dark py-lg-0">
   <a class="navbar-brand d-flex align-items-center justify-content-center" href="/">
     <img src="<%= @items['/assets/images/gitlab-logo.svg'].path %>" alt="GitLab documentation home" class="logo" />
     <span class="d-none d-lg-block px-2">GitLab</span> <strong class="pl-2 pl-lg-0 pt-0">Docs</strong>
diff --git a/lib/filters/table_sticky_headings.rb b/lib/filters/table_sticky_headings.rb
deleted file mode 100644
index 13c0f63f..00000000
--- a/lib/filters/table_sticky_headings.rb
+++ /dev/null
@@ -1,25 +0,0 @@
-# frozen_string_literal: true
-
-#
-# Wrap tables inside a div so we can apply CSS styles to them
-# https://gitlab.com/gitlab-org/gitlab-docs/-/issues/1076
-#
-class TableStickyHeadings < Nanoc::Filter
-  identifier :table_sticky_headings
-
-  def run(content, params = {})
-    # `#dup` is necessary because `.fragment` modifies the incoming string. Ew!
-    # See https://github.com/sparklemotion/nokogiri/issues/1077
-    doc = Nokogiri::HTML.fragment(content.dup)
-    doc.css('table').each do |table|
-      content = table.to_html
-      new_content = generate(content)
-      table.replace(new_content)
-    end
-    doc.to_s
-  end
-
-  def generate(content)
-    %(<div class="table-sticky-headings">#{content}</div>)
-  end
-end
author	David O'Regan <doregan@gitlab.com>	2021-09-01 06:37:19 +0300
committer	Suzanne Selhorn <sselhorn@gitlab.com>	2021-09-01 06:37:19 +0300
commit	20b11fb8529e2818dfe3da04524d897f2c5507d4 (patch)
tree	9d9a46e60d54ed858c5de9de1933fdef32e99f9e
parent	638e2aa3b635cf635380cade1488f7f2716d2a70 (diff)