Commit 8fcaa836 authored by Kushal Pandya's avatar Kushal Pandya

Merge branch 'ek-vsa-cleanup-css' into 'master'

Remove unused VSA css classes and js

See merge request gitlab-org/gitlab!68543
parents aa8b8b0d b0d1d219
......@@ -98,12 +98,7 @@ export default {
},
},
methods: {
...mapActions([
'fetchCycleAnalyticsData',
'fetchStageData',
'setSelectedStage',
'setDateRange',
]),
...mapActions(['fetchStageData', 'setSelectedStage', 'setDateRange']),
handleDateSelect(daysInPast) {
this.setDateRange(daysInPast);
},
......
......@@ -3,293 +3,4 @@
.cycle-analytics {
margin: 24px auto 0;
position: relative;
.landing {
margin-top: 0;
.inner-content {
white-space: normal;
h4,
p {
margin: 7px 0 0;
max-width: 480px;
padding: 0 $gl-padding;
@include media-breakpoint-down(sm) {
margin: 0 auto;
}
}
}
.svg-container svg {
width: 136px;
height: 136px;
}
}
.col-headers {
ul {
margin: 0;
padding: 0;
}
li {
line-height: 50px;
}
}
.card {
.content-block {
padding: 24px 0;
border-bottom: 0;
position: relative;
@include media-breakpoint-down(xs) {
padding: 6px 0 24px;
}
}
.column {
text-align: center;
@include media-breakpoint-down(xs) {
padding: 15px 0;
}
.header {
font-size: 30px;
line-height: 38px;
font-weight: $gl-font-weight-normal;
margin: 0;
}
.text {
color: var(--gray-500, $gray-500);
margin: 0;
}
&:last-child {
@include media-breakpoint-down(xs) {
text-align: center;
}
}
}
}
.stage-panel-body {
display: flex;
flex-wrap: wrap;
}
.stage-nav,
.stage-entries {
display: flex;
vertical-align: top;
font-size: $gl-font-size;
}
.stage-nav {
width: 40%;
margin-bottom: 0;
ul {
padding: 0;
margin: 0;
width: 100%;
}
li {
list-style-type: none;
}
.stage-nav-item {
line-height: 65px;
&.active {
background: var(--blue-50, $blue-50);
border-color: var(--blue-300, $blue-300);
box-shadow: inset 4px 0 0 0 var(--blue-500, $blue-500);
}
&:hover:not(.active) {
background-color: var(--gray-10, $gray-10);
box-shadow: inset 2px 0 0 0 var(--border-color, $border-color);
cursor: pointer;
}
.stage-nav-item-cell.stage-name {
width: 44.5%;
}
.stage-nav-item-cell.stage-median {
min-width: 43%;
}
.stage-empty,
.not-available {
color: var(--gray-500, $gray-500);
}
}
}
.stage-panel-container {
width: 100%;
overflow: auto;
}
.stage-panel {
min-width: 968px;
.card-header {
padding: 0;
background-color: transparent;
}
.events-description {
line-height: 65px;
}
.events-info {
color: var(--gray-500, $gray-500);
}
}
.stage-events {
min-height: 467px;
}
.stage-event-list {
margin: 0;
padding: 0;
}
.stage-event-item {
@include clearfix;
list-style-type: none;
padding-bottom: $gl-padding;
margin-bottom: $gl-padding;
border-bottom: 1px solid var(--gray-50, $gray-50);
&:last-child {
border-bottom: 0;
margin-bottom: 0;
}
.item-details,
.item-time {
float: left;
}
.item-details {
width: 75%;
}
.item-title {
margin: 0 0 2px;
&.issue-title,
&.commit-title,
&.merge-request-title {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-width: 100%;
display: block;
a {
color: var(--gl-text-color, $gl-text-color);
}
}
}
.item-time {
width: 25%;
text-align: right;
}
.total-time {
font-size: $cycle-analytics-big-font;
color: var(--gl-text-color, $gl-text-color);
span {
color: var(--gl-text-color, $gl-text-color);
font-size: $gl-font-size;
}
}
.issue-date,
.build-date {
color: var(--gl-text-color, $gl-text-color);
}
.mr-link,
.issue-link,
.commit-author-link,
.issue-author-link {
color: var(--gl-text-color, $gl-text-color);
}
// Custom CSS for components
.item-conmmit-component {
.commit-icon {
svg {
display: inline-block;
width: 20px;
height: 20px;
vertical-align: bottom;
}
}
}
.merge-request-branch {
a {
max-width: 180px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
display: inline-block;
vertical-align: bottom;
}
}
}
// Custom Styles for stage items
.item-build-component {
.item-title {
.icon-build-status {
float: left;
margin-right: 5px;
position: relative;
top: 2px;
}
.item-build-name {
color: var(--gl-text-color, $gl-text-color);
}
.pipeline-id {
color: var(--gl-text-color, $gl-text-color);
padding: 0 3px 0 0;
}
.ref-name {
color: var(--gray-900, $gray-900);
display: inline-block;
max-width: 180px;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
line-height: 1.3;
vertical-align: top;
}
.commit-sha {
color: var(--blue-600, $blue-600);
line-height: 1.3;
vertical-align: top;
font-weight: $gl-font-weight-normal;
}
}
}
}
/* global DocumentTouch */
import sortableConfig from '~/sortable/sortable_config';
import { NO_DRAG_CLASS } from '../constants';
export default () => {
const touchEnabled =
'ontouchstart' in window || (window.DocumentTouch && document instanceof DocumentTouch);
return {
...sortableConfig,
fallbackOnBody: false,
group: {
name: 'stages',
},
dataIdAttr: 'data-id',
dragClass: 'sortable-drag',
filter: `.${NO_DRAG_CLASS}`,
delay: touchEnabled ? 100 : 0,
scrollSensitivity: touchEnabled ? 60 : 100,
scrollSpeed: 20,
fallbackTolerance: 1,
onMove(e) {
return !e.related.classList.contains(NO_DRAG_CLASS);
},
};
};
......@@ -29,32 +29,6 @@
}
}
// This can be refactored once the offical design implementation is complete
// https://gitlab.com/gitlab-org/gitlab/-/issues/211796
.sortable-drag {
border-radius: 0.25rem;
background-color: var(--white, $white);
box-shadow: 0 0 0.25rem $gl-btn-active-background,
0 0.25rem 0.75rem $gl-btn-active-background;
}
// Since backend wraps event description in a paragraph
// we need to remove common styles, i.e., spacing
.stage-item-popover {
.stage-event-description p {
margin: 0 !important;
}
.popover-body {
padding-left: 0 !important;
padding-right: 0 !important;
}
.metric-label {
flex: 0 0 20%;
}
}
.stage-list-move {
transition: transform 0.15s;
}
......@@ -53,8 +53,6 @@ localVue.use(Vuex);
jest.mock('~/flash');
const defaultStubs = {
'stage-event-list': true,
'stage-nav-item': true,
'tasks-by-type-chart': true,
'labels-selector': true,
DurationChart: true,
......
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