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

aio + api/docs: header "link" icons overwrite other visual elements #22131

Closed
petebacondarwin opened this issue Feb 9, 2018 · 12 comments
Closed

aio + api/docs: header "link" icons overwrite other visual elements #22131

petebacondarwin opened this issue Feb 9, 2018 · 12 comments
Assignees
@jenniferfell
Milestone
needsTriage

Comments

@petebacondarwin
Copy link
Member

petebacondarwin commented Feb 9, 2018 •
edited

In #21874 (comment) @gkalpak noted:

The .header-link that appears when hovering over the main doc heading is overlaid onto the badge.

image
@petebacondarwin petebacondarwin added this to Docs/API in docs-infra Feb 9, 2018
@petebacondarwin
Copy link
Member Author

The .header-link that appears when hovering over the heading does not blend well with the card border.

image

@petebacondarwin
Copy link
Member Author

image

@sjtrimble
Copy link
Contributor

@IgorMinar thoughts?

Page Title (API Name)
Option 1: Remove anchor link
Option 2: Move labels to the right of title text

  • I think option 2 will work best as the number of labels varies per API and will fix the anchor link and header after issues.

Headings in Tables Formatting
Option 1: Remove anchor link for API pages
Option 2: Shift text over for anchor to fit upon hover (see GIF below)
anchorlink-shift

We can consider other options if these don't work.

@gkalpak
Copy link
Member

gkalpak commented Feb 10, 2018

I generally find the ability to link to specific methods useful (I've used them extensively when answering AngularJS questions on StackOverflow, Gitter, etc 😁).
I can live with having the name jump around as you hover over it, but that is not ideal.

How about we place the link icon on the right for headings inside tables? (This is the same we do for all headings on narrow screens btw.)

@sjtrimble
Copy link
Contributor

sjtrimble commented Feb 22, 2018 •
edited

Option 1: Moving them to the right of the class name as we had originally (I would recommend this)
labels-alternative2

Option 2: Moving them underneath the header element
labels-alternative1

As always, we can explore additional options.

@IgorMinar

@petebacondarwin
Copy link
Member Author

Moving the badges only solves the problem for this instance. There are other situations where the heading is within a container and the link partially "falls outside" the container. E.g. #22131 (comment)

@petebacondarwin
Copy link
Member Author

@sjtrimble I think you meant your comment to go on #22130 ??

@sjtrimble
Copy link
Contributor

@petebacondarwin I sure did. Should I delete and add over there? :/

@sjtrimble
Copy link
Contributor

On this thread ... are we okay just removing the link visual for these API pages?

@petebacondarwin
Copy link
Member Author

I am not OK with removing the link visual. Sorry :-)
I think we should simply move the anchor to "after" the heading (i.e. the RHS for L to R text).

@sjtrimble
Copy link
Contributor

@petebacondarwin Fair enough, just want to make sure I understand the limitations :)

@gkalpak gkalpak mentioned this issue Feb 25, 2018
Closed
petebacondarwin added a commit to petebacondarwin/angular that referenced this issue Feb 26, 2018
@petebacondarwin
build(aio): render heading anchors on the right
e7845d6 
This approach simplifies the styling needed considerably.
Previously, we had to make room on the left for heading that
are in visual containers. Also we had to apply a `float:right`
when on narrow screens as the gutter not available then.
This float didn't render nicely if the heading text was longer
than could be rendered on a single line.

Closes angular#22131
@petebacondarwin petebacondarwin moved this from Docs/API to REVIEW in docs-infra Feb 26, 2018
@petebacondarwin petebacondarwin mentioned this issue Feb 26, 2018
Closed
@ngbot ngbot bot added this to the needsTriage milestone Feb 26, 2018
petebacondarwin added a commit to petebacondarwin/angular that referenced this issue Feb 27, 2018
@petebacondarwin
build(aio): render heading anchors on the right
672a027 
This approach simplifies the styling needed considerably.
Previously, we had to make room on the left for heading that
are in visual containers. Also we had to apply a `float:right`
when on narrow screens as the gutter not available then.
This float didn't render nicely if the heading text was longer
than could be rendered on a single line.

Closes angular#22131
@petebacondarwin petebacondarwin moved this from REVIEW to MERGE in docs-infra Feb 27, 2018
@petebacondarwin petebacondarwin removed this from MERGE in docs-infra Feb 28, 2018
smdunn pushed a commit to smdunn/angular that referenced this issue Feb 28, 2018
@petebacondarwin @smdunn809
build(aio): render heading anchors on the right
5a56af8 
This approach simplifies the styling needed considerably.
Previously, we had to make room on the left for heading that
are in visual containers. Also we had to apply a `float:right`
when on narrow screens as the gutter not available then.
This float didn't render nicely if the heading text was longer
than could be rendered on a single line.

Closes angular#22131
leo6104 pushed a commit to leo6104/angular that referenced this issue Mar 25, 2018
@petebacondarwin @leo6104
build(aio): render heading anchors on the right
435d48f 
This approach simplifies the styling needed considerably.
Previously, we had to make room on the left for heading that
are in visual containers. Also we had to apply a `float:right`
when on narrow screens as the gutter not available then.
This float didn't render nicely if the heading text was longer
than could be rendered on a single line.

Closes angular#22131
@angular-automatic-lock-bot
Copy link

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

This action has been performed automatically by a bot.

@angular-automatic-lock-bot angular-automatic-lock-bot bot locked and limited conversation to collaborators Sep 13, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees

@jenniferfell jenniferfell

Labels
None yet
Projects
None yet
Milestone
needsTriage
Development

Successfully merging a pull request may close this issue.

aio + api: render heading anchors on the right petebacondarwin/angular
4 participants
@petebacondarwin @sjtrimble @gkalpak @jenniferfell