Merge branch 'issue-boards-css-simplify' into 'master'

Simplified the CSS for issue boards

## What does this MR do?

It gained a lot of extra cruft through the different improvements etc. This removes a lot of the stuff which would hopefully also speed up the browser rendering.

- Removed flexbox from a lot of things which in turn reduces it's complexity.
- Removed styles that either aren't used or aren't needed.
- Various other improvements to the CSS.

Basically just improved the CSS by removing overly complex CSS. There are no visible changes to issue boards, just less CSS for the same results.

See merge request !6352

1 files changed, 23 insertions, 75 deletions

diff --git a/app/assets/stylesheets/pages/boards.scss b/app/assets/stylesheets/pages/boards.scss
index 037278bb083..9c84dceed05 100644
--- a/app/assets/stylesheets/pages/boards.scss
+++ b/app/assets/stylesheets/pages/boards.scss
@@ -1,3 +1,4 @@
+lex
 [v-cloak] {
   display: none;
 }
@@ -18,6 +19,10 @@
   }
 }
 
+.is-ghost {
+  opacity: 0.3;
+}
+
 .dropdown-menu-issues-board-new {
   width: 320px;
 
@@ -34,47 +39,13 @@
   > p {
     margin: 0;
     font-size: 14px;
-    color: #9c9c9c;
   }
 }
 
 .issue-boards-page {
-  .content-wrapper {
-    display: -webkit-flex;
-    display: flex;
-    -webkit-flex-direction: column;
-    flex-direction: column;
-  }
-
-  .sub-nav,
-  .issues-filters {
-    -webkit-flex: none;
-    flex: none;
-  }
-
   .page-with-sidebar {
-    display: -webkit-flex;
-    display: flex;
-    min-height: 100vh;
-    max-height: 100vh;
     padding-bottom: 0;
   }
-
-  .issue-boards-content {
-    display: -webkit-flex;
-    display: flex;
-    -webkit-flex: 1;
-    flex: 1;
-    width: 100%;
-
-    .content {
-      display: -webkit-flex;
-      display: flex;
-      -webkit-flex-direction: column;
-      flex-direction: column;
-      width: 100%;
-    }
-  }
 }
 
 .boards-app-loading {
@@ -83,46 +54,38 @@
 }
 
 .boards-list {
-  display: -webkit-flex;
-  display: flex;
-  -webkit-flex: 1;
-  flex: 1;
-  -webkit-flex-basis: 0;
-  flex-basis: 0;
-  min-height: calc(100vh - 152px);
-  max-height: calc(100vh - 152px);
+  height: calc(100vh - 152px);
+  width: 100%;
   padding-top: 25px;
+  padding-bottom: 25px;
   padding-right: ($gl-padding / 2);
   padding-left: ($gl-padding / 2);
   overflow-x: scroll;
+  white-space: nowrap;
 
   @media (min-width: $screen-sm-min) {
+    height: 475px; // Needed for PhantomJS
+    height: calc(100vh - 220px);
     min-height: 475px;
-    max-height: none;
   }
 }
 
 .board {
-  display: -webkit-flex;
-  display: flex;
-  min-width: calc(85vw - 15px);
-  max-width: calc(85vw - 15px);
-  margin-bottom: 25px;
+  display: inline-block;
+  width: calc(85vw - 15px);
+  height: 100%;
   padding-right: ($gl-padding / 2);
   padding-left: ($gl-padding / 2);
+  white-space: normal;
+  vertical-align: top;
 
   @media (min-width: $screen-sm-min) {
-    min-width: 400px;
-    max-width: 400px;
+    width: 400px;
   }
 }
 
 .board-inner {
-  display: -webkit-flex;
-  display: flex;
-  -webkit-flex-direction: column;
-  flex-direction: column;
-  width: 100%;
+  height: 100%;
   font-size: $issue-boards-font-size;
   background: $background-color;
   border: 1px solid $border-color;
@@ -193,45 +156,31 @@
 }
 
 .board-list {
-  -webkit-flex: 1;
-  flex: 1;
-  height: 400px;
+  height: calc(100% - 49px);
   margin-bottom: 0;
   padding: 5px;
+  list-style: none;
   overflow-y: scroll;
   overflow-x: hidden;
 }
 
 .board-list-loading {
   margin-top: 10px;
-  font-size: 26px;
-}
-
-.is-ghost {
-  opacity: 0.3;
+  font-size: (26px / $issue-boards-font-size) * 1em;
 }
 
 .card {
   position: relative;
-  width: 100%;
   padding: 10px $gl-padding;
   background: #fff;
   border-radius: $border-radius-default;
   box-shadow: 0 1px 2px rgba(186, 186, 186, 0.5);
   list-style: none;
 
-  &.user-can-drag {
-    padding-left: $gl-padding;
-  }
-
   &:not(:last-child) {
     margin-bottom: 5px;
   }
 
-  a {
-    cursor: pointer;
-  }
-
   .label {
     border: 0;
     outline: 0;
@@ -256,14 +205,13 @@
   line-height: 25px;
 
   .label {
-    margin-right: 4px;
+    margin-right: 5px;
     font-size: (14px / $issue-boards-font-size) * 1em;
   }
 }
 
 .card-number {
-  margin-right: 8px;
-  font-weight: 500;
+  margin-right: 5px;
 }
 
 .issue-boards-search {