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;
} }
}
.controls { a {
line-height: $list-text-height; color: $gl-text-color;
}
.badge { .avatar-container,
@media (max-width: $screen-xs-max) { .controls {
display: none; flex: 0 0 auto;
} }
}
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,44 +10,44 @@ ...@@ -10,44 +10,44 @@
%li.project-row{ class: css_class } %li.project-row{ class: css_class }
= cache(cache_key) do = cache(cache_key) do
- if avatar
.avatar-container.s40
- if use_creator_avatar
= image_tag avatar_icon(project.creator.email, 40), class: "avatar s40", alt:''
- else
= 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.namespace-name
- if project.namespace && !skip_namespace
= project.namespace.human_name
\/
%span.project-name.filter-title
= project.name
- if show_last_commit_as_description
.description.prepend-top-5
= link_to_gfm project.commit.title, namespace_project_commit_path(project.namespace, project, project.commit),
class: "commit-row-message"
- elsif project.description.present?
.description.prepend-top-5
= markdown_field(project, :description)
.controls .controls
- if project.archived - if project.archived
%span.label.label-warning archived %span.prepend-left-10.label.label-warning archived
- if project.pipeline_status.has_status? - if project.pipeline_status.has_status?
%span %span.prepend-left-10
= render_project_pipeline_status(project.pipeline_status) = render_project_pipeline_status(project.pipeline_status)
- if forks - if forks
%span %span.prepend-left-10
= icon('code-fork') = icon('code-fork')
= number_with_delimiter(project.forks_count) = number_with_delimiter(project.forks_count)
- if stars - if stars
%span %span.prepend-left-10
= icon('star') = icon('star')
= number_with_delimiter(project.star_count) = number_with_delimiter(project.star_count)
%span.visibility-icon.has-tooltip{ data: { container: 'body', placement: 'left' }, title: visibility_icon_description(project) } %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) = visibility_level_icon(project.visibility_level, fw: true)
.title
= link_to project_path(project), class: dom_class(project) do
- if avatar
.dash-project-avatar
.avatar-container.s40
- if use_creator_avatar
= image_tag avatar_icon(project.creator.email, 40), class: "avatar s40", alt:''
- else
= project_icon(project, alt: '', class: 'avatar project-avatar s40')
%span.project-full-name
%span.namespace-name
- if project.namespace && !skip_namespace
= project.namespace.human_name
\/
%span.project-name.filter-title
= project.name
- if show_last_commit_as_description
.description
= link_to_gfm project.commit.title, namespace_project_commit_path(project.namespace, project, project.commit),
class: "commit-row-message"
- elsif project.description.present?
.description
= markdown_field(project, :description)
---
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