diff options
author | Constance Okoghenun <constanceokoghenun@gmail.com> | 2019-01-11 17:54:45 +0300 |
---|---|---|
committer | Constance Okoghenun <constanceokoghenun@gmail.com> | 2019-01-11 17:54:45 +0300 |
commit | 25a123519326d0fdc8b7b8c98a8ccadfce6e2f97 (patch) | |
tree | 515350284f38f4858020f394b5fb89bc45874f2f /app/assets/stylesheets | |
parent | 6b2f81f6078e96f081154c50dc25e54fe7c09d6f (diff) |
Redesigned related merge requests in issue page
Updated the markup and styles for related merge requests in
issues page
Diffstat (limited to 'app/assets/stylesheets')
-rw-r--r-- | app/assets/stylesheets/components/related_items_list.scss | 370 | ||||
-rw-r--r-- | app/assets/stylesheets/pages/issues.scss | 14 | ||||
-rw-r--r-- | app/assets/stylesheets/pages/issues/issue_count_badge.scss | 6 |
3 files changed, 377 insertions, 13 deletions
diff --git a/app/assets/stylesheets/components/related_items_list.scss b/app/assets/stylesheets/components/related_items_list.scss new file mode 100644 index 00000000000..aaa12716663 --- /dev/null +++ b/app/assets/stylesheets/components/related_items_list.scss @@ -0,0 +1,370 @@ +$item-path-max-width: 160px; +$item-milestone-max-width: 120px; +$item-weight-max-width: 48px; + +.related-items-list { + padding: $gl-padding-4; + + &, + .list-item:last-child { + margin-bottom: 0; + } +} + +.item-body { + display: flex; + position: relative; + align-items: center; + padding: $gl-padding-8; + line-height: $gl-line-height; + + .item-contents { + display: flex; + align-items: center; + flex-wrap: wrap; + flex-grow: 1; + } + + .issue-token-state-icon-open, + .issue-token-state-icon-closed, + .confidential-icon, + .item-milestone .icon, + .item-weight .board-card-info-icon { + min-width: $gl-padding; + cursor: help; + } + + .issue-token-state-icon-open, + .issue-token-state-icon-closed { + margin-right: $gl-padding-4; + } + + .confidential-icon { + align-self: baseline; + color: $orange-600; + margin-right: $gl-padding-4; + } + + .item-title { + flex-basis: 100%; + margin-bottom: $gl-padding-8; + font-size: $gl-font-size-small; + + &.mr-title { + font-weight: $gl-font-weight-bold; + } + + .sortable-link { + max-width: 85%; + } + + .issue-token-state-icon-open, + .issue-token-state-icon-closed { + display: none; + } + } + + .item-meta { + display: flex; + flex-wrap: wrap; + flex-basis: 100%; + font-size: $gl-font-size-small; + color: $gl-text-color-secondary; + + .item-meta-child { + order: 0; + display: flex; + flex-wrap: wrap; + flex-basis: 100%; + + .item-due-date, + .item-weight { + margin-left: $gl-padding-8; + } + + .item-milestone, + .item-weight { + cursor: help; + } + + .item-milestone { + text-decoration: none; + max-width: $item-milestone-max-width; + } + + .item-due-date { + margin-right: 0; + } + + .item-weight { + margin-right: 0; + max-width: $item-weight-max-width; + } + } + + .item-path-id .path-id-text, + .item-milestone .milestone-title, + .item-due-date, + .item-weight .board-card-info-text { + color: $gl-text-color-secondary; + display: inline-block; + text-overflow: ellipsis; + overflow: hidden; + white-space: nowrap; + } + + .item-path-id { + margin-top: $gl-padding-4; + font-size: $gl-font-size-xs; + white-space: nowrap; + + .path-id-text { + font-weight: $gl-font-weight-bold; + max-width: $item-path-max-width; + } + + .issue-token-state-icon-open, + .issue-token-state-icon-closed { + display: block; + } + + &:not(.mr-item-path) { + order: 1; + } + } + + .item-milestone .ic-clock { + color: $gl-text-color-tertiary; + margin-right: $gl-padding-4; + } + + .item-assignees { + order: 2; + align-self: flex-end; + align-items: center; + margin-left: auto; + + .user-avatar-link { + margin-right: -$gl-padding-4; + + &:nth-of-type(1) { + z-index: 2; + } + + &:nth-of-type(2) { + z-index: 1; + } + + &:last-child { + margin-right: 0; + } + } + + .avatar { + height: $gl-padding; + width: $gl-padding; + margin-right: 0; + vertical-align: bottom; + } + + .avatar-counter { + height: $gl-padding; + border: 1px solid transparent; + background-color: $gl-text-color-tertiary; + font-weight: $gl-font-weight-bold; + padding: 0 $gl-padding-4; + line-height: $gl-padding; + } + } + } + + .btn-item-remove { + position: absolute; + right: 0; + top: $gl-padding-4 / 2; + padding: $gl-padding-4; + margin-right: $gl-padding-4 / 2; + line-height: 0; + border-color: transparent; + color: $gl-text-color-secondary; + + &:hover { + color: $gl-text-color; + } + } +} + +@include media-breakpoint-up(sm) { + .item-body { + .item-contents .item-title .sortable-link { + max-width: 90%; + } + } +} + +/* Small devices (landscape phones, 768px and up) */ +@include media-breakpoint-up(md) { + .item-body { + .item-contents { + min-width: 0; + + .item-title { + flex-basis: unset; + // 98% because we compensate + // for remove button which is + // positioned absolutely + width: 95%; + margin-bottom: $gl-padding-4; + + .sortable-link { + text-overflow: ellipsis; + overflow: hidden; + white-space: nowrap; + max-width: 100%; + } + } + + .item-meta { + .item-path-id { + order: 0; + margin-top: 0; + } + + .item-meta-child { + flex-basis: unset; + margin-left: auto; + margin-right: $gl-padding-4; + + ~ .item-assignees { + margin-left: $gl-padding-4; + } + } + + .item-assignees { + margin-bottom: 0; + margin-left: 0; + order: 2; + } + } + } + + .btn-item-remove { + order: 1; + } + } +} + +/* Medium devices (desktops, 992px and up) */ +@include media-breakpoint-up(lg) { + .item-body { + padding: $gl-padding; + + .item-title { + font-size: $gl-font-size; + } + + .item-meta .item-path-id { + font-size: inherit; // Base size given to `item-meta` is `$gl-font-size-small` + } + + .issue-token-state-icon-open, + .issue-token-state-icon-closed { + margin-right: $gl-padding-4; + } + } +} + +/* Large devices (large desktops, 1200px and up) */ +@include media-breakpoint-up(xl) { + .item-body { + padding: $gl-padding-8; + padding-left: $gl-padding; + + .item-contents { + flex-wrap: nowrap; + overflow: hidden; + + .item-title { + display: flex; + margin-bottom: 0; + min-width: 0; + width: auto; + flex-basis: unset; + font-weight: $gl-font-weight-normal; + + .sortable-link { + display: block; + text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; + } + + .issue-token-state-icon-open, + .issue-token-state-icon-closed { + display: block; + margin-right: $gl-padding-8; + } + + .confidential-icon { + align-self: auto; + margin-top: 0; + } + } + + .item-meta { + margin-top: 0; + justify-content: flex-end; + flex: 1; + flex-wrap: nowrap; + + .item-path-id { + order: 0; + margin-top: 0; + margin-left: $gl-padding-8; + margin-right: auto; + + .issue-token-state-icon-open, + .issue-token-state-icon-closed { + display: none; + } + } + + .item-meta-child { + margin-left: $gl-padding-8; + flex-wrap: nowrap; + } + + .item-assignees { + flex-grow: 0; + margin-top: 0; + margin-right: $gl-padding-4; + + .avatar { + height: $gl-padding-24; + width: $gl-padding-24; + } + + .avatar-counter { + height: $gl-padding-24; + min-width: $gl-padding-24; + line-height: $gl-padding-24; + border-radius: $gl-padding-24; + } + } + } + } + + .btn-item-remove { + position: relative; + align-self: center; + top: initial; + right: 0; + margin-right: 0; + padding: $btn-sm-side-margin; + + &:hover { + border-color: $border-color; + } + } + } +} diff --git a/app/assets/stylesheets/pages/issues.scss b/app/assets/stylesheets/pages/issues.scss index 6c847fc0d53..0037364978c 100644 --- a/app/assets/stylesheets/pages/issues.scss +++ b/app/assets/stylesheets/pages/issues.scss @@ -80,7 +80,6 @@ ul.related-merge-requests > li { } } -.merge-requests-title, .related-branches-title { font-size: 16px; font-weight: $gl-font-weight-bold; @@ -91,23 +90,16 @@ ul.related-merge-requests > li { } .merge-request-status { - font-size: 13px; - padding: 0 5px; - color: $white-light; - height: 20px; - border-radius: 3px; - line-height: 18px; - &.merged { - background: $blue-500; + color: $blue-500; } &.closed { - background: $red-500; + color: $red-500; } &.open { - background: $green-500; + color: $green-500; } } diff --git a/app/assets/stylesheets/pages/issues/issue_count_badge.scss b/app/assets/stylesheets/pages/issues/issue_count_badge.scss index 4fba89e956b..64ca61f7094 100644 --- a/app/assets/stylesheets/pages/issues/issue_count_badge.scss +++ b/app/assets/stylesheets/pages/issues/issue_count_badge.scss @@ -1,11 +1,13 @@ -.issue-count-badge { +.issue-count-badge, +.mr-count-badge { display: inline-flex; border-radius: $border-radius-base; border: 1px solid $border-color; padding: 5px $gl-padding-8; } -.issue-count-badge-count { +.issue-count-badge-count, +.mr-count-badge-count { display: inline-flex; align-items: center; } |