improved footer layout

[cintek]

Improves the layout of the footer:

• no overlapping
• bottom of credits and logos are on one line -> more harmonic (this also affects the basic theme)

Before:

After

[RogerHaase]

Agree the footer could be improved.

This change breaks the topside theme.

Not sure why moinmoin powered is rendered both as text and logo; maybe delete the text. Same for python powered.

Also try replacing the revid with rev_number

[UlrichB22]

Not sure why moinmoin powered is rendered both as text and logo; maybe delete the text. Same for python powered.

I like this text because you can use it to search the web to find all running Moin wikis. Maybe we should change it to "MoinMoin2 powered" or similar to distinguish between old and new versions.

[RogerHaase]

The moinmoin powered text and logo target links are the same. I was only suggesting that one or the other be removed.

[cintek]

This change breaks the topside theme.

With the last commit I fixed it. Now it looks like this:

The width of the footer is adjusted to the one of the content so it looks more harmonic. Before, the footer had a shorter width which didn't look so good.

[cintek]

Maybe we should change it to "MoinMoin2 powered" or similar to distinguish between old and new versions.

I don't think so because at https://moinmo.in/ you can find information about both Moin 1.9 and Moin2

[cintek]

Also changed the layout of the footer on small devices.

Screenshot before the change:

Screenshot after the change:

[RogerHaase]

topside theme seems broken for small screen sizes

[cintek]

topside theme seems broken for small screen sizes

Yes, I think I tested it only on the settings page where it seemed to be alright. Now I fixed the theme on small devices:

[UlrichB22]

I did some tests with a small device size. Sorry for using a German environment.

• Modernized theme with old layout on the left and new layout on the right.

For me, the layout of the footer has improved in the modernized theme, but the header has also changed (the item history has been moved to the left).

• Topside theme with old layout on the left and new layout on the right.

For me, the layout has not improved in the topside theme because the footer needs more room. I would prefer to have the "MoinMoin powered" text back in one line with "Python powered" and the other texts as it was before.

By the way, I don't like the snow background image in the footer because it has a slightly different color than the cloud image in the header. What do you think about using the white-clouds.jpg in the footer as well? I know this is not part of this PR.

[cintek]

* **Modernized theme** with old layout on the left and new layout on the right.

For me, the layout of the footer has improved in the modernized theme, but the header has also changed (the item history has been moved to the left).

Is this so bad? Sometimes the history has more items and than it needs more space. In this case it seems better if the history items begin on the left side.

But we could align it so it is on the same height as other elements:

* **Topside theme** with old layout on the left and new layout on the right.

For me, the layout has not improved in the topside theme because the footer needs more room. I would prefer to have the "MoinMoin powered" text back in one line with "Python powered" and the other texts as it was before.

Okay, I reversed most of the layout changes and did a commit but the icons of the item views still take more place than before. The reason for this is that on a small device it is harder to tap on small icons so we prevent tapping on the wrong icon:

By the way, I don't like the snow background image in the footer because it has a slightly different color than the cloud image in the header. What do you think about using the white-clouds.jpg in the footer as well? I know this is not part of this PR.

Of course we can change the image in this PR :) It would look like this:

Or if we take the bottom of that picture:

Almost invisible but you can still see the color gradient.

[UlrichB22]

But we could align it so it is on the same height as other elements:
I agree, this would be the best for the header of the modernized theme.

Or if we take the bottom of that picture:
This looks good for me (topside theme), thanks.

In your last screenshots there is a line break in "HTML 5", maybe we should change it to "HTLM5" in templates/snippets.html.

[cintek]

In your last screenshots there is a line break in "HTML 5", maybe we should change it to "HTLM5" in templates/snippets.html.

That's correct but it happens only if the device has a smaller width than 380px which is really small ;) But others like Mozilla or Wikipedia are also calling it 'HTML5' so it makes sense to change it so I did it.

What do you say about the suggestions for the image of the footer? Do you prefer the first or the second one (third and forth image in #1527 (comment))?

[UlrichB22]

I prefer the 4th image (the bottom of white-clouds.jpg), but both are fine.

If your work is finished, may I ask you to create a new short PR with one commit rebased on the latest version?
When we refer to the number of this PR, we still have the history of comments.

[cintek]

If your work is finished, may I ask you to create a new short PR with one commit rebased on the latest version?

Of course :)

I changed the background picture of the footer and then I saw that I forgot to implement the change in the header (see #1527 (comment)) so I just worked on that. Please check if the changes of the modern theme on mobile are okay now.

In the end I rebased the branch on your master branch and squashed the commits of branch improve-footer.

[UlrichB22]

IMO this is ready to merge. @RogerHaase do you agree?

[RogerHaase]

I like the footer background.

Using modernized theme, there is a horizontal scroll bar at window widths below ~850 pixels.

Using topside theme, there is a horizontal scroll bar at ~1200 pixels wide. The icons for moin-powered and python-powered shift from right to left-center at windows widths from ~850 to ~1000.

[cintek]

Using modernized theme, there is a horizontal scroll bar at window widths below ~850 pixels.

Using topside theme, there is a horizontal scroll bar at ~1200 pixels wide. The icons for moin-powered and python-powered shift from right to left-center at windows widths from ~850 to ~1000.

@RogerHaase, this should look better now.

[RogerHaase]

Thanks for helping!