BrandonArmand / Binari

Interactive code editor with a live binary tree visual designed to teach new developers the fundamentals of Data Structures.

Home Page:https://binari.dev

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Hide Jumbotron Text on Other Page

BrandonArmand opened this issue · comments

  • Bug
  • Clean up
  • Question
  • Enhancement
  • Suggestion
  • Other

What needs to be done.

Hide or change the header text when on a page other than the landing page.

Screen Shot 2020-01-23 at 9 10 44 PM

Why

It seem pointless to have. It would be much more fitting to have it display the current page that the user is on with a small description of the page. The jumbotron can also be completely hidden similar to the Playground page.

How

There are functions to check the current route, but if that doesn't work, the content section can be moved up to cover the jumbotron section.

Hi, I came up with two posible solutions:

  • Rise about page with a negative margin top and hide jumbotron text:
    image

With this approach the length of the gray background stays the same as the others pages. The jumbotron text will be hidden for any page other than '/'. The problem is that if you add new pages you'll have to set the negative margin for those too.

  • Hide jumbotron text and reduce the size of the gray area:
    image

For any page other than '/' jumbotron text is hidden and size is reduced so the page is shown at the top. The advantage of this approach is that you don't have to configure new pages to adapt to jumbotron, it will always be reduced and text hidden. But if I reduce the size of jumbotron background, the gray area will appear different from the playground page for example. In the long run I think is more efective to reduce jumbotron size than editing all new pages with negative margin.

@agustinmessina I'm pretty sure we will need to go for the negative margin, which isn't a big deal, so if you agree that this is the better solution, you are welcome to do a pull request to close the issue (: