diff options
author | Filipa Lacerda <filipa@gitlab.com> | 2017-02-28 15:05:01 +0300 |
---|---|---|
committer | Filipa Lacerda <filipa@gitlab.com> | 2017-02-28 15:05:01 +0300 |
commit | 4dce1ad6b51d9884f8d58d76ed36f2d7ffb4581c (patch) | |
tree | cf627b4e12837411cc029e7238faaacaf649248b | |
parent | cd92c84b5617970ee4b143687120668c6efa4a72 (diff) |
Remove hidden-xs classes from last columns in environments and pipelines table.
Transform pipelines table css to match structure of pipelines table
Make environments table overflow
7 files changed, 97 insertions, 113 deletions
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', { </div> </div> - <div class="environments-container"> + <div class="content-list environments-container"> <div class="environments-list-loading text-center" v-if="isLoading"> <i class="fa fa-spinner fa-spin"></i> </div> @@ -181,12 +181,12 @@ module.exports = Vue.component('environment-component', { :terminal-icon-svg="terminalIconSvg" :commit-icon-svg="commitIconSvg"> </environment-table> - - <table-pagination v-if="state.paginationInformation && state.paginationInformation.totalPages > 1" - :change="changePage" - :pageInfo="state.paginationInformation"> - </table-pagination> </div> + + <table-pagination v-if="state.paginationInformation && state.paginationInformation.totalPages > 1" + :change="changePage" + :pageInfo="state.paginationInformation"> + </table-pagination> </div> </div> `, 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', { </span> </td> - <td class="hidden-xs environments-actions"> + <td class="environments-actions"> <div v-if="!model.isFolder" class="btn-group pull-right" role="group"> <actions-component v-if="hasManualActions && canCreateDeployment" :play-icon-svg="playIconSvg" diff --git a/app/assets/javascripts/environments/components/environments_table.js.es6 b/app/assets/javascripts/environments/components/environments_table.js.es6 index fd35d77fd3d..33ebca19f5d 100644 --- a/app/assets/javascripts/environments/components/environments_table.js.es6 +++ b/app/assets/javascripts/environments/components/environments_table.js.es6 @@ -46,7 +46,7 @@ module.exports = Vue.component('environment-table-component', { }, template: ` - <table class="table ci-table environments"> + <table class="table ci-table"> <thead> <tr> <th class="environments-name">Environment</th> @@ -54,7 +54,7 @@ module.exports = Vue.component('environment-table-component', { <th class="environments-build">Job</th> <th class="environments-commit">Commit</th> <th class="environments-date">Updated</th> - <th class="hidden-xs environments-actions"></th> + <th class="environments-actions"></th> </tr> </thead> <tbody> 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: ` - <td class="pipeline-actions hidden-xs"> + <td class="pipeline-actions"> <div class="pull-right"> <div class="btn-group"> <div class="btn-group" v-if="actions"> 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'); <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 hidden-xs"></th> + <th class="js-pipeline-actions pipeline-actions"></th> </tr> </thead> <tbody> 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 { - color: $gl-text-color-secondary; + .environments-date { + width: 10%; } - svg path { - fill: $gl-text-color-secondary; + .environments-name, + .environments-deploy, + .environments-build { + width: 15%; } - .dropdown { - outline: none; + .deployment-column { + > span { + word-break: break-all; + } + + .avatar { + float: none; + } } - } + .btn-group { - .commit-title { - margin: 0; - } + > a { + color: $gl-text-color-secondary; + } - .avatar-image-container { - text-decoration: none; - } + svg path { + fill: $gl-text-color-secondary; + } - .icon-play { - height: 13px; - width: 12px; - } + .dropdown { + outline: none; + } + } - .external-url, - .dropdown-new { - color: $gl-text-color-secondary; - } + .commit-title { + margin: 0; + } - .dropdown-menu { + .avatar-image-container { + text-decoration: none; + } - .fa { - margin-right: 6px; - color: $gl-text-color-secondary; + .icon-play { + height: 13px; + width: 12px; } - } - .build-link, - .branch-name { - color: $gl-text-color; - } + .external-url, + .dropdown-new { + color: $gl-text-color-secondary; + } - .stop-env-link, - .external-url { - color: $gl-text-color-secondary; + .dropdown-menu { + .fa { + margin-right: 6px; + color: $gl-text-color-secondary; + } + } - .stop-env-icon { - font-size: 14px; + .build-link, + .branch-name { + color: $gl-text-color; } - } - .deployment { - .build-column { + .stop-env-link, + .external-url { + color: $gl-text-color-secondary; + + .stop-env-icon { + font-size: 14px; + } + } + .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; |