Move copy button to the left of the name

ds-vsn · ds-vsn · commit d1a2e0d5567e · 2019-11-15T11:58:38.000-05:00
This allows the name to stay left-aligned. Also, space the "Copied!"
text in a way that better adapts to high DPI displays.
diff --git a/app/styles/crate.scss b/app/styles/crate.scss
@@ -158,23 +158,27 @@
         display: inline-block;
 
         button, button:active {
-            padding: 0;
-            width: 25px;
+            padding: 0 .2rem;
             outline: 0;
 
             &:hover {
                 background: inherit;
             }
 
             svg {
-                width: 20px;
+                height: 1rem;
+                width: 1rem;
             }
 
             .copy-notification {
-                top: -15px;
+                top: -1.25rem;
                 left: 0;
-                width: 255px;
                 text-align: left;
+                width: 4rem;
+
+                &.copy-failure {
+                    width: 15rem;
+                }
             }
         }
     }
@@ -370,9 +374,9 @@
                 }
 
                 &.copy-failure {
-                    bottom: -30px;
+                    bottom: -2rem;
                     right: 0;
-                    width: 255px;
+                    width: 18rem;
                     text-align: right;
                 }
             }
diff --git a/app/templates/components/crate-row.hbs b/app/templates/components/crate-row.hbs
@@ -1,7 +1,7 @@
 <div class='desc'>
   <div class='info'>
-    {{crate-toml-copy copyText=crateTomlText}}
     {{#link-to 'crate' crate.id data-test-crate-link}}{{ crate.name }}{{/link-to}}
+    {{crate-toml-copy copyText=crateTomlText}}
     {{crate-badge crate=crate}}
     {{#each crate.annotated_badges as |badge|}}
       {{component badge.component_name badge=badge data-test-badge=badge.badge_type}}

Original file line number	Diff line number	Diff line change
`@@ -158,23 +158,27 @@`
`158`	`158`	`display: inline-block;`
`159`	`159`
`160`	`160`	`button, button:active {`
`161`		`- padding: 0;`
`162`		`- width: 25px;`
	`161`	`+ padding: 0 .2rem;`
`163`	`162`	`outline: 0;`
`164`	`163`
`165`	`164`	`&:hover {`
`166`	`165`	`background: inherit;`
`167`	`166`	`}`
`168`	`167`
`169`	`168`	`svg {`
`170`		`- width: 20px;`
	`169`	`+ height: 1rem;`
	`170`	`+ width: 1rem;`
`171`	`171`	`}`
`172`	`172`
`173`	`173`	`.copy-notification {`
`174`		`- top: -15px;`
	`174`	`+ top: -1.25rem;`
`175`	`175`	`left: 0;`
`176`		`- width: 255px;`
`177`	`176`	`text-align: left;`
	`177`	`+ width: 4rem;`
	`178`	`+`
	`179`	`+ &.copy-failure {`
	`180`	`+ width: 15rem;`
	`181`	`+ }`
`178`	`182`	`}`
`179`	`183`	`}`
`180`	`184`	`}`
`@@ -370,9 +374,9 @@`
`370`	`374`	`}`
`371`	`375`
`372`	`376`	`&.copy-failure {`
`373`		`- bottom: -30px;`
	`377`	`+ bottom: -2rem;`
`374`	`378`	`right: 0;`
`375`		`- width: 255px;`
	`379`	`+ width: 18rem;`
`376`	`380`	`text-align: right;`
`377`	`381`	`}`
`378`	`382`	`}`