Add rows hover state and improve layout for mobile

app/assets/javascripts/groups/components/group_item.vue

@@ -102,6 +102,7 @@ export default {
     :id="groupDomId"
     :class="rowClass"
     >
+    <div class="group-row-contents">
       <div class="controls">
         <a
           v-if="group.canEdit"
@@ -152,9 +153,9 @@ export default {
         </span>
       </div>
 
-    <div class="avatar-container s40">
-      <a href="/h5bp">
-        <img class="avatar s40 hidden-xs" src="http://localhost:3000/uploads/group/avatar/2/logo-extra-whitespace.png" alt="Logo extra whitespace">
+      <div class="avatar-container s40 hidden-xs">
+        <a :href="group.webUrl">
+          <img class="avatar s40" :src="group.avatarUrl" />
         </a>
       </div>
 
@@ -165,7 +166,7 @@ export default {
       <div class="description">
         {{group.description}}
       </div>
-
+    </div>
     <group-folder v-if="group.isOpen && hasGroups" :groups="group.subGroups" :baseGroup="group" />
   </li>
 </template>

app/assets/javascripts/groups/stores/groups_store.js

@@ -116,6 +116,7 @@ export default class GroupsStore {
       id: rawGroup.id,
       fullName: rawGroup.full_name,
       fullPath: rawGroup.full_path,
+      avatarUrl: rawGroup.avatar_url,
       name: rawGroup.name,
       hasSubgroups: rawGroup.has_subgroups,
       canEdit: rawGroup.can_edit,

app/assets/stylesheets/framework/lists.scss

@@ -302,10 +302,9 @@ ul.indent-list {
   }
 
   .group-list-tree {
-    margin-top: 10px;
     margin-bottom: 0;
     margin-left: 20px;
-    border-top: solid 1px $border-white-light;
+    // border-top: solid 1px $border-white-light;
     position: relative;
 
     &::before {
@@ -313,7 +312,7 @@ ul.indent-list {
       display: block;
       width: 0;
       position: absolute;
-      top: 0;
+      top: 5px;
       bottom: 0;
       left: -16px;
       border-left: 2px solid $border-white-normal;
@@ -341,6 +340,23 @@ ul.indent-list {
       }
     }
   }
+  
+  .group-row {
+    padding: 0;
+    border: none;
+  }
+
+  .group-row-contents {
+    padding: 10px 10px 8px 10px;
+    border-top: solid 1px transparent;
+    border-bottom: solid 1px $white-normal;
+
+    &:hover{
+      border-color: $row-hover-border;
+      background-color: $row-hover;
+      cursor: pointer; 
+    }
+  }
 }
 
 .js-groups-list-holder {