Enh #7131: Introduce new CSS variables: --hh-fixed-header-height and … (#7133)

* Enh #7131: Introduce new CSS variables: --hh-fixed-header-height and --hh-fixed-footer-height

* Add description to migration guide

* Force keeping px after CSS compilation.

* Add comment in less file

* On mobile, change --hh-fixed-header-height CSS variable value instead of body padding top

* Update MIGRATE-DEV.md

* 593935d2b4 (r1686930702)

* Replace LESS compile -x option with --clean-css

---------

Co-authored-by: Lucas Bartholemy <luke-@users.noreply.github.com>

CHANGELOG.md

@@ -8,6 +8,7 @@ HumHub Changelog
 - Fix #7100: Enable all file handlers on RichText editor toolbar
 - Enh #7127: Prerequisites - Check that Web and Cli php version and user is the same
 - Enh #7128: Prerequisites - check for mixed table collations
+- Enh #7131: Introduce new CSS variables: `--hh-fixed-header-height` and `--hh-fixed-footer-height`
 - Enh #7129: Link `wall-entry-controls`- color to `--text-color-soft`
 - Chg #7136: When opening a modal box, don't autofocus automatically on the first form input
 - Enh #7138: Added missing DB relations to UserInvite model

Gruntfile.js

@@ -83,7 +83,7 @@ module.exports = function (grunt) {
                 command: function (name) {
                     let theme = name || grunt.option('name') || "HumHub";
                     let sep = cmdSep();
-                    return `cd themes/${theme}/less ${sep} lessc -x build.less ../css/theme.css`;
+                    return `cd themes/${theme}/less ${sep} lessc --clean-css build.less ../css/theme.css`;
                 }
             },
             migrateCreate: {

MIGRATE-DEV.md

@@ -10,6 +10,12 @@ Version 1.17 (Unreleased)
 
 - Forms in modal box no longer have focus automatically on the first field. [The `autofocus` attribute](https://developer.mozilla.org/docs/Web/HTML/Global_attributes/autofocus) is now required on the field. More info: [#7136](https://github.com/humhub/humhub/issues/7136)
 
+Version 1.17 (Unreleased)
+-------------------------
+
+### New
+- CSS variables: `--hh-fixed-header-height` and `--hh-fixed-footer-height` (see [#7131](https://github.com/humhub/humhub/issues/7131)): these variables should be added to custom themes in the `variables.less` file to overwrite the fixed header (e.g. the top menu + margins) and footer heights with the ones of the custom theme.
+
 Version 1.16 (April 2024)
 -------------------------
 At least PHP 8.0 is required with this version.

static/less/base.less

@@ -2,12 +2,12 @@
 // General
 // --------------------------------------------------
 html {
-    scroll-padding-top: 130px;
+    scroll-padding-top: var(--hh-fixed-header-height);
 }
 
 body {
     .text-break();
-    padding-top: 130px;
+    padding-top: var(--hh-fixed-header-height);
     background-color: @background-color-page;
     color: @text-color-main;
     font-family: 'Open Sans', sans-serif;
@@ -58,6 +58,7 @@ hr {
 @media (max-width: 768px) {
     .layout-nav-container {
         padding: 0 15px;
+
         .left-navigation {
             margin-bottom: 0;
         }
@@ -114,11 +115,11 @@ span.likeLinkContainer .like.disabled, span.likeLinkContainer .unlike.disabled {
 }
 
 .panel-body a[data-toggle], .modal-body a[data-toggle] {
-    color:@link;
+    color: @link;
 }
 
 .showMore {
-    font-size:13px;
+    font-size: 13px;
 }
 
 .table-responsive {

static/less/mobile.less

@@ -17,8 +17,8 @@
 
 @media @responsive {
 
-    body {
-        padding-top: 105px;
+    :root {
+        --hh-fixed-header-height: 105px;
     }
 
     // Layout Contents: Adjusting the contents to fit perfectly on mobile devices

static/less/variables.less

@@ -144,4 +144,8 @@
 
     // Fonts
     --mail-font-family: @mail-font-family;
+
+    // Dimensions
+    --hh-fixed-header-height: 130px;
+    --hh-fixed-footer-height: 0px; // Force keeping `px` after CSS compilation (required for `calc()` function)
 }

themes/HumHub/less/build.less

@@ -1,7 +1,7 @@
-// DO not edit this file. This file is only used to build your theme by calling 'lessc -x build.less ../css/theme.css'
+// DO not edit this file. This file is only used to build your theme by calling 'lessc --clean-css build.less ../css/theme.css'
 
 // Edit this if your theme folder resides outside of your humhub/themes directory.
-@HUMHUB:  "../../../static/less";
+@HUMHUB: "../../../static/less";
 
 // Import default variables and mixins
 @import "@{HUMHUB}/variables.less";