diff --git a/app/assets/javascripts/environments/components/environment.js.es6 b/app/assets/javascripts/environments/components/environment.js.es6 index 4b700a39d44..5869323d1e2 100644 --- a/app/assets/javascripts/environments/components/environment.js.es6 +++ b/app/assets/javascripts/environments/components/environment.js.es6 @@ -145,7 +145,7 @@ module.exports = Vue.component('environment-component', { -
+
@@ -181,12 +181,12 @@ module.exports = Vue.component('environment-component', { :terminal-icon-svg="terminalIconSvg" :commit-icon-svg="commitIconSvg"> - - -
+ + +
`, diff --git a/app/assets/javascripts/environments/components/environment_item.js.es6 b/app/assets/javascripts/environments/components/environment_item.js.es6 index 5d780bddb0e..3f782742c56 100644 --- a/app/assets/javascripts/environments/components/environment_item.js.es6 +++ b/app/assets/javascripts/environments/components/environment_item.js.es6 @@ -503,7 +503,7 @@ module.exports = Vue.component('environment-item', { - +
+ @@ -54,7 +54,7 @@ module.exports = Vue.component('environment-table-component', { - + diff --git a/app/assets/javascripts/vue_pipelines_index/pipeline_actions.js.es6 b/app/assets/javascripts/vue_pipelines_index/pipeline_actions.js.es6 index e20085d1fd2..b50afe7c594 100644 --- a/app/assets/javascripts/vue_pipelines_index/pipeline_actions.js.es6 +++ b/app/assets/javascripts/vue_pipelines_index/pipeline_actions.js.es6 @@ -32,7 +32,7 @@ }, }, template: ` - - + diff --git a/app/assets/stylesheets/pages/environments.scss b/app/assets/stylesheets/pages/environments.scss index f789ae1ccd3..77e09e66340 100644 --- a/app/assets/stylesheets/pages/environments.scss +++ b/app/assets/stylesheets/pages/environments.scss @@ -15,112 +15,97 @@ padding-top: 20px; } -@media (max-width: $screen-xs-max) { - .environments-container { +.environments-container { + .table-holder { width: 100%; overflow: auto; } -} -.environments { - table-layout: fixed; - - .environments-commit, - .environments-actions, - .environments-deploy, - .environments-build, - .environments-date { - position: static; - float: none; - display: table-cell; - } - - .environments-commit, - .environments-actions { - width: 20%; - } - - .environments-date { - width: 10%; - } - - .environments-name, - .environments-deploy, - .environments-build { - width: 15%; - } - - .environment-name, - .environments-build-cell, - .deployment-column { - word-break: break-all; - } - - .deployment-column { - .avatar { - float: none; + .table.ci-table { + .environments-actions { + min-width: 200px; } - } - .btn-group { + .environments-commit, + .environments-actions { + width: 20%; + } - > a { + .environments-date { + width: 10%; + } + + .environments-name, + .environments-deploy, + .environments-build { + width: 15%; + } + + .deployment-column { + > span { + word-break: break-all; + } + + .avatar { + float: none; + } + } + + .btn-group { + + > a { + color: $gl-text-color-secondary; + } + + svg path { + fill: $gl-text-color-secondary; + } + + .dropdown { + outline: none; + } + } + + .commit-title { + margin: 0; + } + + .avatar-image-container { + text-decoration: none; + } + + .icon-play { + height: 13px; + width: 12px; + } + + .external-url, + .dropdown-new { color: $gl-text-color-secondary; } - svg path { - fill: $gl-text-color-secondary; + .dropdown-menu { + .fa { + margin-right: 6px; + color: $gl-text-color-secondary; + } } - .dropdown { - outline: none; + .build-link, + .branch-name { + color: $gl-text-color; } - } - - .commit-title { - margin: 0; - } - - .avatar-image-container { - text-decoration: none; - } - - .icon-play { - height: 13px; - width: 12px; - } - - .external-url, - .dropdown-new { - color: $gl-text-color-secondary; - } - - .dropdown-menu { - - .fa { - margin-right: 6px; + .stop-env-link, + .external-url { color: $gl-text-color-secondary; + + .stop-env-icon { + font-size: 14px; + } } - } - - .build-link, - .branch-name { - color: $gl-text-color; - } - - .stop-env-link, - .external-url { - color: $gl-text-color-secondary; - - .stop-env-icon { - font-size: 14px; - } - } - - .deployment { - .build-column { + .deployment .build-column { .build-link { color: $gl-text-color; } @@ -129,34 +114,32 @@ float: none; } } - } - .folder-icon { - margin-right: 3px; - color: $gl-text-color-secondary; - display: inline-block; - - .fa:nth-child(1) { + .folder-icon { margin-right: 3px; + color: $gl-text-color-secondary; + display: inline-block; + + .fa:nth-child(1) { + margin-right: 3px; + } } - } - .folder-name { - cursor: pointer; - color: $gl-text-color-secondary; - display: inline-block; - } -} + .folder-name { + cursor: pointer; + color: $gl-text-color-secondary; + display: inline-block; + } -.table.ci-table.environments { - .icon-container { - width: 20px; - text-align: center; - } + .icon-container { + width: 20px; + text-align: center; + } - .branch-commit { - .commit-id { - margin-right: 0; + .branch-commit { + .commit-id { + margin-right: 0; + } } } } diff --git a/app/assets/stylesheets/pages/pipelines.scss b/app/assets/stylesheets/pages/pipelines.scss index f4707f71208..69eea1b2217 100644 --- a/app/assets/stylesheets/pages/pipelines.scss +++ b/app/assets/stylesheets/pages/pipelines.scss @@ -105,6 +105,7 @@ @media (max-width: $screen-md-max) { .content-list { &.pipelines, + &.environments-container, &.builds-content-list { width: 100%; overflow: auto;
EnvironmentJob Commit Updated
diff --git a/app/assets/javascripts/vue_shared/components/pipelines_table.js.es6 b/app/assets/javascripts/vue_shared/components/pipelines_table.js.es6 index 4bdaef31ee9..34d3bbdd80d 100644 --- a/app/assets/javascripts/vue_shared/components/pipelines_table.js.es6 +++ b/app/assets/javascripts/vue_shared/components/pipelines_table.js.es6 @@ -44,7 +44,7 @@ require('./pipelines_table_row');
Commit Stages