Ensure that the header displays correctly with or without site message

Bug #1698257 reported by Pat on 2017-06-16
6
This bug affects 1 person
Affects Status Importance Assigned to Milestone
Mahara
Medium
Pat
18.04
Medium
Pat
18.10
Medium
Unassigned

Bug Description

When the custom theme has taller logo it causes the header to be larger, sometimes this makes the secondary menu appear to be hidden or cutoff when there is no site message.

Ensure that Raw and Old raw theme header display correctly with or without site message(s)

Pat (pat-kira) on 2017-06-16
tags: added: front-end
summary: - Ensure that the header display correctly with or without site messages
+ Ensure that the header display correctly with or without site message
Changed in mahara:
importance: Undecided → Medium
status: New → Confirmed
milestone: none → 17.10.0
Robert Lyon (robertl-9) on 2017-09-20
Changed in mahara:
milestone: 17.10.0 → 18.04.0
Sarah Kirby (sarahkirby) on 2018-02-06
Changed in mahara:
assignee: nobody → Sarah Kirby (sarahkirby)
summary: - Ensure that the header display correctly with or without site message
+ Ensure that the header displays correctly with or without site message
Changed in mahara:
status: Confirmed → In Progress
Sarah Kirby (sarahkirby) wrote :

Some insight about the patch ..

I have investigated two different solutions:

The first was to use a Javascript function. This function would find the height of the navigation element and use this value to add additional padding-top to the body element. This approach is similar to what the current code does, however the value is able to change depending on the variable header height.

The issue with this approach is that the Javacript loads too slowly and the content and styles load before the JS. Unfortunately this delay causes the content to 'jump' when the padding-top is applied through JS.

The second approach and the solution I've submitted, relies on a 'spacer' div. Adding additional html markup is not ideal, however after researching this issue it's the best solution I could come up with.

The spacer div is a clone of the header element and it's purpose is to push content down. It uses the same classnames as the header and nav elements to ensure it inherits the new height and necessary positions when site messages are added.

All child elements of the nav inherit it's height, therefore you only need to change the .navbar-main's height property. This is also enforced as a max-height has been set on the .navbar-main element. The image height is set with a percentage value, and allows the image's size to increase relative to the navbar's height.

The adjustment will not allow for an automatic fix for any logo size. Themes that have a larger logo than is space provided for, still need to adjust the site messages height manually. However, with Pat's solution, it would be easier than at the moment.

We don't need to worry about Raw Old anymore as that is not available in 18.04.

Sarah, thank you for the notes. The spacer is not ideal. Pat will upload her proposal.

Mahara Bot (dev-mahara) wrote :

Patch for "master" branch: https://reviews.mahara.org/8687

Changed in mahara:
assignee: Sarah Kirby (sarahkirby) → Pat (pat-kira)

Reviewed: https://reviews.mahara.org/8687
Committed: https://git.mahara.org/mahara/mahara/commit/b3dd75ed43b1558845c4711a60e88a9dc0a10b37
Submitter: Robert Lyon (<email address hidden>)
Branch: master

commit b3dd75ed43b1558845c4711a60e88a9dc0a10b37
Author: Author Pat Kira <email address hidden>
Date: Wed Feb 7 11:38:31 2018 +1300

Bug 1698257: Make header height adjustable using navbar-height variable

- Fix header display with or without site messages

behatnotneeded

Change-Id: Ib93e2ad8a92050fe24557c44e0888af7ebfaacef

Reviewed: https://reviews.mahara.org/8736
Committed: https://git.mahara.org/mahara/mahara/commit/e13d77ad8855ff077423b6b752c02831b8610e3c
Submitter: Robert Lyon (<email address hidden>)
Branch: 18.04_STABLE

commit e13d77ad8855ff077423b6b752c02831b8610e3c
Author: Author Pat Kira <email address hidden>
Date: Wed Feb 7 11:38:31 2018 +1300

Bug 1698257: Make header height adjustable using navbar-height variable

- Fix header display with or without site messages

behatnotneeded

Change-Id: Ib93e2ad8a92050fe24557c44e0888af7ebfaacef
(cherry picked from commit b3dd75ed43b1558845c4711a60e88a9dc0a10b37)

Reviewed: https://reviews.mahara.org/8817
Committed: https://git.mahara.org/mahara/mahara/commit/f28839c65a85c3a7d76c6075be4a61db90a2ea9f
Submitter: Robert Lyon (<email address hidden>)
Branch: master

commit f28839c65a85c3a7d76c6075be4a61db90a2ea9f
Author: Robert Lyon <email address hidden>
Date: Mon Apr 30 12:22:18 2018 +1200

Bug 1767887: Problem with body having offset value for select2

Before the change in Bug 1698257 the offset of <body> was 0 but now it
is the height of the site messages + navbar

behatnotneeded

Change-Id: I6331f95d54eef4d159c7cc9731d48a0c9eb5d003
Signed-off-by: Robert Lyon <email address hidden>

Reviewed: https://reviews.mahara.org/8862
Committed: https://git.mahara.org/mahara/mahara/commit/c3fe37d1b452783c2c184204d6c86613ff4ccf55
Submitter: Robert Lyon (<email address hidden>)
Branch: 18.04_STABLE

commit c3fe37d1b452783c2c184204d6c86613ff4ccf55
Author: Robert Lyon <email address hidden>
Date: Mon Apr 30 12:22:18 2018 +1200

Bug 1767887: Problem with body having offset value for select2

Before the change in Bug 1698257 the offset of <body> was 0 but now it
is the height of the site messages + navbar

behatnotneeded

Change-Id: I6331f95d54eef4d159c7cc9731d48a0c9eb5d003
Signed-off-by: Robert Lyon <email address hidden>
(cherry picked from commit f28839c65a85c3a7d76c6075be4a61db90a2ea9f)

To post a comment you must log in.
This report contains Public information  Edit
Everyone can see this information.

Other bug subscribers