Addons-frontend: Discuss the treatment of long homepage URLS

Created on 2 May 2018  路  12Comments  路  Source: mozilla/addons-frontend

A PR was put up to truncate the long URL with an ellipsis to fix the long homepage URL:

screen shot 2018-04-20 at 11 03 42 pm

Rather than do this I'm wondering if we should instead just link the word homepage so that we don't have a truncated string at all. A link's href doesn't need to be visible on the page afterall.

@pwalm thoughts?

add-on ux assigned good first bug mentor assigned p3 S verified fixed triaged papercut

All 12 comments

Yeah, I prefer a linked "Homepage" as well. Let's do that.

Thanks @pwalm. Just wondering, how would this look? The current page uses a format where we have a label (with a lighter font) with a value underneath it (see "User since" and "Number of add-ons" in the image above). Would we just keep the "Homepage" label, with the lighter font, and not have any value underneath it, or do you envision something different from that?

"Home page" should just be the link.

Ok, just to confirm, because I'm dense, for Homepage, there will be no label, and all that will appear is the word "Homepage" which will look like the link in the example above. Is that correct?

Yes, correct. It's either this or we show the whole URL.

OR

We could provide a title field and an url field. So the use could enter both, we'd have a nice url title link with a subhead of "Home page".

OR

Is there a way the user can enter and URL and we can grab the ?</p> </div> <div class="card-footer"> <div class="row"> <div class="col"> <img src="https://avatars.githubusercontent.com/u/6797635?v=4&s=40" style="width:20px; height:20px;" class="mr-2 rounded float-left" alt="pwalm picture"> <strong>pwalm</strong> <span class="text-muted ml-1">on 30 May 2018</span> </div> <div class="col text-right"> </div> </div> </div> </div> <div class="mb-4"> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-3835332123789605" data-ad-slot="3731713875" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> <div class="card card-custom mb-4"> <div class="card-body pt-3 pb-3 markdown"> <p>We're going with the "Homepage" label to keep things simple.</p> <p>Mentor: <strong>@bobsilverberg</strong> </p> </div> <div class="card-footer"> <div class="row"> <div class="col"> <img src="https://avatars.githubusercontent.com/u/62568?v=4&s=40" style="width:20px; height:20px;" class="mr-2 rounded float-left" alt="jvillalobos picture"> <strong>jvillalobos</strong> <span class="text-muted ml-1">on 15 May 2019</span> </div> <div class="col text-right"> </div> </div> </div> </div> <div class="card card-custom mb-4"> <div class="card-body pt-3 pb-3 markdown"> <p>I'd like to take up this issue. My first contribution here. <strong>@willdurand</strong> </p> </div> <div class="card-footer"> <div class="row"> <div class="col"> <img src="https://avatars.githubusercontent.com/u/6454853?v=4&s=40" style="width:20px; height:20px;" class="mr-2 rounded float-left" alt="robertdudaa picture"> <strong>robertdudaa</strong> <span class="text-muted ml-1">on 16 May 2019</span> </div> <div class="col text-right"> </div> </div> </div> </div> <div class="card card-custom mb-4"> <div class="card-body pt-3 pb-3 markdown"> <p><strong>@robertdudaa</strong> go for it :)</p> </div> <div class="card-footer"> <div class="row"> <div class="col"> <img src="https://avatars.githubusercontent.com/u/217628?v=4&s=40" style="width:20px; height:20px;" class="mr-2 rounded float-left" alt="willdurand picture"> <strong>willdurand</strong> <span class="text-muted ml-1">on 16 May 2019</span> </div> <div class="col text-right"> 👍<span class="ml-2 mr-3">1</span> </div> </div> </div> </div> <div class="card card-custom mb-4"> <div class="card-body pt-3 pb-3 markdown"> <p><strong>@robertdudaa</strong> thank you for your first contribution! 馃帀 /cc <strong>@caitmuenster</strong> </p> </div> <div class="card-footer"> <div class="row"> <div class="col"> <img src="https://avatars.githubusercontent.com/u/217628?v=4&s=40" style="width:20px; height:20px;" class="mr-2 rounded float-left" alt="willdurand picture"> <strong>willdurand</strong> <span class="text-muted ml-1">on 20 May 2019</span> </div> <div class="col text-right"> </div> </div> </div> </div> <div class="card card-custom mb-4"> <div class="card-body pt-3 pb-3 markdown"> <p><strong>@pwalm</strong> - I verified on AMO dev with FF66(Win10). </p> <blockquote> <p>"Home page" should just be the link.</p> </blockquote> <p>So from the discussions above I understood that the light grey Homepage should no longer be there.<br /> Can you confirm please?</p> <p><img loading="lazy" src="https://user-images.githubusercontent.com/33448286/58105170-b9bb3f00-7bee-11e9-8186-d6f5e42a6a3c.gif" alt="homepage twice" /></p> </div> <div class="card-footer"> <div class="row"> <div class="col"> <img src="https://avatars.githubusercontent.com/u/33448286?v=4&s=40" style="width:20px; height:20px;" class="mr-2 rounded float-left" alt="ioanarusiczki picture"> <strong>ioanarusiczki</strong> <span class="text-muted ml-1">on 21 May 2019</span> </div> <div class="col text-right"> </div> </div> </div> </div> <div class="card card-custom mb-4"> <div class="card-body pt-3 pb-3 markdown"> <p><strong>@ioanarusiczki</strong> in the recent comments, I see:</p> <blockquote> <p>We're going with the "Homepage" label to keep things simple.</p> </blockquote> </div> <div class="card-footer"> <div class="row"> <div class="col"> <img src="https://avatars.githubusercontent.com/u/217628?v=4&s=40" style="width:20px; height:20px;" class="mr-2 rounded float-left" alt="willdurand picture"> <strong>willdurand</strong> <span class="text-muted ml-1">on 21 May 2019</span> </div> <div class="col text-right"> 👍<span class="ml-2 mr-3">1</span> </div> </div> </div> </div> <div class="card card-custom mb-4"> <div class="card-body pt-3 pb-3 markdown"> <p><strong>@willdurand</strong> Oh ok, so this means that the label is kept <code>Homepage</code> - that's the light grey. And below it's the link named also <code>Homepage</code> as it's displayed above which further means why the merged issue says </p> <blockquote> <p>Kept the lightgray 'Homepage' label, as discussed in #4916</p> </blockquote> </div> <div class="card-footer"> <div class="row"> <div class="col"> <img src="https://avatars.githubusercontent.com/u/33448286?v=4&s=40" style="width:20px; height:20px;" class="mr-2 rounded float-left" alt="ioanarusiczki picture"> <strong>ioanarusiczki</strong> <span class="text-muted ml-1">on 21 May 2019</span> </div> <div class="col text-right"> 👍<span class="ml-2 mr-3">1</span> </div> </div> </div> </div> </div> <div class="col-12"> <div class="card card-custom mb-4"> <div class="card-body pt-3 pb-3 markdown text-center helpful"> <div class="title">Was this page helpful?</div> <div class="mt-1" onMouseLeave="rating(319650875, 0);"> <i class="fas fa-star inactive" id="star-1" onMouseOver="rating(319650875, 1);" onclick="rate(319650875, 1);"></i> <i class="fas fa-star inactive" id="star-2" onMouseOver="rating(319650875, 2);" onclick="rate(319650875, 2);"></i> <i class="fas fa-star inactive" id="star-3" onMouseOver="rating(319650875, 3);" onclick="rate(319650875, 3);"></i> <i class="fas fa-star inactive" id="star-4" onMouseOver="rating(319650875, 4);" onclick="rate(319650875, 4);"></i> <i class="fas fa-star inactive" id="star-5" onMouseOver="rating(319650875, 5);" onclick="rate(319650875, 5);"></i> </div> <div class="description text-small"><span id="rating-val">0</span> / 5 - <span id="rating-count">0</span> ratings</div> </div> </div> <div class="mb-4"> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-3835332123789605" data-ad-slot="3452512275" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> </div> </div> </div> <div class="col-12 col-lg-4"> <div id="ph-above-related"></div> <div class="card card-custom issue-box"> <div class="card-body pt-3 pb-5"> <h2 class="mb-4">Related issues</h2> <div> <strong> <a href="/addons-frontend/369570684/delete-and-cancel-buttons-are-not-separated">Delete and Cancel buttons are not separated</a> </strong> </div> <div class="text-muted text-small mt-2"> <img src="https://avatars.githubusercontent.com/u/33448286?v=4&s=40" style="width:20px; height:20px;" class="mr-2 rounded float-left" alt="ioanarusiczki picture"> <strong class="pr-1" dir="ltr">ioanarusiczki</strong>  路  <span class="px-1" dir="ltr">5</span><span>Comments</span> </div> <hr /> <div> <strong> <a href="/addons-frontend/392415531/specified-version-of-node-in-nvmrc-is-incorrect">Specified version of Node in .nvmrc is incorrect</a> </strong> </div> <div class="text-muted text-small mt-2"> <img src="https://avatars.githubusercontent.com/u/13009507?v=4&s=40" style="width:20px; height:20px;" class="mr-2 rounded float-left" alt="SeanPrashad picture"> <strong class="pr-1" dir="ltr">SeanPrashad</strong>  路  <span class="px-1" dir="ltr">6</span><span>Comments</span> </div> <hr /> <div> <strong> <a href="/addons-frontend/338204142/display-name-will-appear-cut-when-is-longer-than-25-chars-on">Display name will appear cut when is longer than 25 chars on the user profile page</a> </strong> </div> <div class="text-muted text-small mt-2"> <img src="https://avatars.githubusercontent.com/u/33448286?v=4&s=40" style="width:20px; height:20px;" class="mr-2 rounded float-left" alt="ioanarusiczki picture"> <strong class="pr-1" dir="ltr">ioanarusiczki</strong>  路  <span class="px-1" dir="ltr">5</span><span>Comments</span> </div> <hr /> <div> <strong> <a href="/addons-frontend/547673780/warn-amo-users-when-visiting-the-site-with-fenix">Warn AMO users when visiting the site with Fenix</a> </strong> </div> <div class="text-muted text-small mt-2"> <img src="https://avatars.githubusercontent.com/u/142755?v=4&s=40" style="width:20px; height:20px;" class="mr-2 rounded float-left" alt="bobsilverberg picture"> <strong class="pr-1" dir="ltr">bobsilverberg</strong>  路  <span class="px-1" dir="ltr">4</span><span>Comments</span> </div> <hr /> <div> <strong> <a href="/addons-frontend/279151367/implement-yellow-stars-for-user-s-add-on-rating">Implement yellow stars for user's add-on rating</a> </strong> </div> <div class="text-muted text-small mt-2"> <img src="https://avatars.githubusercontent.com/u/55398?v=4&s=40" style="width:20px; height:20px;" class="mr-2 rounded float-left" alt="kumar303 picture"> <strong class="pr-1" dir="ltr">kumar303</strong>  路  <span class="px-1" dir="ltr">6</span><span>Comments</span> </div> </div> </div> <div class="sticky-top pt-4"> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-3835332123789605" data-ad-slot="3919948963" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> <div id="ph-below-related-2" class="mt-4"> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-3835332123789605" data-ad-slot="3919948963" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> </div> </div> <div class="col-12 col-lg-4"> </div> </div> <div class="skyscraper-container"> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-3835332123789605" data-ad-slot="7879185320" data-ad-format="vertical" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> </div> <div class="mt-5 spacer"></div> <footer class="mt-5 pb-2 py-4 text-center mt-auto"> <div class="container"> <a class="navbar-brand logo mr-5" href="/"> <img src="/assets/img/logo.svg" width="40" height="40" alt="bleepingcoder logo"> bleeping<strong>coder</strong> </a> <div class="mt-4"> bleepingcoder.com uses publicly licensed GitHub information to provide developers around the world with solutions to their problems. We are not affiliated with GitHub, Inc. or with any developers who use GitHub for their projects. We do not host any of the videos or images on our servers. All rights belong to their respective owners. </div> <div> Source for this page: <a href="https://www.github.com/mozilla/addons-frontend/issues/4916" rel="nofollow noreferrer" target="_blank">Source</a> </div> </div> <hr class="mb-5 mt-5"> <div class="container"> <div class="row"> <div class="col-sm-4 col-lg mb-sm-0 mb-5"> <strong>Popular programming languages</strong> <ul class="list-unstyled mb-0 mt-2"> <li class="mb-2"> <a href="/python" dir="ltr">Python</a> </li> <li class="mb-2"> <a href="/javascript" dir="ltr">JavaScript</a> </li> <li class="mb-2"> <a href="/typescript" dir="ltr">TypeScript</a> </li> <li class="mb-2"> <a href="/cpp" dir="ltr">C++</a> </li> <li class="mb-2"> <a href="/csharp" dir="ltr">C#</a> </li> </ul> </div> <div class="col-sm-4 col-lg mb-sm-0 mb-5"> <strong>Popular GitHub projects</strong> <ul class="list-unstyled mb-0 mt-2"> <li class="mb-2"> <a href="/microsoft/vscode" dir="ltr">vscode</a> </li> <li class="mb-2"> <a href="/numpy/numpy" dir="ltr">numpy</a> </li> <li class="mb-2"> <a href="/ant-design/ant-design" dir="ltr">ant-design</a> </li> <li class="mb-2"> <a href="/mui-org/material-ui" dir="ltr">material-ui</a> </li> <li class="mb-2"> <a href="/vercel/next-js" dir="ltr">next.js</a> </li> </ul> </div> <div class="col-sm-4 col-lg mb-0"> <strong>More GitHub projects</strong> <ul class="list-unstyled mb-0 mt-2"> <li class="mb-2"> <a href="/rust-lang/rust" dir="ltr">rust</a> </li> <li class="mb-2"> <a href="/moment/moment" dir="ltr">moment</a> </li> <li class="mb-2"> <a href="/yarnpkg/yarn" dir="ltr">yarn</a> </li> <li class="mb-2"> <a href="/mozilla/pdf-js" dir="ltr">pdf.js</a> </li> <li class="mb-2"> <a href="/JuliaLang/julia" dir="ltr">julia</a> </li> </ul> </div> </div> </div> <hr class="mb-5 mt-5"> <div class="container text-muted"> 漏 2026 bleepingcoder.com - <a href="/bleeps" rel="nofollow">Contact</a><br /> By using our site, you acknowledge that you have read and understand our <a href="/cookies" rel="nofollow">Cookie Policy</a> and <a href="/privacy" rel="nofollow">Privacy Policy</a>. </div> </footer> <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha256-4+XzXVhsDmqanXGHaHvgh1gMQKX40OUvDEBTu8JcmNs=" crossorigin="anonymous"></script> <script async src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script> <!--<script defer type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-5fb2db66acbd74b2"></script>--> <script type="text/javascript" src="/assets/js/main.js"></script> <script src="https://cdn.jsdelivr.net/gh/google/code-prettify@master/loader/run_prettify.js"></script></body> </html>