Commit 093394bf authored by Filipa Lacerda's avatar Filipa Lacerda

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
parent 33142335
...@@ -39,7 +39,7 @@ ...@@ -39,7 +39,7 @@
.table-section { .table-section {
white-space: nowrap; 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 { @each $width in $section-widths {
&.section-#{$width} { &.section-#{$width} {
flex: 0 0 #{$width + '%'}; flex: 0 0 #{$width + '%'};
......
.gl-responsive-table-row{ id: dom_id(runner) } .gl-responsive-table-row{ id: dom_id(runner) }
= render layout: 'runner_table_cell', locals: { label: _('Type') } do .table-section.section-10.section-wrap
.table-mobile-header{ role: 'rowheader' }= _('Type')
.table-mobile-content
- if runner.instance_type? - if runner.instance_type?
%span.badge.badge-success shared %span.badge.badge-success shared
- elsif runner.group_type? - elsif runner.group_type?
...@@ -11,33 +13,49 @@ ...@@ -11,33 +13,49 @@
- unless runner.active? - unless runner.active?
%span.badge.badge-danger paused %span.badge.badge-danger paused
= render layout: 'runner_table_cell', locals: { label: _('Runner token') } do .table-section.section-10
.table-mobile-header{ role: 'rowheader' }= _('Runner token')
.table-mobile-content
= link_to runner.short_sha, admin_runner_path(runner) = link_to runner.short_sha, admin_runner_path(runner)
= render layout: 'runner_table_cell', locals: { label: _('Description') } do .table-section.section-15
.table-mobile-header{ role: 'rowheader' }= _('Description')
.table-mobile-content.str-truncated.has-tooltip{ title: runner.description }
= runner.description = runner.description
= render layout: 'runner_table_cell', locals: { label: _('Version') } do .table-section.section-15
.table-mobile-header{ role: 'rowheader' }= _('Version')
.table-mobile-content.str-truncated.has-tooltip{ title: runner.version }
= runner.version = runner.version
= render layout: 'runner_table_cell', locals: { label: _('IP Address') } do .table-section.section-10
.table-mobile-header{ role: 'rowheader' }= _('IP Address')
.table-mobile-content
= runner.ip_address = runner.ip_address
= render layout: 'runner_table_cell', locals: { label: _('Projects') } do .table-section.section-5
.table-mobile-header{ role: 'rowheader' }= _('Projects')
.table-mobile-content
- if runner.instance_type? || runner.group_type? - if runner.instance_type? || runner.group_type?
= _('n/a') = _('n/a')
- else - else
= runner.projects.count(:all) = runner.projects.count(:all)
= render layout: 'runner_table_cell', locals: { label: _('Jobs') } do .table-section.section-5
.table-mobile-header{ role: 'rowheader' }= _('Jobs')
.table-mobile-content
= runner.builds.count(:all) = runner.builds.count(:all)
= render layout: 'runner_table_cell', locals: { label: _('Tags') } do .table-section.section-10.section-wrap
.table-mobile-header{ role: 'rowheader' }= _('Tags')
.table-mobile-content
- runner.tag_list.sort.each do |tag| - runner.tag_list.sort.each do |tag|
%span.badge.badge-primary %span.badge.badge-primary
= tag = tag
= render layout: 'runner_table_cell', locals: { label: _('Last contact') } do .table-section.section-10
.table-mobile-header{ role: 'rowheader' }= _('Last contact')
.table-mobile-content
- if runner.contacted_at - if runner.contacted_at
= time_ago_with_tooltip runner.contacted_at = time_ago_with_tooltip runner.contacted_at
- else - else
......
.table-section.section-10
.table-mobile-header{ role: 'rowheader' }= label
.table-mobile-content
= yield
...@@ -98,8 +98,16 @@ ...@@ -98,8 +98,16 @@
.runners-content.content-list .runners-content.content-list
.table-holder .table-holder
.gl-responsive-table-row.table-row-header{ role: 'row' } .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' }= _('Type')
.table-section.section-10{ role: 'rowheader' }= label .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| - @runners.each do |runner|
= render 'admin/runners/runner', runner: runner = render 'admin/runners/runner', runner: runner
......
---
title: Fixes admin runners table not wrapping content
merge_request:
author:
type: fixed
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