Resolve "Redesign project lists UI"

7 files changed, 218 insertions, 20 deletions

diff --git a/app/assets/javascripts/pages/dashboard/projects/index.js b/app/assets/javascripts/pages/dashboard/projects/index.js
index 0c585e162cb..8f98be79640 100644
--- a/app/assets/javascripts/pages/dashboard/projects/index.js
+++ b/app/assets/javascripts/pages/dashboard/projects/index.js
@@ -1,3 +1,7 @@
 import ProjectsList from '~/projects_list';
+import Star from '../../../star';
 
-document.addEventListener('DOMContentLoaded', () => new ProjectsList());
+document.addEventListener('DOMContentLoaded', () => {
+  new ProjectsList(); // eslint-disable-line no-new
+  new Star('.project-row'); // eslint-disable-line no-new
+});
diff --git a/app/assets/javascripts/pages/root/index.js b/app/assets/javascripts/pages/root/index.js
new file mode 100644
index 00000000000..09f8185d3b5
--- /dev/null
+++ b/app/assets/javascripts/pages/root/index.js
@@ -0,0 +1,5 @@
+// if the "projects dashboard" is a user's default dashboard, when they visit the
+// instance root index, the dashboard will be served by the root controller instead
+// of a dashboard controller. The root index redirects for all other default dashboards.
+
+import '../dashboard/projects/index';
diff --git a/app/assets/javascripts/pages/users/user_tabs.js b/app/assets/javascripts/pages/users/user_tabs.js
index aa537d4a43e..006eaa08cd1 100644
--- a/app/assets/javascripts/pages/users/user_tabs.js
+++ b/app/assets/javascripts/pages/users/user_tabs.js
@@ -151,8 +151,10 @@ export default class UserTabs {
   loadTab(action, endpoint) {
     this.toggleLoading(true);
 
+    const params = action === 'projects' ? { skip_namespace: true } : {};
+
     return axios
-      .get(endpoint)
+      .get(endpoint, { params })
       .then(({ data }) => {
         const tabSelector = `div#${action}`;
         this.$parentEl.find(tabSelector).html(data.html);
@@ -188,7 +190,7 @@ export default class UserTabs {
       requestParams: { limit: 10 },
     });
     UserTabs.renderMostRecentBlocks('#js-overview .projects-block', {
-      requestParams: { limit: 10, skip_pagination: true },
+      requestParams: { limit: 10, skip_pagination: true, skip_namespace: true, compact_mode: true },
     });
 
     this.loaded.overview = true;
diff --git a/app/assets/javascripts/star.js b/app/assets/javascripts/star.js
index 9af5d5b23cb..7404dfbf22a 100644
--- a/app/assets/javascripts/star.js
+++ b/app/assets/javascripts/star.js
@@ -5,11 +5,12 @@ import { spriteIcon } from './lib/utils/common_utils';
 import axios from './lib/utils/axios_utils';
 
 export default class Star {
-  constructor() {
-    $('.project-home-panel .toggle-star').on('click', function toggleStarClickCallback() {
+  constructor(container = '.project-home-panel') {
+    $(`${container} .toggle-star`).on('click', function toggleStarClickCallback() {
       const $this = $(this);
       const $starSpan = $this.find('span');
-      const $startIcon = $this.find('svg');
+      const $starIcon = $this.find('svg');
+      const iconClasses = $starIcon.attr('class').split(' ');
 
       axios
         .post($this.data('endpoint'))
@@ -22,12 +23,12 @@ export default class Star {
 
           if (isStarred) {
             $starSpan.removeClass('starred').text(s__('StarProject|Star'));
-            $startIcon.remove();
-            $this.prepend(spriteIcon('star-o', 'icon'));
+            $starIcon.remove();
+            $this.prepend(spriteIcon('star-o', iconClasses));
           } else {
             $starSpan.addClass('starred').text(__('Unstar'));
-            $startIcon.remove();
-            $this.prepend(spriteIcon('star', 'icon'));
+            $starIcon.remove();
+            $this.prepend(spriteIcon('star', iconClasses));
           }
         })
         .catch(() => Flash('Star toggle failed. Try again later.'));
diff --git a/app/assets/stylesheets/framework/avatar.scss b/app/assets/stylesheets/framework/avatar.scss
index 054c75912ea..e132aa4c216 100644
--- a/app/assets/stylesheets/framework/avatar.scss
+++ b/app/assets/stylesheets/framework/avatar.scss
@@ -108,6 +108,7 @@
     width: 100%;
     height: 100%;
     display: flex;
+    text-decoration: none;
   }
 
   .avatar {
@@ -120,6 +121,7 @@
   }
 
   &.s40 { min-width: 40px; min-height: 40px; }
+  &.s64 { min-width: 64px; min-height: 64px; }
 }
 
 .avatar-counter {
diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss
index 5310195d9c5..0fc8cc10b7c 100644
--- a/app/assets/stylesheets/framework/variables.scss
+++ b/app/assets/stylesheets/framework/variables.scss
@@ -198,6 +198,7 @@ $well-light-text-color: #5b6169;
 $gl-font-size: 14px;
 $gl-font-size-xs: 11px;
 $gl-font-size-small: 12px;
+$gl-font-size-medium: 1.43rem;
 $gl-font-size-large: 16px;
 $gl-font-weight-normal: 400;
 $gl-font-weight-bold: 600;
@@ -276,6 +277,7 @@ $project-title-row-height: 64px;
 $project-avatar-mobile-size: 24px;
 $gl-line-height: 16px;
 $gl-line-height-24: 24px;
+$gl-line-height-14: 14px;
 
 /*
 * Common component specific colors
diff --git a/app/assets/stylesheets/pages/projects.scss b/app/assets/stylesheets/pages/projects.scss
index 278800aba95..0ce0db038a7 100644
--- a/app/assets/stylesheets/pages/projects.scss
+++ b/app/assets/stylesheets/pages/projects.scss
@@ -969,34 +969,73 @@ pre.light-well {
     @include basic-list-stats;
     display: flex;
     align-items: center;
-  }
+    color: $gl-text-color-secondary;
+    padding: $gl-padding 0;
 
-  h3 {
-    font-size: $gl-font-size;
+    @include media-breakpoint-up(lg) {
+      padding: $gl-padding-24 0;
+    }
+
+    &.no-description {
+      @include media-breakpoint-up(sm) {
+        .avatar-container {
+          align-self: center;
+        }
+
+        .metadata-info {
+          margin-bottom: 0;
+        }
+      }
+    }
   }
 
-  .avatar-container,
-  .controls {
-    flex: 0 0 auto;
+  h2 {
+    font-size: $gl-font-size-medium;
+    font-weight: $gl-font-weight-bold;
+    margin-bottom: 0;
+
+    @include media-breakpoint-up(sm) {
+      .namespace-name {
+        font-weight: $gl-font-weight-normal;
+      }
+    }
   }
 
   .avatar-container {
+    flex: 0 0 auto;
     align-self: flex-start;
   }
 
   .project-details {
     min-width: 0;
+    line-height: $gl-line-height;
+
+    .flex-wrapper {
+      min-width: 0;
+      margin-top: -$gl-padding-8; // negative margin required for flex-wrap
+    }
 
     p,
     .commit-row-message {
       @include str-truncated(100%);
       margin-bottom: 0;
     }
-  }
 
-  .controls {
-    margin-left: auto;
-    text-align: right;
+    .user-access-role {
+      margin: 0;
+    }
+
+    @include media-breakpoint-up(md) {
+      .description {
+        color: $gl-text-color;
+      }
+    }
+
+    @include media-breakpoint-down(md) {
+      .user-access-role {
+        line-height: $gl-line-height-14;
+      }
+    }
   }
 
   .ci-status-link {
@@ -1008,6 +1047,149 @@ pre.light-well {
       text-decoration: none;
     }
   }
+
+  .controls {
+    margin-top: $gl-padding;
+
+    @include media-breakpoint-down(md) {
+      margin-top: 0;
+    }
+
+    @include media-breakpoint-down(xs) {
+      margin-top: $gl-padding-8;
+    }
+
+    .icon-wrapper {
+      color: inherit;
+      margin-right: $gl-padding;
+
+      @include media-breakpoint-down(md) {
+        margin-right: 0;
+        margin-left: $gl-padding-8;
+      }
+
+      @include media-breakpoint-down(xs) {
+        &:first-child {
+          margin-left: 0;
+        }
+      }
+    }
+
+    .ci-status-link {
+      display: inline-flex;
+    }
+  }
+
+  .star-button {
+    .icon {
+      top: 0;
+    }
+  }
+
+  .icon-container {
+    @include media-breakpoint-down(xs) {
+      margin-right: $gl-padding-8;
+    }
+  }
+
+  &.compact {
+    .project-row {
+      padding: $gl-padding 0;
+    }
+
+    h2 {
+      font-size: $gl-font-size;
+    }
+
+    .avatar-container {
+      @include avatar-size(40px, 10px);
+      min-height: 40px;
+      min-width: 40px;
+
+      .identicon.s64 {
+        font-size: 16px;
+      }
+    }
+
+    .controls {
+      @include media-breakpoint-up(sm) {
+        margin-top: 0;
+      }
+    }
+
+    .updated-note {
+      @include media-breakpoint-up(sm) {
+        margin-top: $gl-padding-8;
+      }
+    }
+
+    .icon-wrapper {
+      margin-left: $gl-padding-8;
+      margin-right: 0;
+
+      @include media-breakpoint-down(xs) {
+        &:first-child {
+          margin-left: 0;
+        }
+      }
+    }
+
+    .user-access-role {
+      line-height: $gl-line-height-14;
+    }
+  }
+
+  @include media-breakpoint-down(md) {
+    h2 {
+      font-size: $gl-font-size;
+    }
+
+    .avatar-container {
+      @include avatar-size(40px, 10px);
+      min-height: 40px;
+      min-width: 40px;
+
+      .identicon.s64 {
+        font-size: 16px;
+      }
+    }
+  }
+
+  @include media-breakpoint-down(md) {
+    .updated-note {
+      margin-top: $gl-padding-8;
+      text-align: right;
+    }
+  }
+
+  .forks,
+  .pipeline-status,
+  .updated-note {
+    display: flex;
+  }
+
+  @include media-breakpoint-down(md) {
+    &:not(.explore) {
+      .forks {
+        display: none;
+
+      }
+    }
+
+    &.explore {
+      .pipeline-status,
+      .updated-note {
+        display: none !important;
+      }
+    }
+  }
+
+  @include media-breakpoint-down(xs) {
+    .updated-note {
+      margin-top: 0;
+      text-align: left;
+    }
+  }
 }
 
 .card .projects-list li {