diff options
10 files changed, 55 insertions, 41 deletions
diff --git a/app/assets/javascripts/environments/components/environment.vue b/app/assets/javascripts/environments/components/environment.vue index 28597c799df..8120ef182d4 100644 --- a/app/assets/javascripts/environments/components/environment.vue +++ b/app/assets/javascripts/environments/components/environment.vue @@ -230,7 +230,7 @@ export default { </div> </div> - <div class="content-list environments-container"> + <div class="environments-container"> <loading-icon label="Loading environments" size="3" diff --git a/app/assets/javascripts/environments/components/environment_actions.vue b/app/assets/javascripts/environments/components/environment_actions.vue index 41d5453f1b2..a2448520a5f 100644 --- a/app/assets/javascripts/environments/components/environment_actions.vue +++ b/app/assets/javascripts/environments/components/environment_actions.vue @@ -70,7 +70,7 @@ export default { </span> </button> - <ul class="dropdown-menu"> + <ul class="dropdown-menu dropdown-menu-align-right"> <li v-for="action in actions"> <button type="button" diff --git a/app/assets/javascripts/environments/components/environment_item.vue b/app/assets/javascripts/environments/components/environment_item.vue index 03eb51ba1b2..de2269118cd 100644 --- a/app/assets/javascripts/environments/components/environment_item.vue +++ b/app/assets/javascripts/environments/components/environment_item.vue @@ -422,11 +422,13 @@ export default { </script> <template> <div - :class="{ 'js-child-row environment-child-row': model.isChildren, 'folder-row': model.isFolder, 'gl-responsive-table-row': !model.isFolder }"> + :class="{ 'js-child-row environment-child-row': model.isChildren, 'folder-row': model.isFolder, 'gl-responsive-table-row': !model.isFolder }" + role="row"> <div class="table-section section-10" role="gridcell"> <div v-if="!model.isFolder" - class="table-mobile-header"> + class="table-mobile-header" + role="rowheader"> Environment </div> <a @@ -497,6 +499,7 @@ export default { <div class="table-section section-25" role="gridcell"> <div v-if="!model.isFolder" + role="rowheader" class="table-mobile-header"> Commit </div> @@ -513,7 +516,7 @@ export default { </div> <div v-if="!model.isFolder && !hasLastDeploymentKey" - class="commit-title"> + class="commit-title table-mobile-content"> No deployments yet </div> </div> @@ -521,6 +524,7 @@ export default { <div class="table-section section-10" role="gridcell"> <div v-if="!model.isFolder" + role="rowheader" class="table-mobile-header"> Updated </div> diff --git a/app/assets/javascripts/environments/components/environments_table.vue b/app/assets/javascripts/environments/components/environments_table.vue index f9262ab85c5..b1fd9db650b 100644 --- a/app/assets/javascripts/environments/components/environments_table.vue +++ b/app/assets/javascripts/environments/components/environments_table.vue @@ -47,19 +47,19 @@ export default { <template> <div class="ci-table" role="grid"> <div class="gl-responsive-table-row table-row-header" role="row"> - <div class="table-section section-10 environments-name" role="rowheader"> + <div class="table-section section-10 environments-name" role="columnheader"> Environment </div> - <div class="table-section section-10 environments-deploy" role="rowheader"> + <div class="table-section section-10 environments-deploy" role="columnheader"> Deployment </div> - <div class="table-section section-15 environments-build" role="rowheader"> + <div class="table-section section-15 environments-build" role="columnheader"> Job </div> - <div class="table-section section-25 environments-commit" role="rowheader"> + <div class="table-section section-25 environments-commit" role="columnheader"> Commit </div> - <div class="table-section section-10 environments-date" role="rowheader"> + <div class="table-section section-10 environments-date" role="columnheader"> Updated </div> </div> diff --git a/app/assets/stylesheets/framework/responsive-tables.scss b/app/assets/stylesheets/framework/responsive-tables.scss index a24483fa431..f0a4c66aa1a 100644 --- a/app/assets/stylesheets/framework/responsive-tables.scss +++ b/app/assets/stylesheets/framework/responsive-tables.scss @@ -19,10 +19,6 @@ .table-section { white-space: nowrap; - .branch-commit { - max-width: 100%; - } - $section-widths: 10 15 20 25 30 40; @each $width in $section-widths { &.section-#{$width} { @@ -87,4 +83,9 @@ @media (min-width: $screen-md-min) { flex: 0 0 90%; } + + .avatar { + float: none; + margin-right: 4px; + } } diff --git a/app/assets/stylesheets/pages/environments.scss b/app/assets/stylesheets/pages/environments.scss index a44a8bce879..b24803678ea 100644 --- a/app/assets/stylesheets/pages/environments.scss +++ b/app/assets/stylesheets/pages/environments.scss @@ -143,8 +143,8 @@ } > .btn-group, - .external-url, - .btn { + > .external-url, + > .btn { flex: 1; flex-basis: 28px; margin: 0 5px; @@ -153,6 +153,10 @@ .dropdown-new { width: 100%; } + + .dropdown-menu { + min-width: initial; + } } } } diff --git a/app/views/projects/deployments/_actions.haml b/app/views/projects/deployments/_actions.haml index c96616a0be4..e2baaa625ae 100644 --- a/app/views/projects/deployments/_actions.haml +++ b/app/views/projects/deployments/_actions.haml @@ -6,7 +6,7 @@ %button.dropdown.dropdown-new.btn.btn-default{ type: 'button', 'data-toggle' => 'dropdown' } = custom_icon('icon_play') = icon('caret-down') - %ul.dropdown-menu + %ul.dropdown-menu.dropdown-menu-align-right - actions.each do |action| - next unless can?(current_user, :update_build, action) %li diff --git a/app/views/projects/deployments/_commit.html.haml b/app/views/projects/deployments/_commit.html.haml index 465ddaf713a..4502c397d29 100644 --- a/app/views/projects/deployments/_commit.html.haml +++ b/app/views/projects/deployments/_commit.html.haml @@ -1,16 +1,17 @@ -.branch-commit - - if deployment.ref - %span.icon-container - = deployment.tag? ? icon('tag') : icon('code-fork') - = link_to deployment.ref, project_ref_path(@project, deployment.ref), class: "ref-name" - .icon-container.commit-icon - = custom_icon("icon_commit") - = link_to deployment.short_sha, namespace_project_commit_path(@project.namespace, @project, deployment.sha), class: "commit-sha" +.table-mobile-content + .branch-commit + - if deployment.ref + %span.icon-container + = deployment.tag? ? icon('tag') : icon('code-fork') + = link_to deployment.ref, project_ref_path(@project, deployment.ref), class: "ref-name" + .icon-container.commit-icon + = custom_icon("icon_commit") + = link_to deployment.short_sha, namespace_project_commit_path(@project.namespace, @project, deployment.sha), class: "commit-sha" - %p.commit-title.flex-truncate-parent - %span.flex-truncate-child - - if commit_title = deployment.commit_title - = author_avatar(deployment.commit, size: 20) - = link_to_gfm commit_title, namespace_project_commit_path(@project.namespace, @project, deployment.sha), class: "commit-row-message" - - else - Cant find HEAD commit for this branch + %p.commit-title.flex-truncate-parent + %span.flex-truncate-child + - if commit_title = deployment.commit_title + = author_avatar(deployment.commit, size: 20) + = link_to_gfm commit_title, namespace_project_commit_path(@project.namespace, @project, deployment.sha), class: "commit-row-message" + - else + Cant find HEAD commit for this branch diff --git a/app/views/projects/deployments/_deployment.html.haml b/app/views/projects/deployments/_deployment.html.haml index d6822106266..d956cb2cc1a 100644 --- a/app/views/projects/deployments/_deployment.html.haml +++ b/app/views/projects/deployments/_deployment.html.haml @@ -1,20 +1,24 @@ -.gl-responsive-table-row.deployment +.gl-responsive-table-row.deployment{ role: 'row' } .table-section.section-10{ role: 'gridcell' } - %strong ##{deployment.iid} + .table-mobile-header{ role: 'rowheader' } ID + %strong.table-mobile-content ##{deployment.iid} .table-section.section-40{ role: 'gridcell' } + .table-mobile-header{ role: 'rowheader' } Commit = render 'projects/deployments/commit', deployment: deployment .table-section.section-15.build-column{ role: 'gridcell' } + .table-mobile-header{ role: 'rowheader' } Job - if deployment.deployable - = link_to [@project.namespace.becomes(Namespace), @project, deployment.deployable], class: 'build-link' do + = link_to [@project.namespace.becomes(Namespace), @project, deployment.deployable], class: 'build-link table-mobile-content' do #{deployment.deployable.name} (##{deployment.deployable.id}) - if deployment.user by = user_avatar(user: deployment.user, size: 20) .table-section.section-15{ role: 'gridcell' } - #{time_ago_with_tooltip(deployment.created_at)} + .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 diff --git a/app/views/projects/environments/show.html.haml b/app/views/projects/environments/show.html.haml index f9068d11542..23aa4c29e69 100644 --- a/app/views/projects/environments/show.html.haml +++ b/app/views/projects/environments/show.html.haml @@ -28,12 +28,12 @@ = link_to "Read more", help_page_path("ci/environments"), class: "btn btn-success" - else .table-holder - .ci-table.environments + .ci-table.environments{ role: 'grid' } .gl-responsive-table-row.table-row-header{ role: 'row' } - .table-section.section-10{ role: 'rollheader' } ID - .table-section.section-40{ role: 'rollheader' } Commit - .table-section.section-15{ role: 'rollheader' } Job - .table-section.section-15{ role: 'rollheader' } Created + .table-section.section-10{ role: 'columnheader' } ID + .table-section.section-40{ role: 'columnheader' } Commit + .table-section.section-15{ role: 'columnheader' } Job + .table-section.section-15{ role: 'columnheader' } Created = render @deployments |