Skip to content
Snippets Groups Projects
Commit 44941b0f authored by Sascha Eggenberger's avatar Sascha Eggenberger :speech_balloon:
Browse files

Unifies the sidebar width for work items and border color

parent e9e5bd5e
No related branches found
No related tags found
No related merge requests found
This commit is part of merge request !162845. Comments created here will be created in the context of that merge request.
...@@ -169,6 +169,9 @@ export default { ...@@ -169,6 +169,9 @@ export default {
workItemCrmContacts() { workItemCrmContacts() {
return this.isWidgetPresent(WIDGET_TYPE_CRM_CONTACTS) && this.glFeatures.workItemsAlpha; return this.isWidgetPresent(WIDGET_TYPE_CRM_CONTACTS) && this.glFeatures.workItemsAlpha;
}, },
defaultSidebarItemClasses() {
return 'work-item-attributes-item';
},
}, },
methods: { methods: {
isWidgetPresent(type, workItem = this.workItem) { isWidgetPresent(type, workItem = this.workItem) {
...@@ -182,7 +185,8 @@ export default { ...@@ -182,7 +185,8 @@ export default {
<div class="work-item-attributes-wrapper"> <div class="work-item-attributes-wrapper">
<template v-if="workItemAssignees"> <template v-if="workItemAssignees">
<work-item-assignees <work-item-assignees
class="gl-mb-5 js-assignee" class="js-assignee"
:class="defaultSidebarItemClasses"
:can-update="canUpdate" :can-update="canUpdate"
:full-path="fullPath" :full-path="fullPath"
:work-item-id="workItem.id" :work-item-id="workItem.id"
...@@ -200,7 +204,7 @@ export default { ...@@ -200,7 +204,7 @@ export default {
</template> </template>
<template v-if="workItemCrmContacts"> <template v-if="workItemCrmContacts">
<work-item-crm-contacts <work-item-crm-contacts
class="gl-mb-5" :class="defaultSidebarItemClasses"
:full-path="fullPath" :full-path="fullPath"
:work-item-id="workItem.id" :work-item-id="workItem.id"
:work-item-iid="workItem.iid" :work-item-iid="workItem.iid"
...@@ -209,7 +213,8 @@ export default { ...@@ -209,7 +213,8 @@ export default {
</template> </template>
<template v-if="workItemLabels"> <template v-if="workItemLabels">
<work-item-labels <work-item-labels
class="gl-mb-5 js-labels" class="js-labels"
:class="defaultSidebarItemClasses"
:can-update="canUpdate" :can-update="canUpdate"
:full-path="fullPath" :full-path="fullPath"
:work-item-id="workItem.id" :work-item-id="workItem.id"
...@@ -221,7 +226,7 @@ export default { ...@@ -221,7 +226,7 @@ export default {
</template> </template>
<template v-if="isWorkItemWeightEditable"> <template v-if="isWorkItemWeightEditable">
<work-item-weight <work-item-weight
class="gl-mb-5" :class="defaultSidebarItemClasses"
:can-update="canUpdate" :can-update="canUpdate"
:weight="workItemWeight.weight" :weight="workItemWeight.weight"
:work-item-id="workItem.id" :work-item-id="workItem.id"
...@@ -232,6 +237,7 @@ export default { ...@@ -232,6 +237,7 @@ export default {
</template> </template>
<template v-if="workItemRolledupDates && showRolledupDates"> <template v-if="workItemRolledupDates && showRolledupDates">
<work-item-rolledup-dates <work-item-rolledup-dates
:class="defaultSidebarItemClasses"
:can-update="canUpdate" :can-update="canUpdate"
:full-path="fullPath" :full-path="fullPath"
:due-date-is-fixed="workItemRolledupDates.dueDateIsFixed" :due-date-is-fixed="workItemRolledupDates.dueDateIsFixed"
...@@ -247,7 +253,8 @@ export default { ...@@ -247,7 +253,8 @@ export default {
</template> </template>
<template v-if="workItemMilestone"> <template v-if="workItemMilestone">
<work-item-milestone <work-item-milestone
class="gl-mb-5 js-milestone" class="js-milestone"
:class="defaultSidebarItemClasses"
:full-path="fullPath" :full-path="fullPath"
:work-item-id="workItem.id" :work-item-id="workItem.id"
:work-item-milestone="workItemMilestone.milestone" :work-item-milestone="workItemMilestone.milestone"
...@@ -261,7 +268,7 @@ export default { ...@@ -261,7 +268,7 @@ export default {
</template> </template>
<template v-if="workItemIteration"> <template v-if="workItemIteration">
<work-item-iteration <work-item-iteration
class="gl-mb-5" :class="defaultSidebarItemClasses"
:full-path="fullPath" :full-path="fullPath"
:iteration="workItemIteration.iteration" :iteration="workItemIteration.iteration"
:can-update="canUpdate" :can-update="canUpdate"
...@@ -276,6 +283,7 @@ export default { ...@@ -276,6 +283,7 @@ export default {
</template> </template>
<template v-if="workItemDueDate && !showRolledupDates"> <template v-if="workItemDueDate && !showRolledupDates">
<work-item-due-date <work-item-due-date
:class="defaultSidebarItemClasses"
:can-update="canUpdate" :can-update="canUpdate"
:due-date="workItemDueDate.dueDate" :due-date="workItemDueDate.dueDate"
:start-date="workItemDueDate.startDate" :start-date="workItemDueDate.startDate"
...@@ -287,7 +295,7 @@ export default { ...@@ -287,7 +295,7 @@ export default {
</template> </template>
<template v-if="workItemProgress"> <template v-if="workItemProgress">
<work-item-progress <work-item-progress
class="gl-mb-5" :class="defaultSidebarItemClasses"
:can-update="canUpdate" :can-update="canUpdate"
:progress="workItemProgress.progress" :progress="workItemProgress.progress"
:work-item-id="workItem.id" :work-item-id="workItem.id"
...@@ -297,7 +305,7 @@ export default { ...@@ -297,7 +305,7 @@ export default {
</template> </template>
<template v-if="workItemHealthStatus"> <template v-if="workItemHealthStatus">
<work-item-health-status <work-item-health-status
class="gl-mb-5" :class="defaultSidebarItemClasses"
:work-item-id="workItem.id" :work-item-id="workItem.id"
:work-item-iid="workItem.iid" :work-item-iid="workItem.iid"
:work-item-type="workItemType" :work-item-type="workItemType"
...@@ -307,7 +315,7 @@ export default { ...@@ -307,7 +315,7 @@ export default {
</template> </template>
<template v-if="workItemColor"> <template v-if="workItemColor">
<work-item-color <work-item-color
class="gl-mb-5" :class="defaultSidebarItemClasses"
:work-item="workItem" :work-item="workItem"
:full-path="fullPath" :full-path="fullPath"
:can-update="canUpdate" :can-update="canUpdate"
...@@ -316,7 +324,7 @@ export default { ...@@ -316,7 +324,7 @@ export default {
</template> </template>
<template v-if="workItemHierarchy && showParent"> <template v-if="workItemHierarchy && showParent">
<work-item-parent <work-item-parent
class="gl-mb-5 gl-pt-5 gl-border-t gl-border-gray-50" :class="defaultSidebarItemClasses"
:can-update="canUpdate" :can-update="canUpdate"
:work-item-id="workItem.id" :work-item-id="workItem.id"
:work-item-type="workItemType" :work-item-type="workItemType"
...@@ -334,7 +342,7 @@ export default { ...@@ -334,7 +342,7 @@ export default {
/> />
<work-item-time-tracking <work-item-time-tracking
v-if="workItemTimeTracking" v-if="workItemTimeTracking"
class="gl-mb-5 gl-pt-5 gl-border-t gl-border-gray-50" :class="defaultSidebarItemClasses"
:can-update="canUpdate" :can-update="canUpdate"
:time-estimate="workItemTimeTracking.timeEstimate" :time-estimate="workItemTimeTracking.timeEstimate"
:timelogs="workItemTimeTracking.timelogs.nodes" :timelogs="workItemTimeTracking.timelogs.nodes"
...@@ -345,7 +353,7 @@ export default { ...@@ -345,7 +353,7 @@ export default {
/> />
<participants <participants
v-if="workItemParticipants.length" v-if="workItemParticipants.length"
class="gl-mb-5 gl-pt-5 gl-border-t gl-border-gray-50" :class="defaultSidebarItemClasses"
:number-of-less-participants="10" :number-of-less-participants="10"
:participants="workItemParticipants" :participants="workItemParticipants"
/> />
......
...@@ -140,7 +140,7 @@ export default { ...@@ -140,7 +140,7 @@ export default {
<template> <template>
<div> <div>
<gl-loading-icon v-if="isLoading" class="gl-my-2" /> <gl-loading-icon v-if="isLoading" class="gl-my-2" />
<div v-if="shouldShowDevWidget" class="gl-border-t gl-border-gray-50 gl-mb-5 gl-pt-5"> <div v-if="shouldShowDevWidget" class="gl-border-t gl-border-subtle gl-mb-5 gl-pt-5">
<div class="gl-flex gl-items-center gl-gap-3 gl-justify-between"> <div class="gl-flex gl-items-center gl-gap-3 gl-justify-between">
<h3 <h3
class="!gl-mb-0 gl-heading-5 gl-flex gl-items-center gl-gap-2" class="!gl-mb-0 gl-heading-5 gl-flex gl-items-center gl-gap-2"
......
...@@ -217,7 +217,7 @@ export default { ...@@ -217,7 +217,7 @@ export default {
</script> </script>
<template> <template>
<section class="gl-pb-4" data-testid="work-item-start-due-dates"> <section data-testid="work-item-start-due-dates">
<div class="gl-display-flex gl-align-items-center gl-gap-3"> <div class="gl-display-flex gl-align-items-center gl-gap-3">
<h3 :class="{ 'gl-sr-only': isEditing }" class="gl-mb-0! gl-heading-5"> <h3 :class="{ 'gl-sr-only': isEditing }" class="gl-mb-0! gl-heading-5">
{{ $options.i18n.dates }} {{ $options.i18n.dates }}
......
...@@ -235,7 +235,7 @@ ...@@ -235,7 +235,7 @@
z-index: 1; z-index: 1;
position: relative; position: relative;
padding: $gl-padding-4 0; padding: $gl-padding-4 0;
&.opened { &.opened {
color: $green-500; color: $green-500;
} }
...@@ -243,7 +243,7 @@ ...@@ -243,7 +243,7 @@
&.closed { &.closed {
color: $blue-500; color: $blue-500;
} }
svg { svg {
vertical-align: baseline; vertical-align: baseline;
} }
...@@ -411,7 +411,8 @@ ...@@ -411,7 +411,8 @@
.issuable-sidebar-header { .issuable-sidebar-header {
@include clearfix; @include clearfix;
padding: $gl-spacing-scale-4 0 $gl-spacing-scale-5; padding: $gl-spacing-scale-4 0 $gl-spacing-scale-5;
border-bottom: 1px solid $border-color; @apply gl-border-b;
@apply gl-border-subtle;
// This prevents the mess when resizing the sidebar // This prevents the mess when resizing the sidebar
// of elements repositioning themselves.. // of elements repositioning themselves..
width: $right-sidebar-inner-width; width: $right-sidebar-inner-width;
...@@ -506,7 +507,7 @@ ...@@ -506,7 +507,7 @@
top: calc(#{$calc-application-header-height} + #{$mr-sticky-header-height}); top: calc(#{$calc-application-header-height} + #{$mr-sticky-header-height});
height: calc(#{$calc-application-viewport-height} - #{$mr-sticky-header-height} - var(--mr-review-bar-height)); height: calc(#{$calc-application-viewport-height} - #{$mr-sticky-header-height} - var(--mr-review-bar-height));
position: sticky; position: sticky;
padding: 0 15px; padding: 0 $gl-spacing-scale-2;
margin-bottom: calc((#{$content-wrapper-padding} * -1) + var(--mr-review-bar-height)); margin-bottom: calc((#{$content-wrapper-padding} * -1) + var(--mr-review-bar-height));
overflow-y: auto; overflow-y: auto;
overscroll-behavior: contain; overscroll-behavior: contain;
......
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
@import 'system_note_styles'; @import 'system_note_styles';
$work-item-field-inset-shadow: inset 0 0 0 $gl-border-size-1 var(--gray-200, $gray-200) !important; $work-item-field-inset-shadow: inset 0 0 0 $gl-border-size-1 var(--gray-200, $gray-200) !important;
$work-item-overview-right-sidebar-width: 20rem; $work-item-overview-right-sidebar-width: px-to-rem(290px);
$work-item-sticky-header-height: 52px; $work-item-sticky-header-height: 52px;
$work-item-overview-gap-width: 2rem; $work-item-overview-gap-width: 2rem;
...@@ -139,6 +139,16 @@ $work-item-overview-gap-width: 2rem; ...@@ -139,6 +139,16 @@ $work-item-overview-gap-width: 2rem;
.work-item-overview-right-sidebar { .work-item-overview-right-sidebar {
margin-top: $gl-spacing-scale-5; margin-top: $gl-spacing-scale-5;
.work-item-attributes-item {
@apply gl-mb-5;
&:not(:first-of-type) {
@apply gl-pt-5;
@apply gl-border-t;
@apply gl-border-subtle;
}
}
} }
@include container-and-media("min-width: #{calc($breakpoint-md)}") { @include container-and-media("min-width: #{calc($breakpoint-md)}") {
...@@ -146,7 +156,7 @@ $work-item-overview-gap-width: 2rem; ...@@ -146,7 +156,7 @@ $work-item-overview-gap-width: 2rem;
top: calc(#{$calc-application-header-height} + #{$work-item-sticky-header-height}); top: calc(#{$calc-application-header-height} + #{$work-item-sticky-header-height});
height: calc(#{$calc-application-viewport-height} - #{$work-item-sticky-header-height}); height: calc(#{$calc-application-viewport-height} - #{$work-item-sticky-header-height});
margin-bottom: calc(#{$content-wrapper-padding} * -1); margin-bottom: calc(#{$content-wrapper-padding} * -1);
padding-inline: 0.5rem; padding-inline: $gl-spacing-scale-2;
position: sticky; position: sticky;
overflow-y: auto; overflow-y: auto;
overflow-x: hidden; overflow-x: hidden;
......
...@@ -349,7 +349,7 @@ export default { ...@@ -349,7 +349,7 @@ export default {
</script> </script>
<template> <template>
<section class="gl-pb-4" data-testid="work-item-rolledup-dates"> <section data-testid="work-item-rolledup-dates">
<div class="gl-display-flex gl-align-items-center gl-gap-3"> <div class="gl-display-flex gl-align-items-center gl-gap-3">
<h3 :class="{ 'gl-sr-only': isEditing }" class="gl-mb-0! gl-heading-5"> <h3 :class="{ 'gl-sr-only': isEditing }" class="gl-mb-0! gl-heading-5">
{{ $options.i18n.dates }} {{ $options.i18n.dates }}
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment