diff options
Diffstat (limited to 'app/assets/javascripts/environments/components/environment_item.vue')
-rw-r--r-- | app/assets/javascripts/environments/components/environment_item.vue | 59 |
1 files changed, 37 insertions, 22 deletions
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> |