From 67830322b98eb5353101ce3724fe7ab9fe17a8a5 Mon Sep 17 00:00:00 2001 From: Annabel Dunstone Gray Date: Tue, 6 Jun 2017 22:38:39 +0000 Subject: [PATCH] Environment detail view --- .../stylesheets/framework/responsive-tables.scss | 6 +++++- app/assets/stylesheets/pages/environments.scss | 7 ++++++- app/views/projects/deployments/_actions.haml | 2 +- app/views/projects/deployments/_commit.html.haml | 6 +++--- .../projects/deployments/_deployment.html.haml | 14 +++++++------- app/views/projects/environments/show.html.haml | 16 +++++++--------- .../unreleased/environment-detail-view.yml | 4 ++++ 7 files changed, 33 insertions(+), 22 deletions(-) create mode 100644 changelogs/unreleased/environment-detail-view.yml diff --git a/app/assets/stylesheets/framework/responsive-tables.scss b/app/assets/stylesheets/framework/responsive-tables.scss index 94528c7a222..a24483fa431 100644 --- a/app/assets/stylesheets/framework/responsive-tables.scss +++ b/app/assets/stylesheets/framework/responsive-tables.scss @@ -19,7 +19,11 @@ .table-section { white-space: nowrap; - $section-widths: 10 15 25 30; + .branch-commit { + max-width: 100%; + } + + $section-widths: 10 15 20 25 30 40; @each $width in $section-widths { &.section-#{$width} { flex: 0 0 #{$width + '%'}; diff --git a/app/assets/stylesheets/pages/environments.scss b/app/assets/stylesheets/pages/environments.scss index bc151d2358f..56f20778637 100644 --- a/app/assets/stylesheets/pages/environments.scss +++ b/app/assets/stylesheets/pages/environments.scss @@ -143,7 +143,8 @@ } > .btn-group, - .external-url { + .external-url, + .btn { flex: 1; flex-basis: 28px; } @@ -154,6 +155,10 @@ } } } + + .branch-commit { + max-width: 100%; + } } .folder-row { diff --git a/app/views/projects/deployments/_actions.haml b/app/views/projects/deployments/_actions.haml index e2baaa625ae..c96616a0be4 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.dropdown-menu-align-right + %ul.dropdown-menu - 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 31fd982c522..465ddaf713a 100644 --- a/app/views/projects/deployments/_commit.html.haml +++ b/app/views/projects/deployments/_commit.html.haml @@ -1,14 +1,14 @@ .branch-commit - if deployment.ref - .icon-container + %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 - %span + %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" diff --git a/app/views/projects/deployments/_deployment.html.haml b/app/views/projects/deployments/_deployment.html.haml index 260c9023daf..d6822106266 100644 --- a/app/views/projects/deployments/_deployment.html.haml +++ b/app/views/projects/deployments/_deployment.html.haml @@ -1,11 +1,11 @@ -%tr.deployment - %td +.gl-responsive-table-row.deployment + .table-section.section-10{ role: 'gridcell' } %strong ##{deployment.iid} - %td + .table-section.section-40{ role: 'gridcell' } = render 'projects/deployments/commit', deployment: deployment - %td.build-column + .table-section.section-15.build-column{ role: 'gridcell' } - if deployment.deployable = link_to [@project.namespace.becomes(Namespace), @project, deployment.deployable], class: 'build-link' do #{deployment.deployable.name} (##{deployment.deployable.id}) @@ -13,10 +13,10 @@ by = user_avatar(user: deployment.user, size: 20) - %td + .table-section.section-15{ role: 'gridcell' } #{time_ago_with_tooltip(deployment.created_at)} - %td.hidden-xs - .pull-right.btn-group + .table-section.section-20.environments-actions.table-button-footer{ role: 'gridcell' } + .btn-group.environment-action-buttons = render 'projects/deployments/actions', deployment: deployment = render 'projects/deployments/rollback', deployment: deployment diff --git a/app/views/projects/environments/show.html.haml b/app/views/projects/environments/show.html.haml index 9e221240cf2..f9068d11542 100644 --- a/app/views/projects/environments/show.html.haml +++ b/app/views/projects/environments/show.html.haml @@ -3,7 +3,7 @@ = render "projects/pipelines/head" %div{ class: container_class } - .top-area.adjust + .row.top-area.adjust .col-md-7 %h3.page-title= @environment.name .col-md-5 @@ -28,14 +28,12 @@ = link_to "Read more", help_page_path("ci/environments"), class: "btn btn-success" - else .table-holder - %table.table.ci-table.environments - %thead - %tr - %th ID - %th Commit - %th Job - %th Created - %th.hidden-xs + .ci-table.environments + .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 = render @deployments diff --git a/changelogs/unreleased/environment-detail-view.yml b/changelogs/unreleased/environment-detail-view.yml new file mode 100644 index 00000000000..c74f70ea86d --- /dev/null +++ b/changelogs/unreleased/environment-detail-view.yml @@ -0,0 +1,4 @@ +--- +title: Make environment tables responsive +merge_request: +author: