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

Add Back To Top button #2425

Closed
2 tasks done
simonwei97 opened this issue May 17, 2024 · 4 comments · Fixed by #2433
Closed
2 tasks done

Add Back To Top button #2425

simonwei97 opened this issue May 17, 2024 · 4 comments · Fixed by #2433
Labels
enhancement help wanted

Comments

@simonwei97
Copy link
Contributor

Have you checked that your feature request isn't already filed?

  • I read through FAQ and searched through the past issues, none of which addressed my feature request.
  • Yes, I have checked that this feature request isn't already filed.

Description & Motivation

Add back to top button for post.

Some example:

image

Pitch

when user browse the post content to any position except the top of the article, back_to_top button will appear in the lower left corner of the screen. If user touch the button, it will go back to the top of article.

Alternatives

No response

Additional context

I will contribute for this feature as possible as I can.
@simonwei97 simonwei97 mentioned this issue May 17, 2024
Merged
george-gca pushed a commit that referenced this issue May 21, 2024
@simonwei97
feat: add back-to-top button (#2427)
b80a694 
slove #2425 

Demo:

<img width="1643" alt="image"
src="https://github.com/alshedivat/al-folio/assets/119845914/ea73b84b-1d09-4af8-b1ba-6090595f5ab7">

---------

Signed-off-by: simonwei97 <simonwei977@gmail.com>
Signed-off-by: Simonwei97 <119845914+simonwei97@users.noreply.github.com>
@simonwei97
Copy link
Contributor Author

@george-gca Thanks for your time to review my commit code.

My PR has been merge into master #2427. I will close this issue.

@george-gca
Copy link
Collaborator

@simonwei97 thanks for your contribution. Would you mind taking a look at the mobile version? The button is too close to the footer.

@simonwei97
Copy link
Contributor Author

simonwei97 commented May 21, 2024 •
edited

@simonwei97 thanks for your contribution. Would you mind taking a look at the mobile version? The button is too close to the footer.

OK. I will work on it. I was not considering to much for mobile device before.

  • mobile version optimization for back-to-top feature

@simonwei97 simonwei97 reopened this May 21, 2024
@abhilesh abhilesh mentioned this issue May 22, 2024
Merged
MarcinWiech pushed a commit to MarcinWiech/marcinwiech.github.io that referenced this issue May 22, 2024
@simonwei97 @MarcinWiech
feat: add back-to-top button (alshedivat#2427)
c2806db 
slove alshedivat#2425 

Demo:

<img width="1643" alt="image"
src="https://github.com/alshedivat/al-folio/assets/119845914/ea73b84b-1d09-4af8-b1ba-6090595f5ab7">

---------

Signed-off-by: simonwei97 <simonwei977@gmail.com>
Signed-off-by: Simonwei97 <119845914+simonwei97@users.noreply.github.com>
@simonwei97
Copy link
Contributor Author

@simonwei97 thanks for your contribution. Would you mind taking a look at the mobile version? The button is too close to the footer.

OK. I will work on it. I was not considering to much for mobile device before.

  • mobile version optimization for back-to-top feature

@george-gca hi, #2433 have some optimzation, will you review @abhilesh codes? Thanks.

george-gca pushed a commit that referenced this issue May 24, 2024
@abhilesh
Fix: Add back-to-top button (#2433)
9e59ab8 
Fixes #2425 

PR #2427 adds a back-to-top button, however the button overlaps with the
footer when `footer_fixed: false` and [has inadequate
spacing](#2425 (comment))
with `footer_fixed: true`

Changes in this PR:
- Fix positioning of button on fixed and sticky footer layouts 
- Add option to disable back-to-top button by setting `back_to_top:
false` in `_config.yml`
- Add button transparency to avoid button blocking content view
- Reduce size of button

Demo - 

| Device | Fixed footer | Sticky footer |
| :-----------: | :-------------: | :-----------: |
| Mobile |
![fixed_footer_mobile](https://github.com/alshedivat/al-folio/assets/2447878/2e17be04-1fa7-40c5-b691-829e92055367)
|
![sticky_footer_mobile](https://github.com/alshedivat/al-folio/assets/2447878/f5567e43-e6fe-442d-9a7f-99e0577e220b)
|
| Desktop |
![fixed_footer_desktop](https://github.com/alshedivat/al-folio/assets/2447878/fc755839-841a-4e6b-b249-2c75bc552ad8)
|
![sticky_footer_desktop](https://github.com/alshedivat/al-folio/assets/2447878/ef9a4c99-ce4c-4ac3-8fbb-207af9be245a)
|

Miscellaneous change - Added personal website under `Academics` to
`README.md`
george-gca added a commit to george-gca/multi-language-al-folio that referenced this issue May 24, 2024
@george-gca @dependabot @abhilesh
Localized search (#27)
1ccacda 
* Updated tikzjax hash

* Added support for search (alshedivat#2415)

Added support for search within the template as suggested in alshedivat#581. I
decided to go with a client side search based on [Ninja
keys](https://github.com/ssleptsov/ninja-keys), but using [deepdub's
fork](https://github.com/deepdub-ai/ninja-keys) as basis since it
supports fuzzy search.

Had to do a bunch of changes to their code to make it work without using
node to install everything. Also changed to use some colors defined in
our side and using both pages' titles and descriptions for search. Also
had to increase the template max width to better accomodate the new item
in navigation bar.

Missing implementations:
- [ ] One thing I'd love to do (but currently have no idea how) would be
to change the text next to the search button depending on the platform.
For example, if the user is accessing the site on a mac they should use
⌘k instead of ctrl k.
- [x] Test how this looks like (and how it is supposed to work) on
devices with smaller screens
- [x] Support for offline mode

Some screenshots:

---

## Dark version

![Screenshot from 2024-05-13
16-30-12](https://github.com/alshedivat/al-folio/assets/31376482/535acec5-dd7a-48cb-a17f-a295da98b5d3)

![Screenshot from 2024-05-13
16-30-26](https://github.com/alshedivat/al-folio/assets/31376482/6b2d94bb-3981-4252-ae2b-53994b514491)

![Screenshot from 2024-05-13
16-30-36](https://github.com/alshedivat/al-folio/assets/31376482/66262b56-2744-475d-b09f-2cb65210017b)

---

## Light version

![Screenshot from 2024-05-13
16-30-44](https://github.com/alshedivat/al-folio/assets/31376482/a0eec50c-e7ac-4b52-aee8-2050bff05d54)

![Screenshot from 2024-05-13
16-30-50](https://github.com/alshedivat/al-folio/assets/31376482/41d72066-3e68-4ec3-bf3d-140da621f67b)

![Screenshot from 2024-05-13
16-30-55](https://github.com/alshedivat/al-folio/assets/31376482/613fd56e-7180-4373-ab7a-dfed184b5a18)

---------

Signed-off-by: George Araujo <george.gcac@gmail.com>
Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

* Fix: Add back-to-top button (alshedivat#2433)

Fixes alshedivat#2425 

PR alshedivat#2427 adds a back-to-top button, however the button overlaps with the
footer when `footer_fixed: false` and [has inadequate
spacing](alshedivat#2425 (comment))
with `footer_fixed: true`

Changes in this PR:
- Fix positioning of button on fixed and sticky footer layouts 
- Add option to disable back-to-top button by setting `back_to_top:
false` in `_config.yml`
- Add button transparency to avoid button blocking content view
- Reduce size of button

Demo - 

| Device | Fixed footer | Sticky footer |
| :-----------: | :-------------: | :-----------: |
| Mobile |
![fixed_footer_mobile](https://github.com/alshedivat/al-folio/assets/2447878/2e17be04-1fa7-40c5-b691-829e92055367)
|
![sticky_footer_mobile](https://github.com/alshedivat/al-folio/assets/2447878/f5567e43-e6fe-442d-9a7f-99e0577e220b)
|
| Desktop |
![fixed_footer_desktop](https://github.com/alshedivat/al-folio/assets/2447878/fc755839-841a-4e6b-b249-2c75bc552ad8)
|
![sticky_footer_desktop](https://github.com/alshedivat/al-folio/assets/2447878/ef9a4c99-ce4c-4ac3-8fbb-207af9be245a)
|

Miscellaneous change - Added personal website under `Academics` to
`README.md`

* Moved search data inside search.liquid (alshedivat#2439)

Signed-off-by: George Araujo <george.gcac@gmail.com>

* Fixed merg bug

Signed-off-by: George Araujo <george.gcac@gmail.com>

* Translated search strings

Signed-off-by: George Araujo <george.gcac@gmail.com>

* Fixed spacing in liquid variables

Signed-off-by: George Araujo <george.gcac@gmail.com>

* Fixed all weird spacing between liquid variables and curly braces

Signed-off-by: George Araujo <george.gcac@gmail.com>

* Increased site max width

Signed-off-by: George Araujo <george.gcac@gmail.com>

* Fixed urls not being localized in search

Signed-off-by: George Araujo <george.gcac@gmail.com>

* Fixed prettier complaints

Signed-off-by: George Araujo <george.gcac@gmail.com>

---------

Signed-off-by: George Araujo <george.gcac@gmail.com>
Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Co-authored-by: Abhilesh Dhawanjewar <2447878+abhilesh@users.noreply.github.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
enhancement help wanted
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Fix: Add back-to-top button abhilesh/al-folio
2 participants
@george-gca @simonwei97