summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorAdriel Santiago <asantiago@gitlab.com>2018-08-07 23:23:23 +0000
committerFatih Acet <acetfatih@gmail.com>2018-08-07 23:23:23 +0000
commit69f0daf7d9ecc45386e99fedd99d56624c372fa1 (patch)
treede4dc9446f426a06124ebd6d4646d514373c307d
parent89b2df9b0f7268e4641b05f40b467038c4403b51 (diff)
downloadgitlab-ce-69f0daf7d9ecc45386e99fedd99d56624c372fa1.tar.gz
Resolve "Group dashboard > Line height is too tall for group names"
-rw-r--r--app/assets/javascripts/groups/components/group_item.vue75
-rw-r--r--app/assets/stylesheets/framework/common.scss3
-rw-r--r--app/assets/stylesheets/pages/groups.scss52
-rw-r--r--changelogs/unreleased/46703-group-dashboard-line-height-is-too-tall-for-group-names.yml5
4 files changed, 80 insertions, 55 deletions
diff --git a/app/assets/javascripts/groups/components/group_item.vue b/app/assets/javascripts/groups/components/group_item.vue
index efbf2e3a295..2b9e2a929fc 100644
--- a/app/assets/javascripts/groups/components/group_item.vue
+++ b/app/assets/javascripts/groups/components/group_item.vue
@@ -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"
diff --git a/app/assets/stylesheets/framework/common.scss b/app/assets/stylesheets/framework/common.scss
index c9865610b78..af17210f341 100644
--- a/app/assets/stylesheets/framework/common.scss
+++ b/app/assets/stylesheets/framework/common.scss
@@ -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; }
diff --git a/app/assets/stylesheets/pages/groups.scss b/app/assets/stylesheets/pages/groups.scss
index 05bf5596fb3..1587aebfe1d 100644
--- a/app/assets/stylesheets/pages/groups.scss
+++ b/app/assets/stylesheets/pages/groups.scss
@@ -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;
diff --git a/changelogs/unreleased/46703-group-dashboard-line-height-is-too-tall-for-group-names.yml b/changelogs/unreleased/46703-group-dashboard-line-height-is-too-tall-for-group-names.yml
new file mode 100644
index 00000000000..5b91c6d5a9f
--- /dev/null
+++ b/changelogs/unreleased/46703-group-dashboard-line-height-is-too-tall-for-group-names.yml
@@ -0,0 +1,5 @@
+---
+title: Solves group dashboard line height is too tall for group names.
+merge_request: 21033
+author:
+type: fixed