summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorAnnabel Dunstone Gray <annabel.dunstone@gmail.com>2017-06-16 12:00:28 +0000
committerPhil Hughes <me@iamphill.com>2017-06-16 12:00:28 +0000
commit1d448a66d7d25cc30733b11eecfcd6893a445fc1 (patch)
tree6d2543f77a88bc4692291bf6277744822d25fdda
parent2b34f3f20d5a5c8ecdf6e8842892cb2b4ed3c89a (diff)
downloadgitlab-ce-1d448a66d7d25cc30733b11eecfcd6893a445fc1.tar.gz
Create responsive mobile view for pipelines table
-rw-r--r--app/assets/javascripts/environments/components/environment_item.vue4
-rw-r--r--app/assets/javascripts/pipelines/components/pipeline_url.vue44
-rw-r--r--app/assets/javascripts/pipelines/components/pipelines_actions.vue2
-rw-r--r--app/assets/javascripts/pipelines/components/time_ago.vue56
-rw-r--r--app/assets/javascripts/vue_shared/components/commit.vue4
-rw-r--r--app/assets/javascripts/vue_shared/components/pipelines_table.vue57
-rw-r--r--app/assets/javascripts/vue_shared/components/pipelines_table_row.vue84
-rw-r--r--app/assets/stylesheets/framework/page-header.scss4
-rw-r--r--app/assets/stylesheets/framework/responsive-tables.scss48
-rw-r--r--app/assets/stylesheets/pages/environments.scss37
-rw-r--r--app/assets/stylesheets/pages/pipelines.scss176
-rw-r--r--app/assets/stylesheets/pages/status.scss182
-rw-r--r--app/views/projects/deployments/_deployment.html.haml4
-rw-r--r--changelogs/unreleased/31415-responsive-pipelines-table-2.yml4
-rw-r--r--spec/features/merge_requests/created_from_fork_spec.rb2
-rw-r--r--spec/features/merge_requests/pipelines_spec.rb2
-rw-r--r--spec/features/projects/pipelines/pipelines_spec.rb2
-rw-r--r--spec/javascripts/pipelines/pipeline_url_spec.js4
-rw-r--r--spec/javascripts/vue_shared/components/pipelines_table_row_spec.js18
-rw-r--r--spec/javascripts/vue_shared/components/pipelines_table_spec.js16
20 files changed, 332 insertions, 418 deletions
diff --git a/app/assets/javascripts/environments/components/environment_item.vue b/app/assets/javascripts/environments/components/environment_item.vue
index 614637b637e..809c147bf25 100644
--- a/app/assets/javascripts/environments/components/environment_item.vue
+++ b/app/assets/javascripts/environments/components/environment_item.vue
@@ -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
diff --git a/app/assets/javascripts/pipelines/components/pipeline_url.vue b/app/assets/javascripts/pipelines/components/pipeline_url.vue
index 4781a8ff1da..8333ec0fbc3 100644
--- a/app/assets/javascripts/pipelines/components/pipeline_url.vue
+++ b/app/assets/javascripts/pipelines/components/pipeline_url.vue
@@ -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,24 +42,26 @@ export default {
class="js-pipeline-url-api api">
API
</span>
- <span
- v-if="pipeline.flags.latest"
- class="js-pipeline-url-lastest label label-success"
- title="Latest pipeline for this branch"
- ref="tooltip">
- latest
- </span>
- <span
- v-if="pipeline.flags.yaml_errors"
- class="js-pipeline-url-yaml label label-danger"
- :title="pipeline.yaml_errors"
- ref="tooltip">
- yaml invalid
- </span>
- <span
- v-if="pipeline.flags.stuck"
- class="js-pipeline-url-stuck label label-warning">
- stuck
- </span>
- </td>
+ <div class="label-container">
+ <span
+ v-if="pipeline.flags.latest"
+ class="js-pipeline-url-latest label label-success"
+ title="Latest pipeline for this branch"
+ ref="tooltip">
+ latest
+ </span>
+ <span
+ v-if="pipeline.flags.yaml_errors"
+ class="js-pipeline-url-yaml label label-danger"
+ :title="pipeline.yaml_errors"
+ ref="tooltip">
+ yaml invalid
+ </span>
+ <span
+ v-if="pipeline.flags.stuck"
+ class="js-pipeline-url-stuck label label-warning">
+ stuck
+ </span>
+ </div>
+ </div>
</template>
diff --git a/app/assets/javascripts/pipelines/components/pipelines_actions.vue b/app/assets/javascripts/pipelines/components/pipelines_actions.vue
index da5df2a06cf..97b4de26214 100644
--- a/app/assets/javascripts/pipelines/components/pipelines_actions.vue
+++ b/app/assets/javascripts/pipelines/components/pipelines_actions.vue
@@ -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"
diff --git a/app/assets/javascripts/pipelines/components/time_ago.vue b/app/assets/javascripts/pipelines/components/time_ago.vue
index c47658cd6e6..be3f32afa09 100644
--- a/app/assets/javascripts/pipelines/components/time_ago.vue
+++ b/app/assets/javascripts/pipelines/components/time_ago.vue
@@ -55,31 +55,39 @@
};
</script>
<template>
- <td class="pipelines-time-ago">
- <p
- class="duration"
- v-if="hasDuration">
- <span v-html="iconTimerSvg">
- </span>
- {{durationFormated}}
- </p>
+ <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>
+ {{durationFormated}}
+ </p>
- <p
- class="finished-at"
- v-if="hasFinishedTime">
+ <p
+ class="finished-at hidden-xs hidden-sm"
+ v-if="hasFinishedTime">
- <i
- class="fa fa-calendar"
- aria-hidden="true">
- </i>
+ <i
+ class="fa fa-calendar"
+ aria-hidden="true">
+ </i>
- <time
- ref="tooltip"
- data-placement="top"
- data-container="body"
- :title="tooltipTitle(finishedTime)">
- {{timeFormated(finishedTime)}}
- </time>
- </p>
- </td>
+ <time
+ ref="tooltip"
+ data-placement="top"
+ data-container="body"
+ :title="tooltipTitle(finishedTime)">
+ {{timeFormated(finishedTime)}}
+ </time>
+ </p>
+ </div>
+ </div>
</script>
diff --git a/app/assets/javascripts/vue_shared/components/commit.vue b/app/assets/javascripts/vue_shared/components/commit.vue
index fcf48b11057..262584769e0 100644
--- a/app/assets/javascripts/vue_shared/components/commit.vue
+++ b/app/assets/javascripts/vue_shared/components/commit.vue
@@ -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>
diff --git a/app/assets/javascripts/vue_shared/components/pipelines_table.vue b/app/assets/javascripts/vue_shared/components/pipelines_table.vue
index ebe8fba8a44..884f1ce9689 100644
--- a/app/assets/javascripts/vue_shared/components/pipelines_table.vue
+++ b/app/assets/javascripts/vue_shared/components/pipelines_table.vue
@@ -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
- v-for="model in pipelines"
- :model="model">
- <tr
- is="pipelines-table-row-component"
- :pipeline="model"
- :service="service"
- :update-graph-dropdown="updateGraphDropdown"
- />
- </template>
- </tbody>
- </table>
+ <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"
+ :key="model.id"
+ :pipeline="model"
+ :service="service"
+ :update-graph-dropdown="updateGraphDropdown"
+ />
+ </div>
</template>
diff --git a/app/assets/javascripts/vue_shared/components/pipelines_table_row.vue b/app/assets/javascripts/vue_shared/components/pipelines_table_row.vue
index 33b3375deff..4d5ebe2e9ed 100644
--- a/app/assets/javascripts/vue_shared/components/pipelines_table_row.vue
+++ b/app/assets/javascripts/vue_shared/components/pipelines_table_row.vue
@@ -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">
- <ci-badge :status="pipelineStatus" />
- </td>
+ <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"/>
+ </div>
+ </div>
<pipeline-url :pipeline="pipeline" />
- <td>
- <commit-component
- :tag="commitTag"
- :commit-ref="commitRef"
- :commit-url="commitUrl"
- :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">
+ <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"/>
+ </div>
+ </div>
- <pipeline-stage
- :stage="stage"
- :update-dropdown="updateGraphDropdown"
- />
+ <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>
- </td>
+ </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>
diff --git a/app/assets/stylesheets/framework/page-header.scss b/app/assets/stylesheets/framework/page-header.scss
index 5f4211147f3..f1ecd050a0a 100644
--- a/app/assets/stylesheets/framework/page-header.scss
+++ b/app/assets/stylesheets/framework/page-header.scss
@@ -59,4 +59,8 @@
margin: 0 2px 0 3px;
}
}
+
+ .ci-status {
+ margin-right: 10px;
+ }
}
diff --git a/app/assets/stylesheets/framework/responsive-tables.scss b/app/assets/stylesheets/framework/responsive-tables.scss
index f0a4c66aa1a..d2c90908baa 100644
--- a/app/assets/stylesheets/framework/responsive-tables.scss
+++ b/app/assets/stylesheets/framework/responsive-tables.scss
@@ -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) {
diff --git a/app/assets/stylesheets/pages/environments.scss b/app/assets/stylesheets/pages/environments.scss
index b24803678ea..89bd437b362 100644
--- a/app/assets/stylesheets/pages/environments.scss
+++ b/app/assets/stylesheets/pages/environments.scss
@@ -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%;
}
diff --git a/app/assets/stylesheets/pages/pipelines.scss b/app/assets/stylesheets/pages/pipelines.scss
index 3d88e273a9e..a85ba3a5955 100644
--- a/app/assets/stylesheets/pages/pipelines.scss
+++ b/app/assets/stylesheets/pages/pipelines.scss
@@ -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 {
- right: auto;
- left: 50%;
- transform: translate(-50%, 0);
+ transform: translate(-80%, 0);
+ min-width: 150px;
+
+ @media(min-width: $screen-md-min) {
+ transform: translate(-50%, 0);
+ right: auto;
+ left: 50%;
+ min-width: 240px;
+ }
}
/**
* Terminal
diff --git a/app/assets/stylesheets/pages/status.scss b/app/assets/stylesheets/pages/status.scss
index 4ed8617b6a3..67ad1ae60af 100644
--- a/app/assets/stylesheets/pages/status.scss
+++ b/app/assets/stylesheets/pages/status.scss
@@ -1,142 +1,82 @@
-.container-fluid {
- .ci-status {
- padding: 2px 7px 4px;
- margin-right: 10px;
- 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;
- }
+@mixin status-color($color-light, $color-main, $color-dark) {
+ color: $color-main;
+ border-color: $color-main;
- &.ci-failed {
- color: $red-500;
- border-color: $red-500;
+ &:not(span):hover {
+ background-color: $color-light;
+ color: $color-dark;
+ border-color: $color-dark;
- &:not(span):hover {
- background-color: $red-50;
- color: $red-600;
- border-color: $red-600;
-
- svg {
- fill: $red-600;
- }
- }
-
- svg {
- fill: $red-500;
- }
+ svg {
+ fill: $color-dark;
}
+ }
- &.ci-success {
- color: $green-600;
- border-color: $green-500;
+ svg {
+ fill: $color-main;
+ }
+}
- &:not(span):hover {
- background-color: $green-50;
- color: $green-700;
- border-color: $green-600;
+.ci-status {
+ padding: 2px 7px 4px;
+ border: 1px solid $gray-darker;
+ white-space: nowrap;
+ border-radius: 4px;
- svg {
- fill: $green-600;
- }
- }
+ &:hover,
+ &:focus {
+ text-decoration: none;
+ }
- svg {
- fill: $green-500;
- }
- }
+ svg {
+ height: 13px;
+ width: 13px;
+ position: relative;
+ top: 2px;
+ overflow: visible;
+ }
- &.ci-canceled,
- &.ci-disabled {
- color: $gl-text-color;
- border-color: $gl-text-color;
+ &.ci-failed {
+ @include status-color($red-50, $red-500, $red-600);
+ }
- &:not(span):hover {
- background-color: rgba($gl-text-color, .07);
- }
+ &.ci-success {
+ @include status-color($green-50, $green-500, $green-700);
+ }
- svg {
- fill: $gl-text-color;
- }
- }
+ &.ci-canceled,
+ &.ci-disabled,
+ &.ci-manual {
+ color: $gl-text-color;
+ border-color: $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;
- }
+ &:not(span):hover {
+ background-color: rgba($gl-text-color, .07);
}
+ }
- &.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-pending,
+ &.ci-failed_with_warnings,
+ &.ci-success_with_warnings {
+ @include status-color($orange-50, $orange-500, $orange-700);
+ }
- &.ci-created,
- &.ci-skipped {
- color: $gl-text-color-secondary;
- border-color: $gl-text-color-secondary;
+ &.ci-info,
+ &.ci-running {
+ @include status-color($blue-50, $blue-500, $blue-600);
+ }
- &:not(span):hover {
- background-color: rgba($gl-text-color-secondary, .07);
- }
+ &.ci-created,
+ &.ci-skipped {
+ color: $gl-text-color-secondary;
+ border-color: $gl-text-color-secondary;
- svg {
- fill: $gl-text-color-secondary;
- }
+ &:not(span):hover {
+ background-color: rgba($gl-text-color-secondary, .07);
}
- &.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;
- }
+ svg {
+ fill: $gl-text-color-secondary;
}
}
}
diff --git a/app/views/projects/deployments/_deployment.html.haml b/app/views/projects/deployments/_deployment.html.haml
index d956cb2cc1a..9b2ec9ae41c 100644
--- a/app/views/projects/deployments/_deployment.html.haml
+++ b/app/views/projects/deployments/_deployment.html.haml
@@ -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
diff --git a/changelogs/unreleased/31415-responsive-pipelines-table-2.yml b/changelogs/unreleased/31415-responsive-pipelines-table-2.yml
new file mode 100644
index 00000000000..59402b85871
--- /dev/null
+++ b/changelogs/unreleased/31415-responsive-pipelines-table-2.yml
@@ -0,0 +1,4 @@
+---
+title: Create responsive mobile view for pipelines table
+merge_request:
+author:
diff --git a/spec/features/merge_requests/created_from_fork_spec.rb b/spec/features/merge_requests/created_from_fork_spec.rb
index bf34c99b92a..b4327743383 100644
--- a/spec/features/merge_requests/created_from_fork_spec.rb
+++ b/spec/features/merge_requests/created_from_fork_spec.rb
@@ -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
diff --git a/spec/features/merge_requests/pipelines_spec.rb b/spec/features/merge_requests/pipelines_spec.rb
index 4c76004cb93..744bd484a80 100644
--- a/spec/features/merge_requests/pipelines_spec.rb
+++ b/spec/features/merge_requests/pipelines_spec.rb
@@ -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
diff --git a/spec/features/projects/pipelines/pipelines_spec.rb b/spec/features/projects/pipelines/pipelines_spec.rb
index 026e2ce5b68..db2d1a100a5 100644
--- a/spec/features/projects/pipelines/pipelines_spec.rb
+++ b/spec/features/projects/pipelines/pipelines_spec.rb
@@ -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
diff --git a/spec/javascripts/pipelines/pipeline_url_spec.js b/spec/javascripts/pipelines/pipeline_url_spec.js
index 594a9856d2c..3c4b20a5f06 100644
--- a/spec/javascripts/pipelines/pipeline_url_spec.js
+++ b/spec/javascripts/pipelines/pipeline_url_spec.js
@@ -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');
});
diff --git a/spec/javascripts/vue_shared/components/pipelines_table_row_spec.js b/spec/javascripts/vue_shared/components/pipelines_table_row_spec.js
index 346fd0ae010..9475ee28a03 100644
--- a/spec/javascripts/vue_shared/components/pipelines_table_row_spec.js
+++ b/spec/javascripts/vue_shared/components/pipelines_table_row_spec.js
@@ -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);
});
});
diff --git a/spec/javascripts/vue_shared/components/pipelines_table_spec.js b/spec/javascripts/vue_shared/components/pipelines_table_spec.js
index c362cfb7a96..4c35d702004 100644
--- a/spec/javascripts/vue_shared/components/pipelines_table_spec.js
+++ b/spec/javascripts/vue_shared/components/pipelines_table_spec.js
@@ -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);
});
});
});