Fix contributors list styles

code-corps · Nov 7, 2017 · d5b56c5 · d5b56c5
1 parent 4a6e161
commit d5b56c5
Show file tree

Hide file tree

Showing 4 changed files with 92 additions and 33 deletions.
diff --git a/app/styles/components/user-list-item.scss b/app/styles/components/user-list-item.scss
@@ -1,10 +1,13 @@
 .user-list-item {
   @include outer-container;
-  align-items: center;
   border-top: 1px solid $gray--lightest;
-  display: flex;
   padding: .7em 1em;
   position: relative;
+
+  @include media($sm-screen) {
+    padding: .7em 0;
+  }
+
   &:hover {
     background-color: #F9F9F9;
   }
@@ -14,21 +17,75 @@
 }
 
 .project-user {
-  &__actions {
-    @include span-columns(2);
-    text-align: right;
-  }
-  &__avatar {
-    @include span-columns(1);
+  &__user {
+    @include span-columns(4);
+
+    @include media($sm-screen) {
+      @include span-columns(12);
+
+      .icon {
+        height: 40px;
+        width: 40px;
+      }
+    }
+
+    &__avatar {
+      float: left;
+    }
+
+    &__name {
+      padding: 5px 10px 5px 60px;
+
+      @include media($sm-screen) {
+        padding: 2px 0 2px 50px;
+      }
+
+      strong {
+        font-weight: 700;
+      }
+    }
   }
-  &__name {
+
+  &__actions {
     @include span-columns(3);
-    strong {
-      font-weight: 700;
+
+    text-align: left;
+
+    button {
+      margin-top: 5px;
+    }
+
+    @include media($sm-screen) {
+      @include span-columns(12);
+      display: flex;
+      justify-content: space-between;
+      button {
+        flex: 1;
+        margin-right: 5px;
+        &:last-of-type {
+          margin-right: 0;
+        }
+      }
     }
   }
+
   &__skills {
-    @include span-columns(6);
+    @include span-columns(5);
+    padding-top: 5px;
+
+    @include media($sm-screen) {
+      @include span-columns(12);
+      padding-left: 50px;
+
+      h4 {
+        display: none;
+      }
+
+      .user__skills-list ul {
+        margin: 0;
+      }
+    }
+
     font-size: $body-font-size-small;
   }
 }

diff --git a/app/styles/templates/project/settings/contributors.scss b/app/styles/templates/project/settings/contributors.scss
@@ -16,5 +16,5 @@
 .contributors-list--empty {
   background: $background-gray;
   border-radius: 4px;
-  padding: 20px 60px;
+  padding: 5px 20px;
 }
diff --git a/app/templates/components/user-list-item.hbs b/app/templates/components/user-list-item.hbs
@@ -1,24 +1,26 @@
-<div class="project-user__avatar">
-  {{#link-to 'slugged-route' user.username}}
-    <img class="icon" src= {{user.photoThumbUrl}} />
-  {{/link-to}}
-</div>
+<div class="project-user__user">
+  <div class="project-user__user__avatar">
+    {{#link-to 'slugged-route' user.username}}
+      <img class="icon" src= {{user.photoThumbUrl}} />
+    {{/link-to}}
+  </div>
 
-<div class="project-user__name">
-  <strong>
-  {{#if user.name}}
-    {{link-to user.name 'slugged-route' user.username}}
-  {{else}}
-    {{link-to user.username 'slugged-route' user.username}}
-  {{/if}}
-  </strong>
-  <br>
-  <span>
-    {{user.username}}
-  </span>
+  <div data-test-project-user-name class="project-user__user__name">
+    <strong>
+    {{#if user.name}}
+      {{link-to user.name 'slugged-route' user.username}}
+    {{else}}
+      {{link-to user.username 'slugged-route' user.username}}
+    {{/if}}
+    </strong>
+    <br>
+    <span>
+      {{user.username}}
+    </span>
+  </div>
 </div>
 
-<div class="project-user__skills">
+<div data-test-project-user-skills class="project-user__skills">
   <h4>Skills</h4>
   {{user/skills-list data-test-user-skills-list user=user}}
 </div>

diff --git a/tests/pages/components/user-list-item.js b/tests/pages/components/user-list-item.js
@@ -40,7 +40,7 @@ export default {
   },
 
   name: {
-    scope: '.project-user__name',
+    scope: '[data-test-project-user-name]',
     name: {
       scope: 'strong',
       text: text()
@@ -52,7 +52,7 @@ export default {
   },
 
   skills: collection({
-    scope: '.project-user__skills',
+    scope: '[data-test-project-user-skills]',
     itemScope: 'li',
     item: {
       text: text()