Patch #30231

Operation: "Unwraping The Mine" or conerns about how elements are wrapped

Added by Anonymous 7 months ago. Updated 6 months ago.

Status:ClosedStart date:
Priority:NormalDue date:
Assignee:-% Done:

0%

Category:UI
Target version:-

Description

Here are some things that look suspicious to me:
1. I think maybe it would be good to kill the two wrappers (wrapper2 and wrapper3), leaving only one top wrapper which would wrap everything except for the footer container, this is to achieve sticky footer design later, or else footer winds up in the middle of my screen when there is little to no content on pages (I have quite a big display). The method I'm suggesting is to stretch the wrapper 100% in height, and then apply margin-top: -25px to both the footer and the wrapper.
2. I think we should move main-menu out of the header container, so that making main-menu sticky would be achievable without using JS.
3. There is a footer container, which has 2 more containers inside named bgl and bgr, considering that footer has nothing in it, but a short line of text, I think they both should be killed and text below to be instead wrapped into a <span> or just an <a>.

wrapper2-wrapper3-removal.patch Magnifier (1.91 KB) Anonymous, 2018-12-18 08:54

main-menu-unwrap.patch Magnifier (2.51 KB) Anonymous, 2018-12-18 08:54

bgl-bgr-removal.patch Magnifier (495 Bytes) Anonymous, 2018-12-18 08:54


Related issues

Related to Redmine - Patch #30451: Move #main-menu outside of the #header to follow directly... New
Related to Redmine - Patch #30448: Remove wrapper2 and wrapper3 wrapping containers New
Related to Redmine - Patch #30445: Remove unnecessary bgl and bgr wrappers from the footer Closed

History

#1 Updated by Anonymous 7 months ago

share feedback please, or potentially other bad containers you had spotted, if the interest is good, I'll attach the patch later.

#2 Updated by Anonymous 7 months ago

attaching the patch series anyway...

#3 Updated by Go MAEDA 7 months ago

FYI: .wrapper2, .bgl, and .bgr were added in response to the request #871.

#4 Updated by Anonymous 7 months ago

Thanks for pointing it out.
I still can't seem to figure out the reason from that request number, as of why exactly was this markup change made in the first place, other than to just match some theme.
According to closer look, CSS of all the 3 themes Redmine is bundled with, never even refers to bgl, bgr, wrapper2 and wrapper3, for the minor exception of one jQuery command, which refers to wrapper2 and can very well be rerouted to the first wrapper instead (by all means correct me, if I'm overlooking something).

This ticket is also 11 years old, and there are numerous things that changed in the web world ever since.
I still think cleaning up unnecessary containers from markup is what will make the page flow easier, which obviously improves the ease of development of different themes, and endorse people to use less of the different really unnecessary element references in CSS stylesheets. This could surely mark the beginning of the general UI improvement in the future as well.

There are also :before and :after pseudos, which can also be used, if adding additional custom containers is really that necessary.

#5 Updated by Bernhard Rohloff 7 months ago

Max Johansson wrote:

Thanks for pointing it out.
I still can't seem to figure out the reason from that request number, as of why exactly was this markup change made in the first place, other than to just match some theme.

Let me wrap it up for you. ;-)
Eleven years ago Redmine looked nicer on redmine.org than in the trunk. Somebody asked for the CSS styling. There was just a problem. The redmine.org instance was a modified version and the theme didn't fit the trunk. So what's the easiest solution for that. Exactly... xD

As you pointed out the question is what to do with this heritage. I think we should come up with a hole new structure for the base layout to fix the various quirks and enhance the flexibility of Redmine's look and feel.

#6 Updated by Anonymous 6 months ago

Just like Marius mentioned on Discord, it seems like patching things one by one seems like a more achievable strategy, which I am starting to realize now as well...
Things I brought up in this topic are actually very obvious and related to the outer container design (not the inner one, which would surely require a more precise planing), questioning the purpose of some far outer elements left from this heritage. There is really not much purpose with those containers and unnecessary element wraps as much as I could see.
P.S. Can we add more UI people as watchers here as well please?

#7 Updated by Anonymous 6 months ago

I separated this into #30451 #30448 #30445, maybe we can add them as related issues to here now, and close this one :)

#8 Updated by Marius BALTEANU 6 months ago

  • Related to Patch #30451: Move #main-menu outside of the #header to follow directly after the #header insetad added

#9 Updated by Marius BALTEANU 6 months ago

  • Related to Patch #30448: Remove wrapper2 and wrapper3 wrapping containers added

#10 Updated by Marius BALTEANU 6 months ago

  • Related to Patch #30445: Remove unnecessary bgl and bgr wrappers from the footer added

#11 Updated by Marius BALTEANU 6 months ago

  • Status changed from New to Closed

Max Johansson wrote:

I separated this into #30451 #30448 #30445, maybe we can add them as related issues to here now, and close this one :)

I'm closing the issue in favour of the related issues.

Also available in: Atom PDF