Add rows hover state and improve layout for mobile

3 files changed, 78 insertions, 60 deletions

diff --git a/app/assets/javascripts/groups/components/group_item.vue b/app/assets/javascripts/groups/components/group_item.vue
index c4b0325fb09..9fb027e0073 100644
--- a/app/assets/javascripts/groups/components/group_item.vue
+++ b/app/assets/javascripts/groups/components/group_item.vue
@@ -102,70 +102,71 @@ export default {
     :id="groupDomId"
     :class="rowClass"
     >
-    <div class="controls">
-      <a
-        v-if="group.canEdit"
-        class="edit-group btn"
-        :href="group.editPath">
-        <i aria-hidden="true" class="fa fa-cogs"></i>
-      </a>
-      <a @click="onLeaveGroup"
-        :href="group.leavePath"
-        class="leave-group btn"
-        title="Leave this group">
-        <i aria-hidden="true" class="fa fa-sign-out"></i>
-      </a>
-    </div>
+    <div class="group-row-contents">
+      <div class="controls">
+        <a
+          v-if="group.canEdit"
+          class="edit-group btn"
+          :href="group.editPath">
+          <i aria-hidden="true" class="fa fa-cogs"></i>
+        </a>
+        <a @click="onLeaveGroup"
+          :href="group.leavePath"
+          class="leave-group btn"
+          title="Leave this group">
+          <i aria-hidden="true" class="fa fa-sign-out"></i>
+        </a>
+      </div>
 
-    <div class="stats">
-      <span class="number-projects">
-        <i aria-hidden="true" class="fa fa-bookmark"></i>
-        {{group.numberProjects}}
-      </span>
-      <span class="number-users">
-        <i aria-hidden="true" class="fa fa-users"></i>
-        {{group.numberUsers}}
-      </span>
-      <span class="group-visibility">
-        <i aria-hidden="true" :class="visibilityIcon"></i>
-      </span>
-    </div>
+      <div class="stats">
+        <span class="number-projects">
+          <i aria-hidden="true" class="fa fa-bookmark"></i>
+          {{group.numberProjects}}
+        </span>
+        <span class="number-users">
+          <i aria-hidden="true" class="fa fa-users"></i>
+          {{group.numberUsers}}
+        </span>
+        <span class="group-visibility">
+          <i aria-hidden="true" :class="visibilityIcon"></i>
+        </span>
+      </div>
 
-    <div class="folder-toggle-wrap">
-      <span class="folder-caret" v-if="group.hasSubgroups">
-        <i
-          v-if="group.isOpen"
-          class="fa fa-caret-down" />
-        <i
-          v-if="!group.isOpen"
-          class="fa fa-caret-right" />
-      </span>
+      <div class="folder-toggle-wrap">
+        <span class="folder-caret" v-if="group.hasSubgroups">
+          <i
+            v-if="group.isOpen"
+            class="fa fa-caret-down" />
+          <i
+            v-if="!group.isOpen"
+            class="fa fa-caret-right" />
+        </span>
 
-      <span class="folder-icon">
-        <i
-          v-if="group.isOpen"
-          class="fa fa-folder-open"
-          aria-hidden="true"></i>
-        <i
-          v-if="!group.isOpen"
-          class="fa fa-folder"></i>
-      </span>
-    </div>
+        <span class="folder-icon">
+          <i
+            v-if="group.isOpen"
+            class="fa fa-folder-open"
+            aria-hidden="true"></i>
+          <i
+            v-if="!group.isOpen"
+            class="fa fa-folder"></i>
+        </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">
-      </a>
-    </div>
+      <div class="avatar-container s40 hidden-xs">
+        <a :href="group.webUrl">
+          <img class="avatar s40" :src="group.avatarUrl" />
+        </a>
+      </div>
 
-    <div class="title">
-      <a :href="group.webUrl">{{fullPath}}</a>
-    </div>
+      <div class="title">
+        <a :href="group.webUrl">{{fullPath}}</a>
+      </div>
 
-    <div class="description">
-      {{group.description}}
+      <div class="description">
+        {{group.description}}
+      </div>
     </div>
-
     <group-folder v-if="group.isOpen && hasGroups" :groups="group.subGroups" :baseGroup="group" />
   </li>
 </template>
diff --git a/app/assets/javascripts/groups/stores/groups_store.js b/app/assets/javascripts/groups/stores/groups_store.js
index 0493cee2fa8..a10b6617f03 100644
--- a/app/assets/javascripts/groups/stores/groups_store.js
+++ b/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,
diff --git a/app/assets/stylesheets/framework/lists.scss b/app/assets/stylesheets/framework/lists.scss
index 7529538b4a7..88ca1b3311a 100644
--- a/app/assets/stylesheets/framework/lists.scss
+++ b/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 {