diff options
author | Annabel Dunstone Gray <annabel.dunstone@gmail.com> | 2017-06-08 04:15:40 +0300 |
---|---|---|
committer | Clement Ho <clemmakesapps@gmail.com> | 2017-06-08 04:15:40 +0300 |
commit | c55b4269dcae55884bcec4121fc4835b6dbf78f1 (patch) | |
tree | ed1c2c360536475838f482f0cc39078f3fcd1fce /app/assets | |
parent | 54f985e60c8ac06230c0afe1a637db6129bc428f (diff) |
Responsive table fixes
Diffstat (limited to 'app/assets')
6 files changed, 25 insertions, 16 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; + } } } } |