Commit 3c64ad4c authored by Annabel Dunstone Gray's avatar Annabel Dunstone Gray

Merge branch '56543-project-lists-further-iteration-improvements' into 'master'

Resolve "Project lists: further iteration & improvements"

Closes #56543

See merge request gitlab-org/gitlab-ce!24855
parents 6e73c383 a035bef5
import ProjectsList from '~/projects_list'; import ProjectsList from '~/projects_list';
import Star from '../../../star';
document.addEventListener('DOMContentLoaded', () => { document.addEventListener('DOMContentLoaded', () => {
new ProjectsList(); // eslint-disable-line no-new new ProjectsList(); // eslint-disable-line no-new
new Star('.project-row'); // eslint-disable-line no-new
}); });
import ProjectsList from '~/projects_list'; import ProjectsList from '~/projects_list';
import Star from '../../../star';
document.addEventListener('DOMContentLoaded', () => { document.addEventListener('DOMContentLoaded', () => {
new ProjectsList(); // eslint-disable-line no-new new ProjectsList(); // eslint-disable-line no-new
new Star('.project-row'); // eslint-disable-line no-new
}); });
...@@ -946,6 +946,11 @@ pre.light-well { ...@@ -946,6 +946,11 @@ pre.light-well {
.flex-wrapper { .flex-wrapper {
min-width: 0; min-width: 0;
margin-top: -$gl-padding-8; // negative margin required for flex-wrap margin-top: -$gl-padding-8; // negative margin required for flex-wrap
flex: 1 1 100%;
.project-title {
line-height: 20px;
}
} }
p, p,
...@@ -984,14 +989,16 @@ pre.light-well { ...@@ -984,14 +989,16 @@ pre.light-well {
} }
.controls { .controls {
margin-top: $gl-padding-8; @include media-breakpoint-down(xs) {
margin-top: $gl-padding-8;
}
@include media-breakpoint-down(md) { @include media-breakpoint-up(sm) {
margin-top: 0; margin-top: 0;
} }
@include media-breakpoint-down(xs) { @include media-breakpoint-up(lg) {
margin-top: $gl-padding-8; flex: 1 1 40%;
} }
.icon-wrapper { .icon-wrapper {
...@@ -1041,7 +1048,7 @@ pre.light-well { ...@@ -1041,7 +1048,7 @@ pre.light-well {
min-height: 40px; min-height: 40px;
min-width: 40px; min-width: 40px;
.identicon.s64 { .identicon.s48 {
font-size: 16px; font-size: 16px;
} }
} }
......
...@@ -12,21 +12,20 @@ ...@@ -12,21 +12,20 @@
- css_class += " no-description" if project.description.blank? && !show_last_commit_as_description - css_class += " no-description" if project.description.blank? && !show_last_commit_as_description
- cache_key = project_list_cache_key(project) - cache_key = project_list_cache_key(project)
- updated_tooltip = time_ago_with_tooltip(project.last_activity_date) - updated_tooltip = time_ago_with_tooltip(project.last_activity_date)
- css_details_class = compact_mode ? "d-flex flex-column flex-sm-row flex-md-row align-items-sm-center" : "align-items-center flex-md-fill flex-lg-column d-sm-flex d-lg-block" - css_controls_class = compact_mode ? "" : "flex-lg-row justify-content-lg-between"
- css_controls_class = compact_mode ? "" : "align-items-md-end align-items-lg-center flex-lg-row"
%li.project-row.d-flex{ class: css_class } %li.project-row.d-flex{ class: css_class }
= cache(cache_key) do = cache(cache_key) do
- if avatar - if avatar
.avatar-container.s64.flex-grow-0.flex-shrink-0 .avatar-container.s48.flex-grow-0.flex-shrink-0
= link_to project_path(project), class: dom_class(project) do = link_to project_path(project), class: dom_class(project) do
- if project.creator && use_creator_avatar - if project.creator && use_creator_avatar
= image_tag avatar_icon_for_user(project.creator, 64), class: "avatar s65", alt:'' = image_tag avatar_icon_for_user(project.creator, 48), class: "avatar s65", alt:''
- else - else
= project_icon(project, alt: '', class: 'avatar project-avatar s64', width: 64, height: 64) = project_icon(project, alt: '', class: 'avatar project-avatar s48', width: 48, height: 48)
.project-details.flex-sm-fill{ class: css_details_class } .project-details.d-sm-flex.flex-sm-fill.align-items-center
.flex-wrapper.flex-fill .flex-wrapper
.d-flex.align-items-center.flex-wrap .d-flex.align-items-center.flex-wrap.project-title
%h2.d-flex.prepend-top-8 %h2.d-flex.prepend-top-8
= link_to project_path(project), class: 'text-plain' do = link_to project_path(project), class: 'text-plain' do
%span.project-full-name.append-right-8>< %span.project-full-name.append-right-8><
...@@ -52,13 +51,13 @@ ...@@ -52,13 +51,13 @@
%span.user-access-role.d-block= Gitlab::Access.human_access(access) %span.user-access-role.d-block= Gitlab::Access.human_access(access)
- if show_last_commit_as_description - if show_last_commit_as_description
.description.d-none.d-sm-block.prepend-top-8.append-right-default .description.d-none.d-sm-block.append-right-default
= link_to_markdown(project.commit.title, project_commit_path(project, project.commit), class: "commit-row-message") = link_to_markdown(project.commit.title, project_commit_path(project, project.commit), class: "commit-row-message")
- elsif project.description.present? - elsif project.description.present?
.description.d-none.d-sm-block.prepend-top-8.append-right-default .description.d-none.d-sm-block.append-right-default
= markdown_field(project, :description) = markdown_field(project, :description)
.controls.d-flex.flex-row.flex-sm-column.flex-md-column.align-items-center.align-items-sm-end.flex-wrap.flex-shrink-0{ class: css_controls_class } .controls.d-flex.flex-sm-column.align-items-center.align-items-sm-end.flex-wrap.flex-shrink-0{ class: css_controls_class }
.icon-container.d-flex.align-items-center .icon-container.d-flex.align-items-center
- if project.archived - if project.archived
%span.d-flex.icon-wrapper.badge.badge-warning archived %span.d-flex.icon-wrapper.badge.badge-warning archived
...@@ -74,13 +73,13 @@ ...@@ -74,13 +73,13 @@
= number_with_delimiter(project.forks_count) = number_with_delimiter(project.forks_count)
- if show_merge_request_count?(disabled: !merge_requests, compact_mode: compact_mode) - if show_merge_request_count?(disabled: !merge_requests, compact_mode: compact_mode)
= link_to project_merge_requests_path(project), = link_to project_merge_requests_path(project),
class: "d-none d-lg-flex align-items-center icon-wrapper merge-requests has-tooltip", class: "d-none d-xl-flex align-items-center icon-wrapper merge-requests has-tooltip",
title: _('Merge Requests'), data: { container: 'body', placement: 'top' } do title: _('Merge Requests'), data: { container: 'body', placement: 'top' } do
= sprite_icon('git-merge', size: 14, css_class: 'append-right-4') = sprite_icon('git-merge', size: 14, css_class: 'append-right-4')
= number_with_delimiter(project.open_merge_requests_count) = number_with_delimiter(project.open_merge_requests_count)
- if show_issue_count?(disabled: !issues, compact_mode: compact_mode) - if show_issue_count?(disabled: !issues, compact_mode: compact_mode)
= link_to project_issues_path(project), = link_to project_issues_path(project),
class: "d-none d-lg-flex align-items-center icon-wrapper issues has-tooltip", class: "d-none d-xl-flex align-items-center icon-wrapper issues has-tooltip",
title: _('Issues'), data: { container: 'body', placement: 'top' } do title: _('Issues'), data: { container: 'body', placement: 'top' } do
= sprite_icon('issues', size: 14, css_class: 'append-right-4') = sprite_icon('issues', size: 14, css_class: 'append-right-4')
= number_with_delimiter(project.open_issues_count) = number_with_delimiter(project.open_issues_count)
...@@ -89,19 +88,3 @@ ...@@ -89,19 +88,3 @@
= render_project_pipeline_status(project.pipeline_status, tooltip_placement: 'top') = render_project_pipeline_status(project.pipeline_status, tooltip_placement: 'top')
.updated-note .updated-note
%span Updated #{updated_tooltip} %span Updated #{updated_tooltip}
.d-none.d-lg-flex.align-item-stretch
- unless compact_mode
- if current_user
%button.star-button.btn.btn-default.d-flex.align-items-center.star-btn.toggle-star{ type: "button", data: { endpoint: toggle_star_project_path(project, :json) } }
- if current_user.starred?(project)
= sprite_icon('star', { css_class: 'icon' })
%span.starred= s_('ProjectOverview|Unstar')
- else
= sprite_icon('star-o', { css_class: 'icon' })
%span= s_('ProjectOverview|Star')
- else
= link_to new_user_session_path, class: 'btn btn-default has-tooltip count-badge-button d-flex align-items-center star-btn', title: s_('ProjectOverview|You must sign in to star a project') do
= sprite_icon('star-o', { css_class: 'icon' })
%span= s_('ProjectOverview|Star')
---
title: Project list UI improvements
merge_request: 24855
author:
type: other
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment