Olivero: Add option for reduced header/branding height

Applied above code successfully.. Adding results as screenshots..

Verified and tested patch #7 on Drupal 9.5.x-dev. Patch applied successfully and looks good to me.

Testing steps:
1. Goto admin/Appearance
2. Set Olivero theme in the Administration theme (Scroll down and see)
3. Save configuration
4. Observe the spacing above the Heading
5. Apply the patch
6. Reload the page. Now observe the spacing is reduced above Heading

Testing Result:
1. After applying the patch empty space above the header is reduced

Can be moved to RTBC

The patch above doesn't pass tests (see where it says "Custom commands failed"), so it should not be RTBC.

In addition, this patch changes the overall design of Olivero's header, which we do not want.

Attached is a patch that adds the feature on the theme configuration to remove the extra header space

Steps: (Tested on Drupal ^10.0.x)

1. Upload patch to the /web folder of your Drupal install.
2. cd to the /web folder
3. Apply patch using git apply -v [patchfilename.patch]
4. Go to Appearance => Olivero => Settings
5. Check the box "Remove Extra Space" under Extras section at the bottom of page
6. Save Configuration
7. Clear Cache
8. Extra space should be removed.
9. To add extra space back, Repeat Step 5 and uncheck "Remove Extra Space" and Save.

Have fixed the Custom commands failed errors, coming at the patch of comment #13.

Have fixed the Custom commands failed errors, coming at the patch of comment #14.

try to fix #15

Applied patch #16 and it is successfully applied.
But seems checkbox functionality is not working as expected.
If we check or uncheck remove extra space it is not reflected on front-end. Hence I am changing the status from Needs review to Needs Work.
@Nitin shrivastava can you check once again please and resubmit patch again.

For ref attaching screenshot.

#17 failed on fresh install of 10.1.x for some reason.

Updated patch to add configuration settings for this feature so it can be exported with other site configurations

Steps:

1. Follow steps on #13. Please remember to clear cache after applying patch because it makes changes to .yml files in core
2. Navigate to /admin/config/development/configuration/single/export and select "olivero.settings" from the dropdown under "Configuration name"
3. You should see "extra_space" as a config value. It starts out with null, true when enabled, and false when disabled.

This ensures that the setting is consistent across sites. Tested on 10.1.x-dev

Fix whitespace errors on #18

Fix pcss error on #19

Fix pcss indentation error on #20

Fix PostCSS update error on #21

Please clear cache after applying patch!

Patch #25 for 9.5.x

Keeping both the 10.1.x and 9.5.x patches visible at the top of this issue.

More tests needed for push to RTBC

Successfully Applied patch #28 for Drupal 10.1.x version. It is working as expected. For ref attached screenshot.
Now we can move this bug to RTBC.

Thank you @smartsystems160 !

Applied patch#28 works fine on Drupal 10.1.x version
Refer to the screenshot

RTBC +1

The header can be a little chunky looking, so this could be a nice change.

I have some feedback regarding what this would need to move forward:

1. +++ b/core/themes/olivero/config/schema/olivero.schema.yml
   @@ -24,3 +24,6 @@ olivero.settings:
   +      label: 'Extra Space'
   

   This could benefit from a rename that better explains what it does. 'Extra space' is pretty abstract, and it wouldn't take much to make this more descriptive. That will become more beneficial as Olivero adds more config options.

2. +++ b/core/themes/olivero/css/components/site-header.css
   @@ -41,6 +41,12 @@
   +/* Removes  extra space from the header */
   +
   +.remove-extra-space {
   +  margin-top: -4.5rem;
   +}
   +
    .site-header__initial {
      position: relative;
      z-index: 102;
   diff --git a/core/themes/olivero/css/components/site-header.pcss.css b/core/themes/olivero/css/components/site-header.pcss.css
   
   diff --git a/core/themes/olivero/css/components/site-header.pcss.css b/core/themes/olivero/css/components/site-header.pcss.css
   index 9eaf220761..9404c0f03c 100644
   
   index 9eaf220761..9404c0f03c 100644
   --- a/core/themes/olivero/css/components/site-header.pcss.css
   
   --- a/core/themes/olivero/css/components/site-header.pcss.css
   +++ b/core/themes/olivero/css/components/site-header.pcss.css
   
   +++ b/core/themes/olivero/css/components/site-header.pcss.css
   +++ b/core/themes/olivero/css/components/site-header.pcss.css
   @@ -20,6 +20,11 @@
   
   @@ -20,6 +20,11 @@
      }
    }
    
   +/* Removes  extra space from the header */
   +.remove-extra-space {
   +  margin-top: -4.5rem;
   +}
   

   It looks like this solution is hoisting the entire element upward - so it doesn't actually address the unwanted whitespace, but instead slides that portion offscreen.

   This is better addressed by altering the style that adds the additional space to begin with .site-branding is set to min-height: var(--sp3);. If that min-height is changed, the unwanted space is actually remove instead of just shifted offscreen.

   Also noticed an excess space in the comment "Removes. extra space from the header"

3. +++ b/core/themes/olivero/templates/layout/page.html.twig
   @@ -50,43 +50,47 @@
   +      {% endif %}
   

   All the other markup is identical, so this could just conditionally add the class instead of an entire if/else generating a full header tag.

   Also, I believe if extra_space should be sufficient. If this needs to be enforced as boolean, an assert() in the preprocess can do that.

4. +++ b/core/themes/olivero/templates/layout/page.html.twig
   @@ -50,43 +50,47 @@
   +          {# Gets fixed by JavaScript at wide widths. #}
   +          <div class="site-header__fixable" data-drupal-selector="site-header-fixable">
   +            <div class="site-header__initial">
   +              <button class="sticky-header-toggle" data-drupal-selector="sticky-header-toggle" role="switch" aria-controls="site-header__inner" aria-label="{{ 'Sticky header'|t }}" aria-checked="false">
   +                <span class="sticky-header-toggle__icon">
   +                  <span></span>
   +                  <span></span>
   +                  <span></span>
   +                </span>
   +              </button>
   +            </div>
   

   It looks like here and elsewhere in the file, there is a bunch of indentation changes that are out of scope.

5. +++ b/core/themes/olivero/theme-settings.php
   @@ -117,6 +117,17 @@ function olivero_form_system_theme_settings_alter(&$form, FormStateInterface $fo
   +  $form['olivero_settings']['olivero_extras']['extra_space'] = [
   +    '#type'          => 'checkbox',
   +    '#title'         => t('Remove Extra Space'),
   +    '#default_value' => theme_get_setting('extra_space'),
   +    '#description'   => t("Remove extra space at the top of the theme"),
   +  ];
   

   "Remove extra space" seems like something that won't make much sense outside of this issue. Space being "extra" is subjective, and it assumes familiarity with Olivero prior to this change.

   The setting name should more explicitly say it will result in a smaller/larger header as that more accurately describes the result.

Hello everyone, I was testing patch #28 and everything seemed fine but when I viewed my site in tablet and mobile mode I realized that the header disappears completely on mobiles and partially on tablets, Here are the screenshots.

mobile_header.png
tablet_header.png