Auto merge of #3347 - Turbo87:keyword-header, r=pichfl

Move keyword list from `CrateSidebar` to `CrateHeader`

This moves the list of crate keywords right below the crate description in the header to make them easier to discover and navigate :)

<img width="1026" alt="Bildschirmfoto 2021-02-27 um 11 57 56" src="https://user-images.githubusercontent.com/141300/109385375-9f4de380-78f3-11eb-9f24-351185a311d2.png">

Author: bors

app/components/crate-header.hbs

@@ -12,11 +12,24 @@
       <FollowButton @crate={{@crate}}/>
     {{/if}}
   </div>
+
   {{#if @crate.description}}
     <div local-class="description">
       {{@crate.description}}
     </div>
   {{/if}}
+
+  {{#if @crate.keywords}}
+    <ul local-class="keywords">
+      {{#each @crate.keywords as |keyword|}}
+        <li>
+          <LinkTo @route="keyword" @model={{keyword}}>
+            <span local-class="hash">#</span>{{keyword.id}}
+          </LinkTo>
+        </li>
+      {{/each}}
+    </ul>
+  {{/if}}
 </PageHeader>
 
 <NavTabs aria-label="{{@crate.name}} crate subpages" local-class="nav" as |nav|>

app/components/crate-header.module.css

@@ -35,6 +35,26 @@
     line-height: 1.35;
 }
 
+.keywords {
+    list-style: none;
+    margin: 10px 0 0;
+    padding: 0;
+
+    > li {
+        display: inline;
+
+        &:not(:last-child) {
+            margin-right: 15px;
+        }
+    }
+}
+
+.hash {
+    margin-right: 1px;
+    font-family: monospace;
+    font-size: 90%;
+}
+
 .nav {
     margin-bottom: 20px;
 }

app/components/crate-sidebar.hbs

@@ -104,19 +104,6 @@
       </div>
     {{/if}}
 
-    {{#unless @crate.keywords.isPending}}
-      {{#if @crate.keywords}}
-        <div>
-          <h3>Keywords</h3>
-          <ul local-class='keywords'>
-            {{#each @crate.keywords as |keyword|}}
-              <li><LinkTo @route="keyword" @model={{keyword}}>{{keyword.id}}</LinkTo></li>
-            {{/each}}
-          </ul>
-        </div>
-      {{/if}}
-    {{/unless}}
-
     {{#unless @crate.categories.isPending}}
       {{#if @crate.categories}}
         <div>

app/components/crate-sidebar.module.css

@@ -99,7 +99,7 @@
     }
 }
 
-ul.owners, ul.keywords {
+ul.owners {
     display: flex;
     flex-wrap: wrap;
     list-style: none;