Responsive environment tables

11 files changed, 226 insertions, 117 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>
diff --git a/app/assets/javascripts/vue_shared/components/commit.js b/app/assets/javascripts/vue_shared/components/commit.js
index 8e22057e2e9..ff5ae28e062 100644
--- a/app/assets/javascripts/vue_shared/components/commit.js
+++ b/app/assets/javascripts/vue_shared/components/commit.js
@@ -135,8 +135,8 @@ export default {
         {{shortSha}}
       </a>
 
-      <p class="commit-title">
-        <span v-if="title">
+      <div class="commit-title flex-truncate-parent">
+        <span v-if="title" class="flex-truncate-child">
           <user-avatar-link
             v-if="hasAuthor"
             class="avatar-image-container"
@@ -153,7 +153,7 @@ export default {
         <span v-else>
           Cant find HEAD commit for this branch
         </span>
-      </p>
+      </div>
     </div>
   `,
 };
diff --git a/app/assets/stylesheets/framework.scss b/app/assets/stylesheets/framework.scss
index b8ba77f4513..9dc9f9a9068 100644
--- a/app/assets/stylesheets/framework.scss
+++ b/app/assets/stylesheets/framework.scss
@@ -49,3 +49,4 @@
 @import "framework/icons.scss";
 @import "framework/snippets.scss";
 @import "framework/memory_graph.scss";
+@import "framework/responsive-tables.scss";
diff --git a/app/assets/stylesheets/framework/responsive-tables.scss b/app/assets/stylesheets/framework/responsive-tables.scss
new file mode 100644
index 00000000000..94528c7a222
--- /dev/null
+++ b/app/assets/stylesheets/framework/responsive-tables.scss
@@ -0,0 +1,86 @@
+@mixin flex-max-width($max) {
+  flex: 0 0 #{$max + '%'};
+  max-width: #{$max + '%'};
+}
+
+.gl-responsive-table-row {
+  margin-top: 10px;
+  border: 1px solid $border-color;
+
+  @media (min-width: $screen-md-min) {
+    padding: 15px 0;
+    margin: 0;
+    display: flex;
+    align-items: center;
+    border: none;
+    border-bottom: 1px solid $white-normal;
+  }
+
+  .table-section {
+    white-space: nowrap;
+
+    $section-widths: 10 15 25 30;
+    @each $width in $section-widths {
+      &.section-#{$width} {
+        flex: 0 0 #{$width + '%'};
+
+        @media (min-width: $screen-md-min) {
+          max-width: #{$width + '%'};
+        }
+      }
+    }
+
+    &:not(.table-button-footer) {
+      @media (max-width: $screen-sm-max) {
+        display: flex;
+        align-self: stretch;
+        padding: 10px;
+        align-items: center;
+        height: 62px;
+
+        &:not(:first-of-type) {
+          border-top: 1px solid $white-normal;
+        }
+      }
+    }
+  }
+}
+
+.table-row-header {
+  font-size: 13px;
+
+  @media (max-width: $screen-sm-max) {
+    display: none;
+  }
+}
+
+.table-mobile-header {
+  color: $gl-text-color-secondary;
+  @include flex-max-width(40);
+
+  @media (min-width: $screen-md-min) {
+    display: none;
+  }
+}
+
+.table-mobile-content {
+  @media (max-width: $screen-sm-max) {
+    @include flex-max-width(60);
+    text-align: right;
+  }
+}
+
+.flex-truncate-parent {
+  display: flex;
+}
+
+.flex-truncate-child {
+  flex: 1;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+
+  @media (min-width: $screen-md-min) {
+    flex: 0 0 90%;
+  }
+}
diff --git a/app/assets/stylesheets/pages/environments.scss b/app/assets/stylesheets/pages/environments.scss
index f269d53093d..bc151d2358f 100644
--- a/app/assets/stylesheets/pages/environments.scss
+++ b/app/assets/stylesheets/pages/environments.scss
@@ -11,34 +11,7 @@
 }
 
 .environments-container {
-  .table-holder {
-    width: 100%;
-
-    @media (max-width: $screen-sm-max) {
-      overflow: auto;
-    }
-  }
-
-  .table.ci-table {
-    .environments-actions {
-      min-width: 300px;
-    }
-
-    .environments-commit,
-    .environments-actions {
-      width: 20%;
-    }
-
-    .environments-date {
-      width: 10%;
-    }
-
-    .environments-name,
-    .environments-deploy,
-    .environments-build {
-      width: 15%;
-    }
-
+  .ci-table {
     .deployment-column {
       > span {
         word-break: break-all;
@@ -150,6 +123,49 @@
   }
 }
 
+.gl-responsive-table-row {
+  .environments-actions {
+    @media (min-width: $screen-md-min) {
+      text-align: right;
+    }
+
+    @media (max-width: $screen-sm-max) {
+      background-color: $gray-normal;
+      align-self: stretch;
+      border-top: 1px solid $border-color;
+
+      .environment-action-buttons {
+        padding: 10px;
+        display: flex;
+
+        .btn {
+          border-radius: 3px;
+        }
+
+        > .btn-group,
+        .external-url {
+          flex: 1;
+          flex-basis: 28px;
+        }
+
+        .dropdown-new {
+          width: 100%;
+        }
+      }
+    }
+  }
+}
+
+.folder-row {
+  padding: 15px 0;
+  border-bottom: 1px solid $white-normal;
+
+  @media (max-width: $screen-sm-max) {
+    border-top: 1px solid $white-normal;
+    margin-top: 10px;
+  }
+}
+
 .prometheus-graph {
   text {
     fill: $gl-text-color;