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

Fix line height spacing for multiline code elements #162

Merged
merged 3 commits into from
Nov 25, 2019
Merged

Fix line height spacing for multiline code elements #162

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
fc2afbe
Increase line-height for <code> in <td>s
tombye Nov 15, 2019
b95449f
Add CHANGELOG entry for pull request #162
tombye Nov 19, 2019
31f551f
Add example of `<code>` in `<table>`
tombye Nov 21, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 7 additions & 0 deletions CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,15 @@

## Unreleased

### Fixes

- [Pull request #162: Fix line height spacing for multiline code elements](https://github.com/alphagov/tech-docs-gem/pull/162)
- [Pull request #165: Update header alignment to match layout](https://github.com/alphagov/tech-docs-gem/pull/165)

## 2.0.10
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This needs rebasing and adding to the 'fixes' section of the unreleased stuff

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Happy to do this for you if you want

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Tom said he was happy for me to get this sorted


### Fixes

- [Pull request #160: Make sure IDs on collapsible navigation are unique](https://github.com/alphagov/tech-docs-gem/pull/160)

## 2.0.9
Expand Down
31 changes: 30 additions & 1 deletion example/source/code.html.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,35 @@ A paragraph with a `code` element within it.

<a href="#"><code>code element within a link</code></a>

An example of a table with a `code` element within it.

<div class="table-container">
<table>
<thead>
<tr>
<th style="text-align:left">httpResult</th>
<th style="text-align:left">Message</th>
<th style="text-align:left">How to fix</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align:left"><code>400</code></td>
<td style="text-align:left">
<code>[{</code>
<br />
<code>"error": "BadRequestError",</code>
<br />
<code>"message": "Can't send to this recipient using a team-only API key"</code>
<br />
<code>]}</code>
</td>
<td style="text-align:left">Use the correct type of API key</td>
</tr>
</tbody>
</table>
</div>

An example of a code block with a long line length

```ruby
Expand All @@ -32,4 +61,4 @@ An example of a code block with a short length
```ruby
RSpec.describe ContentItem do
end
```
```
2 changes: 2 additions & 0 deletions lib/assets/stylesheets/modules/_technical-documentation.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -139,6 +139,8 @@
font-family: monaco, Consolas, "Lucida Console", monospace;
font-size: 15px;
font-size: 0.9375rem;
// Match the line-height outside of tables
line-height: 1.4;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I wonder if the keyword normal would work, but happy with this if not.

Copy link
Contributor Author

@tombye tombye Nov 19, 2019 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I tested this and it would work for all the monospaced fonts we specify if we didn't have the padding on the top and bottom of the line. With that, normal still causes some vertical overlap, though it depends on which browser how much.

color: $code-0E;

@include govuk-media-query(tablet) {
Expand Down