Move Homepage, Documentation, and Repository links on a crate's page up

[carols10cents]

Or maybe just duplicate for now, since people might be used to having the links where they are.

Problem

Currently, on a crate page like https://crates.io/crates/hyper, you have to scroll to get to the very useful links to things like the homepage, docs, repo, etc. I'm zoomed in here to be able to show the links I mean and how far down they are currently:

Solution

In order to make these links easier to see and faster to access, I'm thinking we could move them into the crate header, which would look similar to the search results list of crates:

I think this could be done by copying this quick links div and pasting it in the crates-heading div and then transferring and tweaking the styles as appropriate.

@vadimcn, is this along the lines of what you were thinking?

Potential implementors: please let me know if you have any questions about working on this!

[sgrif]

The space that the links occupy currently might be a good place to show available features, which you currently have to go look at the Cargo.toml to find out.

[juleskers]

Seeing this is something that I personally keep running into, I wouldn't mind taking a stab at it.

I've done webdev in java and groovy so far, and have been trying my hand at rust for a while now, no rust-webdev yet, though..

My main worry is that I have zero clue how I would do this from a logistics perspective. I assume I Fork this repo, and copy the changes you suggested. But then what? How can I (locally) test what it looks like? Is there a Test-Server i can spin up on localhost or something?

[juleskers]

Ah, I see my exact question is explained, in detail, in the README. I should have expected excellent docs if carol is involved ;-)

[carols10cents]

@juleskers Yes, this task should only involve the frontend, so you should be able to follow the "Working on the frontend" directions in the readme and only need to run yarn run start:live to run a frontend locally that uses the live crates.io site as a backend :) So unfortunately this still won't be getting you into rust webdev that much yet!!! Maybe next bug :) :) :) ;)

[juleskers]

Well, gotta slowly work myself up to it :-) Debugging my wifi, updating node, getting yarn etc. already took long enough; but I'm happy to report I now have the yarn run start:staging working. Progress!

[juleskers]

More progress! Literally copying the suggested quicklinks div into the crate header looks like this:

I'm going to leave it at that for now, $DAYJOB calls. Let me know if this will suffice, or if you'd prefer the horizontal layout you initally suggested. I wouldn't mind fiddling some more, so don't be shy!

Also, are there any other things I should update to reflect this? tests? docs?

[juleskers]

Excited to be learning about the CSS flex layout.. This layout tuning may take a while :-D

[juleskers]

More progress:

I'm having trouble to make the quick-links section appear on a new line of its own. Specifying width like the search-results do doesn't seem to work, so I'm obviously missing something...

I currently inserted an extra <div> to make it start a new block. I'm certain there are better solutions, but without this additional div, the quick-links div keeps adding itself to the right of the (un)follow section. Seems my css-flex-fu needs more FU :smile:

Preliminary diff.

Please comment if I'm on the right track.. I'm pretty sure the hardcoded style="width: 100%" is not good style. :smile:

[carols10cents]

Adding an extra div seems fine to me! And yeah, everything except the style attribute looks great :)

[juleskers]

Updated, could even be ready for merge! (Let's see what Travis says...)

[juleskers]

Since Carol deployed PR #668, can we close this?

[kureuil]

@juleskers It would seem that since #668 was deployed, the follow button is not aligned anymore with the crate name when you're logged in, making the crate header a little big

[juleskers]

D'oh, how embarrassing that I overlooked that! It's bed time here, but I'll try and have a look tomorrow morning. I won't be offended if someone beats me to it, but I believe I should clean up my own mess...

[carols10cents]

Whoops I should have caught that too! I'm going to leave this bug open for now to track that issue :)

[juleskers]

Fix underway! my conscience wouldn't let me sleep like this

[juleskers]

There, that should do it! (PR #670 ) I failed to account for flex attributes stopping at each child level. The extra div I had to introduce therefore messed up the layout. A quick copy-paste of the relevant flex-attributes from #crates-heading into the new .wide css-class should fix that.

I did a cursory check by forcing the button to show*, and it looks OK now. However, since this is a hurried "emergency fix", please take extra care in reviewing it!

* I haven't figured out how to "log-in with github" to the staging environment. Some error shows up in the log-in popup and disappears before I can read it. I don't have an account on the live environment, and even if I had, I daren't test in the production environment. (That has bitten me, and 200 of our then-clients, before)

[carols10cents]

I haven't figured out how to "log-in with github" to the staging environment. Some error shows up in the log-in popup and disappears before I can read it. I don't have an account on the live environment, and even if I had, I daren't test in the production environment. (That has bitten me, and 200 of our then-clients, before)

Yeah, I think because of the way oauth works, the only way to be logged in locally is to make a github application, specify the client id and secret id in .env, and run the backend :-/ I just made #671 to figure out a nicer way we can do this!

I'll close this in a few once i've deployed this and tested in production verified :)

[carols10cents]

Deployed and everything looks good! @juleskers are you on twitter? :3

[juleskers]

I love it when a spontaneous hackplan comes together!

Nope, no twitter for me.. only github and users.rust-lang.