Reuse existing CP for count, and scope styles

emberobserver · Feb 24, 2019 · 6d6324b · 6d6324b
1 parent 1dcb6cc
commit 6d6324b
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 38 deletions.
diff --git a/app/components/dependency-table.js b/app/components/dependency-table.js
@@ -5,6 +5,8 @@ import { task } from 'ember-concurrency';
 import { isEmpty } from '@ember/utils';
 
 export default Component.extend({
+  classNames: ['addon-dependency-table'],
+
   limit: 8,
 
   showingAllDependencies: false,
@@ -35,7 +37,7 @@ export default Component.extend({
     if (!this.dependencyCount || !this.devDependencyCount) {
       return false;
     }
-    return this.dependencyCount > this.limit || this.devDependencies.length > this.limit;
+    return this.dependencyCount > this.limit || this.devDependencyCount > this.limit;
   }),
 
   hiddenDependencyCount: computed('dependencyCount', 'showingAllDependencies', function() {

diff --git a/app/styles/components/_dependency-table.scss b/app/styles/components/_dependency-table.scss
@@ -1,47 +1,50 @@
-.description {
-  &.no-addons {
-    margin-top: .5rem;
-    margin-bottom: 4rem;
-  }
-  margin-top: .25em;
-  font-style: italic;
-}
-
-hr {
-  margin-top: .5rem;
-}
-
-.dependency-table {
-  display: flex;
-  border-bottom-width: 1px;
-
-  .version-dependencies {
-    margin-top: .5rem;
+.addon-dependency-table {
 
-    th, td {
-      border-bottom: none;
-      padding: .1rem;
+  .description {
+    &.no-addons {
+      margin-top: .5rem;
+      margin-bottom: 4rem;
     }
+    margin-top: .25em;
+    font-style: italic;
+  }
 
-    td {
-      white-space: nowrap;
-      overflow: hidden;
-      text-overflow: ellipsis;
-    }
+  hr {
+    margin-top: .5rem;
+  }
 
-    th {
-      padding-bottom: .5rem;
-    }
+  .dependency-table {
+    display: flex;
+    border-bottom-width: 1px;
 
-    .version-dependency {
+    .version-dependencies {
       margin-top: .5rem;
-      display: flex;
-      justify-content: space-between;
-      border-bottom: 1px dotted #97bacc;
-    }
 
-    a.more {
-      font-weight: lighter;
+      th, td {
+        border-bottom: none;
+        padding: .1rem;
+      }
+
+      td {
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+
+      th {
+        padding-bottom: .5rem;
+      }
+
+      .version-dependency {
+        margin-top: .5rem;
+        display: flex;
+        justify-content: space-between;
+        border-bottom: 1px dotted #97bacc;
+      }
+
+      a.more {
+        font-weight: lighter;
+      }
     }
   }
 }