From 83200405b233204da696d86c972c7e4a01d8851a Mon Sep 17 00:00:00 2001
From: Eric Eastwood <contact@ericeastwood.com>
Date: Thu, 2 Nov 2017 01:54:08 -0500
Subject: Refactor responsive table styles to support nested error block

 - Split layout from the styles of the row
 - Move command `.append-` `.prepend-` styles to bottom of source order
    - Actually applies styles over others in more situations which is
      probably what is expected when you add it to an element
    - Also allows us to get rid of some styles that were trying to get
      around this fact

See https://i.imgur.com/IE50PK6.png
Which is used in
https://gitlab.com/gitlab-org/gitlab-ce/merge_requests/15064

Design from https://gitlab.com/gitlab-org/gitlab-ce/issues/38464
---
 .../environments/components/environment_item.vue   |  22 ++-
 app/assets/stylesheets/framework.scss              |   2 +-
 app/assets/stylesheets/framework/common.scss       |  53 +++----
 .../stylesheets/framework/responsive-tables.scss   | 137 -----------------
 .../stylesheets/framework/responsive_tables.scss   | 162 +++++++++++++++++++++
 app/assets/stylesheets/pages/clusters.scss         |   4 -
 app/assets/stylesheets/pages/environments.scss     |   9 +-
 app/assets/stylesheets/pages/pipelines.scss        |   1 -
 8 files changed, 208 insertions(+), 182 deletions(-)
 delete mode 100644 app/assets/stylesheets/framework/responsive-tables.scss
 create mode 100644 app/assets/stylesheets/framework/responsive_tables.scss

(limited to 'app/assets')

diff --git a/app/assets/javascripts/environments/components/environment_item.vue b/app/assets/javascripts/environments/components/environment_item.vue
index 6de01fa53d0..fc0308b81ba 100644
--- a/app/assets/javascripts/environments/components/environment_item.vue
+++ b/app/assets/javascripts/environments/components/environment_item.vue
@@ -421,7 +421,11 @@ 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="gl-responsive-table-row"
+    :class="{
+      'js-child-row environment-child-row': model.isChildren,
+      'folder-row': model.isFolder,
+    }"
     role="row">
     <div class="table-section section-10" role="gridcell">
       <div
@@ -495,15 +499,16 @@ export default {
       </a>
     </div>
 
-    <div class="table-section section-25" role="gridcell">
+    <div
+      v-if="!model.isFolder"
+      class="table-section section-25" role="gridcell">
       <div
-        v-if="!model.isFolder"
         role="rowheader"
         class="table-mobile-header">
         Commit
       </div>
       <div
-        v-if="!model.isFolder && hasLastDeploymentKey"
+        v-if="hasLastDeploymentKey"
         class="js-commit-component table-mobile-content">
         <commit-component
           :tag="commitTag"
@@ -514,21 +519,22 @@ export default {
           :author="commitAuthor"/>
       </div>
       <div
-        v-if="!model.isFolder && !hasLastDeploymentKey"
+        v-if="!hasLastDeploymentKey"
         class="commit-title table-mobile-content">
         No deployments yet
       </div>
     </div>
 
-    <div class="table-section section-10" role="gridcell">
+    <div
+      v-if="!model.isFolder"
+      class="table-section section-10" role="gridcell">
       <div
-        v-if="!model.isFolder"
         role="rowheader"
         class="table-mobile-header">
         Updated
       </div>
       <span
-        v-if="!model.isFolder && canShowDate"
+        v-if="canShowDate"
         class="environment-created-date-timeago table-mobile-content">
         {{createdDate}}
       </span>
diff --git a/app/assets/stylesheets/framework.scss b/app/assets/stylesheets/framework.scss
index 7b1ef003bb2..c334f39f416 100644
--- a/app/assets/stylesheets/framework.scss
+++ b/app/assets/stylesheets/framework.scss
@@ -56,4 +56,4 @@
 @import "framework/icons";
 @import "framework/snippets";
 @import "framework/memory_graph";
-@import "framework/responsive-tables";
+@import "framework/responsive_tables";
diff --git a/app/assets/stylesheets/framework/common.scss b/app/assets/stylesheets/framework/common.scss
index 1cfd7ef01a8..4502b565aa9 100644
--- a/app/assets/stylesheets/framework/common.scss
+++ b/app/assets/stylesheets/framework/common.scss
@@ -8,32 +8,6 @@
   color: $gl-text-color-secondary;
 }
 
-/** COMMON CLASSES **/
-.prepend-top-0 { margin-top: 0; }
-.prepend-top-5 { margin-top: 5px; }
-.prepend-top-10 { margin-top: 10px; }
-.prepend-top-default { margin-top: $gl-padding !important; }
-.prepend-top-20 { margin-top: 20px; }
-.prepend-left-4 { margin-left: 4px; }
-.prepend-left-5 { margin-left: 5px; }
-.prepend-left-10 { margin-left: 10px; }
-.prepend-left-default { margin-left: $gl-padding; }
-.prepend-left-20 { margin-left: 20px; }
-.append-right-5 { margin-right: 5px; }
-.append-right-8 { margin-right: 8px; }
-.append-right-10 { margin-right: 10px; }
-.append-right-default { margin-right: $gl-padding; }
-.append-right-20 { margin-right: 20px; }
-.append-bottom-0 { margin-bottom: 0; }
-.append-bottom-5 { margin-bottom: 5px; }
-.append-bottom-10 { margin-bottom: 10px; }
-.append-bottom-15 { margin-bottom: 15px; }
-.append-bottom-20 { margin-bottom: 20px; }
-.append-bottom-default { margin-bottom: $gl-padding; }
-.inline { display: inline-block; }
-.center { text-align: center; }
-.vertical-align-middle { vertical-align: middle; }
-
 .underlined-link { text-decoration: underline; }
 .hint { font-style: italic; color: $hint-color; }
 .light { color: $common-gray; }
@@ -451,3 +425,30 @@ table {
   pointer-events: none;
   opacity: .5;
 }
+
+/** COMMON CLASSES **/
+.prepend-top-0 { margin-top: 0; }
+.prepend-top-5 { margin-top: 5px; }
+.prepend-top-10 { margin-top: 10px; }
+.prepend-top-15 { margin-top: 15px; }
+.prepend-top-default { margin-top: $gl-padding !important; }
+.prepend-top-20 { margin-top: 20px; }
+.prepend-left-4 { margin-left: 4px; }
+.prepend-left-5 { margin-left: 5px; }
+.prepend-left-10 { margin-left: 10px; }
+.prepend-left-default { margin-left: $gl-padding; }
+.prepend-left-20 { margin-left: 20px; }
+.append-right-5 { margin-right: 5px; }
+.append-right-8 { margin-right: 8px; }
+.append-right-10 { margin-right: 10px; }
+.append-right-default { margin-right: $gl-padding; }
+.append-right-20 { margin-right: 20px; }
+.append-bottom-0 { margin-bottom: 0; }
+.append-bottom-5 { margin-bottom: 5px; }
+.append-bottom-10 { margin-bottom: 10px; }
+.append-bottom-15 { margin-bottom: 15px; }
+.append-bottom-20 { margin-bottom: 20px; }
+.append-bottom-default { margin-bottom: $gl-padding; }
+.inline { display: inline-block; }
+.center { text-align: center; }
+.vertical-align-middle { vertical-align: middle; }
diff --git a/app/assets/stylesheets/framework/responsive-tables.scss b/app/assets/stylesheets/framework/responsive-tables.scss
deleted file mode 100644
index 8e653c443cf..00000000000
--- a/app/assets/stylesheets/framework/responsive-tables.scss
+++ /dev/null
@@ -1,137 +0,0 @@
-@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 20 25 30 40;
-    @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;
-        min-height: 62px;
-
-        &:not(:first-of-type) {
-          border-top: 1px solid $white-normal;
-        }
-      }
-    }
-
-    &.section-wrap {
-      white-space: normal;
-
-      @media (max-width: $screen-sm-max) {
-        flex-wrap: wrap;
-      }
-    }
-  }
-}
-
-
-.table-button-footer {
-  @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;
-
-    .table-action-buttons {
-      padding: 10px 5px;
-      display: flex;
-
-      .btn {
-        border-radius: 3px;
-      }
-
-      > .btn-group,
-      > .external-url,
-      > .btn {
-        flex: 1 1 28px;
-        margin: 0 5px;
-      }
-
-      .dropdown-new {
-        width: 100%;
-      }
-
-      .dropdown-menu {
-        min-width: initial;
-      }
-    }
-  }
-}
-
-.table-row-header {
-  font-size: 13px;
-
-  @media (max-width: $screen-sm-max) {
-    display: none;
-  }
-}
-
-.table-mobile-header {
-  @include flex-max-width(40);
-  color: $gl-text-color-secondary;
-  text-align: left;
-
-  @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%;
-  }
-
-  .avatar {
-    float: none;
-    margin-right: 4px;
-  }
-}
diff --git a/app/assets/stylesheets/framework/responsive_tables.scss b/app/assets/stylesheets/framework/responsive_tables.scss
new file mode 100644
index 00000000000..7adb2f113bb
--- /dev/null
+++ b/app/assets/stylesheets/framework/responsive_tables.scss
@@ -0,0 +1,162 @@
+@mixin flex-max-width($max) {
+  flex: 0 0 #{$max + '%'};
+  max-width: #{$max + '%'};
+}
+
+.gl-responsive-table-row-layout {
+  width: 100%;
+
+  @media (min-width: $screen-md-min) {
+    display: flex;
+    align-items: center;
+
+    & > &:not(:first-child) {
+      margin-top: $gl-padding;
+    }
+  }
+}
+
+.gl-responsive-table-row {
+  @extend .gl-responsive-table-row-layout;
+  margin-top: 10px;
+  border: 1px solid $border-color;
+
+  @media (min-width: $screen-md-min) {
+    margin: 0;
+    padding: $gl-padding 0;
+    border: none;
+    border-bottom: 1px solid $white-normal;
+  }
+}
+
+.gl-responsive-table-row-col-span {
+  flex-wrap: wrap;
+}
+
+.table-section {
+  white-space: nowrap;
+
+  $section-widths: 10 15 20 25 30 40 100;
+  @each $width in $section-widths {
+    &.section-#{$width} {
+      flex: 0 0 #{$width + '%'};
+
+      @media (min-width: $screen-md-min) {
+        max-width: #{$width + '%'};
+      }
+    }
+  }
+
+  @media (max-width: $screen-sm-max) {
+    display: flex;
+    align-self: stretch;
+    padding: 10px;
+    align-items: center;
+    min-height: 62px;
+
+    &:not(:first-child) {
+      border-top: 1px solid $white-normal;
+    }
+  }
+
+  &.section-wrap {
+    white-space: normal;
+
+    @media (max-width: $screen-sm-max) {
+      flex-wrap: wrap;
+    }
+  }
+
+  &.section-align-top {
+    align-self: flex-start;
+  }
+}
+
+.table-button-footer {
+  @media (min-width: $screen-md-min) {
+    text-align: right;
+  }
+
+  @media (max-width: $screen-sm-max) {
+    display: block;
+    align-self: stretch;
+    min-height: 0;
+    background-color: $gray-normal;
+    border-top: 1px solid $border-color;
+
+    .table-action-buttons {
+      display: flex;
+
+      .btn {
+        border-radius: 3px;
+      }
+
+      > .btn-group,
+      > .external-url,
+      > .btn {
+        flex: 1 1 28px;
+
+        &:not(:first-child) {
+          margin-left: 5px;
+        }
+
+        &:not(:last-child) {
+          margin-right: 5px;
+        }
+      }
+
+      .dropdown-new {
+        width: 100%;
+      }
+
+      .dropdown-menu {
+        min-width: initial;
+      }
+    }
+  }
+}
+
+.table-row-header {
+  font-size: 13px;
+
+  @media (max-width: $screen-sm-max) {
+    display: none;
+  }
+}
+
+.table-mobile-header {
+  @include flex-max-width(40);
+  color: $gl-text-color-secondary;
+  text-align: left;
+
+  @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%;
+  }
+
+  .avatar {
+    float: none;
+    margin-right: 4px;
+  }
+}
diff --git a/app/assets/stylesheets/pages/clusters.scss b/app/assets/stylesheets/pages/clusters.scss
index 8d6f30e3b84..5c91579c69c 100644
--- a/app/assets/stylesheets/pages/clusters.scss
+++ b/app/assets/stylesheets/pages/clusters.scss
@@ -2,8 +2,4 @@
   .clipboard-addon {
     background-color: $white-light;
   }
-
-  .alert-block {
-    margin-bottom: 10px;
-  }
 }
diff --git a/app/assets/stylesheets/pages/environments.scss b/app/assets/stylesheets/pages/environments.scss
index 3b5e411e2c5..6c1d32bed2f 100644
--- a/app/assets/stylesheets/pages/environments.scss
+++ b/app/assets/stylesheets/pages/environments.scss
@@ -133,12 +133,11 @@
 }
 
 .folder-row {
-  padding: 15px 0;
-  border-bottom: 1px solid $white-normal;
+  border-left: none;
+  border-right: none;
 
-  @media (max-width: $screen-sm-max) {
-    border-top: 1px solid $white-normal;
-    margin-top: 10px;
+  @media (min-width: $screen-sm-max) {
+    border-top: none;
   }
 }
 
diff --git a/app/assets/stylesheets/pages/pipelines.scss b/app/assets/stylesheets/pages/pipelines.scss
index 8fc7a5eec9b..ee94610d1d1 100644
--- a/app/assets/stylesheets/pages/pipelines.scss
+++ b/app/assets/stylesheets/pages/pipelines.scss
@@ -31,7 +31,6 @@
     }
 
     .pipeline-actions {
-      padding-right: 0;
       min-width: 170px; //Guarantees buttons don't break in several lines.
 
       .btn-default {
-- 
cgit v1.2.3