rust-lang · bors · Mar 1, 2021 · Feb 27, 2021 · Feb 27, 2021 · Feb 27, 2021
diff --git a/app/components/crate-list.hbs b/app/components/crate-list.hbs
@@ -0,0 +1,19 @@
+<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|}}
+      <li local-class="row">
+        <CrateRow @crate={{crate}} data-test-crate-row={{index}} />
+      </li>
+    {{/each}}
+  </ol>
+</div>
diff --git a/app/components/crate-list.module.css b/app/components/crate-list.module.css
@@ -0,0 +1,20 @@
+.list {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+}
+
+.row {
+    &:not(:last-child) {
+        margin-bottom: 15px;
+    }
+}
+
+.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
@@ -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 {

diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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}} />
diff --git 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
@@ -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}} />
diff --git 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}} />