Feature improve sidebar responsiveness

Code-Poets / sheetstorm

Web working hours sheet for Code-Poets employees

https://www.sheetstorm.codepoets.it

2 stars 0 forks source link

Feature improve sidebar responsiveness #515

Closed maciejSamerdak closed 4 years ago

maciejSamerdak commented 5 years ago

Redesigns the sidebar for better responsiveness.

Resolves #476 Resolves #289 Resolves #287 Resolves #285 Resolves #484

Done:

Sidebar stays in place on scroll
Sidebar has fixed size based on window height
Sidebar is narrowed on collapse
Icons stay in the same height
Sheet Storm logo has fixed margins
Sheet Storm logo contains Code Poets logo and advertises the company
Sidebar, icons and text all resize dynamically on window size change
More space between the logout link and others

maciejSamerdak commented 5 years ago

Works ABOUT right.

Here are some known issues, to be considered as major flaws:

if we change the window size while sidebar is collapsed, the font sizes get messed up after sidebar expansion, until the window gets resized again or page gets refreshed
choppy animation (or lack thereof, really) on sidebar expansion
text can jitter when page loads (like it inflates)
the icons can vary in size on collapsed sidebar, depending on their size before it was collapsed (their size on collapsed sidebar will change, if we change the window size)
the size of sidebar can change depending on rest of the content on the page (on lower resolutions, certain views can make the sidebar smaller right now)

Tested and working on Opera and Chrome. Safari is bull@#&t.

Szymiks commented 5 years ago

I think it is look nicer than current sidebar, however I would like to suggest few things to this PR:

Maybe we should add min-height of sidebar because when I reducing height icons go outside of div. Second idea is to make logo relative to sidebar div?
Maybe we should add some javascript to collapse sidebar when window is in for instance less than 720 px
@Karrp told me once than we should have change toggle icon so maybe it is good place to do it ? Maybe this kind of icon -> https://fontawesome.com/icons/angle-double-left?style=solid -> we could then change it to add just a font-awesome class -> https://fontawesome.com/how-to-use/on-the-web/styling/rotating-icons

They are just my suggestions, If you tried to do it before it is fine for me if you will skip my comment and you will treat this only as my opinion.

Karrp commented 4 years ago

@Szymiks

@Karrp told me once than we should have change toggle icon so maybe it is good place to do it ? Maybe this kind of icon -> https://fontawesome.com/icons/angle-double-left?style=solid -> we could then change it to add just a font-awesome class -> https://fontawesome.com/how-to-use/on-the-web/styling/rotating-icons

Done :D