-
Notifications
You must be signed in to change notification settings - Fork 11k
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
Add Back To Top button #2425
Comments
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>
@george-gca Thanks for your time to review my commit code. My PR has been merge into master #2427. I will close this issue. |
@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.
|
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>
@george-gca hi, #2433 have some optimzation, will you review @abhilesh codes? Thanks. |
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`
* 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>
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](alshedivat/al-folio#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`
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>
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`
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](alshedivat/al-folio#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`
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>
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`
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>
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`
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](alshedivat/al-folio#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`
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>
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`
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>
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`
Have you checked that your feature request isn't already filed?
Description & Motivation
Add back to top button for post.
Some example:
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.
The text was updated successfully, but these errors were encountered: