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
This commit is contained in:
Jacob Schatz 2016-09-16 23:44:51 +00:00
commit 1c8f00c9e5

View file

@ -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 {