Fix Contribute Ribbon When Screen Size Reduced - Part 1

[kathyoleary]

In order to have access to all elements of the LMHT screen, As an LMHT user, I want to be able to minimize the screen and still have access to the search bar.

Acceptance Criteria: (Fix in two parts - this is Part 2) Total Criteria: Fix Contribute ribbon so it does not cover over search box when screen size is reduced. Criteria for Part 1: Have Contribute Ribbon disappear when screen size reduces enough that it covers other divs. Criteria for Part 2: Once current Contribute Ribbon disappears on screen reduction, have a different smaller one added on the bar that is part of the bar and does not cover it.

Given any LMHT user, I want to minimize the screen And still be able to access the search bar.

[kathyoleary]

It also covers up other text/divs as well, should either have it go behind them or disappear once it starts covering them

[kathyoleary]

Did some research...so far I see two ways to fix this, there could be more though. You can straight CSS fix it with y-indexes, but that doesn't look like it fixes very neatly - at least with the bits of it I tested it out on. Or we can redo the ribbon in html and assign it it's own div and then CSS fix the div. It looks like it does a cleaner fix and prevents some future issues if items are added to the page.

This shows how to do the html/CSS fix: https://unindented.org/articles/github-ribbon-using-css-transforms/

Definitely look up and research more options though

[bigtiger]

Split into two stories. One to hide the ribbon and the other to show a new contribute button.

[kathyoleary]

https://github.com/adorableio/LMHT/pull/47 Part one done. Contribute ribbon disappears for now on screen reduction at same time that LMHT/HTML logo disappears.

[kathyoleary]

Fixed the fix :) It's ready for thumbs once code freeze is up

[kathyoleary]

merged :)