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.

Sign up for GitHub

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

Jump to bottom

Merge our two "sticky headers" on scroll #1223

Closed
humphd opened this issue Oct 21, 2020 · 4 comments · Fixed by #1274
Closed

Merge our two "sticky headers" on scroll #1223

humphd opened this issue Oct 21, 2020 · 4 comments · Fixed by #1274
Assignees
@PedroFonsecaDEV
Labels
area: design Issues needing design or assets area: front-end type: bug Something isn't working

Comments

@humphd
Copy link
Contributor

humphd commented Oct 21, 2020

We landed a fantastic PR the other day to support scrolling and having 2 sticky headers. The only down side of it is that the two headers take up a lot of space at the top.

Today I noticed that GitHub does something similar, but collapses the two down into a single-height header:

scroll-header

I wonder if we should flip our top header into the "mobile" view and show the menu on the right vs. the words/icons:

Screen Shot 2020-10-20 at 9 44 51 PM

Then we could slide the post title into the middle, empty section between the logo and search/menu icons. That would let us do both things in the same amount of space.
@humphd humphd added type: bug Something isn't working area: front-end area: design Issues needing design or assets labels Oct 21, 2020
@humphd
Copy link
Contributor Author

humphd commented Oct 21, 2020

cc @PedroFonsecaDEV, who worked on the current sticky header solution.

@PedroFonsecaDEV
Copy link
Contributor

I agree with you that we need to improve this feature.
Tomorrow I will create a sketch so we can discuss it together to find the best solution before I start to code it.

You can assign me to this issue too.
Thanks.

@PedroFonsecaDEV PedroFonsecaDEV mentioned this issue Oct 24, 2020
Closed
@PedroFonsecaDEV
Copy link
Contributor

We need to think about #1193 if we will have both or just one of them.
It would be nice to see some sketches about it.
@agarcia-caicedo @humphd

@PedroFonsecaDEV
Copy link
Contributor

(Oct/27)Update after sketches:
I'm working on this issue.

PedroFonsecaDEV added a commit to PedroFonsecaDEV/telescope that referenced this issue Nov 2, 2020
@PedroFonsecaDEV
FIXES Seneca-CDOT#1223
fa4c07e 
      *ScrollTop and ScrollDown becomes: ScrollAction (We had repetead code for up and down, now we have only one component)
      *BackToTop becomes: BackToTopButton - No more coupling with ScrollTop
      *Merge our two "sticky headers" on scroll (Seneca-CDOT#1223)
PedroFonsecaDEV added a commit to PedroFonsecaDEV/telescope that referenced this issue Nov 2, 2020
@PedroFonsecaDEV
FIXES Seneca-CDOT#1223
6f7577b 
      *ScrollTop and ScrollDown becomes: ScrollAction (We had repetead code for up and down, now we have only one component)
      *BackToTop becomes: BackToTopButton - No more coupling with ScrollTop
      *Merge our two "sticky headers" on scroll (Seneca-CDOT#1223)
@PedroFonsecaDEV PedroFonsecaDEV mentioned this issue Nov 2, 2020
Merged
8 tasks
PedroFonsecaDEV added a commit to PedroFonsecaDEV/telescope that referenced this issue Nov 2, 2020
@PedroFonsecaDEV
FIXES Seneca-CDOT#1223
b3bf689 
      *ScrollTop and ScrollDown becomes: ScrollAction (We had repeated code for up and down, now we have only one component)
      *BackToTop becomes: BackToTopButton - No more coupling with ScrollTop
      *Merge our two "sticky headers" on scroll (Seneca-CDOT#1223)
PedroFonsecaDEV added a commit to PedroFonsecaDEV/telescope that referenced this issue Nov 9, 2020
@PedroFonsecaDEV
FIXES Seneca-CDOT#1223
79dbca5 
      *ScrollTop and ScrollDown becomes: ScrollAction (We had repeated code for up and down, now we have only one component)
      *BackToTop becomes: BackToTopButton - No more coupling with ScrollTop
      *Merge our two "sticky headers" on scroll (Seneca-CDOT#1223)
@humphd humphd mentioned this issue Nov 10, 2020
Closed
PedroFonsecaDEV added a commit to PedroFonsecaDEV/telescope that referenced this issue Nov 11, 2020
@PedroFonsecaDEV
FIXES Seneca-CDOT#1223
c1d856c 
      *ScrollTop and ScrollDown becomes: ScrollAction (We had repeated code for up and down, now we have only one component)
      *BackToTop becomes: BackToTopButton - No more coupling with ScrollTop
      *Merge our two "sticky headers" on scroll (Seneca-CDOT#1223)
PedroFonsecaDEV added a commit to PedroFonsecaDEV/telescope that referenced this issue Nov 12, 2020
@PedroFonsecaDEV
FIXES Seneca-CDOT#1223
78eada8 
      *ScrollTop and ScrollDown becomes: ScrollAction (We had repeated code for up and down, now we have only one component)
      *BackToTop becomes: BackToTopButton - No more coupling with ScrollTop
      *Merge our two "sticky headers" on scroll (Seneca-CDOT#1223)
PedroFonsecaDEV added a commit that referenced this issue Nov 13, 2020
@PedroFonsecaDEV
Merge pull request #1274 from PedroFonsecaDEV/issue1223
f4274ab 
Fixes #1223: Merge our two "sticky headers" on scroll
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@PedroFonsecaDEV PedroFonsecaDEV

Labels
area: design Issues needing design or assets area: front-end type: bug Something isn't working
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Fixes #1223: Merge our two "sticky headers" on scroll PedroFonsecaDEV/telescope
2 participants
@humphd @PedroFonsecaDEV