Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Bootstrap4 migration tweaks #776

Merged
merged 2 commits into from Feb 2, 2022
Merged

Bootstrap4 migration tweaks #776

merged 2 commits into from Feb 2, 2022

Conversation

MonkeyDo
Copy link
Contributor

@MonkeyDo MonkeyDo commented Feb 1, 2022

Problem

A couple of minor things changed with the migration to Bootstrap4 in #769

  • the date inputs have become much larger (the date input component now fills available space)
    image

  • behavior of the navbar items when there isn't enough horizontal space (in very specific conditions: screen width > 992px and < 1091px, on pages other than index)
    image

Solution

Just a couple of CSS tweaks did the trick:

  • limit date input component width (copied size from pre-migration CSS)
    image

  • white-space: nowrap; on the menu items
    image
    With flexbox, search input will take less space if there is a lack of space instead of the menu item wrapping.

Areas of Impact

src/client/stylesheets/style.scss

Between 992px (menu collapsing size) and 1090px (enough space for all menu items, inc. logo and search bar) nav items were wrapping to two lines, which we don't want.
@MonkeyDo MonkeyDo merged commit c18785f into master Feb 2, 2022
@MonkeyDo MonkeyDo deleted the bs4-tweaks branch February 2, 2022 11:11
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
2 participants