Changeset 11489

Timestamp:

01/31/2022 03:16:33 AM (3 years ago)

Author:

dd32

Message:

Translate: Restore translation headers sticking to the viewport, and use a new global variable for the header height.

position: sticky only works within a scrollable element, and by adding overflow:auto it causes the element to no longer be a scrollable item, so nothing to stick to.
Most GlotPress tables have a <p class="clear... present after .gp-content which would result in the GlotPress footer elements clearing, but the consistency page does not have this, resulting in the navigation being rendered outside of the .gp-content bounding box.
Applying a .clearfix class to .gp-content appears to work with all these pages instead.

See [11470], #6046.
Fixes ​https://github.com/WordPress/wporg-mu-plugins/issues/124

Location:

sites/trunk/wordpress.org/public_html/wp-content/plugins/wporg-gp-customizations/templates

Files:

• header.php (modified) (1 diff)
• style.css (modified) (4 diffs)

sites/trunk/wordpress.org/public_html/wp-content/plugins/wporg-gp-customizations/templates/header.php

@@ -35 +35 @@
 </header>
 
-<div class="gp-content">
+<div class="gp-content clearfix">
 
     <div id="gp-js-message"></div>

sites/trunk/wordpress.org/public_html/wp-content/plugins/wporg-gp-customizations/templates/style.css

@@ -1 @@
-:root {
-    /* It doesn't stick on mobile. That may change soon though, see https://github.com/WordPress/wporg-news-2021/issues/181. */
-    --global-header-height: 0;
-}
-
-@media screen and (min-width: 890px) {
-    :root {
-        --global-header-height: 103px;
-    }
-}
-
 body, html {
     height: 100%;
@@ -310 +299 @@
     max-width: 940px;
     padding: 0 10px;
-    overflow: auto;
 }
 
@@ -2237 +2225 @@
     position: -webkit-sticky;
     position: sticky;
-    top: calc( var(--global-header-height) + var(--wp-admin--admin-bar--height) + 100px );
+    top: calc( var(--wp-global-header-height) + var(--wp-admin--admin-bar--height) + 100px );
     padding: 20px 0 10px;
     background: #fff;
@@ -2535 +2523 @@
     .admin-bar .editor-panel__left .panel-header,
     .admin-bar .editor-panel__right {
-        top: calc( var(--global-header-height) + var(--wp-admin--admin-bar--height) );
+        top: calc( var(--wp-global-header-height) + var(--wp-admin--admin-bar--height) );
     }
 }