From 093394bf3a1c0ce6814ce358f15945f90ef4e273 Mon Sep 17 00:00:00 2001 From: Filipa Lacerda Date: Tue, 18 Sep 2018 17:44:38 +0100 Subject: Wrap content for admin runners table While refactoring the table into a responsive one we did not account for wrapping issues. This commit wraps some cells and truncates others. Adds `section-5` class to the responsive tables CSS --- .../stylesheets/framework/responsive_tables.scss | 2 +- app/views/admin/runners/_runner.html.haml | 104 ++++++++++++--------- .../admin/runners/_runner_table_cell.html.haml | 4 - app/views/admin/runners/index.html.haml | 12 ++- changelogs/unreleased/51549-runners-table.yml | 5 + 5 files changed, 77 insertions(+), 50 deletions(-) delete mode 100644 app/views/admin/runners/_runner_table_cell.html.haml create mode 100644 changelogs/unreleased/51549-runners-table.yml diff --git a/app/assets/stylesheets/framework/responsive_tables.scss b/app/assets/stylesheets/framework/responsive_tables.scss index 764bebd82c6..fc185ccfaad 100644 --- a/app/assets/stylesheets/framework/responsive_tables.scss +++ b/app/assets/stylesheets/framework/responsive_tables.scss @@ -39,7 +39,7 @@ .table-section { white-space: nowrap; - $section-widths: 10 15 20 25 30 40 50 100; + $section-widths: 5 10 15 20 25 30 40 50 100; @each $width in $section-widths { &.section-#{$width} { flex: 0 0 #{$width + '%'}; diff --git a/app/views/admin/runners/_runner.html.haml b/app/views/admin/runners/_runner.html.haml index 9c15226f0ec..e4fc2985087 100644 --- a/app/views/admin/runners/_runner.html.haml +++ b/app/views/admin/runners/_runner.html.haml @@ -1,47 +1,65 @@ .gl-responsive-table-row{ id: dom_id(runner) } - = render layout: 'runner_table_cell', locals: { label: _('Type') } do - - if runner.instance_type? - %span.badge.badge-success shared - - elsif runner.group_type? - %span.badge.badge-success group - - else - %span.badge.badge-info specific - - if runner.locked? - %span.badge.badge-warning locked - - unless runner.active? - %span.badge.badge-danger paused - - = render layout: 'runner_table_cell', locals: { label: _('Runner token') } do - = link_to runner.short_sha, admin_runner_path(runner) - - = render layout: 'runner_table_cell', locals: { label: _('Description') } do - = runner.description - - = render layout: 'runner_table_cell', locals: { label: _('Version') } do - = runner.version - - = render layout: 'runner_table_cell', locals: { label: _('IP Address') } do - = runner.ip_address - - = render layout: 'runner_table_cell', locals: { label: _('Projects') } do - - if runner.instance_type? || runner.group_type? - = _('n/a') - - else - = runner.projects.count(:all) - - = render layout: 'runner_table_cell', locals: { label: _('Jobs') } do - = runner.builds.count(:all) - - = render layout: 'runner_table_cell', locals: { label: _('Tags') } do - - runner.tag_list.sort.each do |tag| - %span.badge.badge-primary - = tag - - = render layout: 'runner_table_cell', locals: { label: _('Last contact') } do - - if runner.contacted_at - = time_ago_with_tooltip runner.contacted_at - - else - = _('Never') + .table-section.section-10.section-wrap + .table-mobile-header{ role: 'rowheader' }= _('Type') + .table-mobile-content + - if runner.instance_type? + %span.badge.badge-success shared + - elsif runner.group_type? + %span.badge.badge-success group + - else + %span.badge.badge-info specific + - if runner.locked? + %span.badge.badge-warning locked + - unless runner.active? + %span.badge.badge-danger paused + + .table-section.section-10 + .table-mobile-header{ role: 'rowheader' }= _('Runner token') + .table-mobile-content + = link_to runner.short_sha, admin_runner_path(runner) + + .table-section.section-15 + .table-mobile-header{ role: 'rowheader' }= _('Description') + .table-mobile-content.str-truncated.has-tooltip{ title: runner.description } + = runner.description + + .table-section.section-15 + .table-mobile-header{ role: 'rowheader' }= _('Version') + .table-mobile-content.str-truncated.has-tooltip{ title: runner.version } + = runner.version + + .table-section.section-10 + .table-mobile-header{ role: 'rowheader' }= _('IP Address') + .table-mobile-content + = runner.ip_address + + .table-section.section-5 + .table-mobile-header{ role: 'rowheader' }= _('Projects') + .table-mobile-content + - if runner.instance_type? || runner.group_type? + = _('n/a') + - else + = runner.projects.count(:all) + + .table-section.section-5 + .table-mobile-header{ role: 'rowheader' }= _('Jobs') + .table-mobile-content + = runner.builds.count(:all) + + .table-section.section-10.section-wrap + .table-mobile-header{ role: 'rowheader' }= _('Tags') + .table-mobile-content + - runner.tag_list.sort.each do |tag| + %span.badge.badge-primary + = tag + + .table-section.section-10 + .table-mobile-header{ role: 'rowheader' }= _('Last contact') + .table-mobile-content + - if runner.contacted_at + = time_ago_with_tooltip runner.contacted_at + - else + = _('Never') .table-section.table-button-footer.section-10 .btn-group.table-action-buttons diff --git a/app/views/admin/runners/_runner_table_cell.html.haml b/app/views/admin/runners/_runner_table_cell.html.haml deleted file mode 100644 index 78526ee6d23..00000000000 --- a/app/views/admin/runners/_runner_table_cell.html.haml +++ /dev/null @@ -1,4 +0,0 @@ -.table-section.section-10 - .table-mobile-header{ role: 'rowheader' }= label - .table-mobile-content - = yield diff --git a/app/views/admin/runners/index.html.haml b/app/views/admin/runners/index.html.haml index 48e0d7ce12e..ee2e1703fdb 100644 --- a/app/views/admin/runners/index.html.haml +++ b/app/views/admin/runners/index.html.haml @@ -98,8 +98,16 @@ .runners-content.content-list .table-holder .gl-responsive-table-row.table-row-header{ role: 'row' } - - [_('Type'), _('Runner token'), _('Description'), _('Version'), _('IP Address'), _('Projects'), _('Jobs'), _('Tags'), _('Last contact')].each do |label| - .table-section.section-10{ role: 'rowheader' }= label + .table-section.section-10{ role: 'rowheader' }= _('Type') + .table-section.section-10{ role: 'rowheader' }= _('Runner token') + .table-section.section-15{ role: 'rowheader' }= _('Description') + .table-section.section-15{ role: 'rowheader' }= _('Version') + .table-section.section-10{ role: 'rowheader' }= _('IP Address') + .table-section.section-5{ role: 'rowheader' }= _('Projects') + .table-section.section-5{ role: 'rowheader' }= _('Jobs') + .table-section.section-10{ role: 'rowheader' }= _('Tags') + .table-section.section-10{ role: 'rowheader' }= _('Last contact') + .table-section.section-10{ role: 'rowheader' } - @runners.each do |runner| = render 'admin/runners/runner', runner: runner diff --git a/changelogs/unreleased/51549-runners-table.yml b/changelogs/unreleased/51549-runners-table.yml new file mode 100644 index 00000000000..fe36bfc1b30 --- /dev/null +++ b/changelogs/unreleased/51549-runners-table.yml @@ -0,0 +1,5 @@ +--- +title: Fixes admin runners table not wrapping content +merge_request: +author: +type: fixed -- cgit v1.2.1