diff options
author | Annabel Dunstone Gray <annabel.dunstone@gmail.com> | 2019-04-18 13:53:42 -0500 |
---|---|---|
committer | Annabel Dunstone Gray <annabel.dunstone@gmail.com> | 2019-04-23 06:45:31 -0500 |
commit | cfa19b14cd23274419861d743a59bb291b1c08a8 (patch) | |
tree | 453bea30ee7869e7b437cf1680aedd492a6b0a6a | |
parent | fc77a89d589a3116cc710bb4dab6ff16fd4dd775 (diff) | |
download | gitlab-ce-cfa19b14cd23274419861d743a59bb291b1c08a8.tar.gz |
Remove related items CSS properties and add utility classes59831-related-items-css-cleanup-ce
-rw-r--r-- | app/assets/javascripts/vue_shared/components/issue/related_issuable_item.vue | 22 | ||||
-rw-r--r-- | app/assets/stylesheets/components/related_items_list.scss | 97 |
2 files changed, 24 insertions, 95 deletions
diff --git a/app/assets/javascripts/vue_shared/components/issue/related_issuable_item.vue b/app/assets/javascripts/vue_shared/components/issue/related_issuable_item.vue index bf96ce0bafb..ffde55bf083 100644 --- a/app/assets/javascripts/vue_shared/components/issue/related_issuable_item.vue +++ b/app/assets/javascripts/vue_shared/components/issue/related_issuable_item.vue @@ -45,10 +45,10 @@ export default { 'issuable-info-container': !canReorder, 'card-body': canReorder, }" - class="item-body" + class="item-body d-flex align-items-center p-2 p-lg-3 p-xl-2 pl-xl-3" > - <div class="item-contents"> - <div class="item-title d-flex align-items-center"> + <div class="item-contents d-flex align-items-center flex-wrap flex-grow-1 flex-xl-nowrap"> + <div class="item-title d-flex align-items-center mb-1 mb-xl-0"> <icon v-if="hasState" v-tooltip @@ -65,13 +65,15 @@ export default { name="eye-slash" :size="16" :title="__('Confidential')" - class="confidential-icon append-right-4" + class="confidential-icon append-right-4 align-self-baseline align-self-md-auto mt-xl-0" :aria-label="__('Confidential')" /> <a :href="computedPath" class="sortable-link">{{ title }}</a> </div> - <div class="item-meta"> - <div class="d-flex align-items-center item-path-id"> + <div class="item-meta d-flex flex-wrap mt-xl-0 justify-content-xl-end flex-xl-nowrap"> + <div + class="d-flex align-items-center item-path-id order-md-0 mt-md-0 mt-1 ml-xl-2 mr-xl-auto" + > <icon v-if="hasState" v-tooltip @@ -88,7 +90,9 @@ export default { }}</span> {{ pathIdSeparator }}{{ itemId }} </div> - <div class="item-meta-child d-flex align-items-center"> + <div + class="item-meta-child d-flex align-items-center order-0 flex-wrap mr-md-1 ml-md-auto ml-xl-2 flex-xl-nowrap" + > <span v-if="hasPipeline" class="mr-ci-status pr-2"> <a :href="pipelineStatus.details_path"> <ci-icon v-gl-tooltip :status="pipelineStatus" :title="pipelineStatusTooltip" /> @@ -105,7 +109,7 @@ export default { <issue-assignees v-if="assignees.length" :assignees="assignees" - class="item-assignees d-inline-flex" + class="item-assignees d-inline-flex align-items-center align-self-end ml-auto ml-md-0 mb-md-0 order-2 flex-xl-grow-0 mt-xl-0 mr-xl-1" /> </div> </div> @@ -115,7 +119,7 @@ export default { v-tooltip :disabled="removeDisabled" type="button" - class="btn btn-default btn-svg btn-item-remove js-issue-item-remove-button qa-remove-issue-button" + class="btn btn-default btn-svg btn-item-remove js-issue-item-remove-button qa-remove-issue-button mr-xl-0 align-self-xl-center" title="Remove" aria-label="Remove" @click="onRemoveRequest" diff --git a/app/assets/stylesheets/components/related_items_list.scss b/app/assets/stylesheets/components/related_items_list.scss index 0fdb11d311a..7f9cf1266b1 100644 --- a/app/assets/stylesheets/components/related_items_list.scss +++ b/app/assets/stylesheets/components/related_items_list.scss @@ -16,10 +16,7 @@ $item-weight-max-width: 48px; } .item-body { - display: flex; position: relative; - align-items: center; - padding: $gl-padding-8; line-height: $gl-line-height; .issue-token-state-icon-open { @@ -49,14 +46,11 @@ $item-weight-max-width: 48px; } .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 { @@ -80,24 +74,12 @@ $item-weight-max-width: 48px; } } -.item-contents { - display: flex; - align-items: center; - flex-wrap: wrap; - flex-grow: 1; -} - .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%; } @@ -117,16 +99,10 @@ $item-weight-max-width: 48px; } .item-weight { - margin-right: 0; max-width: $item-weight-max-width; } .item-assignees { - order: 2; - align-self: flex-end; - align-items: center; - margin-left: auto; - .user-avatar-link { margin-right: -$gl-padding-4; @@ -162,7 +138,6 @@ $item-weight-max-width: 48px; } .item-path-id { - margin-top: $gl-padding-4; font-size: $gl-font-size-xs; white-space: nowrap; @@ -176,8 +151,10 @@ $item-weight-max-width: 48px; display: block; } - &:not(.mr-item-path) { - order: 1; + @include media-breakpoint-down(sm) { + &:not(.mr-item-path) { + order: 1; + } } } @@ -219,15 +196,14 @@ $item-weight-max-width: 48px; .item-body { .item-contents { min-width: 0; + } - .item-title { - flex-basis: unset; - // 95% because we compensate - // for remove button which is - // positioned absolutely - width: 95%; - margin-bottom: $gl-padding-4; - } + .item-title { + flex-basis: unset; + // 95% because we compensate + // for remove button which is + // positioned absolutely + width: 95%; } .btn-item-remove { @@ -236,34 +212,19 @@ $item-weight-max-width: 48px; } .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; - } } } /* Medium devices (desktops, 992px and up) */ @include media-breakpoint-up(lg) { .item-body { - padding: $gl-padding; - .item-title { font-size: $gl-font-size; } @@ -277,12 +238,7 @@ $item-weight-max-width: 48px; /* Large devices (large desktops, 1200px and up) */ @include media-breakpoint-up(xl) { .item-body { - padding: $gl-padding-8; - padding-left: $gl-padding; - .item-title { - display: flex; - margin-bottom: 0; min-width: 0; width: auto; flex-basis: unset; @@ -293,43 +249,18 @@ $item-weight-max-width: 48px; display: block; margin-right: $gl-padding-8; } - - .confidential-icon { - align-self: auto; - margin-top: 0; - } } } .item-contents { - flex-wrap: nowrap; overflow: hidden; } .item-meta { - margin-top: 0; - justify-content: flex-end; flex: 1; - flex-wrap: nowrap; - - .item-meta-child { - margin-left: $gl-padding-8; - flex-wrap: nowrap; - } - } - - .item-path-id { - order: 0; - margin-top: 0; - margin-left: $gl-padding-8; - margin-right: auto; } .item-assignees { - flex-grow: 0; - margin-top: 0; - margin-right: $gl-padding-4; - .avatar { height: $gl-padding-24; width: $gl-padding-24; @@ -345,10 +276,8 @@ $item-weight-max-width: 48px; .btn-item-remove { position: relative; - align-self: center; top: initial; right: 0; - margin-right: 0; padding: $btn-sm-side-margin; &:hover { @@ -357,10 +286,6 @@ $item-weight-max-width: 48px; } .sortable-link { - display: block; - text-overflow: ellipsis; - white-space: nowrap; - overflow: hidden; line-height: 1.3; } } |