diff options
Diffstat (limited to 'app')
| -rw-r--r-- | app/assets/javascripts/groups/components/group_item.vue | 75 | ||||
| -rw-r--r-- | app/assets/stylesheets/framework/common.scss | 3 | ||||
| -rw-r--r-- | app/assets/stylesheets/pages/groups.scss | 52 |
3 files changed, 75 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; |