diff options
| author |  Frans de Jonge <fransdejonge@gmail.com>
| 2024-12-04 22:30:04 +0100 |
|---|---|---|
| committer |  GitHub <noreply@github.com>
| 2024-12-04 22:30:04 +0100 |
| commit | be9b6c7290dddcd8b8b6a8926bd101b7123528b3 (patch) | |
| tree | 4cc15beac7620c8665028b3f1a9800e38bf2a0a2 /p/themes | |
| parent | e9f392201006c907a20ba5046252d056bd5c4426 (diff) | |
Implement showing and hiding header depending on scroll (#7029)
* Implement showing and hiding header depending on scroll
References #7011.
* header.phtml: adjust indentation
* minor efficiency improvement
* Update p/scripts/main.js
Co-authored-by: Alexandre Alapetite <alexandre@alapetite.fr>
---------
Co-authored-by: Alexandre Alapetite <alexandre@alapetite.fr>
Diffstat (limited to 'p/themes')
| -rw-r--r-- | p/themes/base-theme/frss.css | 13 | ||||
| -rw-r--r-- | p/themes/base-theme/frss.rtl.css | 13 |
2 files changed, 26 insertions, 0 deletions
diff --git a/p/themes/base-theme/frss.css b/p/themes/base-theme/frss.css index b1825c96d..1412ac5f0 100644 --- a/p/themes/base-theme/frss.css +++ b/p/themes/base-theme/frss.css @@ -1159,11 +1159,24 @@ li.drag-hover { /*=== STRUCTURE */ /*===============*/ /*=== Header */ +.header-wrapper { + height: calc(2.5rem + 2 * var(--frss-padding-top-bottom)); +} + .header { + position: fixed; + top: 0; + left: 0; display: table; width: 100%; height: calc(2.5rem + 2 * var(--frss-padding-top-bottom)); table-layout: fixed; + transition: transform 0.3s; + z-index: 110; +} + +.header.hide { + transform: translateY(calc(-2.5rem - 2 * var(--frss-padding-top-bottom))); } .header > .item { diff --git a/p/themes/base-theme/frss.rtl.css b/p/themes/base-theme/frss.rtl.css index 460756cbc..b5234bc49 100644 --- a/p/themes/base-theme/frss.rtl.css +++ b/p/themes/base-theme/frss.rtl.css @@ -1159,11 +1159,24 @@ li.drag-hover { /*=== STRUCTURE */ /*===============*/ /*=== Header */ +.header-wrapper { + height: calc(2.5rem + 2 * var(--frss-padding-top-bottom)); +} + .header { + position: fixed; + top: 0; + right: 0; display: table; width: 100%; height: calc(2.5rem + 2 * var(--frss-padding-top-bottom)); table-layout: fixed; + transition: transform 0.3s; + z-index: 110; +} + +.header.hide { + transform: translateY(calc(-2.5rem - 2 * var(--frss-padding-top-bottom))); } .header > .item { |