Commit 068ce7dd authored by Phil Hughes's avatar Phil Hughes

Fixes project list lines breaking

This will only hapen in certain situations ie. when the star count is a
lot. We were previously fixing it by hard coding a max-width.

This changes it to use flexbox which allows the content to decide when
it should be truncated. The rows don't always need truncating, so we
shouldn't hard code a width.

Closes #29018
parent 3918c303
...@@ -582,54 +582,54 @@ pre.light-well { ...@@ -582,54 +582,54 @@ pre.light-well {
/* /*
* Projects list rendered on dashboard and user page * Projects list rendered on dashboard and user page
*/ */
.projects-list { .projects-list {
@include basic-list; @include basic-list;
display: flex;
flex-direction: column;
.project-row { > li {
border-color: $white-normal; display: flex;
align-items: center;
.project-full-name { }
@include str-truncated;
@media (max-width: $screen-xs-max) { h3 {
max-width: 50%; font-size: $gl-font-size;
} }
a {
color: $gl-text-color;
} }
.avatar-container,
.controls { .controls {
line-height: $list-text-height; flex: 0 0 auto;
.badge {
@media (max-width: $screen-xs-max) {
display: none;
}
} }
a:hover { .avatar-container {
text-decoration: none; align-self: flex-start;
} }
> span { .project-details {
margin-left: 10px; min-width: 0;
}
svg { p {
position: relative; @include str-truncated(100%);
top: 2px; margin-bottom: 0;
} }
} }
.description p { .controls {
@media (max-width: $screen-xs-max) { margin-left: auto;
max-width: 50%;
}
}
} }
.bottom { .ci-status-link {
padding-top: $gl-padding; display: inline-block;
padding-bottom: 0; line-height: 17px;
vertical-align: middle;
&:hover {
text-decoration: none;
}
} }
} }
......
...@@ -10,7 +10,7 @@ ...@@ -10,7 +10,7 @@
.js-projects-list-holder .js-projects-list-holder
- if projects.any? - if projects.any?
%ul.projects-list.content-list %ul.projects-list
- projects.each_with_index do |project, i| - projects.each_with_index do |project, i|
- css_class = (i >= projects_limit) ? 'hide' : nil - css_class = (i >= projects_limit) ? 'hide' : nil
= render "shared/projects/project", project: project, skip_namespace: skip_namespace, = render "shared/projects/project", project: project, skip_namespace: skip_namespace,
......
...@@ -10,32 +10,15 @@ ...@@ -10,32 +10,15 @@
%li.project-row{ class: css_class } %li.project-row{ class: css_class }
= cache(cache_key) do = cache(cache_key) do
.controls
- if project.archived
%span.label.label-warning archived
- if project.pipeline_status.has_status?
%span
= render_project_pipeline_status(project.pipeline_status)
- if forks
%span
= icon('code-fork')
= number_with_delimiter(project.forks_count)
- if stars
%span
= icon('star')
= number_with_delimiter(project.star_count)
%span.visibility-icon.has-tooltip{ data: { container: 'body', placement: 'left' }, title: visibility_icon_description(project) }
= visibility_level_icon(project.visibility_level, fw: true)
.title
= link_to project_path(project), class: dom_class(project) do
- if avatar - if avatar
.dash-project-avatar
.avatar-container.s40 .avatar-container.s40
- if use_creator_avatar - if use_creator_avatar
= image_tag avatar_icon(project.creator.email, 40), class: "avatar s40", alt:'' = image_tag avatar_icon(project.creator.email, 40), class: "avatar s40", alt:''
- else - else
= project_icon(project, alt: '', class: 'avatar project-avatar s40') = project_icon(project, alt: '', class: 'avatar project-avatar s40')
.project-details
%h3.prepend-top-0.append-bottom-0
= link_to project_path(project), class: dom_class(project) do
%span.project-full-name %span.project-full-name
%span.namespace-name %span.namespace-name
- if project.namespace && !skip_namespace - if project.namespace && !skip_namespace
...@@ -45,9 +28,26 @@ ...@@ -45,9 +28,26 @@
= project.name = project.name
- if show_last_commit_as_description - if show_last_commit_as_description
.description .description.prepend-top-5
= link_to_gfm project.commit.title, namespace_project_commit_path(project.namespace, project, project.commit), = link_to_gfm project.commit.title, namespace_project_commit_path(project.namespace, project, project.commit),
class: "commit-row-message" class: "commit-row-message"
- elsif project.description.present? - elsif project.description.present?
.description .description.prepend-top-5
= markdown_field(project, :description) = markdown_field(project, :description)
.controls
- if project.archived
%span.prepend-left-10.label.label-warning archived
- if project.pipeline_status.has_status?
%span.prepend-left-10
= render_project_pipeline_status(project.pipeline_status)
- if forks
%span.prepend-left-10
= icon('code-fork')
= number_with_delimiter(project.forks_count)
- if stars
%span.prepend-left-10
= icon('star')
= number_with_delimiter(project.star_count)
%span.prepend-left-10.visibility-icon.has-tooltip{ data: { container: 'body', placement: 'left' }, title: visibility_icon_description(project) }
= visibility_level_icon(project.visibility_level, fw: true)
---
title: Fixed projects list lines breaking
merge_request:
author:
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