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.

Sign up for GitHub

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

Jump to bottom

feat: back to top #386

Closed
wants to merge 12 commits into from
Closed

feat: back to top #386

wants to merge 12 commits into from

Conversation

ycmjason
Copy link
Contributor

@ycmjason ycmjason commented May 9, 2018 •
edited
Loading

Implemented #372

Well the icon looks a little bit funny, would be nice if some one could provide a better icon.

image

cc @ulivz @meteorlxy

@hmatalonga
Copy link
Contributor

Can I suggest, for example, checking out the great Steve Schoger icon sets like this one. They are free and in svg format for any styling needs 😄

@ulivz
Copy link
Member

ulivz commented May 10, 2018

Can we leverage more vue-styled back-to-top ? 😅

@ycmjason
Copy link
Contributor Author

@ulivz do you mean the actual appearance? Or is it the coding style? I edited the code a little bit which I think is nicer, tell me what you think 😄

@meteorlxy
Copy link
Member

@ycmjason I think @ulivz means ... the css style 🤣

@ycmjason
Copy link
Contributor Author

@meteorlxy @ulivz
If about css style, then I guess the style is definitely not finalised. I am waiting for an image input.

@leovafme
Copy link
Contributor

How about something like that?
example back top

preview: https://codepen.io/anon/pen/OZZZYa

@ulivz ulivz mentioned this pull request May 11, 2018
Closed
@meteorlxy
Copy link
Member

meteorlxy commented May 12, 2018 •
edited
Loading

@leovafme I like this.

Some suggestions (see https://codepen.io/meteorlxy/pen/oddJdZ):

  • Adding translateY(5px) to the arrow would be better.
  • Increase the border-radius. For example, to 20%

PS: Don't forget $accentColor on :hover 😄

@ycmjason
Copy link
Contributor Author

ycmjason commented May 12, 2018 •
edited
Loading

@leovafme @meteorlxy
Thanks guys! How about removing the frame?

@ycmjason
Copy link
Contributor Author

@leovafme @meteorlxy
Thanks for the suggestions! Using your inspirations, I created something similar and I think it integrate with the current theme quite nicely.

image

@meteorlxy
Copy link
Member

@ycmjason

Cool! I would vote this one as the final design 🎉

@ycmjason
Copy link
Contributor Author

@meteorlxy YEAHH!! I am such an artist! HAHA

@meteorlxy
Copy link
Member

Still need some tweaks~

@ycmjason
Copy link
Contributor Author

@meteorlxy should the arrow be in $borderColor instead of $textColor? Would it be better? Well I guess we need input from @ulivz

@meteorlxy
Copy link
Member

@ycmjason Snapshots wanted~

I would prefer $borderColor in my mind, but will it be too light?

@leovafme
Copy link
Contributor

@ycmjason @meteorlxy, and what if you use the variable $accentColor? maybe it would go well with the color theme
what do they say?

@ulivz ulivz added the 1.0.0 label May 13, 2018
@ulivz ulivz changed the title Back to top feat: back to top May 13, 2018
@o15a3d4l11s2
Copy link

I have added a sample inside the related task: #372 (comment)

@ycmjason
Copy link
Contributor Author

@o15a3d4l11s2 thanks.

I guess I will just wait for the input from @ulivz before changing anything.

@ulivz
Copy link
Member

ulivz commented May 29, 2018

This design looks good to me, Thanks!

@o15a3d4l11s2 @ycmjason could you both work together to complete it?

@ycmjason
Copy link
Contributor Author

@o15a3d4l11s2 can you please provide the image for the arrow? SVG or PNG? So that I could add it? Also should we use the green one or the upside down Vue one? I prefer the green one personally, but we can try both.

@m5o
Copy link

m5o commented Jul 15, 2018 •
edited
Loading

https://icons8.com/icon/pack/arrows/all Is my primary icon source. Use it for inspiration

If its only the arrow, just pure css could be an alternative?
https://www.w3schools.com/howto/howto_css_arrows.asp

@ulivz ulivz force-pushed the master branch 4 times, most recently from 0c3bc3a to cf1e6fc Compare July 28, 2018 08:12
@ulivz
Copy link
Member

ulivz commented Aug 12, 2018

@ycmjason Thanks for the great work, now I make it as a plugin here.

@ulivz ulivz added version: next Planned to do or already included in the next(1.0.0) version plugin scope labels Aug 12, 2018
@ycmjason
Copy link
Contributor Author

@ulivz amazing. should we close this?

@meteorlxy
Copy link
Member

@ycmjason welcome back jason 😃

My slack account on vuepress workspace is deactivated and I could not access it... 😅

@ycmjason
Copy link
Contributor Author

@meteorlxy

Ya my account is deactivated as well. I wanted to find you but I couldn't. Should we open another channel to communicate?

@ulivz ulivz removed 1.0.0 labels Aug 20, 2018
@ulivz ulivz force-pushed the master branch 2 times, most recently from bd69d41 to 903138e Compare October 3, 2018 22:21
@ulivz ulivz force-pushed the master branch 2 times, most recently from 3f79224 to fb05066 Compare October 23, 2018 15:09
@ulivz ulivz force-pushed the master branch 3 times, most recently from 6c3127f to 71574f2 Compare December 18, 2018 18:27
@ulivz ulivz force-pushed the master branch 5 times, most recently from 316e022 to 1284944 Compare January 29, 2019 11:47
@ulivz ulivz closed this Mar 13, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers
No reviews
Assignees
No one assigned
Labels
version: next Planned to do or already included in the next(1.0.0) version
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
7 participants
@ycmjason @hmatalonga @ulivz @meteorlxy @leovafme @o15a3d4l11s2 @m5o