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 {
/*
* Projects list rendered on dashboard and user page
*/
.projects-list {
@include basic-list;
display: flex;
flex-direction: column;
.project-row {
border-color: $white-normal;
.project-full-name {
@include str-truncated;
> li {
display: flex;
align-items: center;
}
@media (max-width: $screen-xs-max) {
max-width: 50%;
}
}
h3 {
font-size: $gl-font-size;
}
.controls {
line-height: $list-text-height;
a {
color: $gl-text-color;
}
.badge {
@media (max-width: $screen-xs-max) {
display: none;
}
}
.avatar-container,
.controls {
flex: 0 0 auto;
}
a:hover {
text-decoration: none;
}
.avatar-container {
align-self: flex-start;
}
> span {
margin-left: 10px;
}
.project-details {
min-width: 0;
svg {
position: relative;
top: 2px;
}
p {
@include str-truncated(100%);
margin-bottom: 0;
}
}
.description p {
@media (max-width: $screen-xs-max) {
max-width: 50%;
}
}
.controls {
margin-left: auto;
}
.bottom {
padding-top: $gl-padding;
padding-bottom: 0;
.ci-status-link {
display: inline-block;
line-height: 17px;
vertical-align: middle;
&:hover {
text-decoration: none;
}
}
}
......
......@@ -10,7 +10,7 @@
.js-projects-list-holder
- if projects.any?
%ul.projects-list.content-list
%ul.projects-list
- projects.each_with_index do |project, i|
- css_class = (i >= projects_limit) ? 'hide' : nil
= render "shared/projects/project", project: project, skip_namespace: skip_namespace,
......
......@@ -10,44 +10,44 @@
%li.project-row{ class: css_class }
= 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
- if project.archived
%span.label.label-warning archived
%span.prepend-left-10.label.label-warning archived
- if project.pipeline_status.has_status?
%span
%span.prepend-left-10
= render_project_pipeline_status(project.pipeline_status)
- if forks
%span
%span.prepend-left-10
= icon('code-fork')
= number_with_delimiter(project.forks_count)
- if stars
%span
%span.prepend-left-10
= icon('star')
= 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)
.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