diff options
author | Jacob Schatz <jschatz@gitlab.com> | 2016-09-16 23:44:51 +0000 |
---|---|---|
committer | Jacob Schatz <jschatz@gitlab.com> | 2016-09-16 23:44:51 +0000 |
commit | 1c8f00c9e5b51ec8c6f0d870f813d1c13a61d67e (patch) | |
tree | 3d7c714bdde75106e3b6f9cca1cc49166cdc1e21 /app/assets/stylesheets/pages | |
parent | 5fa3aeb02ae4a86f3cb69d91f50571d6f7840f3f (diff) | |
parent | 634e8e30de54b467de81758430df8bcf89ba0e3e (diff) | |
download | gitlab-ce-1c8f00c9e5b51ec8c6f0d870f813d1c13a61d67e.tar.gz |
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
Diffstat (limited to 'app/assets/stylesheets/pages')
-rw-r--r-- | app/assets/stylesheets/pages/boards.scss | 98 |
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 { |