Auto merge of #1601 - p-jackson:fix-icon-alignment, r=jtgeibel

bors · bors · commit 41442f0e8132 · 2019-01-24T00:55:07.000Z
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)
diff --git a/app/styles/crate.scss b/app/styles/crate.scss
@@ -26,6 +26,12 @@
             @include flex-direction(column);
         }
     }
+    .crate-icon {
+        // Icon doesn't align nicely with text (which is being
+        // aligned by their baselines) so manual adjustment needed.
+        position: relative;
+        top: 4px;
+    }
     h1 {
         padding-left: 10px;
         padding-right: 10px;
diff --git a/app/templates/crate/version.hbs b/app/templates/crate/version.hbs
@@ -3,7 +3,7 @@
 <div id='crates-heading' data-test-heading>
     <div class="wide">
         <div class='info'>
-            {{svg-jar "crate"}}
+            {{svg-jar "crate" class='crate-icon'}}
             <h1 data-test-crate-name>{{ crate.name }}</h1>
             <h2 data-test-crate-version>{{ currentVersion.num }}</h2>
         </div>

Original file line number	Diff line number	Diff line change
`@@ -26,6 +26,12 @@`
`26`	`26`	`@include flex-direction(column);`
`27`	`27`	`}`
`28`	`28`	`}`
	`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`	`+ }`
`29`	`35`	`h1 {`
`30`	`36`	`padding-left: 10px;`
`31`	`37`	`padding-right: 10px;`