Skip to content

G
gitlab-ce
Commit 47183576 authored by Florie Guibert's avatar Florie Guibert
Browse files
Options

Boards - CSS clean up 

Migrate SCSS to utility classes
Migrate boostrap to gitlab-ui utility classes
Remove unused CSS
Fix Milestone header alignement
parent 031cd454
Hide whitespace changes
Inline Side-by-side
Showing with 73 additions and 118 deletions
app/assets/javascripts/boards/components/board_column.vue
View file @ 47183576
...@@ -127,7 +127,7 @@ export default { ...@@ -127,7 +127,7 @@ export default {
'board-type-assignee': list.type === 'assignee', 'board-type-assignee': list.type === 'assignee',
}" }"
:data-id="list.id" :data-id="list.id"
class="board gl-h-full gl-px-3 gl-vertical-align-top gl-white-space-normal" class="board gl-display-inline-block gl-h-full gl-px-3 gl-vertical-align-top gl-white-space-normal"
data-qa-selector="board_list" data-qa-selector="board_list"
> >
<div <div
......
app/assets/javascripts/boards/components/board_configuration_options.vue
View file @ 47183576
...@@ -43,7 +43,7 @@ export default { ...@@ -43,7 +43,7 @@ export default {
<template> <template>
<div class="append-bottom-20"> <div class="append-bottom-20">
<label class="form-section-title label-bold" for="board-new-name"> <label class="label-bold gl-font-lg" for="board-new-name">
{{ __('List options') }} {{ __('List options') }}
</label> </label>
<p class="text-secondary gl-mb-3"> <p class="text-secondary gl-mb-3">
......
app/assets/javascripts/boards/components/board_form.vue
View file @ 47183576
...@@ -196,9 +196,7 @@ export default { ...@@ -196,9 +196,7 @@ export default {
<p v-if="isDeleteForm">{{ __('Are you sure you want to delete this board?') }}</p> <p v-if="isDeleteForm">{{ __('Are you sure you want to delete this board?') }}</p>
<form v-else class="js-board-config-modal" @submit.prevent> <form v-else class="js-board-config-modal" @submit.prevent>
<div v-if="!readonly" class="append-bottom-20"> <div v-if="!readonly" class="append-bottom-20">
<label class="form-section-title label-bold" for="board-new-name">{{ <label class="label-bold gl-font-lg" for="board-new-name">{{ __('Title') }}</label>
__('Title')
}}</label>
<input <input
id="board-new-name" id="board-new-name"
ref="name" ref="name"
......
app/assets/javascripts/boards/components/board_list_header.vue
View file @ 47183576
...@@ -188,8 +188,9 @@ export default { ...@@ -188,8 +188,9 @@ export default {
'gl-py-3 gl-h-full': !list.isExpanded && !isSwimlanesHeader, 'gl-py-3 gl-h-full': !list.isExpanded && !isSwimlanesHeader,
'gl-border-b-0': !list.isExpanded || isSwimlanesHeader, 'gl-border-b-0': !list.isExpanded || isSwimlanesHeader,
'gl-py-2': !list.isExpanded && isSwimlanesHeader, 'gl-py-2': !list.isExpanded && isSwimlanesHeader,
'gl-flex-direction-column': !list.isExpanded,
}" }"
class="board-title gl-m-0 gl-display-flex js-board-handle" class="board-title gl-m-0 gl-display-flex gl-align-items-center gl-font-base gl-px-3 js-board-handle"
> >
<gl-button <gl-button
v-if="list.isExpandable" v-if="list.isExpandable"
...@@ -202,7 +203,15 @@ export default { ...@@ -202,7 +203,15 @@ export default {
@click="toggleExpanded" @click="toggleExpanded"
/> />
<!-- The following is only true in EE and if it is a milestone --> <!-- The following is only true in EE and if it is a milestone -->
<span v-if="showMilestoneListDetails" aria-hidden="true" class="gl-mr-2 milestone-icon"> <span
v-if="showMilestoneListDetails"
aria-hidden="true"
class="milestone-icon"
:class="{
'gl-mt-3 gl-rotate-90': !list.isExpanded,
'gl-mr-2': list.isExpanded,
}"
>
<gl-icon name="timer" /> <gl-icon name="timer" />
</span> </span>
...@@ -210,6 +219,9 @@ export default { ...@@ -210,6 +219,9 @@ export default {
v-if="showAssigneeListDetails" v-if="showAssigneeListDetails"
:href="list.assignee.path" :href="list.assignee.path"
class="user-avatar-link js-no-trigger" class="user-avatar-link js-no-trigger"
:class="{
'gl-mt-3 gl-rotate-90': !list.isExpanded,
}"
> >
<img <img
v-gl-tooltip.hover.bottom v-gl-tooltip.hover.bottom
...@@ -223,20 +235,28 @@ export default { ...@@ -223,20 +235,28 @@ export default {
</a> </a>
<div <div
class="board-title-text" class="board-title-text"
:class="{ 'gl-display-none': !list.isExpanded && isSwimlanesHeader }" :class="{
'gl-display-none': !list.isExpanded && isSwimlanesHeader,
'gl-flex-grow-0 gl-my-3 gl-mx-0': !list.isExpanded,
'gl-flex-grow-1': list.isExpanded,
}"
> >
<span <span
v-if="list.type !== 'label'" v-if="list.type !== 'label'"
v-gl-tooltip.hover v-gl-tooltip.hover
:class="{ :class="{
'gl-display-inline-block': list.type === 'milestone', 'gl-display-block': !list.isExpanded || list.type === 'milestone',
}" }"
:title="listTitle" :title="listTitle"
class="board-title-main-text block-truncated" class="board-title-main-text gl-text-truncate"
> >
{{ list.title }} {{ list.title }}
</span> </span>
<span v-if="list.type === 'assignee'" class="board-title-sub-text gl-ml-2"> <span
v-if="list.type === 'assignee'"
class="board-title-sub-text gl-ml-2 gl-font-weight-normal"
:class="{ 'gl-display-none': !list.isExpanded }"
>
@{{ listAssignee }} @{{ listAssignee }}
</span> </span>
<gl-label <gl-label
...@@ -279,7 +299,10 @@ export default { ...@@ -279,7 +299,10 @@ export default {
<div <div
v-if="showBoardListAndBoardInfo" v-if="showBoardListAndBoardInfo"
class="issue-count-badge gl-display-inline-flex gl-pr-0 no-drag text-secondary" class="issue-count-badge gl-display-inline-flex gl-pr-0 no-drag text-secondary"
:class="{ 'gl-display-none!': !list.isExpanded && isSwimlanesHeader }" :class="{
'gl-display-none!': !list.isExpanded && isSwimlanesHeader,
'gl-p-0': !list.isExpanded,
}"
> >
<span class="gl-display-inline-flex"> <span class="gl-display-inline-flex">
<gl-tooltip :target="() => $refs.issueCount" :title="issuesTooltipLabel" /> <gl-tooltip :target="() => $refs.issueCount" :title="issuesTooltipLabel" />
......
app/assets/javascripts/boards/components/issue_card_inner.vue
View file @ 47183576
...@@ -133,7 +133,7 @@ export default { ...@@ -133,7 +133,7 @@ export default {
</script> </script>
<template> <template>
<div> <div>
<div class="d-flex board-card-header" dir="auto"> <div class="gl-display-flex" dir="auto">
<h4 class="board-card-title gl-mb-0 gl-mt-0"> <h4 class="board-card-title gl-mb-0 gl-mt-0">
<gl-icon <gl-icon
v-if="issue.blocked" v-if="issue.blocked"
...@@ -156,7 +156,7 @@ export default { ...@@ -156,7 +156,7 @@ export default {
}}</a> }}</a>
</h4> </h4>
</div> </div>
<div v-if="showLabelFooter" class="board-card-labels gl-mt-2 d-flex flex-wrap"> <div v-if="showLabelFooter" class="board-card-labels gl-mt-2 gl-display-flex gl-flex-wrap">
<template v-for="label in orderedLabels"> <template v-for="label in orderedLabels">
<gl-label <gl-label
:key="label.id" :key="label.id"
...@@ -169,24 +169,26 @@ export default { ...@@ -169,24 +169,26 @@ export default {
/> />
</template> </template>
</div> </div>
<div class="board-card-footer d-flex justify-content-between align-items-end"> <div
class="board-card-footer gl-display-flex gl-justify-content-space-between gl-align-items-flex-end"
>
<div <div
class="d-flex align-items-start flex-wrap-reverse board-card-number-container overflow-hidden js-board-card-number-container" class="gl-display-flex align-items-start flex-wrap-reverse board-card-number-container gl-overflow-hidden js-board-card-number-container"
> >
<span <span
v-if="issue.referencePath" v-if="issue.referencePath"
class="board-card-number overflow-hidden d-flex gl-mr-3 gl-mt-3" class="board-card-number gl-overflow-hidden gl-display-flex gl-mr-3 gl-mt-3"
> >
<tooltip-on-truncate <tooltip-on-truncate
v-if="issueReferencePath" v-if="issueReferencePath"
:title="issueReferencePath" :title="issueReferencePath"
placement="bottom" placement="bottom"
class="board-issue-path block-truncated bold" class="board-issue-path gl-text-truncate gl-font-weight-bold"
>{{ issueReferencePath }}</tooltip-on-truncate >{{ issueReferencePath }}</tooltip-on-truncate
> >
#{{ issue.iid }} #{{ issue.iid }}
</span> </span>
<span class="board-info-items gl-mt-3 d-inline-block"> <span class="board-info-items gl-mt-3 gl-display-inline-block">
<issue-due-date v-if="issue.dueDate" :date="issue.dueDate" :closed="issue.closed" /> <issue-due-date v-if="issue.dueDate" :date="issue.dueDate" :closed="issue.closed" />
<issue-time-estimate v-if="issue.timeEstimate" :estimate="issue.timeEstimate" /> <issue-time-estimate v-if="issue.timeEstimate" :estimate="issue.timeEstimate" />
<issue-card-weight <issue-card-weight
...@@ -196,7 +198,7 @@ export default { ...@@ -196,7 +198,7 @@ export default {
/> />
</span> </span>
</div> </div>
<div class="board-card-assignee d-flex"> <div class="board-card-assignee gl-display-flex">
<user-avatar-link <user-avatar-link
v-for="(assignee, index) in issue.assignees" v-for="(assignee, index) in issue.assignees"
v-if="shouldRenderAssignee(index)" v-if="shouldRenderAssignee(index)"
...@@ -209,7 +211,7 @@ export default { ...@@ -209,7 +211,7 @@ export default {
tooltip-placement="bottom" tooltip-placement="bottom"
> >
<span class="js-assignee-tooltip"> <span class="js-assignee-tooltip">
<span class="bold d-block">{{ __('Assignee') }}</span> <span class="gl-font-weight-bold gl-display-block">{{ __('Assignee') }}</span>
{{ assignee.name }} {{ assignee.name }}
<span class="text-white-50">@{{ assignee.username }}</span> <span class="text-white-50">@{{ assignee.username }}</span>
</span> </span>
......
app/assets/stylesheets/page_bundles/boards.scss
View file @ 47183576
...@@ -83,9 +83,6 @@ ...@@ -83,9 +83,6 @@
} }
.board { .board {
// the next line cannot be replaced with .d-inline-block because it breaks display: none of SortableJS
// see https://gitlab.com/gitlab-org/gitlab-foss/issues/64828
display: inline-block;
width: calc(85vw - 15px); width: calc(85vw - 15px);
@include media-breakpoint-up(sm) { @include media-breakpoint-up(sm) {
...@@ -116,39 +113,10 @@ ...@@ -116,39 +113,10 @@
&.is-collapsed { &.is-collapsed {
width: 50px; width: 50px;
.board-title {
flex-direction: column;
}
.board-title-caret { .board-title-caret {
margin-top: 1px; margin-top: 1px;
} }
.user-avatar-link,
.milestone-icon {
margin-top: $gl-padding-8;
transform: rotate(90deg);
}
.board-title-text {
flex-grow: 0;
margin: $gl-padding-8 0;
.board-title-main-text {
display: block;
}
.board-title-sub-text {
display: none;
}
}
.issue-count-badge {
border: 0;
white-space: nowrap;
padding: 0;
}
.board-title-text > span, .board-title-text > span,
.issue-count-badge > span { .issue-count-badge > span {
height: 16px; height: 16px;
...@@ -197,10 +165,7 @@ ...@@ -197,10 +165,7 @@
} }
.board-title { .board-title {
align-items: center;
font-size: 1em;
border-bottom: 1px solid var(--gray-100, $gray-100); border-bottom: 1px solid var(--gray-100, $gray-100);
padding: 0 $gl-spacing-scale-3;
height: 3rem; height: 3rem;
.js-max-issue-size::before { .js-max-issue-size::before {
...@@ -208,21 +173,6 @@ ...@@ -208,21 +173,6 @@
} }
} }
.board-title-text {
flex-grow: 1;
}
.board-delete.gl-button {
background-color: transparent;
outline: 0;
&:hover {
color: var(--blue-600, $blue-600);
box-shadow: none;
}
}
.board-blank-state,
.board-promotion-state { .board-promotion-state {
background-color: var(--white, $white); background-color: var(--white, $white);
flex: 1; flex: 1;
...@@ -230,19 +180,6 @@ ...@@ -230,19 +180,6 @@
overflow-x: hidden; overflow-x: hidden;
} }
.board-blank-state-list {
> li:not(:last-child) {
margin-bottom: 8px;
}
.label-color {
top: 2px;
width: 16px;
height: 16px;
margin-right: 3px;
}
}
.board-list-component { .board-list-component {
min-height: 0; // firefox fix min-height: 0; // firefox fix
} }
...@@ -311,10 +248,6 @@ ...@@ -311,10 +248,6 @@
} }
} }
.board-card-header {
text-align: initial;
}
.board-card-assignee { .board-card-assignee {
margin-top: -$gl-padding-4; margin-top: -$gl-padding-4;
margin-bottom: -$gl-padding-4; margin-bottom: -$gl-padding-4;
...@@ -586,28 +519,6 @@ ...@@ -586,28 +519,6 @@
} }
} }
.board-swimlanes {
overflow-x: auto;
}
.board-header-collapsed-info-icon:hover { .board-header-collapsed-info-icon:hover {
color: var(--gray-900, $gray-900); color: var(--gray-900, $gray-900);
} }
$epic-icons-spacing: 40px;
.board-epic-lane {
max-width: calc(100vw - #{$contextual-sidebar-width} - #{$epic-icons-spacing});
.page-with-icon-sidebar & {
max-width: calc(100vw - #{$contextual-sidebar-collapsed-width} - #{$epic-icons-spacing});
}
.page-with-icon-sidebar .is-compact & {
max-width: calc(100vw - #{$contextual-sidebar-collapsed-width} - #{$gutter-width} - #{$epic-icons-spacing});
}
.is-compact & {
max-width: calc(100vw - #{$contextual-sidebar-width} - #{$gutter-width} - #{$epic-icons-spacing});
}
}
changelogs/unreleased/boards-css-clean-up.yml 0 → 100644
View file @ 47183576
---
title: Boards - Fix Milestone icon alignment in header
merge_request: 45965
author:
type: fixed
ee/app/assets/javascripts/boards/components/board_scope.vue
View file @ 47183576
...@@ -95,7 +95,7 @@ export default { ...@@ -95,7 +95,7 @@ export default {
<template> <template>
<div data-qa-selector="board_scope_modal"> <div data-qa-selector="board_scope_modal">
<div v-if="canAdminBoard" class="media"> <div v-if="canAdminBoard" class="media">
<label class="form-section-title label-bold media-body">{{ __('Scope') }}</label> <label class="label-bold gl-font-lg media-body">{{ __('Scope') }}</label>
<button v-if="collapseScope" type="button" class="btn" @click="expanded = !expanded"> <button v-if="collapseScope" type="button" class="btn" @click="expanded = !expanded">
{{ expandButtonText }} {{ expandButtonText }}
</button> </button>
......
ee/app/assets/javascripts/boards/components/epics_swimlanes.vue
View file @ 47183576
...@@ -118,7 +118,7 @@ export default { ...@@ -118,7 +118,7 @@ export default {
'is-collapsed': !list.isExpanded, 'is-collapsed': !list.isExpanded,
'is-draggable': !list.preset, 'is-draggable': !list.preset,
}" }"
class="board gl-px-3 gl-vertical-align-top gl-white-space-normal" class="board gl-display-inline-block gl-px-3 gl-vertical-align-top gl-white-space-normal"
:data-list-id="list.id" :data-list-id="list.id"
data-testid="board-header-container" data-testid="board-header-container"
> >
......
ee/app/assets/stylesheets/page_bundles/boards.scss
View file @ 47183576
...@@ -72,7 +72,6 @@ ...@@ -72,7 +72,6 @@
.board-type-assignee { .board-type-assignee {
.board-title-sub-text { .board-title-sub-text {
color: var(--gl-text-color-secondary, $gl-text-color-secondary); color: var(--gl-text-color-secondary, $gl-text-color-secondary);
font-weight: normal;
} }
} }
...@@ -86,11 +85,6 @@ ...@@ -86,11 +85,6 @@
} }
} }
.form-section-title {
font-size: 16px;
}
.board-config-modal { .board-config-modal {
width: 440px; width: 440px;
...@@ -103,3 +97,25 @@ ...@@ -103,3 +97,25 @@
} }
} }
} }
.board-swimlanes {
overflow-x: auto;
}
$epic-icons-spacing: 40px;
.board-epic-lane {
max-width: calc(100vw - #{$contextual-sidebar-width} - #{$epic-icons-spacing});
.page-with-icon-sidebar & {
max-width: calc(100vw - #{$contextual-sidebar-collapsed-width} - #{$epic-icons-spacing});
}
.page-with-icon-sidebar .is-compact & {
max-width: calc(100vw - #{$contextual-sidebar-collapsed-width} - #{$gutter-width} - #{$epic-icons-spacing});
}
.is-compact & {
max-width: calc(100vw - #{$contextual-sidebar-width} - #{$gutter-width} - #{$epic-icons-spacing});
}
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7