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

Allow users to paste their own URLs #3

Open
FalkF opened this issue May 9, 2020 · 12 comments
Open

Allow users to paste their own URLs #3

FalkF opened this issue May 9, 2020 · 12 comments

Comments

@FalkF
Copy link

FalkF commented May 9, 2020

It would be cool to be able to insert any URL and have the site explain it.
Good work so far btw 👍

@theoparis
Copy link

I totally agree with this idea!

@theoparis
Copy link

theoparis commented May 9, 2020

Would adding the url to a query string be a good idea?
(like howurls.work?url=site.com)

i can see that the url field in the site is rendered as several span elements so im not sure how you would make it editable

Edit: I'm currently trying to figure it out

@theoparis
Copy link

theoparis commented May 11, 2020

Actually, how about a paste icon button? Like this:
image

I've been working on this in my fork, maybe you can approve it when i'm done. I think this would be my first time contributing to a project on GitHub.

@kettanaito
Copy link
Member

kettanaito commented May 11, 2020

@creepinson, a good point. I don't think the same component could be reused as an input for the custom URL. I like the idea of a query parameter, yet it would be great to be able to enter that URL as a part of site experience, what do you think? I'd absolutely love to review your changes once you're done :) Thanks.

When we receive a URL string, we can parse it via new URL(customUrl), and compose the same explanatory preview by accessing each individual piece (url.protocol, url.search).

My concern with such feature is in long URLs. How should we handle a URL that is too long? For example, an automatically generated URL, or the one with a lot of query parameters.

@theoparis
Copy link

theoparis commented May 11, 2020

Hmm, that's also a good polnt. I'm not sure what we should do about that yet.

@FalkF
Copy link
Author

FalkF commented May 11, 2020

I would favor just allowing the user to paste any length and insert a horizontal scroll around the whole explanation ui. I bet a few users would be disappointed if we cap it.

@theoparis
Copy link

I agree with this,. However, I tried to add this and the rectangle box around the url isn't long enough.
image

I'm not sure what to apply here.
image

@FalkF
Copy link
Author

FalkF commented May 11, 2020

If you could push your branch I or somebody else might be able to help ;)

@kettanaito
Copy link
Member

kettanaito commented May 11, 2020

@creepinson the current layout is not in its greatest in terms of handling horizontal overflow on big screens. I think the design itself needs to be redone in general. As much as I admire top/bottom asymmetric transitions of explanation blocks, they are failure-prone, as their dimensions are fixed, yet their content depends on the translations. It also puts quite a strict limitation over the amount of content that can be put into each section, limiting the otherwise more profound explanation.

I was thinking to always fix the URL preview part to the top and display the explanatory content at the bottom, as you can see on mobile right now. Without any absolute elements. This will require a few move-arounds in the layout, but is totally doable.

That being said, I think the #8 should be tackled first, eliminating quite a few current and future layout issues, so we can focus on URL pasting with a layout that can handle it. Doesn't mean we can't develop the actual functionality right now, just thinking out loud.

Do you find this a good idea? I'm curious to hear what you folks think.

@theoparis
Copy link

theoparis commented May 11, 2020

This sounds good. How will it handle long urls though? Like will it wrap or have a horizontal scroll bar?

@theoparis
Copy link

Ok, I made a fork because that's what I thought I was supposed to do. It still looks weird but I uploaded what I have so far. Here is the link to it:
https://github.com/creepinson/howurls.work

@FalkF
Copy link
Author

FalkF commented May 11, 2020

Forking is correct the way. Repos don't allow non members to create branches on default settings.

Making the UI more responsive before introducing the feature is probably the right move.
I can't really decide what I favor in terms of wrap or scroll, if I would code it I would just try both and keep the best or maybe offer a button to switch between both when the scrollbar appears.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants