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:
commit
1c8f00c9e5
1 changed files with 23 additions and 75 deletions
|
@ -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 {
|
||||
|
|
Loading…
Reference in a new issue