fixed #155: back to top button #197
Conversation
✅ Deploy Preview for gokarna-hugo ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
|
@mansoorbarri Thanks for the PR Can you also:
|
added |
There was a problem hiding this comment.
Hi @mansoorbarri thanks for submitting the PR. This feature would be quite useful :)
While the feature currently works, it abruptly takes the user to the top of the page. I would prefer if there is a smooth srolling to the top of the page. What I mean is it should work similar to how clicking on an item in the Table of Contents (on the right side of the page) works. @yashmehrotra wdyt?
Here's a code reference of how to smooth scrolling is implemented currently: https://github.com/526avijitgupta/gokarna/blob/be5611d4f02d679b43e869c1a542ecbf84f0febc/assets/js/main.js#L68C1-L78C2
assets/css/main.css
Outdated
| display: none; /* Hidden by default */ | ||
| position: fixed; /* Fixed/sticky position */ | ||
| bottom: 20px; /* Place the icon at the bottom of the page */ | ||
| right: 30px; /* Place the icon 30px from the right */ | ||
| z-index: 99; /* Make sure it does not overlap */ | ||
| background-color: transparent; /* Remove the background color */ | ||
| color: var(--accent-color); /* Icon color */ | ||
| cursor: pointer; /* Add a mouse pointer on hover */ | ||
| padding: 10px; /* Adjust the padding as needed */ | ||
| border-radius: 50%; /* Make it a circle */ | ||
| font-size: 24px; /* Increase font size */ |
There was a problem hiding this comment.
- please remove comments
- use z-index
5(to match thez-indexvalue of header element) - order alphabetically
.arrow-logo {
background-color: transparent;
border-radius: 50%;
bottom: 20px;
color: var(--accent-color);
cursor: pointer;
display: none;
font-size: 24px;
padding: 10px;
position: fixed;
right: 30px;
z-index: 5;
}
|
appreciate the feedback. Please have a look now |
There was a problem hiding this comment.
LGTM 👍🏽
@526avijitgupta Can you have a final look and merge this ?
|
@mansoorbarri This seems to break on mobile. . Could you please double check on your side and fix it before we merge? Otherwise if someone builds Gokarna on the latest version and tries to use it on mobile screens it wouldn't be a good user experience for them Also, let's use an icon which doesn't have a vertical line at at all. Basically, similar to an inverted "V" |
|
Yeah, we should either pad it in way it does not come over text or disable it for mobile
|
|
I find this a bit alright but removing the button on mobile is probably the best option in my opinion. Do let me know what you would like.
preview: https://gokarna.mansoorbarri.com |
|
@mansoorbarri Thanks for making the changes. I was browsing Hugo themes and came across this as an example: https://hugoloveit.com/emoji-support/# Notice how the button's color and background color matches the current theme (light/dark).
|
|
Basically, what I mean is the blue background color on the back to top button looks a little out of place IMO. Simply changing that to match the light/dark theme should also be enough :) |
|
definitely, my first idea was to make it the same colour as code blocks on the website but I wasn't sure about that. preview: https://gokarna.mansoorbarri.com they look something like this:
|
|
we can also make it a bit opaque but if you have any other ideas, do let me know. |
|
I think we should disable this on mobile and create a different issue to track that till we come up with a better design. What do you all think ? |
|
I agree |
|
the most we can do is move the button a bit towards right but it still comes over some of the page content: |
@mansoorbarri Yeah, that is why I don't want to add this in mobile till we come up with a better solution But I like adding a background color with the arrow Lets:
|
@yashmehrotra Agreed! |
added! preview at https://gokarna.mansoorbarri.com |
|
Can we make the padding in such a way that the V is in the middle, right now its left-centered |
|
I tried multiple changes to the CSS code however it still stays left aligned, the |
assets/css/main.css
Outdated
| right: 20px; | ||
| z-index: 5; | ||
| background-color: var(--light-tertiary-color); | ||
| border-radius: 10px; |
There was a problem hiding this comment.
Border radius is twice, lets make this a complete circle
|
@mansoorbarri Doing |
|
@yashmehrotra all changes are made, preview: https://gokarna.mansoorbarri.com/ |
|
@mansoorbarri Looks good @526avijitgupta Should we merge this PR now ? |
Fixes #155
Screenshot:
