Commit b507d93a authored by Fatih Acet's avatar Fatih Acet 🙌

Merge branch '46703-group-dashboard-line-height-is-too-tall-for-group-names' into 'master'

Resolve "Group dashboard > Line height is too tall for group names"

Closes #46703 and #50064

See merge request gitlab-org/gitlab-ce!21033
parents 89b2df9b 69f0daf7
......@@ -78,17 +78,10 @@ export default {
>
<div
:class="{ 'project-row-contents': !isGroup }"
class="group-row-contents">
<item-actions
v-if="isGroup"
:group="group"
:parent-group="parentGroup"
/>
<item-stats
:item="group"
/>
class="group-row-contents d-flex justify-content-end align-items-center"
>
<div
class="folder-toggle-wrap"
class="folder-toggle-wrap append-right-4 d-flex align-items-center"
>
<item-caret
:is-group-open="group.isOpen"
......@@ -100,7 +93,7 @@ export default {
</div>
<div
:class="{ 'content-loading': group.isChildrenLoading }"
class="avatar-container prepend-top-8 prepend-left-5 s24 d-none d-sm-block"
class="avatar-container s24 d-none d-sm-block"
>
<a
:href="group.relativePath"
......@@ -120,32 +113,46 @@ export default {
</a>
</div>
<div
class="title namespace-title"
class="group-text flex-grow"
>
<a
v-tooltip
:href="group.relativePath"
:title="group.fullName"
class="no-expand"
data-placement="bottom"
>{{
// ending bracket must be by closing tag to prevent
// link hover text-decoration from over-extending
group.name
}}</a>
<span
v-if="group.permission"
class="user-access-role"
<div
class="title namespace-title append-right-8"
>
{{ group.permission }}
</span>
</div>
<div
v-if="group.description"
class="description">
<span v-html="group.description">
</span>
<a
v-tooltip
:href="group.relativePath"
:title="group.fullName"
class="no-expand"
data-placement="bottom"
>{{
// ending bracket must be by closing tag to prevent
// link hover text-decoration from over-extending
group.name
}}</a>
<span
v-if="group.permission"
class="user-access-role"
>
{{ group.permission }}
</span>
</div>
<div
v-if="group.description"
class="description"
>
<span v-html="group.description">
</span>
</div>
</div>
<item-stats
:item="group"
class="group-stats prepend-top-2"
/>
<item-actions
v-if="isGroup"
:group="group"
:parent-group="parentGroup"
/>
</div>
<group-folder
v-if="group.isOpen && hasChildren"
......
......@@ -454,6 +454,7 @@ img.emoji {
.prepend-left-10 { margin-left: 10px; }
.prepend-left-default { margin-left: $gl-padding; }
.prepend-left-20 { margin-left: 20px; }
.append-right-4 { margin-right: 4px; }
.append-right-5 { margin-right: 5px; }
.append-right-8 { margin-right: 8px; }
.append-right-10 { margin-right: 10px; }
......@@ -470,3 +471,5 @@ img.emoji {
.center { text-align: center; }
.vertical-align-middle { vertical-align: middle; }
.flex-align-self-center { align-self: center; }
.flex-grow { flex-grow: 1; }
.flex-no-shrink { flex-shrink: 0; }
......@@ -290,9 +290,8 @@
}
.folder-toggle-wrap {
float: left;
line-height: $list-text-height;
font-size: 0;
flex-shrink: 0;
span {
font-size: $gl-font-size;
......@@ -308,7 +307,7 @@
width: 15px;
svg {
margin-bottom: 2px;
margin-bottom: 1px;
}
}
......@@ -391,9 +390,17 @@
cursor: pointer;
}
.avatar-container > a {
width: 100%;
text-decoration: none;
.group-text {
min-width: 0; // allows for truncated text within flex children
}
.avatar-container {
flex-shrink: 0;
> a {
width: 100%;
text-decoration: none;
}
}
&.has-more-items {
......@@ -401,9 +408,18 @@
padding: 20px 10px;
}
.description {
p {
@include str-truncated;
max-width: none;
}
}
.stats {
position: relative;
line-height: 46px;
line-height: normal;
flex-shrink: 0;
> span {
display: inline-flex;
......@@ -422,14 +438,20 @@
}
.controls {
margin-left: 5px;
flex-shrink: 0;
> .btn {
margin-right: $btn-margin-5;
margin: 0 0 0 $btn-margin-5;
}
}
}
@include media-breakpoint-down(xs) {
.group-stats {
display: none;
}
}
.project-row-contents .stats {
line-height: inherit;
......@@ -451,18 +473,6 @@
}
}
ul.group-list-tree {
li.group-row {
> .group-row-contents .title {
line-height: $list-text-height;
}
&.has-description > .group-row-contents .title {
line-height: inherit;
}
}
}
.js-groups-list-holder {
.groups-list-loading {
font-size: 34px;
......
---
title: Solves group dashboard line height is too tall for group names.
merge_request: 21033
author:
type: fixed
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