From f38746a51cfe417995d976f36cb38f6c02bc6ef8 Mon Sep 17 00:00:00 2001
From: Tobias Bieniek <tobias@bieniek.cloud>
Date: Sat, 27 Feb 2021 12:47:01 +0100
Subject: [PATCH 1/3] Extract `CrateList` component

---
 app/components/crate-list.hbs        | 14 ++++++++++++++
 app/components/crate-list.module.css | 22 ++++++++++++++++++++++
 app/controllers/search.js            |  8 ++++++++
 app/styles/category/index.module.css | 11 -----------
 app/styles/crates.module.css         | 11 -----------
 app/styles/keyword/index.module.css  | 11 -----------
 app/styles/me/crates.module.css      | 11 -----------
 app/styles/me/following.module.css   | 11 -----------
 app/styles/search.module.css         | 15 ---------------
 app/styles/team.module.css           | 11 -----------
 app/styles/user.module.css           | 11 -----------
 app/templates/category/index.hbs     |  6 +-----
 app/templates/crates.hbs             |  6 +-----
 app/templates/keyword/index.hbs      |  6 +-----
 app/templates/me/crates.hbs          |  6 +-----
 app/templates/me/following.hbs       |  6 +-----
 app/templates/search.hbs             | 17 +----------------
 app/templates/team.hbs               |  6 +-----
 app/templates/user.hbs               |  6 +-----
 19 files changed, 52 insertions(+), 143 deletions(-)
 create mode 100644 app/components/crate-list.hbs
 create mode 100644 app/components/crate-list.module.css

diff --git a/app/components/crate-list.hbs b/app/components/crate-list.hbs
new file mode 100644
index 00000000000..7314749666b
--- /dev/null
+++ b/app/components/crate-list.hbs
@@ -0,0 +1,14 @@
+<div local-class="list" ...attributes>
+  {{#if @exactMatch}}
+    <div local-class="exact-match">
+      <LinkTo @route="crate" @model={{@exactMatch}}>
+        <h1>Exact Match</h1>
+      </LinkTo>
+      <CrateRow @crate={{@exactMatch}} local-class="row" data-test-crate-row="exact-match" />
+    </div>
+  {{/if}}
+
+  {{#each @crates as |crate index|}}
+    <CrateRow @crate={{crate}} local-class="row" data-test-crate-row={{index}} />
+  {{/each}}
+</div>
diff --git a/app/components/crate-list.module.css b/app/components/crate-list.module.css
new file mode 100644
index 00000000000..1db606096a6
--- /dev/null
+++ b/app/components/crate-list.module.css
@@ -0,0 +1,22 @@
+.list {
+    background-color: white;
+    padding: 0 20px;
+}
+
+.row {
+    border-bottom: 2px solid var(--gray-border);
+    padding: 20px 0;
+
+    &:last-of-type {
+        border: none;
+    }
+}
+
+.exact-match {
+    padding-bottom: 40px;
+    border-bottom: 2px solid var(--gray-border);
+
+    h1 {
+        color: green
+    }
+}
diff --git a/app/controllers/search.js b/app/controllers/search.js
index 8ca448865a3..a69e1be3009 100644
--- a/app/controllers/search.js
+++ b/app/controllers/search.js
@@ -61,4 +61,12 @@ export default class SearchController extends Controller {
     return yield this.store.query('crate', { all_keywords, page, per_page, q, sort });
   }).restartable())
   dataTask;
+
+  get exactMatch() {
+    return this.model.find(it => it.exact_match);
+  }
+
+  get otherCrates() {
+    return this.model.filter(it => !it.exact_match);
+  }
 }
diff --git a/app/styles/category/index.module.css b/app/styles/category/index.module.css
index 6bbdd48a64f..c1ff7654577 100644
--- a/app/styles/category/index.module.css
+++ b/app/styles/category/index.module.css
@@ -43,16 +43,5 @@
 }
 
 .list {
-    background-color: white;
-    padding: 0 20px;
     margin-bottom: 20px;
 }
-
-.row {
-    padding: 20px 0;
-    border-bottom: 2px solid var(--gray-border);
-
-    &:last-of-type {
-        border: none;
-    }
-}
diff --git a/app/styles/crates.module.css b/app/styles/crates.module.css
index 5e145518179..9ede05ab488 100644
--- a/app/styles/crates.module.css
+++ b/app/styles/crates.module.css
@@ -42,16 +42,5 @@
 }
 
 .list {
-    background-color: white;
-    padding: 0 20px;
     margin-bottom: 20px;
 }
-
-.row {
-    border-bottom: 2px solid var(--gray-border);
-    padding: 20px 0;
-
-    &:last-of-type {
-        border: none;
-    }
-}
diff --git a/app/styles/keyword/index.module.css b/app/styles/keyword/index.module.css
index 3f134338475..ac17d47d41b 100644
--- a/app/styles/keyword/index.module.css
+++ b/app/styles/keyword/index.module.css
@@ -10,16 +10,5 @@
 }
 
 .list {
-    background-color: white;
-    padding: 0 20px;
     margin-bottom: 20px;
 }
-
-.row {
-    padding: 20px 0;
-    border-bottom: 2px solid var(--gray-border);
-
-    &:last-of-type {
-        border: none;
-    }
-}
diff --git a/app/styles/me/crates.module.css b/app/styles/me/crates.module.css
index 3f134338475..ac17d47d41b 100644
--- a/app/styles/me/crates.module.css
+++ b/app/styles/me/crates.module.css
@@ -10,16 +10,5 @@
 }
 
 .list {
-    background-color: white;
-    padding: 0 20px;
     margin-bottom: 20px;
 }
-
-.row {
-    padding: 20px 0;
-    border-bottom: 2px solid var(--gray-border);
-
-    &:last-of-type {
-        border: none;
-    }
-}
diff --git a/app/styles/me/following.module.css b/app/styles/me/following.module.css
index 3f134338475..ac17d47d41b 100644
--- a/app/styles/me/following.module.css
+++ b/app/styles/me/following.module.css
@@ -10,16 +10,5 @@
 }
 
 .list {
-    background-color: white;
-    padding: 0 20px;
     margin-bottom: 20px;
 }
-
-.row {
-    padding: 20px 0;
-    border-bottom: 2px solid var(--gray-border);
-
-    &:last-of-type {
-        border: none;
-    }
-}
diff --git a/app/styles/search.module.css b/app/styles/search.module.css
index 64f8bab5be2..84c5d76e6be 100644
--- a/app/styles/search.module.css
+++ b/app/styles/search.module.css
@@ -10,24 +10,9 @@
 }
 
 .list {
-    background-color: white;
-    padding: 0 20px;
     margin-bottom: 20px;
 }
 
-.row {
-    padding: 20px 0;
-}
-
-.exact-match {
-    margin-bottom: 40px;
-    border-bottom: solid beige;
-
-    h1 {
-        color: green
-    }
-}
-
 .try-again-button {
     composes: yellow-button from './shared/buttons.module.css';
     align-self: center;
diff --git a/app/styles/team.module.css b/app/styles/team.module.css
index cf815422cc1..9bbc84c220c 100644
--- a/app/styles/team.module.css
+++ b/app/styles/team.module.css
@@ -38,16 +38,5 @@
 }
 
 .list {
-    background-color: white;
-    padding: 0 20px;
     margin-bottom: 20px;
 }
-
-.row {
-    padding: 20px 0;
-    border-bottom: 2px solid var(--gray-border);
-
-    &:last-of-type {
-        border: none;
-    }
-}
diff --git a/app/styles/user.module.css b/app/styles/user.module.css
index 458804e116c..0e0eea7af5f 100644
--- a/app/styles/user.module.css
+++ b/app/styles/user.module.css
@@ -19,16 +19,5 @@
 }
 
 .list {
-    background-color: white;
-    padding: 0 20px;
     margin-bottom: 20px;
 }
-
-.row {
-    padding: 20px 0;
-    border-bottom: 2px solid var(--gray-border);
-
-    &:last-of-type {
-        border: none;
-    }
-}
diff --git a/app/templates/category/index.hbs b/app/templates/category/index.hbs
index 732969b1fd3..108d2cfc690 100644
--- a/app/templates/category/index.hbs
+++ b/app/templates/category/index.hbs
@@ -54,10 +54,6 @@
   </div>
 </div>
 
-<div local-class="list">
-  {{#each this.model as |crate|}}
-    <CrateRow @crate={{crate}} local-class="row" />
-  {{/each}}
-</div>
+<CrateList @crates={{this.model}} local-class="list" />
 
 <Pagination @pagination={{this.pagination}} />
diff --git a/app/templates/crates.hbs b/app/templates/crates.hbs
index 2f2d09b2d43..5f91b28ced2 100644
--- a/app/templates/crates.hbs
+++ b/app/templates/crates.hbs
@@ -37,10 +37,6 @@
   </div>
 </div>
 
-<div local-class="list">
-  {{#each this.model as |crate index|}}
-    <CrateRow @crate={{crate}} local-class="row" data-test-crate-row={{index}} />
-  {{/each}}
-</div>
+<CrateList @crates={{this.model}} local-class="list" />
 
 <Pagination @pagination={{this.pagination}} />
diff --git a/app/templates/keyword/index.hbs b/app/templates/keyword/index.hbs
index 1f781f114ec..cfb72fd7021 100644
--- a/app/templates/keyword/index.hbs
+++ b/app/templates/keyword/index.hbs
@@ -22,10 +22,6 @@
   </div>
 </div>
 
-<div local-class="list">
-  {{#each this.model as |crate|}}
-    <CrateRow @crate={{crate}} local-class="row" />
-  {{/each}}
-</div>
+<CrateList @crates={{this.model}} local-class="list" />
 
 <Pagination @pagination={{this.pagination}} />
diff --git a/app/templates/me/crates.hbs b/app/templates/me/crates.hbs
index 598d0ee258e..19f3104a92a 100644
--- a/app/templates/me/crates.hbs
+++ b/app/templates/me/crates.hbs
@@ -23,10 +23,6 @@
   </div>
 </div>
 
-<div local-class="list">
-  {{#each this.model as |crate|}}
-    <CrateRow @crate={{crate}} local-class="row" />
-  {{/each}}
-</div>
+<CrateList @crates={{this.model}} local-class="list" />
 
 <Pagination @pagination={{this.pagination}} />
diff --git a/app/templates/me/following.hbs b/app/templates/me/following.hbs
index 6345ea5b1d1..fa51c23ae59 100644
--- a/app/templates/me/following.hbs
+++ b/app/templates/me/following.hbs
@@ -18,10 +18,6 @@
   </div>
 </div>
 
-<div local-class="list">
-  {{#each this.model as |crate|}}
-    <CrateRow @crate={{crate}} local-class="row" />
-  {{/each}}
-</div>
+<CrateList @crates={{this.model}} local-class="list" />
 
 <Pagination @pagination={{this.pagination}} />
\ No newline at end of file
diff --git a/app/templates/search.hbs b/app/templates/search.hbs
index 86f332c0ad1..7d5e62202e8 100644
--- a/app/templates/search.hbs
+++ b/app/templates/search.hbs
@@ -47,22 +47,7 @@
     </div>
   </div>
 
-  <div local-class="list">
-    {{#each this.model as |crate index|}}
-      {{#if crate.exact_match}}
-        <div local-class="exact-match">
-          <LinkTo @route="crate" @model={{crate}}>
-            <h1>Exact Match</h1>
-          </LinkTo>
-          <CrateRow @crate={{crate}} local-class="row" data-test-crate-row={{index}} />
-        </div>
-      {{else}}
-        <div>
-          <CrateRow @crate={{crate}} local-class="row" data-test-crate-row={{index}} />
-        </div>
-      {{/if}}
-    {{/each}}
-  </div>
+  <CrateList @exactMatch={{this.exactMatch}} @crates={{this.otherCrates}} local-class="list" />
 
   <Pagination @pagination={{this.pagination}} />
 {{else}}
diff --git a/app/templates/team.hbs b/app/templates/team.hbs
index e2cbcce55b7..5d07fdbcd9c 100644
--- a/app/templates/team.hbs
+++ b/app/templates/team.hbs
@@ -34,10 +34,6 @@
   </div>
 </div>
 
-<div local-class="list">
-  {{#each this.model.crates as |crate|}}
-    <CrateRow @crate={{crate}} local-class="row" />
-  {{/each}}
-</div>
+<CrateList @crates={{this.model.crates}} local-class="list" />
 
 <Pagination @pagination={{this.pagination}} />
\ No newline at end of file
diff --git a/app/templates/user.hbs b/app/templates/user.hbs
index 0fc9c055c7a..a8031a88d66 100644
--- a/app/templates/user.hbs
+++ b/app/templates/user.hbs
@@ -27,10 +27,6 @@
   </div>
 </div>
 
-<div local-class="list">
-  {{#each this.model.crates as |crate|}}
-    <CrateRow @crate={{crate}} local-class="row" />
-  {{/each}}
-</div>
+<CrateList @crates={{this.model.crates}} local-class="list" />
 
 <Pagination @pagination={{this.pagination}} />
\ No newline at end of file

From 5f727e046f66fe48af2dbdb36452f843320098c5 Mon Sep 17 00:00:00 2001
From: Tobias Bieniek <tobias@bieniek.cloud>
Date: Sat, 27 Feb 2021 12:50:38 +0100
Subject: [PATCH 2/3] CrateList: Use ordered list elements

The extra div wrapper is needed for specificity issues with `margin`
---
 app/components/crate-list.hbs        | 31 ++++++++++++++++------------
 app/components/crate-list.module.css |  6 +++---
 2 files changed, 21 insertions(+), 16 deletions(-)

diff --git a/app/components/crate-list.hbs b/app/components/crate-list.hbs
index 7314749666b..5db0ac41358 100644
--- a/app/components/crate-list.hbs
+++ b/app/components/crate-list.hbs
@@ -1,14 +1,19 @@
-<div local-class="list" ...attributes>
-  {{#if @exactMatch}}
-    <div local-class="exact-match">
-      <LinkTo @route="crate" @model={{@exactMatch}}>
-        <h1>Exact Match</h1>
-      </LinkTo>
-      <CrateRow @crate={{@exactMatch}} local-class="row" data-test-crate-row="exact-match" />
-    </div>
-  {{/if}}
+<div ...attributes>
+  {{!-- The extra div wrapper is needed for specificity issues with `margin` --}}
+  <ol local-class="list">
+    {{#if @exactMatch}}
+      <li local-class="row exact-match">
+        <LinkTo @route="crate" @model={{@exactMatch}}>
+          <h1>Exact Match</h1>
+        </LinkTo>
+        <CrateRow @crate={{@exactMatch}} data-test-crate-row="exact-match" />
+      </li>
+    {{/if}}
 
-  {{#each @crates as |crate index|}}
-    <CrateRow @crate={{crate}} local-class="row" data-test-crate-row={{index}} />
-  {{/each}}
-</div>
+    {{#each @crates as |crate index|}}
+      <li local-class="row">
+        <CrateRow @crate={{crate}} data-test-crate-row={{index}} />
+      </li>
+    {{/each}}
+  </ol>
+</div>
\ No newline at end of file
diff --git a/app/components/crate-list.module.css b/app/components/crate-list.module.css
index 1db606096a6..ea39ebdb762 100644
--- a/app/components/crate-list.module.css
+++ b/app/components/crate-list.module.css
@@ -1,6 +1,8 @@
 .list {
     background-color: white;
+    margin: 0;
     padding: 0 20px;
+    list-style: none;
 }
 
 .row {
@@ -13,10 +15,8 @@
 }
 
 .exact-match {
-    padding-bottom: 40px;
-    border-bottom: 2px solid var(--gray-border);
-
     h1 {
+        margin-top: 0;
         color: green
     }
 }

From a6f6d9ec5567f309277c3fdf85a4ad3e46ecca0e Mon Sep 17 00:00:00 2001
From: Tobias Bieniek <tobias@bieniek.cloud>
Date: Sat, 27 Feb 2021 13:07:24 +0100
Subject: [PATCH 3/3] CrateList: Improve styling

... to match the new style of the crate versions page
---
 app/components/crate-list.module.css | 14 ++++++--------
 app/components/crate-row.module.css  |  7 +++++++
 2 files changed, 13 insertions(+), 8 deletions(-)

diff --git a/app/components/crate-list.module.css b/app/components/crate-list.module.css
index ea39ebdb762..9120041a862 100644
--- a/app/components/crate-list.module.css
+++ b/app/components/crate-list.module.css
@@ -1,20 +1,18 @@
 .list {
-    background-color: white;
     margin: 0;
-    padding: 0 20px;
+    padding: 0;
     list-style: none;
 }
 
 .row {
-    border-bottom: 2px solid var(--gray-border);
-    padding: 20px 0;
-
-    &:last-of-type {
-        border: none;
+    &:not(:last-child) {
+        margin-bottom: 15px;
     }
 }
 
-.exact-match {
+.exact-match:not(:last-child) {
+    margin-bottom: 60px;
+
     h1 {
         margin-top: 0;
         color: green
diff --git a/app/components/crate-row.module.css b/app/components/crate-row.module.css
index d1deb4bdc72..b5d7ad5a1a8 100644
--- a/app/components/crate-row.module.css
+++ b/app/components/crate-row.module.css
@@ -1,6 +1,13 @@
 .crate-row {
+    --shadow: 0 1px 3px hsla(51, 90%, 42%, .35);
+
     display: flex;
     flex-wrap: wrap;
+    padding: 15px 25px;
+    background-color: white;
+    border-radius: 5px;
+    box-shadow: var(--shadow);
+    transition: all 300ms;
 }
 
 .description-box {