Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Support
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in / Register
Toggle navigation
G
gitlab-ce
Project overview
Project overview
Details
Activity
Releases
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Issues
0
Issues
0
List
Boards
Labels
Milestones
Merge Requests
0
Merge Requests
0
Analytics
Analytics
Repository
Value Stream
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Create a new issue
Commits
Issue Boards
Open sidebar
Boxiang Sun
gitlab-ce
Commits
1d448a66
Commit
1d448a66
authored
Jun 16, 2017
by
Annabel Dunstone Gray
Committed by
Phil Hughes
Jun 16, 2017
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
Create responsive mobile view for pipelines table
parent
2b34f3f2
Changes
20
Hide whitespace changes
Inline
Side-by-side
Showing
20 changed files
with
332 additions
and
418 deletions
+332
-418
app/assets/javascripts/environments/components/environment_item.vue
.../javascripts/environments/components/environment_item.vue
+2
-2
app/assets/javascripts/pipelines/components/pipeline_url.vue
app/assets/javascripts/pipelines/components/pipeline_url.vue
+23
-21
app/assets/javascripts/pipelines/components/pipelines_actions.vue
...ts/javascripts/pipelines/components/pipelines_actions.vue
+1
-1
app/assets/javascripts/pipelines/components/time_ago.vue
app/assets/javascripts/pipelines/components/time_ago.vue
+32
-24
app/assets/javascripts/vue_shared/components/commit.vue
app/assets/javascripts/vue_shared/components/commit.vue
+2
-2
app/assets/javascripts/vue_shared/components/pipelines_table.vue
...ets/javascripts/vue_shared/components/pipelines_table.vue
+33
-24
app/assets/javascripts/vue_shared/components/pipelines_table_row.vue
...javascripts/vue_shared/components/pipelines_table_row.vue
+56
-28
app/assets/stylesheets/framework/page-header.scss
app/assets/stylesheets/framework/page-header.scss
+4
-0
app/assets/stylesheets/framework/responsive-tables.scss
app/assets/stylesheets/framework/responsive-tables.scss
+47
-1
app/assets/stylesheets/pages/environments.scss
app/assets/stylesheets/pages/environments.scss
+0
-37
app/assets/stylesheets/pages/pipelines.scss
app/assets/stylesheets/pages/pipelines.scss
+44
-132
app/assets/stylesheets/pages/status.scss
app/assets/stylesheets/pages/status.scss
+61
-121
app/views/projects/deployments/_deployment.html.haml
app/views/projects/deployments/_deployment.html.haml
+2
-2
changelogs/unreleased/31415-responsive-pipelines-table-2.yml
changelogs/unreleased/31415-responsive-pipelines-table-2.yml
+4
-0
spec/features/merge_requests/created_from_fork_spec.rb
spec/features/merge_requests/created_from_fork_spec.rb
+1
-1
spec/features/merge_requests/pipelines_spec.rb
spec/features/merge_requests/pipelines_spec.rb
+1
-1
spec/features/projects/pipelines/pipelines_spec.rb
spec/features/projects/pipelines/pipelines_spec.rb
+1
-1
spec/javascripts/pipelines/pipeline_url_spec.js
spec/javascripts/pipelines/pipeline_url_spec.js
+2
-2
spec/javascripts/vue_shared/components/pipelines_table_row_spec.js
...scripts/vue_shared/components/pipelines_table_row_spec.js
+9
-9
spec/javascripts/vue_shared/components/pipelines_table_spec.js
...javascripts/vue_shared/components/pipelines_table_spec.js
+7
-9
No files found.
app/assets/javascripts/environments/components/environment_item.vue
View file @
1d448a66
...
...
@@ -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
...
...
app/assets/javascripts/pipelines/components/pipeline_url.vue
View file @
1d448a66
...
...
@@ -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
>
app/assets/javascripts/pipelines/components/pipelines_actions.vue
View file @
1d448a66
...
...
@@ -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"
...
...
app/assets/javascripts/pipelines/components/time_ago.vue
View file @
1d448a66
...
...
@@ -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>
app/assets/javascripts/vue_shared/components/commit.vue
View file @
1d448a66
...
...
@@ -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>
...
...
app/assets/javascripts/vue_shared/components/pipelines_table.vue
View file @
1d448a66
...
...
@@ -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
>
app/assets/javascripts/vue_shared/components/pipelines_table_row.vue
View file @
1d448a66
...
...
@@ -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
>
app/assets/stylesheets/framework/page-header.scss
View file @
1d448a66
...
...
@@ -59,4 +59,8 @@
margin
:
0
2px
0
3px
;
}
}
.ci-status
{
margin-right
:
10px
;
}
}
app/assets/stylesheets/framework/responsive-tables.scss
View file @
1d448a66
...
...
@@ -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
)
{
...
...
app/assets/stylesheets/pages/environments.scss
View file @
1d448a66
...
...
@@ -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%
;
}
...
...
app/assets/stylesheets/pages/pipelines.scss
View file @
1d448a66
...
...
@@ -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
...
...
app/assets/stylesheets/pages/status.scss
View file @
1d448a66
.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
;
}
}
}
...
...
app/views/projects/deployments/_deployment.html.haml
View file @
1d448a66
...
...
@@ -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
changelogs/unreleased/31415-responsive-pipelines-table-2.yml
0 → 100644
View file @
1d448a66
---
title
:
Create responsive mobile view for pipelines table
merge_request
:
author
:
spec/features/merge_requests/created_from_fork_spec.rb
View file @
1d448a66
...
...
@@ -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
...
...
spec/features/merge_requests/pipelines_spec.rb
View file @
1d448a66
...
...
@@ -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
...
...
spec/features/projects/pipelines/pipelines_spec.rb
View file @
1d448a66
...
...
@@ -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
...
...
spec/javascripts/pipelines/pipeline_url_spec.js
View file @
1d448a66
...
...
@@ -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-la
s
test
'
).
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
'
);
});
...
...
spec/javascripts/vue_shared/components/pipelines_table_row_spec.js
View file @
1d448a66
...
...
@@ -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
);
});
});
...
...
spec/javascripts/vue_shared/components/pipelines_table_spec.js
View file @
1d448a66
...
...
@@ -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
);
});
});
});
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment