Skip to content

Commit 41442f0

Browse files
committed
Auto merge of #1601 - p-jackson:fix-icon-alignment, r=jtgeibel
Align crate icon with crate name in heading The crate heading text (with name and version) are being aligned by baseline using flex, however the icon doesn't line up because it doesn't have baseline information. Manually pushing the icon down so aligns "correctly" with the crate name. Before 🤢 🤮 ![image](https://user-images.githubusercontent.com/1500769/51534894-efa01f00-1eab-11e9-99a2-278b50209eab.png) After 🌹 🦄 ![image](https://user-images.githubusercontent.com/1500769/51534928-00e92b80-1eac-11e9-954d-18548d666c6c.png)
2 parents 437657d + 073c5ac commit 41442f0

File tree

2 files changed

+7
-1
lines changed

2 files changed

+7
-1
lines changed

app/styles/crate.scss

+6
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,12 @@
2626
@include flex-direction(column);
2727
}
2828
}
29+
.crate-icon {
30+
// Icon doesn't align nicely with text (which is being
31+
// aligned by their baselines) so manual adjustment needed.
32+
position: relative;
33+
top: 4px;
34+
}
2935
h1 {
3036
padding-left: 10px;
3137
padding-right: 10px;

app/templates/crate/version.hbs

+1-1
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
<div id='crates-heading' data-test-heading>
44
<div class="wide">
55
<div class='info'>
6-
{{svg-jar "crate"}}
6+
{{svg-jar "crate" class='crate-icon'}}
77
<h1 data-test-crate-name>{{ crate.name }}</h1>
88
<h2 data-test-crate-version>{{ currentVersion.num }}</h2>
99
</div>

0 commit comments

Comments
 (0)