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.

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

feat: add back-to-top button #2427

Merged
merged 5 commits into from
May 21, 2024
Merged

Conversation

simonwei97
Copy link
Contributor

slove #2425

Demo:

image

@simonwei97
Copy link
Contributor Author

Light Theme

image

Dark Theme

image

@simonwei97 simonwei97 requested a review from george-gca May 18, 2024 04:21
@simonwei97
Copy link
Contributor Author

I sync latest code and update code formatter.

Need run workflow again.

@george-gca george-gca merged commit b80a694 into alshedivat:master May 21, 2024
3 checks passed
@simonwei97 simonwei97 mentioned this pull request May 21, 2024
2 tasks
MarcinWiech pushed a commit to MarcinWiech/marcinwiech.github.io that referenced this pull request May 22, 2024
george-gca pushed a commit that referenced this pull request May 24, 2024
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 pull request May 24, 2024
* 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 <[email protected]>
Signed-off-by: dependabot[bot] <[email protected]>
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 <[email protected]>

* Fixed merg bug

Signed-off-by: George Araujo <[email protected]>

* Translated search strings

Signed-off-by: George Araujo <[email protected]>

* Fixed spacing in liquid variables

Signed-off-by: George Araujo <[email protected]>

* Fixed all weird spacing between liquid variables and curly braces

Signed-off-by: George Araujo <[email protected]>

* Increased site max width

Signed-off-by: George Araujo <[email protected]>

* Fixed urls not being localized in search

Signed-off-by: George Araujo <[email protected]>

* Fixed prettier complaints

Signed-off-by: George Araujo <[email protected]>

---------

Signed-off-by: George Araujo <[email protected]>
Signed-off-by: dependabot[bot] <[email protected]>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Co-authored-by: Abhilesh Dhawanjewar <[email protected]>
siril-teja pushed a commit to siril-teja/siril-teja.github.io-old that referenced this pull request Jun 19, 2024
siril-teja pushed a commit to siril-teja/siril-teja.github.io-old that referenced this pull request Jun 19, 2024
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`
karapostK pushed a commit to karapostK/karapostK.github.io that referenced this pull request Jul 4, 2024
karapostK pushed a commit to karapostK/karapostK.github.io that referenced this pull request Jul 4, 2024
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`
Suraj-Bhor pushed a commit to Suraj-Bhor/suraj-bhor.github.io that referenced this pull request Aug 13, 2024
Suraj-Bhor pushed a commit to Suraj-Bhor/suraj-bhor.github.io that referenced this pull request Aug 13, 2024
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`
YifanJiang233 pushed a commit to YifanJiang233/al-folio that referenced this pull request Aug 27, 2024
YifanJiang233 pushed a commit to YifanJiang233/al-folio that referenced this pull request Aug 27, 2024
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`
meiqing-wang pushed a commit to meiqing-wang/meiqing-wang.github.io that referenced this pull request Oct 13, 2024
meiqing-wang pushed a commit to meiqing-wang/meiqing-wang.github.io that referenced this pull request Oct 13, 2024
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`
avishekanand pushed a commit to avishekanand/al-folio-homepage that referenced this pull request Oct 22, 2024
avishekanand pushed a commit to avishekanand/al-folio-homepage that referenced this pull request Oct 22, 2024
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`
mattleblanc pushed a commit to mattleblanc/mattleblanc.github.io that referenced this pull request Dec 29, 2024
mattleblanc pushed a commit to mattleblanc/mattleblanc.github.io that referenced this pull request Dec 29, 2024
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`
MarcinWiech pushed a commit to MarcinWiech/marcinwiech.github.io that referenced this pull request Feb 28, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants