Create responsive mobile view for pipelines table
This commit is contained in:
parent
2b34f3f20d
commit
1d448a66d7
|
@ -535,10 +535,10 @@ export default {
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="table-section section-30 environments-actions table-button-footer" role="gridcell">
|
<div class="table-section section-30 table-button-footer" role="gridcell">
|
||||||
<div
|
<div
|
||||||
v-if="!model.isFolder"
|
v-if="!model.isFolder"
|
||||||
class="btn-group environment-action-buttons"
|
class="btn-group table-action-buttons"
|
||||||
role="group">
|
role="group">
|
||||||
|
|
||||||
<actions-component
|
<actions-component
|
||||||
|
|
|
@ -23,7 +23,7 @@ export default {
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
<template>
|
<template>
|
||||||
<td>
|
<div class="table-section section-15 hidden-xs hidden-sm">
|
||||||
<a
|
<a
|
||||||
:href="pipeline.path"
|
:href="pipeline.path"
|
||||||
class="js-pipeline-url-link">
|
class="js-pipeline-url-link">
|
||||||
|
@ -42,24 +42,26 @@ export default {
|
||||||
class="js-pipeline-url-api api">
|
class="js-pipeline-url-api api">
|
||||||
API
|
API
|
||||||
</span>
|
</span>
|
||||||
<span
|
<div class="label-container">
|
||||||
v-if="pipeline.flags.latest"
|
<span
|
||||||
class="js-pipeline-url-lastest label label-success"
|
v-if="pipeline.flags.latest"
|
||||||
title="Latest pipeline for this branch"
|
class="js-pipeline-url-latest label label-success"
|
||||||
ref="tooltip">
|
title="Latest pipeline for this branch"
|
||||||
latest
|
ref="tooltip">
|
||||||
</span>
|
latest
|
||||||
<span
|
</span>
|
||||||
v-if="pipeline.flags.yaml_errors"
|
<span
|
||||||
class="js-pipeline-url-yaml label label-danger"
|
v-if="pipeline.flags.yaml_errors"
|
||||||
:title="pipeline.yaml_errors"
|
class="js-pipeline-url-yaml label label-danger"
|
||||||
ref="tooltip">
|
:title="pipeline.yaml_errors"
|
||||||
yaml invalid
|
ref="tooltip">
|
||||||
</span>
|
yaml invalid
|
||||||
<span
|
</span>
|
||||||
v-if="pipeline.flags.stuck"
|
<span
|
||||||
class="js-pipeline-url-stuck label label-warning">
|
v-if="pipeline.flags.stuck"
|
||||||
stuck
|
class="js-pipeline-url-stuck label label-warning">
|
||||||
</span>
|
stuck
|
||||||
</td>
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
|
@ -56,7 +56,7 @@
|
||||||
<div class="btn-group">
|
<div class="btn-group">
|
||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
class="dropdown-toggle btn btn-default has-tooltip js-pipeline-dropdown-manual-actions"
|
class="dropdown-new btn btn-default has-tooltip js-pipeline-dropdown-manual-actions"
|
||||||
title="Manual job"
|
title="Manual job"
|
||||||
data-toggle="dropdown"
|
data-toggle="dropdown"
|
||||||
data-placement="top"
|
data-placement="top"
|
||||||
|
|
|
@ -55,31 +55,39 @@
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
<template>
|
<template>
|
||||||
<td class="pipelines-time-ago">
|
<div class="table-section section-15 pipelines-time-ago">
|
||||||
<p
|
<div
|
||||||
class="duration"
|
class="table-mobile-header"
|
||||||
v-if="hasDuration">
|
role="rowheader">
|
||||||
<span v-html="iconTimerSvg">
|
Duration
|
||||||
</span>
|
</div>
|
||||||
{{durationFormated}}
|
<div class="table-mobile-content">
|
||||||
</p>
|
<p
|
||||||
|
class="duration"
|
||||||
|
v-if="hasDuration">
|
||||||
|
<span
|
||||||
|
v-html="iconTimerSvg">
|
||||||
|
</span>
|
||||||
|
{{durationFormated}}
|
||||||
|
</p>
|
||||||
|
|
||||||
<p
|
<p
|
||||||
class="finished-at"
|
class="finished-at hidden-xs hidden-sm"
|
||||||
v-if="hasFinishedTime">
|
v-if="hasFinishedTime">
|
||||||
|
|
||||||
<i
|
<i
|
||||||
class="fa fa-calendar"
|
class="fa fa-calendar"
|
||||||
aria-hidden="true">
|
aria-hidden="true">
|
||||||
</i>
|
</i>
|
||||||
|
|
||||||
<time
|
<time
|
||||||
ref="tooltip"
|
ref="tooltip"
|
||||||
data-placement="top"
|
data-placement="top"
|
||||||
data-container="body"
|
data-container="body"
|
||||||
:title="tooltipTitle(finishedTime)">
|
:title="tooltipTitle(finishedTime)">
|
||||||
{{timeFormated(finishedTime)}}
|
{{timeFormated(finishedTime)}}
|
||||||
</time>
|
</time>
|
||||||
</p>
|
</p>
|
||||||
</td>
|
</div>
|
||||||
|
</div>
|
||||||
</script>
|
</script>
|
||||||
|
|
|
@ -110,7 +110,7 @@
|
||||||
</script>
|
</script>
|
||||||
<template>
|
<template>
|
||||||
<div class="branch-commit">
|
<div class="branch-commit">
|
||||||
<div v-if="hasCommitRef" class="icon-container">
|
<div v-if="hasCommitRef" class="icon-container hidden-xs">
|
||||||
<i
|
<i
|
||||||
v-if="tag"
|
v-if="tag"
|
||||||
class="fa fa-tag"
|
class="fa fa-tag"
|
||||||
|
@ -125,7 +125,7 @@
|
||||||
|
|
||||||
<a
|
<a
|
||||||
v-if="hasCommitRef"
|
v-if="hasCommitRef"
|
||||||
class="ref-name"
|
class="ref-name hidden-xs"
|
||||||
:href="commitRef.ref_url">
|
:href="commitRef.ref_url">
|
||||||
{{commitRef.name}}
|
{{commitRef.name}}
|
||||||
</a>
|
</a>
|
||||||
|
|
|
@ -28,28 +28,37 @@
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
<template>
|
<template>
|
||||||
<table class="table ci-table">
|
<div class="ci-table">
|
||||||
<thead>
|
<div
|
||||||
<tr>
|
class="gl-responsive-table-row table-row-header"
|
||||||
<th class="js-pipeline-status pipeline-status">Status</th>
|
role="row">
|
||||||
<th class="js-pipeline-info pipeline-info">Pipeline</th>
|
<div
|
||||||
<th class="js-pipeline-commit pipeline-commit">Commit</th>
|
class="table-section section-10 js-pipeline-status pipeline-status"
|
||||||
<th class="js-pipeline-stages pipeline-stages">Stages</th>
|
role="rowheader">
|
||||||
<th class="js-pipeline-date pipeline-date"></th>
|
Status
|
||||||
<th class="js-pipeline-actions pipeline-actions"></th>
|
</div>
|
||||||
</tr>
|
<div
|
||||||
</thead>
|
class="table-section section-15 js-pipeline-info pipeline-info"
|
||||||
<tbody>
|
role="rowheader">
|
||||||
<template
|
Pipeline
|
||||||
v-for="model in pipelines"
|
</div>
|
||||||
:model="model">
|
<div
|
||||||
<tr
|
class="table-section section-25 js-pipeline-commit pipeline-commit"
|
||||||
is="pipelines-table-row-component"
|
role="rowheader">
|
||||||
:pipeline="model"
|
Commit
|
||||||
:service="service"
|
</div>
|
||||||
:update-graph-dropdown="updateGraphDropdown"
|
<div
|
||||||
/>
|
class="table-section section-15 js-pipeline-stages pipeline-stages"
|
||||||
</template>
|
role="rowheader">
|
||||||
</tbody>
|
Stages
|
||||||
</table>
|
</div>
|
||||||
|
</div>
|
||||||
|
<pipelines-table-row-component
|
||||||
|
v-for="model in pipelines"
|
||||||
|
:key="model.id"
|
||||||
|
:pipeline="model"
|
||||||
|
:service="service"
|
||||||
|
:update-graph-dropdown="updateGraphDropdown"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
|
@ -200,47 +200,74 @@ export default {
|
||||||
}
|
}
|
||||||
return {};
|
return {};
|
||||||
},
|
},
|
||||||
|
|
||||||
|
displayPipelineActions() {
|
||||||
|
return this.pipeline.flags.retryable ||
|
||||||
|
this.pipeline.flags.cancelable ||
|
||||||
|
this.pipeline.details.manual_actions.length ||
|
||||||
|
this.pipeline.details.artifacts.length;
|
||||||
|
},
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
<template>
|
<template>
|
||||||
<tr class="commit">
|
<div class="commit gl-responsive-table-row">
|
||||||
<td class="commit-link">
|
<div class="table-section section-10 commit-link">
|
||||||
<ci-badge :status="pipelineStatus" />
|
<div class="table-mobile-header"
|
||||||
</td>
|
role="rowheader">
|
||||||
|
Status
|
||||||
|
</div>
|
||||||
|
<div class="table-mobile-content">
|
||||||
|
<ci-badge :status="pipelineStatus"/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<pipeline-url :pipeline="pipeline" />
|
<pipeline-url :pipeline="pipeline" />
|
||||||
|
|
||||||
<td>
|
<div class="table-section section-25">
|
||||||
<commit-component
|
<div
|
||||||
:tag="commitTag"
|
class="table-mobile-header"
|
||||||
:commit-ref="commitRef"
|
role="rowheader">
|
||||||
:commit-url="commitUrl"
|
Commit
|
||||||
:short-sha="commitShortSha"
|
|
||||||
:title="commitTitle"
|
|
||||||
:author="commitAuthor"
|
|
||||||
/>
|
|
||||||
</td>
|
|
||||||
|
|
||||||
<td class="stage-cell">
|
|
||||||
<div class="stage-container dropdown js-mini-pipeline-graph"
|
|
||||||
v-if="pipeline.details.stages.length > 0"
|
|
||||||
v-for="stage in pipeline.details.stages">
|
|
||||||
|
|
||||||
<pipeline-stage
|
|
||||||
:stage="stage"
|
|
||||||
:update-dropdown="updateGraphDropdown"
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
</td>
|
<div class="table-mobile-content">
|
||||||
|
<commit-component
|
||||||
|
:tag="commitTag"
|
||||||
|
:commit-ref="commitRef"
|
||||||
|
:commit-url="commitUrl"
|
||||||
|
:short-sha="commitShortSha"
|
||||||
|
:title="commitTitle"
|
||||||
|
:author="commitAuthor"/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="table-section section-wrap section-15 stage-cell">
|
||||||
|
<div
|
||||||
|
class="table-mobile-header"
|
||||||
|
role="rowheader">
|
||||||
|
Stages
|
||||||
|
</div>
|
||||||
|
<div class="table-mobile-content">
|
||||||
|
<div class="stage-container dropdown js-mini-pipeline-graph"
|
||||||
|
v-if="pipeline.details.stages.length > 0"
|
||||||
|
v-for="stage in pipeline.details.stages">
|
||||||
|
<pipeline-stage
|
||||||
|
:stage="stage"
|
||||||
|
:update-dropdown="updateGraphDropdown"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<pipelines-timeago
|
<pipelines-timeago
|
||||||
:duration="pipelineDuration"
|
:duration="pipelineDuration"
|
||||||
:finished-time="pipelineFinishedAt"
|
:finished-time="pipelineFinishedAt"
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<td class="pipeline-actions">
|
<div
|
||||||
<div class="pull-right btn-group">
|
v-if="displayPipelineActions"
|
||||||
|
class="table-section section-20 table-button-footer pipeline-actions">
|
||||||
|
<div class="btn-group table-action-buttons">
|
||||||
<pipelines-actions-component
|
<pipelines-actions-component
|
||||||
v-if="pipeline.details.manual_actions.length"
|
v-if="pipeline.details.manual_actions.length"
|
||||||
:actions="pipeline.details.manual_actions"
|
:actions="pipeline.details.manual_actions"
|
||||||
|
@ -249,6 +276,7 @@ export default {
|
||||||
|
|
||||||
<pipelines-artifacts-component
|
<pipelines-artifacts-component
|
||||||
v-if="pipeline.details.artifacts.length"
|
v-if="pipeline.details.artifacts.length"
|
||||||
|
class="hidden-xs hidden-sm"
|
||||||
:artifacts="pipeline.details.artifacts"
|
:artifacts="pipeline.details.artifacts"
|
||||||
/>
|
/>
|
||||||
|
|
||||||
|
@ -271,6 +299,6 @@ export default {
|
||||||
confirm-action-message="Are you sure you want to cancel this pipeline?"
|
confirm-action-message="Are you sure you want to cancel this pipeline?"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</td>
|
</div>
|
||||||
</tr>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
|
@ -59,4 +59,8 @@
|
||||||
margin: 0 2px 0 3px;
|
margin: 0 2px 0 3px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.ci-status {
|
||||||
|
margin-right: 10px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -36,13 +36,58 @@
|
||||||
align-self: stretch;
|
align-self: stretch;
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
height: 62px;
|
min-height: 62px;
|
||||||
|
|
||||||
&:not(:first-of-type) {
|
&:not(:first-of-type) {
|
||||||
border-top: 1px solid $white-normal;
|
border-top: 1px solid $white-normal;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
&.section-wrap {
|
||||||
|
white-space: normal;
|
||||||
|
|
||||||
|
@media (max-width: $screen-sm-max) {
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.table-button-footer {
|
||||||
|
@media (min-width: $screen-md-min) {
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: $screen-sm-max) {
|
||||||
|
background-color: $gray-normal;
|
||||||
|
align-self: stretch;
|
||||||
|
border-top: 1px solid $border-color;
|
||||||
|
|
||||||
|
.table-action-buttons {
|
||||||
|
padding: 10px 5px;
|
||||||
|
display: flex;
|
||||||
|
|
||||||
|
.btn {
|
||||||
|
border-radius: 3px;
|
||||||
|
}
|
||||||
|
|
||||||
|
> .btn-group,
|
||||||
|
> .external-url,
|
||||||
|
> .btn {
|
||||||
|
flex: 1 1 28px;
|
||||||
|
margin: 0 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dropdown-new {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dropdown-menu {
|
||||||
|
min-width: initial;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -56,6 +101,7 @@
|
||||||
|
|
||||||
.table-mobile-header {
|
.table-mobile-header {
|
||||||
color: $gl-text-color-secondary;
|
color: $gl-text-color-secondary;
|
||||||
|
text-align: left;
|
||||||
@include flex-max-width(40);
|
@include flex-max-width(40);
|
||||||
|
|
||||||
@media (min-width: $screen-md-min) {
|
@media (min-width: $screen-md-min) {
|
||||||
|
|
|
@ -124,43 +124,6 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.gl-responsive-table-row {
|
.gl-responsive-table-row {
|
||||||
.environments-actions {
|
|
||||||
@media (min-width: $screen-md-min) {
|
|
||||||
text-align: right;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: $screen-sm-max) {
|
|
||||||
background-color: $gray-normal;
|
|
||||||
align-self: stretch;
|
|
||||||
border-top: 1px solid $border-color;
|
|
||||||
|
|
||||||
.environment-action-buttons {
|
|
||||||
padding: 10px 5px;
|
|
||||||
display: flex;
|
|
||||||
|
|
||||||
.btn {
|
|
||||||
border-radius: 3px;
|
|
||||||
}
|
|
||||||
|
|
||||||
> .btn-group,
|
|
||||||
> .external-url,
|
|
||||||
> .btn {
|
|
||||||
flex: 1;
|
|
||||||
flex-basis: 28px;
|
|
||||||
margin: 0 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.dropdown-new {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.dropdown-menu {
|
|
||||||
min-width: initial;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.branch-commit {
|
.branch-commit {
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
}
|
}
|
||||||
|
|
|
@ -10,17 +10,13 @@
|
||||||
|
|
||||||
.table-holder {
|
.table-holder {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
|
||||||
@media (max-width: $screen-sm-max) {
|
|
||||||
overflow: auto;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.commit-title {
|
.commit-title {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.table.ci-table {
|
.ci-table {
|
||||||
|
|
||||||
.label {
|
.label {
|
||||||
margin-bottom: 3px;
|
margin-bottom: 3px;
|
||||||
|
@ -30,11 +26,6 @@
|
||||||
color: $black;
|
color: $black;
|
||||||
}
|
}
|
||||||
|
|
||||||
.stage-cell {
|
|
||||||
min-width: 130px; // Guarantees we show at least 4 stages in line
|
|
||||||
width: 20%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.pipelines-time-ago {
|
.pipelines-time-ago {
|
||||||
text-align: right;
|
text-align: right;
|
||||||
}
|
}
|
||||||
|
@ -108,39 +99,7 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.table.ci-table {
|
.ci-table {
|
||||||
|
|
||||||
&.builds-page tbody tr {
|
|
||||||
height: 71px;
|
|
||||||
}
|
|
||||||
|
|
||||||
tr {
|
|
||||||
th {
|
|
||||||
padding: 16px 8px;
|
|
||||||
border: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
td {
|
|
||||||
padding: 10px 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
td.environments-actions {
|
|
||||||
padding-right: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
td.stage-cell {
|
|
||||||
padding: 10px 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.commit-link {
|
|
||||||
padding: 9px 8px 10px 2px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
tbody {
|
|
||||||
border-top-width: 1px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.build.retried {
|
.build.retried {
|
||||||
background-color: $gray-lightest;
|
background-color: $gray-lightest;
|
||||||
}
|
}
|
||||||
|
@ -194,13 +153,6 @@
|
||||||
color: $gl-link-color;
|
color: $gl-link-color;
|
||||||
}
|
}
|
||||||
|
|
||||||
.commit-title {
|
|
||||||
max-width: 225px;
|
|
||||||
overflow: hidden;
|
|
||||||
white-space: nowrap;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
}
|
|
||||||
|
|
||||||
.label {
|
.label {
|
||||||
margin-right: 4px;
|
margin-right: 4px;
|
||||||
}
|
}
|
||||||
|
@ -253,11 +205,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.stage-cell {
|
.stage-cell {
|
||||||
font-size: 0;
|
.mini-pipeline-graph-dropdown-toggle svg {
|
||||||
padding: 0 4px;
|
|
||||||
|
|
||||||
> .stage-container > div > button > span > svg,
|
|
||||||
> .stage-container > button > svg {
|
|
||||||
height: 22px;
|
height: 22px;
|
||||||
width: 22px;
|
width: 22px;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
@ -631,6 +579,23 @@
|
||||||
font-weight: normal;
|
font-weight: normal;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@mixin mini-pipeline-graph-color($color-light, $color-main, $color-dark) {
|
||||||
|
border-color: $color-main;
|
||||||
|
color: $color-main;
|
||||||
|
|
||||||
|
&:hover,
|
||||||
|
&:focus,
|
||||||
|
&:active {
|
||||||
|
background-color: $color-light;
|
||||||
|
border-color: $color-dark;
|
||||||
|
color: $color-dark;
|
||||||
|
|
||||||
|
svg {
|
||||||
|
fill: $color-dark;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
// Dropdown button in mini pipeline graph
|
// Dropdown button in mini pipeline graph
|
||||||
.mini-pipeline-graph-dropdown-toggle {
|
.mini-pipeline-graph-dropdown-toggle {
|
||||||
border-radius: 100px;
|
border-radius: 100px;
|
||||||
|
@ -670,100 +635,32 @@
|
||||||
|
|
||||||
// Dropdown button animation in mini pipeline graph
|
// Dropdown button animation in mini pipeline graph
|
||||||
&.ci-status-icon-success {
|
&.ci-status-icon-success {
|
||||||
border-color: $green-500;
|
@include mini-pipeline-graph-color($green-50, $green-500, $green-600);
|
||||||
color: $green-500;
|
|
||||||
|
|
||||||
&:hover,
|
|
||||||
&:focus,
|
|
||||||
&:active {
|
|
||||||
background-color: $green-50;
|
|
||||||
border-color: $green-600;
|
|
||||||
color: $green-600;
|
|
||||||
|
|
||||||
svg {
|
|
||||||
fill: $green-600;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
&.ci-status-icon-failed {
|
&.ci-status-icon-failed {
|
||||||
border-color: $red-500;
|
@include mini-pipeline-graph-color($red-50, $red-500, $red-600);
|
||||||
color: $red-500;
|
|
||||||
|
|
||||||
&:hover,
|
|
||||||
&:focus,
|
|
||||||
&:active {
|
|
||||||
background-color: $red-50;
|
|
||||||
border-color: $red-600;
|
|
||||||
color: $red-600;
|
|
||||||
|
|
||||||
svg {
|
|
||||||
fill: $red-600;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
&.ci-status-icon-pending,
|
&.ci-status-icon-pending,
|
||||||
&.ci-status-icon-success_with_warnings {
|
&.ci-status-icon-success_with_warnings {
|
||||||
border-color: $orange-500;
|
@include mini-pipeline-graph-color($orange-50, $orange-500, $orange-600);
|
||||||
color: $orange-500;
|
|
||||||
|
|
||||||
&:hover,
|
|
||||||
&:focus,
|
|
||||||
&:active {
|
|
||||||
background-color: $orange-50;
|
|
||||||
border-color: $orange-600;
|
|
||||||
color: $orange-600;
|
|
||||||
|
|
||||||
svg {
|
|
||||||
fill: $orange-600;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
&.ci-status-icon-running {
|
&.ci-status-icon-running {
|
||||||
border-color: $blue-400;
|
@include mini-pipeline-graph-color($blue-50, $blue-400, $blue-600);
|
||||||
color: $blue-400;
|
|
||||||
|
|
||||||
&:hover,
|
|
||||||
&:focus,
|
|
||||||
&:active {
|
|
||||||
background-color: $blue-50;
|
|
||||||
border-color: $blue-600;
|
|
||||||
color: $blue-600;
|
|
||||||
|
|
||||||
svg {
|
|
||||||
fill: $blue-600;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
&.ci-status-icon-canceled,
|
&.ci-status-icon-canceled,
|
||||||
&.ci-status-icon-disabled,
|
&.ci-status-icon-disabled,
|
||||||
&.ci-status-icon-not-found,
|
&.ci-status-icon-not-found,
|
||||||
&.ci-status-icon-manual {
|
&.ci-status-icon-manual {
|
||||||
border-color: $gl-text-color;
|
@include mini-pipeline-graph-color(rgba($gl-text-color, 0.1), $gl-text-color, $gl-text-color);
|
||||||
color: $gl-text-color;
|
|
||||||
|
|
||||||
&:hover,
|
|
||||||
&:focus,
|
|
||||||
&:active {
|
|
||||||
background-color: rgba($gl-text-color, 0.1);
|
|
||||||
border-color: $gl-text-color;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
&.ci-status-icon-created,
|
&.ci-status-icon-created,
|
||||||
&.ci-status-icon-skipped {
|
&.ci-status-icon-skipped {
|
||||||
border-color: $gray-darkest;
|
@include mini-pipeline-graph-color(rgba($gray-darkest, 0.1), $gray-darkest, $gray-darkest);
|
||||||
color: $gray-darkest;
|
|
||||||
|
|
||||||
&:hover,
|
|
||||||
&:focus,
|
|
||||||
&:active {
|
|
||||||
background-color: rgba($gray-darkest, 0.1);
|
|
||||||
border-color: $gray-darkest;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -842,6 +739,10 @@
|
||||||
top: 1px;
|
top: 1px;
|
||||||
vertical-align: text-bottom;
|
vertical-align: text-bottom;
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
||||||
|
@media (max-width: $screen-xs-max) {
|
||||||
|
max-width: 60%;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// status icon on the left
|
// status icon on the left
|
||||||
|
@ -932,6 +833,11 @@
|
||||||
left: 50%;
|
left: 50%;
|
||||||
transform: translate(-50%, 0);
|
transform: translate(-50%, 0);
|
||||||
border-width: 0 5px 6px;
|
border-width: 0 5px 6px;
|
||||||
|
|
||||||
|
@media (max-width: $screen-sm-max) {
|
||||||
|
left: 100%;
|
||||||
|
margin-left: -12px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&::before {
|
&::before {
|
||||||
|
@ -949,9 +855,15 @@
|
||||||
* Center dropdown menu in mini graph
|
* Center dropdown menu in mini graph
|
||||||
*/
|
*/
|
||||||
.mini-pipeline-graph-dropdown-menu.dropdown-menu {
|
.mini-pipeline-graph-dropdown-menu.dropdown-menu {
|
||||||
right: auto;
|
transform: translate(-80%, 0);
|
||||||
left: 50%;
|
min-width: 150px;
|
||||||
transform: translate(-50%, 0);
|
|
||||||
|
@media(min-width: $screen-md-min) {
|
||||||
|
transform: translate(-50%, 0);
|
||||||
|
right: auto;
|
||||||
|
left: 50%;
|
||||||
|
min-width: 240px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
/**
|
/**
|
||||||
* Terminal
|
* Terminal
|
||||||
|
|
|
@ -1,142 +1,82 @@
|
||||||
.container-fluid {
|
@mixin status-color($color-light, $color-main, $color-dark) {
|
||||||
.ci-status {
|
color: $color-main;
|
||||||
padding: 2px 7px 4px;
|
border-color: $color-main;
|
||||||
margin-right: 10px;
|
|
||||||
border: 1px solid $gray-darker;
|
|
||||||
white-space: nowrap;
|
|
||||||
border-radius: 4px;
|
|
||||||
|
|
||||||
&:hover,
|
&:not(span):hover {
|
||||||
&:focus {
|
background-color: $color-light;
|
||||||
text-decoration: none;
|
color: $color-dark;
|
||||||
|
border-color: $color-dark;
|
||||||
|
|
||||||
|
svg {
|
||||||
|
fill: $color-dark;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
svg {
|
||||||
|
fill: $color-main;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.ci-status {
|
||||||
|
padding: 2px 7px 4px;
|
||||||
|
border: 1px solid $gray-darker;
|
||||||
|
white-space: nowrap;
|
||||||
|
border-radius: 4px;
|
||||||
|
|
||||||
|
&:hover,
|
||||||
|
&:focus {
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
svg {
|
||||||
|
height: 13px;
|
||||||
|
width: 13px;
|
||||||
|
position: relative;
|
||||||
|
top: 2px;
|
||||||
|
overflow: visible;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.ci-failed {
|
||||||
|
@include status-color($red-50, $red-500, $red-600);
|
||||||
|
}
|
||||||
|
|
||||||
|
&.ci-success {
|
||||||
|
@include status-color($green-50, $green-500, $green-700);
|
||||||
|
}
|
||||||
|
|
||||||
|
&.ci-canceled,
|
||||||
|
&.ci-disabled,
|
||||||
|
&.ci-manual {
|
||||||
|
color: $gl-text-color;
|
||||||
|
border-color: $gl-text-color;
|
||||||
|
|
||||||
|
&:not(span):hover {
|
||||||
|
background-color: rgba($gl-text-color, .07);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.ci-pending,
|
||||||
|
&.ci-failed_with_warnings,
|
||||||
|
&.ci-success_with_warnings {
|
||||||
|
@include status-color($orange-50, $orange-500, $orange-700);
|
||||||
|
}
|
||||||
|
|
||||||
|
&.ci-info,
|
||||||
|
&.ci-running {
|
||||||
|
@include status-color($blue-50, $blue-500, $blue-600);
|
||||||
|
}
|
||||||
|
|
||||||
|
&.ci-created,
|
||||||
|
&.ci-skipped {
|
||||||
|
color: $gl-text-color-secondary;
|
||||||
|
border-color: $gl-text-color-secondary;
|
||||||
|
|
||||||
|
&:not(span):hover {
|
||||||
|
background-color: rgba($gl-text-color-secondary, .07);
|
||||||
}
|
}
|
||||||
|
|
||||||
svg {
|
svg {
|
||||||
height: 13px;
|
fill: $gl-text-color-secondary;
|
||||||
width: 13px;
|
|
||||||
position: relative;
|
|
||||||
top: 2px;
|
|
||||||
overflow: visible;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.ci-failed {
|
|
||||||
color: $red-500;
|
|
||||||
border-color: $red-500;
|
|
||||||
|
|
||||||
&:not(span):hover {
|
|
||||||
background-color: $red-50;
|
|
||||||
color: $red-600;
|
|
||||||
border-color: $red-600;
|
|
||||||
|
|
||||||
svg {
|
|
||||||
fill: $red-600;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
svg {
|
|
||||||
fill: $red-500;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&.ci-success {
|
|
||||||
color: $green-600;
|
|
||||||
border-color: $green-500;
|
|
||||||
|
|
||||||
&:not(span):hover {
|
|
||||||
background-color: $green-50;
|
|
||||||
color: $green-700;
|
|
||||||
border-color: $green-600;
|
|
||||||
|
|
||||||
svg {
|
|
||||||
fill: $green-600;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
svg {
|
|
||||||
fill: $green-500;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&.ci-canceled,
|
|
||||||
&.ci-disabled {
|
|
||||||
color: $gl-text-color;
|
|
||||||
border-color: $gl-text-color;
|
|
||||||
|
|
||||||
&:not(span):hover {
|
|
||||||
background-color: rgba($gl-text-color, .07);
|
|
||||||
}
|
|
||||||
|
|
||||||
svg {
|
|
||||||
fill: $gl-text-color;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&.ci-pending,
|
|
||||||
&.ci-success_with_warnings,
|
|
||||||
&.ci-failed_with_warnings {
|
|
||||||
color: $orange-600;
|
|
||||||
border-color: $orange-500;
|
|
||||||
|
|
||||||
&:not(span):hover {
|
|
||||||
background-color: $orange-50;
|
|
||||||
color: $orange-700;
|
|
||||||
border-color: $orange-600;
|
|
||||||
|
|
||||||
svg {
|
|
||||||
fill: $orange-600;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
svg {
|
|
||||||
fill: $orange-500;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&.ci-info,
|
|
||||||
&.ci-running {
|
|
||||||
color: $blue-500;
|
|
||||||
border-color: $blue-500;
|
|
||||||
|
|
||||||
&:not(span):hover {
|
|
||||||
background-color: $blue-50;
|
|
||||||
color: $blue-600;
|
|
||||||
border-color: $blue-600;
|
|
||||||
|
|
||||||
svg {
|
|
||||||
fill: $blue-600;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
svg {
|
|
||||||
fill: $blue-500;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&.ci-created,
|
|
||||||
&.ci-skipped {
|
|
||||||
color: $gl-text-color-secondary;
|
|
||||||
border-color: $gl-text-color-secondary;
|
|
||||||
|
|
||||||
&:not(span):hover {
|
|
||||||
background-color: rgba($gl-text-color-secondary, .07);
|
|
||||||
}
|
|
||||||
|
|
||||||
svg {
|
|
||||||
fill: $gl-text-color-secondary;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&.ci-manual {
|
|
||||||
color: $gl-text-color;
|
|
||||||
border-color: $gl-text-color;
|
|
||||||
|
|
||||||
&:not(span):hover {
|
|
||||||
background-color: rgba($gl-text-color, .07);
|
|
||||||
}
|
|
||||||
|
|
||||||
svg {
|
|
||||||
fill: $gl-text-color;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -20,7 +20,7 @@
|
||||||
.table-mobile-header{ role: 'rowheader' } Created
|
.table-mobile-header{ role: 'rowheader' } Created
|
||||||
%span.table-mobile-content= time_ago_with_tooltip(deployment.created_at)
|
%span.table-mobile-content= time_ago_with_tooltip(deployment.created_at)
|
||||||
|
|
||||||
.table-section.section-20.environments-actions.table-button-footer{ role: 'gridcell' }
|
.table-section.section-20.table-button-footer{ role: 'gridcell' }
|
||||||
.btn-group.environment-action-buttons
|
.btn-group.table-action-button
|
||||||
= render 'projects/deployments/actions', deployment: deployment
|
= render 'projects/deployments/actions', deployment: deployment
|
||||||
= render 'projects/deployments/rollback', deployment: deployment
|
= render 'projects/deployments/rollback', deployment: deployment
|
||||||
|
|
|
@ -0,0 +1,4 @@
|
||||||
|
---
|
||||||
|
title: Create responsive mobile view for pipelines table
|
||||||
|
merge_request:
|
||||||
|
author:
|
|
@ -56,7 +56,7 @@ feature 'Merge request created from fork' do
|
||||||
visit_merge_request(merge_request)
|
visit_merge_request(merge_request)
|
||||||
page.within('.merge-request-tabs') { click_link 'Pipelines' }
|
page.within('.merge-request-tabs') { click_link 'Pipelines' }
|
||||||
|
|
||||||
page.within('table.ci-table') do
|
page.within('.ci-table') do
|
||||||
expect(page).to have_content pipeline.status
|
expect(page).to have_content pipeline.status
|
||||||
expect(page).to have_content pipeline.id
|
expect(page).to have_content pipeline.id
|
||||||
end
|
end
|
||||||
|
|
|
@ -28,7 +28,7 @@ feature 'Pipelines for Merge Requests', feature: true, js: true do
|
||||||
end
|
end
|
||||||
wait_for_requests
|
wait_for_requests
|
||||||
|
|
||||||
expect(page).to have_selector('.pipeline-actions')
|
expect(page).to have_selector('.stage-cell')
|
||||||
end
|
end
|
||||||
end
|
end
|
||||||
|
|
||||||
|
|
|
@ -178,7 +178,7 @@ describe 'Pipelines', :feature, :js do
|
||||||
end
|
end
|
||||||
|
|
||||||
it 'has a dropdown with play button' do
|
it 'has a dropdown with play button' do
|
||||||
expect(page).to have_selector('.dropdown-toggle.btn.btn-default .icon-play')
|
expect(page).to have_selector('.dropdown-new.btn.btn-default .icon-play')
|
||||||
end
|
end
|
||||||
|
|
||||||
it 'has link to the manual action' do
|
it 'has link to the manual action' do
|
||||||
|
|
|
@ -19,7 +19,7 @@ describe('Pipeline Url Component', () => {
|
||||||
},
|
},
|
||||||
}).$mount();
|
}).$mount();
|
||||||
|
|
||||||
expect(component.$el.tagName).toEqual('TD');
|
expect(component.$el.getAttribute('class')).toContain('table-section');
|
||||||
});
|
});
|
||||||
|
|
||||||
it('should render a link the provided path and id', () => {
|
it('should render a link the provided path and id', () => {
|
||||||
|
@ -94,7 +94,7 @@ describe('Pipeline Url Component', () => {
|
||||||
},
|
},
|
||||||
}).$mount();
|
}).$mount();
|
||||||
|
|
||||||
expect(component.$el.querySelector('.js-pipeline-url-lastest').textContent).toContain('latest');
|
expect(component.$el.querySelector('.js-pipeline-url-latest').textContent).toContain('latest');
|
||||||
expect(component.$el.querySelector('.js-pipeline-url-yaml').textContent).toContain('yaml invalid');
|
expect(component.$el.querySelector('.js-pipeline-url-yaml').textContent).toContain('yaml invalid');
|
||||||
expect(component.$el.querySelector('.js-pipeline-url-stuck').textContent).toContain('stuck');
|
expect(component.$el.querySelector('.js-pipeline-url-stuck').textContent).toContain('stuck');
|
||||||
});
|
});
|
||||||
|
|
|
@ -34,7 +34,7 @@ describe('Pipelines Table Row', () => {
|
||||||
|
|
||||||
it('should render a table row', () => {
|
it('should render a table row', () => {
|
||||||
component = buildComponent(pipeline);
|
component = buildComponent(pipeline);
|
||||||
expect(component.$el).toEqual('TR');
|
expect(component.$el.getAttribute('class')).toContain('gl-responsive-table-row');
|
||||||
});
|
});
|
||||||
|
|
||||||
describe('status column', () => {
|
describe('status column', () => {
|
||||||
|
@ -44,13 +44,13 @@ describe('Pipelines Table Row', () => {
|
||||||
|
|
||||||
it('should render a pipeline link', () => {
|
it('should render a pipeline link', () => {
|
||||||
expect(
|
expect(
|
||||||
component.$el.querySelector('td.commit-link a').getAttribute('href'),
|
component.$el.querySelector('.table-section.commit-link a').getAttribute('href'),
|
||||||
).toEqual(pipeline.path);
|
).toEqual(pipeline.path);
|
||||||
});
|
});
|
||||||
|
|
||||||
it('should render status text', () => {
|
it('should render status text', () => {
|
||||||
expect(
|
expect(
|
||||||
component.$el.querySelector('td.commit-link a').textContent,
|
component.$el.querySelector('.table-section.commit-link a').textContent,
|
||||||
).toContain(pipeline.details.status.text);
|
).toContain(pipeline.details.status.text);
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
@ -62,24 +62,24 @@ describe('Pipelines Table Row', () => {
|
||||||
|
|
||||||
it('should render a pipeline link', () => {
|
it('should render a pipeline link', () => {
|
||||||
expect(
|
expect(
|
||||||
component.$el.querySelector('td:nth-child(2) a').getAttribute('href'),
|
component.$el.querySelector('.table-section:nth-child(2) a').getAttribute('href'),
|
||||||
).toEqual(pipeline.path);
|
).toEqual(pipeline.path);
|
||||||
});
|
});
|
||||||
|
|
||||||
it('should render pipeline ID', () => {
|
it('should render pipeline ID', () => {
|
||||||
expect(
|
expect(
|
||||||
component.$el.querySelector('td:nth-child(2) a > span').textContent,
|
component.$el.querySelector('.table-section:nth-child(2) a > span').textContent,
|
||||||
).toEqual(`#${pipeline.id}`);
|
).toEqual(`#${pipeline.id}`);
|
||||||
});
|
});
|
||||||
|
|
||||||
describe('when a user is provided', () => {
|
describe('when a user is provided', () => {
|
||||||
it('should render user information', () => {
|
it('should render user information', () => {
|
||||||
expect(
|
expect(
|
||||||
component.$el.querySelector('td:nth-child(2) a:nth-child(3)').getAttribute('href'),
|
component.$el.querySelector('.table-section:nth-child(2) a:nth-child(3)').getAttribute('href'),
|
||||||
).toEqual(pipeline.user.path);
|
).toEqual(pipeline.user.path);
|
||||||
|
|
||||||
expect(
|
expect(
|
||||||
component.$el.querySelector('td:nth-child(2) img').getAttribute('data-original-title'),
|
component.$el.querySelector('.table-section:nth-child(2) img').getAttribute('data-original-title'),
|
||||||
).toEqual(pipeline.user.name);
|
).toEqual(pipeline.user.name);
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
@ -142,7 +142,7 @@ describe('Pipelines Table Row', () => {
|
||||||
|
|
||||||
it('should render an icon for each stage', () => {
|
it('should render an icon for each stage', () => {
|
||||||
expect(
|
expect(
|
||||||
component.$el.querySelectorAll('td:nth-child(4) .js-builds-dropdown-button').length,
|
component.$el.querySelectorAll('.table-section:nth-child(4) .js-builds-dropdown-button').length,
|
||||||
).toEqual(pipeline.details.stages.length);
|
).toEqual(pipeline.details.stages.length);
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
@ -154,7 +154,7 @@ describe('Pipelines Table Row', () => {
|
||||||
|
|
||||||
it('should render the provided actions', () => {
|
it('should render the provided actions', () => {
|
||||||
expect(
|
expect(
|
||||||
component.$el.querySelectorAll('td:nth-child(6) ul li').length,
|
component.$el.querySelectorAll('.table-section:nth-child(6) ul li').length,
|
||||||
).toEqual(pipeline.details.manual_actions.length);
|
).toEqual(pipeline.details.manual_actions.length);
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
|
@ -32,16 +32,14 @@ describe('Pipelines Table', () => {
|
||||||
});
|
});
|
||||||
|
|
||||||
it('should render a table', () => {
|
it('should render a table', () => {
|
||||||
expect(component.$el).toEqual('TABLE');
|
expect(component.$el.getAttribute('class')).toContain('ci-table');
|
||||||
});
|
});
|
||||||
|
|
||||||
it('should render table head with correct columns', () => {
|
it('should render table head with correct columns', () => {
|
||||||
expect(component.$el.querySelector('th.js-pipeline-status').textContent).toEqual('Status');
|
expect(component.$el.querySelector('.table-section.js-pipeline-status').textContent.trim()).toEqual('Status');
|
||||||
expect(component.$el.querySelector('th.js-pipeline-info').textContent).toEqual('Pipeline');
|
expect(component.$el.querySelector('.table-section.js-pipeline-info').textContent.trim()).toEqual('Pipeline');
|
||||||
expect(component.$el.querySelector('th.js-pipeline-commit').textContent).toEqual('Commit');
|
expect(component.$el.querySelector('.table-section.js-pipeline-commit').textContent.trim()).toEqual('Commit');
|
||||||
expect(component.$el.querySelector('th.js-pipeline-stages').textContent).toEqual('Stages');
|
expect(component.$el.querySelector('.table-section.js-pipeline-stages').textContent.trim()).toEqual('Stages');
|
||||||
expect(component.$el.querySelector('th.js-pipeline-date').textContent).toEqual('');
|
|
||||||
expect(component.$el.querySelector('th.js-pipeline-actions').textContent).toEqual('');
|
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
|
@ -53,7 +51,7 @@ describe('Pipelines Table', () => {
|
||||||
service: {},
|
service: {},
|
||||||
},
|
},
|
||||||
}).$mount();
|
}).$mount();
|
||||||
expect(component.$el.querySelectorAll('tbody tr').length).toEqual(0);
|
expect(component.$el.querySelectorAll('.commit.gl-responsive-table-row').length).toEqual(0);
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
|
@ -67,7 +65,7 @@ describe('Pipelines Table', () => {
|
||||||
},
|
},
|
||||||
}).$mount();
|
}).$mount();
|
||||||
|
|
||||||
expect(component.$el.querySelectorAll('tbody tr').length).toEqual(1);
|
expect(component.$el.querySelectorAll('.commit.gl-responsive-table-row').length).toEqual(1);
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
Loading…
Reference in New Issue