Olivero: Center align content (instead of left align)

Guys, this is getting absurd: I spent more time trying to fix the failing test than implementing the new feature that allows Olivero to be centered.

The beauty is that the test that fails on the backend, has nothing to do with the frontend functionality that works great, as confirmed by others above, so much so that we are using it successfully on an upcoming site (can't share the demo as it is not yet officially public).

The most absurd thing is that the element that the test is looking for exists because moveToElement does not fail, while the waitFor ElementPresent/Visible in the next line continues to fail. So, first it finds it and then it doesn't find it anymore?

Anyway I don't want to insist on this anymore, first to avoid spamming this thread with various attempts to fix the test, due to the fact that I'm basically working "blind", as the Nightwatch tests don't produce screenshots so that I can visually see where the problem is, and don't even run correctly on DrupalPod (I run them using $ddev nightwatch --tag olivero, but it doesn't work correctly: do you know a better way?). I tried to use DrupalPod because I still couldn't get Nightwatch to run correctly in my usual "docker4drupal" based local environment...

Probably, as often happens, it may be that the failure of the backend test is due to something really trivial, but which I haven't been able to see yet...

At this point I'm asking you all, and in particular Olivero's maintainer, for a suggestion on how best to proceed in this situation.

Thank you.

Thank you for your tireless efforts @MXT. I know the feeling of mysteriously failing tests, one of the reasons I got involved with Lando + Drupal Contributions: To make PHPUnit and Nightwatch testing easier.

With the kind help of @neclimdul, @DuaelFr and @mparker17 Nightwatch in Lando is now working (see Fix PHPUnit invalid cookie domain and failing Nightwatch test #76), so you can run Olivero's Nightwatch tests with these commands:

git clone git@github.com:thinktandem/drupal-contributions.git && cd drupal-contributions
lando rebuild -y
cd web/core
lando nightwatch --tag olivero

I patched and ran the tests, and got feedback in the /web/core/reports/nightwatch folder with images, HTML, JSON files, etc. One error image was a screenshot about SchemaIncompleteException and missing olivero.settings which gave me a clue that missing schema and config might be the problem.

I am attaching the resulting Nightwatch report zipped.

AAAHHH!!! Thank you very much @ressa!!!

So with my:

Probably, as often happens, it may be that the failure of the backend test is due to something really trivial, but which I haven't been able to see yet...

I was absolutely right! ;-D

And yes: this is the demonstration that with the right tools, the goal can be reached sooner and better: I didn't know about this Lando + Drupal Contributions: I absolutely have to find the time to try it.

Thank you for the tip @ressa, much appreciated!

You're welcome @MXT :) And so true about the right tool. Some of the best IT advice I ever got was from Sacha Chua to "Sharpen your axe" (2012?): Find the best tools, and perfect the usage of them. Sadly, I can't find that blog post anymore ...

It's nice with a tangible result of the time I have spent trying to get tests working in Drupal Contributions. Since you're familiar with DDEV, you shouldn't find it too hard to get Lando up and running.

Code review completed on gitlab, adding screenshots here

Behavior on scroll

Left aligned:

Center aligned:

Behavior on scroll (slowed down)

Left aligned:

Center alinged:

Theme setting

Dropdown menus

Moving to needs work based on code review suggestions, this is *really* close though!

Updated attributions

For those wishing to test the above implementation, the related patch can be created by clicking on plain diff in the "Issue fork" box at the beginning of this thread.

I reproduce the current link here for convenience:

Plain diff to be applied as a patch

This issue is being reviewed by the kind folks in Slack, #needs-review-queue-initiative. We are working to keep the size of Needs Review queue [2700+ issues] to around 400 (1 month or less), following Review a patch or merge request → as a guide.

Since this is adding a new setting it will need a change record + an upgrade path for existing sites. Test should be included.

Also with this new setting it will need test coverage as well.

If anyone wants to take on the upgrade path & tests, you may be interested in following the model set by #3257274: Implement color changing theme settings for Olivero → , which also needed those items.

Hello, +1 here also for the centered layout, waiting for the merge.
I have a suggestion, but I am a bit concerned not to postpone the merge, thank you all for the work put into this.
As for the suggestion, In my opinion (I am a graphic designer if that matters :))...

The left margin which is gray with the Rss feed and the above blue rectangle should remain in the left side.
The navigation should be from margin to margin, centered, equally distributed toward the margins of the screen. So the branding part more to the left, the menus more to the right.
I would also renounce that pijama :) looking background and let the background white.
If the background is made white for example, (and for many cases it will be, as the texture can't fit with the feel of certain designs) it is obvious that the gray margin doesn't make any sense to be toward the center, that's why I would let it remain in the left.

So the only part that should be centered is the content, and in the navigation part, the elements (branding and menus) equally distributed toward the margins.

But if this would postpone the merge, it is better to leave it as it is patched right now, because this is a very important feature, that is obviously missing in the Olivero theme, and everything takes such a long time... This is not a question - if there should be or not such a feature. Of course there should be.
PS, Lament :) I love Drupal, but being visually oriented, I waited such a long time for features like layout builder, or good themes (Uikit was one of the best until Drupal 10), we are getting old here... :) many times the tire for some projects was deflated. So it's better that this feature merges as it is patched, but I thought I should add my suggestion. Thank you.

Thanks for sharing @CPxiom, and I very much agree that the sooner this gets committed and released, the better.

You could create follow-up issues for your suggestions about element alignment, as well as optionally disabling the background image?

Page left align issue is replicated and fixed.

@athyamvidyasagar there is already a working patch (see #87 📌 Olivero: Center align content (instead of left align) Needs work ) that is much more advanced and takes into account many other aspects than yours, which is too simple.

Please before posting a patch be sure to read the whole thread and check the work already done by others first, thank you (this is the second time 📌 Olivero: Center align content (instead of left align) Needs work I say this in this thread)

In case you (or someone else) want to contribute to the conclusion of this work, what is missing to do is written in comment #88 📌 Olivero: Center align content (instead of left align) Needs work

Thank you.

Can confirm a patch created from https://git.drupalcode.org/project/drupal/-/merge_requests/3447 works on Drupal 10.2.x
after updating the theme settings.