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