search

gokarna-theme / gokarna-hugo

A minimal opinionated theme for Hugo
https://gokarna-hugo.netlify.app
GNU General Public License v3.0
378 stars 146 forks source link

fixed #155: back to top button #197

Closed mansoorbarri closed 1 year ago

mansoorbarri commented 1 year ago

Fixes #155

Screenshot: image

netlify[bot] commented 1 year ago

Deploy Preview for gokarna-hugo ready!

Name Link
Latest commit d8db2565cab5df2ff959a7db58c694f141327795
Latest deploy log https://app.netlify.com/sites/gokarna-hugo/deploys/654295ae77720a0008eb12ff
Deploy Preview https://deploy-preview-197--gokarna-hugo.netlify.app
Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

yashmehrotra commented 1 year ago

@mansoorbarri Thanks for the PR

Can you also:

  1. Feature gate it with the ShowBackToTopButton param
  2. Add the feature in theme-basic-documentation
mansoorbarri commented 1 year ago

@mansoorbarri Thanks for the PR

Can you also:

  1. Feature gate it with the ShowBackToTopButton param
  2. Add the feature in theme-basic-documentation

added

mansoorbarri commented 1 year ago

appreciate the feedback. Please have a look now

526avijitgupta commented 1 year ago

@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"

yashmehrotra commented 1 year ago

Yeah, we should either pad it in way it does not come over text or disable it for mobile

image

mansoorbarri commented 1 year ago

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.

Dark Light
image image

preview: https://gokarna.mansoorbarri.com

526avijitgupta commented 1 year ago

@mansoorbarri Thanks for making the changes. In the current state the button looks okay, but we can certainly make it more visually appealing by making it match the site theme (light/dark).

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).

Screenshot_20231026-233909.png

Screenshot_20231026-233934.png

526avijitgupta commented 1 year ago

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 :)

mansoorbarri commented 1 year ago

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: Dark Light
image image
mansoorbarri commented 1 year ago

we can also make it a bit opaque but if you have any other ideas, do let me know.

yashmehrotra commented 1 year ago

@mansoorbarri @526avijitgupta

I think we should disable this on mobile and create a different issue to track that till we come up with a better design. Lets try to get this PR merged with mobile disabled

What do you all think ?

mansoorbarri commented 1 year ago

I agree

mansoorbarri commented 1 year ago

the most we can do is move the button a bit towards right but it still comes over some of the page content: image

yashmehrotra commented 1 year ago

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:

  1. Disable it for mobile
  2. Add background color with arrow with just the inverted v
526avijitgupta commented 1 year ago

@mansoorbarri @526avijitgupta

I think we should disable this on mobile and create a different issue to track that till we come up with a better design.

@yashmehrotra Agreed!

mansoorbarri commented 1 year ago

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:

  1. Disable it for mobile
  2. Add background color with arrow with just the inverted v

added! preview at https://gokarna.mansoorbarri.com

yashmehrotra commented 1 year ago

image

Can we make the padding in such a way that the V is in the middle, right now its left-centered

mansoorbarri commented 1 year ago

I tried multiple changes to the CSS code however it still stays left aligned, the svg doesn't have a seperate div so I don't know why it shows up like that

yashmehrotra commented 1 year ago

@mansoorbarri Doing padding-right: 8px makes it look like its at the centre Also, lets make this a complete circle

mansoorbarri commented 1 year ago

@yashmehrotra all changes are made, preview: https://gokarna.mansoorbarri.com/

yashmehrotra commented 1 year ago

@mansoorbarri Looks good

@526avijitgupta Should we merge this PR now ?