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

Fix: Add back-to-top button #2433

Merged
merged 1 commit into from
May 24, 2024
Merged

Fix: Add back-to-top button #2433

merged 1 commit into from
May 24, 2024

Conversation

abhilesh
Copy link
Contributor

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 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 sticky_footer_mobile
Desktop fixed_footer_desktop sticky_footer_desktop

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

Correct button positioning for fixed and sticky footer
Add option to disable button in _config.yml
Add button transparency
Reduce button size
Add personal website to README.md
_sass/_themes.scss Show resolved Hide resolved
_sass/_themes.scss Show resolved Hide resolved
assets/js/vanilla-back-to-top.min.js Show resolved Hide resolved
@simonwei97
Copy link
Contributor

simonwei97 commented May 24, 2024

back-to-top souce js file #2425 is here, which target repo is https://github.com/vfeskov/vanilla-back-to-top.

@george-gca
Copy link
Collaborator

Yes, but which changes were made to that file in your commit?

@simonwei97
Copy link
Contributor

back-to-top souce js file #2425 is here, which target repo is https://github.com/vfeskov/vanilla-back-to-top.

@abhilesh Like what georage said in this code review, could you explain what do you change for this back-to-top js file? Adding transparency config?

Copy link
Contributor Author

@abhilesh abhilesh left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The changes suggested for specifying the colour variables for the button didn't work as expected (see attached screenshots)

I elaborated on the changes made to the js file.
The original file committed in the previous PR was already minified (and hence a one-liner). I added the code specified, minified the file and committed to the PR. If needed, I can beautify the file and add it to the PR

@george-gca
Copy link
Collaborator

If needed, I can beautify the file and add it to the PR

No need for this. Thanks for the explanations, and I didn't know about that sass limitation. LGTM. Thanks for your contribution.

@george-gca george-gca merged commit 9e59ab8 into alshedivat:master May 24, 2024
6 checks passed
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 <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>
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
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
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
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
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
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`
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Add Back To Top button
4 participants