Commit b937e03d authored by Annabel Dunstone Gray's avatar Annabel Dunstone Gray 🤰🏼

Merge branch '28661-ci-tables-buttons' into 'master'

Fix CI tables action buttons are hidden is smaller screens

Closes #28661

See merge request !9578
parents 4aa66428 4dce1ad6
......@@ -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>
`,
......
......@@ -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"
......
......@@ -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>
......
......@@ -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">
......
......@@ -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>
......
......@@ -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;
}
}
}
}
......@@ -105,6 +105,7 @@
@media (max-width: $screen-md-max) {
.content-list {
&.pipelines,
&.environments-container,
&.builds-content-list {
width: 100%;
overflow: auto;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment