kotovalexarian-likes-gitlab/gitlab-org--gitlab-foss
1
0
Fork 0
Code Releases Activity

Remove hidden-xs classes from last columns in environments and pipelines table.

Browse source 
Transform pipelines table css to match structure of pipelines table
Make environments table overflow
This commit is contained in:
Filipa Lacerda 2017-02-28 12:05:01 +00:00
parent cd92c84b56
commit 4dce1ad6b5
7 changed files with 106 additions and 122 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
app/assets/javascripts/environments/components/environment.js.es6
View file

@ -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>
`,

2
app/assets/javascripts/environments/components/environment_item.js.es6
View file

@ -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"

4
app/assets/javascripts/environments/components/environments_table.js.es6
View file

@ -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>

2
app/assets/javascripts/vue_pipelines_index/pipeline_actions.js.es6
View file

@ -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">

2
app/assets/javascripts/vue_shared/components/pipelines_table.js.es6
View file

@ -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>

205
app/assets/stylesheets/pages/environments.scss
View file

@ -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;
}
}
}
}

1
app/assets/stylesheets/pages/pipelines.scss
View file

@ -105,6 +105,7 @@
@media (max-width: $screen-md-max) {
.content-list {
&.pipelines,
&.environments-container,
&.builds-content-list {
width: 100%;
overflow: auto;