diff options
author | Annabel Dunstone Gray <annabel.dunstone@gmail.com> | 2019-04-12 15:01:00 -0500 |
---|---|---|
committer | Annabel Dunstone Gray <annabel.dunstone@gmail.com> | 2019-04-16 12:18:20 -0500 |
commit | 1c962d5886d61ae1d29f80a82f12f62d3f235ac3 (patch) | |
tree | 6852389275a6a07f74c74043283ebd9dfe9136c1 /app | |
parent | fe4f3a41b45df3396f27a0b4ee89dfb6582af937 (diff) | |
download | gitlab-ce-1c962d5886d61ae1d29f80a82f12f62d3f235ac3.tar.gz |
Fix stylelint warnings in related_items_list.scss59831-related-items-scss-cleanup-ce
This commit rearranges the styles in related_items_list
to adhere to stylelint's warnings. It also adds some
utility classes where applicable
Diffstat (limited to 'app')
3 files changed, 211 insertions, 235 deletions
diff --git a/app/assets/javascripts/vue_shared/components/issue/issue_milestone.vue b/app/assets/javascripts/vue_shared/components/issue/issue_milestone.vue index d5d967e25bf..1f9670cf2fc 100644 --- a/app/assets/javascripts/vue_shared/components/issue/issue_milestone.vue +++ b/app/assets/javascripts/vue_shared/components/issue/issue_milestone.vue @@ -72,7 +72,7 @@ export default { <template> <div ref="milestoneDetails" class="issue-milestone-details"> <icon :size="16" class="inline icon" name="clock" /> - <span class="milestone-title">{{ milestone.title }}</span> + <span class="milestone-title d-inline-block">{{ milestone.title }}</span> <gl-tooltip :target="() => $refs.milestoneDetails" placement="bottom" class="js-item-milestone"> <span class="bold">{{ __('Milestone') }}</span> <br /> <span>{{ milestone.title }}</span> <br /> 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 d4d18614f93..bf96ce0bafb 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 @@ -81,8 +81,11 @@ export default { :title="stateTitle" :aria-label="state" data-html="true" + class="d-xl-none" /> - <span v-tooltip :title="itemPath" class="path-id-text">{{ itemPath }}</span> + <span v-tooltip :title="itemPath" class="path-id-text d-inline-block">{{ + itemPath + }}</span> {{ pathIdSeparator }}{{ itemId }} </div> <div class="item-meta-child d-flex align-items-center"> diff --git a/app/assets/stylesheets/components/related_items_list.scss b/app/assets/stylesheets/components/related_items_list.scss index 628dffc39f1..0fdb11d311a 100644 --- a/app/assets/stylesheets/components/related_items_list.scss +++ b/app/assets/stylesheets/components/related_items_list.scss @@ -11,6 +11,10 @@ $item-weight-max-width: 48px; } } +.sortable-link { + max-width: 85%; +} + .item-body { display: flex; position: relative; @@ -18,13 +22,6 @@ $item-weight-max-width: 48px; 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 { color: $green-500; } @@ -66,143 +63,136 @@ $item-weight-max-width: 48px; 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; + .item-path-id .path-id-text, + .item-milestone .milestone-title, + .item-due-date, + .item-weight .board-card-info-text { color: $gl-text-color-secondary; + text-overflow: ellipsis; + overflow: hidden; + white-space: nowrap; + } +} - .item-meta-child { - order: 0; - display: flex; - flex-wrap: wrap; - flex-basis: 100%; +.item-contents { + display: flex; + align-items: center; + flex-wrap: wrap; + flex-grow: 1; +} - .item-due-date, - .item-weight { - margin-left: $gl-padding-8; - } +.item-meta { + display: flex; + flex-wrap: wrap; + flex-basis: 100%; + font-size: $gl-font-size-small; + color: $gl-text-color-secondary; - .item-milestone, - .item-weight { - cursor: help; - } + .item-meta-child { + order: 0; + display: flex; + flex-wrap: wrap; + flex-basis: 100%; + } - .item-milestone { - text-decoration: none; - max-width: $item-milestone-max-width; - } + .item-milestone, + .item-weight { + cursor: help; + } - .item-due-date { - margin-right: 0; - } + .item-milestone { + text-decoration: none; + max-width: $item-milestone-max-width; - .item-weight { - margin-right: 0; - max-width: $item-weight-max-width; - } + .ic-clock { + color: $gl-text-color-tertiary; + margin-right: $gl-padding-4; } + } - .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-weight { + margin-right: 0; + max-width: $item-weight-max-width; + } - .item-path-id { - margin-top: $gl-padding-4; - font-size: $gl-font-size-xs; - white-space: nowrap; + .item-assignees { + order: 2; + align-self: flex-end; + align-items: center; + margin-left: auto; - .path-id-text { - font-weight: $gl-font-weight-bold; - max-width: $item-path-max-width; + .user-avatar-link { + margin-right: -$gl-padding-4; + + &:nth-of-type(1) { + z-index: 2; } - .issue-token-state-icon-open, - .issue-token-state-icon-closed { - display: block; + &:nth-of-type(2) { + z-index: 1; } - &:not(.mr-item-path) { - order: 1; + &:last-child { + margin-right: 0; } } - .item-milestone .ic-clock { - color: $gl-text-color-tertiary; - margin-right: $gl-padding-4; + .avatar { + height: $gl-padding; + width: $gl-padding; + margin-right: 0; + vertical-align: bottom; } - .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; - } + .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; + } + } +} - &:nth-of-type(2) { - z-index: 1; - } +.item-path-id { + margin-top: $gl-padding-4; + font-size: $gl-font-size-xs; + white-space: nowrap; - &:last-child { - margin-right: 0; - } - } + .path-id-text { + font-weight: $gl-font-weight-bold; + max-width: $item-path-max-width; + } - .avatar { - height: $gl-padding; - width: $gl-padding; - margin-right: 0; - vertical-align: bottom; - } + .issue-token-state-icon-open, + .issue-token-state-icon-closed { + display: block; + } - .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; - } - } + &:not(.mr-item-path) { + order: 1; } +} - .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; +.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; - } + &:hover { + color: $gl-text-color; } } @@ -212,18 +202,20 @@ $item-weight-max-width: 48px; } @include media-breakpoint-up(sm) { - .item-body { - .item-contents .item-title { - .mr-title-link, - .sortable-link { - max-width: 90%; - } - } + .sortable-link { + max-width: 90%; } } /* Small devices (landscape phones, 768px and up) */ @include media-breakpoint-up(md) { + .sortable-link { + text-overflow: ellipsis; + overflow: hidden; + white-space: nowrap; + max-width: 100%; + } + .item-body { .item-contents { min-width: 0; @@ -235,37 +227,6 @@ $item-weight-max-width: 48px; // positioned absolutely width: 95%; margin-bottom: $gl-padding-4; - - .mr-title-link, - .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; - } } } @@ -273,6 +234,29 @@ $item-weight-max-width: 48px; order: 1; } } + + .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) */ @@ -287,11 +271,6 @@ $item-weight-max-width: 48px; .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; - } } } @@ -301,93 +280,87 @@ $item-weight-max-width: 48px; 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; - .item-title { - display: flex; - margin-bottom: 0; - min-width: 0; - width: auto; - flex-basis: unset; - font-weight: $gl-font-weight-normal; - - .mr-title-link, - .sortable-link { - display: block; - text-overflow: ellipsis; - white-space: nowrap; - overflow: hidden; - line-height: 1.3; - } - - .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; - } + .issue-token-state-icon-open, + .issue-token-state-icon-closed { + display: block; + margin-right: $gl-padding-8; } - .item-meta { + .confidential-icon { + align-self: auto; 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; + .item-contents { + flex-wrap: nowrap; + overflow: hidden; + } - &:hover { - border-color: $border-color; - } + .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; + } + + .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; + } + } + + .sortable-link { + display: block; + text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; + line-height: 1.3; + } } |