diff options
author | Annabel Dunstone Gray <annabel.dunstone@gmail.com> | 2017-06-06 15:58:29 +0300 |
---|---|---|
committer | Phil Hughes <me@iamphill.com> | 2017-06-06 15:58:29 +0300 |
commit | 7a9c9a259e590e16ecc8c1fe82f5c3e808850006 (patch) | |
tree | b020dda4dbc897f079a13ea3cfd1c1f80bc536f9 /app/assets/javascripts/environments | |
parent | e34e5761042579686fe149f16e7ec107b80224d2 (diff) |
Responsive environment tables
Diffstat (limited to 'app/assets/javascripts/environments')
7 files changed, 92 insertions, 86 deletions
diff --git a/app/assets/javascripts/environments/components/environment_actions.vue b/app/assets/javascripts/environments/components/environment_actions.vue index a2448520a5f..41d5453f1b2 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 dropdown-menu-align-right"> + <ul class="dropdown-menu"> <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 012ff1f975b..03eb51ba1b2 100644 --- a/app/assets/javascripts/environments/components/environment_item.vue +++ b/app/assets/javascripts/environments/components/environment_item.vue @@ -421,14 +421,19 @@ export default { }; </script> <template> - <tr :class="{ 'js-child-row': model.isChildren }"> - <td> + <div + :class="{ 'js-child-row environment-child-row': model.isChildren, 'folder-row': model.isFolder, 'gl-responsive-table-row': !model.isFolder }"> + <div class="table-section section-10" role="gridcell"> + <div + v-if="!model.isFolder" + class="table-mobile-header"> + Environment + </div> <a v-if="!model.isFolder" - class="environment-name" - :class="{ 'prepend-left-default': model.isChildren }" + class="environment-name flex-truncate-parent table-mobile-content" :href="environmentPath"> - {{model.name}} + <span class="flex-truncate-child">{{model.name}}</span> </a> <span v-else @@ -461,9 +466,9 @@ export default { {{model.size}} </span> </span> - </td> + </div> - <td class="deployment-column"> + <div class="table-section section-10 deployment-column hidden-xs hidden-sm" role="gridcell"> <span v-if="shouldRenderDeploymentID"> {{deploymentInternalId}} </span> @@ -478,21 +483,26 @@ export default { :tooltip-text="deploymentUser.username" /> </span> - </td> + </div> - <td class="environments-build-cell"> + <div class="table-section section-15 hidden-xs hidden-sm" role="gridcell"> <a v-if="shouldRenderBuildName" class="build-link" :href="buildPath"> {{buildName}} </a> - </td> + </div> - <td> + <div class="table-section section-25" role="gridcell"> + <div + v-if="!model.isFolder" + class="table-mobile-header"> + Commit + </div> <div v-if="!model.isFolder && hasLastDeploymentKey" - class="js-commit-component"> + class="js-commit-component table-mobile-content"> <commit-component :tag="commitTag" :commit-ref="commitRef" @@ -501,25 +511,30 @@ export default { :title="commitTitle" :author="commitAuthor"/> </div> - <p + <div v-if="!model.isFolder && !hasLastDeploymentKey" class="commit-title"> No deployments yet - </p> - </td> + </div> + </div> - <td> + <div class="table-section section-10" role="gridcell"> + <div + v-if="!model.isFolder" + class="table-mobile-header"> + Updated + </div> <span v-if="!model.isFolder && canShowDate" - class="environment-created-date-timeago"> + class="environment-created-date-timeago table-mobile-content"> {{createdDate}} </span> - </td> + </div> - <td class="environments-actions"> + <div class="table-section section-30 environments-actions table-button-footer" role="gridcell"> <div v-if="!model.isFolder" - class="btn-group pull-right" + class="btn-group environment-action-buttons" role="group"> <actions-component @@ -553,6 +568,6 @@ export default { :retry-url="retryUrl" /> </div> - </td> - </tr> + </div> + </div> </template> diff --git a/app/assets/javascripts/environments/components/environment_monitoring.vue b/app/assets/javascripts/environments/components/environment_monitoring.vue index 79c019b3491..07cf92281a0 100644 --- a/app/assets/javascripts/environments/components/environment_monitoring.vue +++ b/app/assets/javascripts/environments/components/environment_monitoring.vue @@ -19,7 +19,7 @@ export default { </script> <template> <a - class="btn monitoring-url has-tooltip" + class="btn monitoring-url has-tooltip hidden-xs hidden-sm" data-container="body" rel="noopener noreferrer nofollow" :href="monitoringUrl" diff --git a/app/assets/javascripts/environments/components/environment_rollback.vue b/app/assets/javascripts/environments/components/environment_rollback.vue index 2ba985bfe3e..49dba38edfb 100644 --- a/app/assets/javascripts/environments/components/environment_rollback.vue +++ b/app/assets/javascripts/environments/components/environment_rollback.vue @@ -43,7 +43,7 @@ export default { <template> <button type="button" - class="btn" + class="btn hidden-xs hidden-sm" @click="onClick" :disabled="isLoading"> diff --git a/app/assets/javascripts/environments/components/environment_stop.vue b/app/assets/javascripts/environments/components/environment_stop.vue index a904453ffa9..091c543860b 100644 --- a/app/assets/javascripts/environments/components/environment_stop.vue +++ b/app/assets/javascripts/environments/components/environment_stop.vue @@ -47,7 +47,7 @@ export default { <template> <button type="button" - class="btn stop-env-link has-tooltip" + class="btn stop-env-link has-tooltip hidden-xs hidden-sm" data-container="body" @click="onClick" :disabled="isLoading" diff --git a/app/assets/javascripts/environments/components/environment_terminal_button.vue b/app/assets/javascripts/environments/components/environment_terminal_button.vue index c8c1f17d4d8..1ca65a79951 100644 --- a/app/assets/javascripts/environments/components/environment_terminal_button.vue +++ b/app/assets/javascripts/environments/components/environment_terminal_button.vue @@ -29,7 +29,7 @@ export default { </script> <template> <a - class="btn terminal-button has-tooltip" + class="btn terminal-button has-tooltip hidden-xs hidden-sm" data-container="body" :title="title" :aria-label="title" diff --git a/app/assets/javascripts/environments/components/environments_table.vue b/app/assets/javascripts/environments/components/environments_table.vue index 5148a2ae79b..f9262ab85c5 100644 --- a/app/assets/javascripts/environments/components/environments_table.vue +++ b/app/assets/javascripts/environments/components/environments_table.vue @@ -45,68 +45,59 @@ export default { }; </script> <template> - <table class="table ci-table"> - <thead> - <tr> - <th class="environments-name"> - Environment - </th> - <th class="environments-deploy"> - Last deployment - </th> - <th class="environments-build"> - Job - </th> - <th class="environments-commit"> - Commit - </th> - <th class="environments-date"> - Updated - </th> - <th class="environments-actions"></th> - </tr> - </thead> - <tbody> - <template - v-for="model in environments" - v-bind:model="model"> - <tr - is="environment-item" - :model="model" - :can-create-deployment="canCreateDeployment" - :can-read-environment="canReadEnvironment" - /> + <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"> + Environment + </div> + <div class="table-section section-10 environments-deploy" role="rowheader"> + Deployment + </div> + <div class="table-section section-15 environments-build" role="rowheader"> + Job + </div> + <div class="table-section section-25 environments-commit" role="rowheader"> + Commit + </div> + <div class="table-section section-10 environments-date" role="rowheader"> + Updated + </div> + </div> + <template + v-for="model in environments" + v-bind:model="model"> + <div + is="environment-item" + :model="model" + :can-create-deployment="canCreateDeployment" + :can-read-environment="canReadEnvironment" + /> - <template v-if="model.isFolder && model.isOpen && model.children && model.children.length > 0"> - <tr v-if="isLoadingFolderContent"> - <td colspan="6"> - <loading-icon size="2" /> - </td> - </tr> + <template v-if="model.isFolder && model.isOpen && model.children && model.children.length > 0"> + <div v-if="isLoadingFolderContent"> + <loading-icon size="2" /> + </div> - <template v-else> - <tr - is="environment-item" - v-for="children in model.children" - :model="children" - :can-create-deployment="canCreateDeployment" - :can-read-environment="canReadEnvironment" - /> + <template v-else> + <div + is="environment-item" + v-for="children in model.children" + :model="children" + :can-create-deployment="canCreateDeployment" + :can-read-environment="canReadEnvironment" + /> - <tr> - <td - colspan="6" - class="text-center"> - <a - :href="folderUrl(model)" - class="btn btn-default"> - Show all - </a> - </td> - </tr> - </template> + <div> + <div class="text-center prepend-top-10"> + <a + :href="folderUrl(model)" + class="btn btn-default"> + Show all + </a> + </div> + </div> </template> </template> - </tbody> - </table> + </template> + </div> </template> |