diff options
Diffstat (limited to 'app/assets/stylesheets/pages/boards.scss')
-rw-r--r-- | app/assets/stylesheets/pages/boards.scss | 200 |
1 files changed, 199 insertions, 1 deletions
diff --git a/app/assets/stylesheets/pages/boards.scss b/app/assets/stylesheets/pages/boards.scss index 61fab445793..fc1c1bd9962 100644 --- a/app/assets/stylesheets/pages/boards.scss +++ b/app/assets/stylesheets/pages/boards.scss @@ -1,3 +1,7 @@ +[v-cloak] { + display: none; +} + .user-can-drag { cursor: grab; } @@ -36,15 +40,35 @@ margin: 0 8px 10px; padding-bottom: 10px; border-bottom: 1px solid $dropdown-divider-bg; + + > p { + margin: 0; + font-size: 14px; + } } .issue-boards-page { .content-wrapper { padding-bottom: 0; } + + .issues-details-filters { + display: flex; + } + + .filter-form { + width: 100%; + } +} + +.board-extra-actions { + font-size: 0; + white-space: nowrap; } .boards-app { + position: relative; + @include media-breakpoint-up(sm) { transition: width $sidebar-transition-duration; width: 100%; @@ -55,9 +79,17 @@ } } +.boards-app-loading { + width: 100%; + font-size: 34px; +} + .boards-list { height: calc(100vh - #{$issue-board-list-difference-xs}); + width: 100%; + padding: $gl-padding ($gl-padding / 2); overflow-x: scroll; + white-space: nowrap; min-height: 200px; @include media-breakpoint-only(sm) { @@ -82,7 +114,13 @@ } .board { + 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; @include media-breakpoint-up(sm) { width: 400px; @@ -97,7 +135,23 @@ &.is-collapsed { width: 50px; + .board-header { + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + + button { + display: none; + } + } + .board-title { + padding: 0; + border-bottom: 0; + justify-content: center; + > span { width: 100%; margin-top: -12px; @@ -113,16 +167,34 @@ left: 50%; margin-left: -10px; } + + .board-list-component, + .issue-count-badge { + display: none; + } + } + + &:not(.is-collapsed) { + .board-list-component { + display: flex; + flex-direction: column; + } } } .board-inner { + position: relative; + height: 100%; font-size: $issue-boards-font-size; background: $gray-light; border: 1px solid $border-color; + border-radius: $border-radius-default; + flex: 1; } .board-header { + position: relative; + &.has-border::before { border-top: 3px solid; border-color: inherit; @@ -147,9 +219,18 @@ } } +.board-inner-container { + border-bottom: 1px solid $border-color; + padding: $gl-padding; +} + .board-title { + margin: 0; + padding: $gl-padding-8 $gl-padding; font-size: 1em; border-bottom: 1px solid $border-color; + display: flex; + align-items: center; } .board-title-text { @@ -158,8 +239,10 @@ .board-delete { margin-right: 10px; + padding: 0; color: $gray-darkest; background-color: transparent; + border: 0; outline: 0; &:hover { @@ -169,6 +252,7 @@ .board-blank-state, .board-promotion-state { + padding: $gl-padding; background-color: $white-light; flex: 1; overflow-y: auto; @@ -176,23 +260,35 @@ } .board-blank-state-list { + list-style: none; + > li:not(:last-child) { margin-bottom: 8px; } .label-color { + position: relative; top: 2px; + display: inline-block; width: 16px; height: 16px; margin-right: 3px; + border-radius: $border-radius-default; } } .board-list-component { + position: relative; + flex: 1; min-height: 0; // firefox fix } .board-list { + height: 100%; + width: 100%; + margin-bottom: 0; + padding: $gl-padding-4; + list-style: none; overflow-y: auto; overflow-x: hidden; } @@ -203,9 +299,13 @@ } .board-card { + position: relative; + padding: $gl-padding; background: $white-light; + border-radius: $border-radius-default; border: 1px solid $gray-200; box-shadow: 0 1px 2px $issue-boards-card-shadow; + list-style: none; line-height: $gl-padding; &:not(:last-child) { @@ -233,6 +333,10 @@ } } + svg { + vertical-align: top; + } + .confidential-icon { color: $orange-600; cursor: help; @@ -256,7 +360,12 @@ } } +.board-card-header { + display: flex; +} + .board-card-assignee { + display: flex; margin-top: -$gl-padding-4; margin-bottom: -$gl-padding-4; @@ -316,16 +425,34 @@ .board-card-number { font-size: $gl-font-size-xs; color: $gl-text-color-secondary; + overflow: hidden; @include media-breakpoint-up(md) { font-size: $label-font-size; } } +.board-card-number-container { + overflow: hidden; +} + +.issue-boards-search { + width: 395px; + + .form-control { + display: inline-block; + width: 210px; + } +} + .board-list-count { padding: 10px 0; color: $gl-text-color-secondary; font-size: 13px; + + > .fa { + margin-right: 5px; + } } .board-new-issue-form { @@ -333,9 +460,16 @@ margin: 5px; } -.issue-boards-sidebar { +.page-with-contextual-sidebar.layout-page .issue-boards-sidebar { + .issuable-sidebar-header { + position: relative; + } + .gutter-toggle { + position: absolute; + top: 0; bottom: 15px; + right: 0; width: 22px; color: $gray-darkest; @@ -355,6 +489,10 @@ .issuable-header-text { @include overflow-break-word(); padding-right: 35px; + + > strong { + font-weight: $gl-font-weight-bold; + } } } @@ -373,25 +511,44 @@ } .add-issues-modal { + display: flex; + position: fixed; + top: 0; + right: 0; + bottom: 0; + left: 0; background-color: rgba($black, 0.3); z-index: 9999; } .add-issues-container { + display: flex; + flex-direction: column; width: 90vw; height: 85vh; max-width: 1100px; min-height: 500px; + margin: auto; padding: 25px 15px 0; background-color: $white-light; + border-radius: $border-radius-default; box-shadow: 0 2px 12px rgba($black, 0.5); .empty-state { + display: flex; + flex: 1; + margin-top: 0; + &.add-issues-empty-state-filter { flex-direction: column; justify-content: center; } + > .row { + width: 100%; + margin: auto 0; + } + .svg-content { margin-top: -40px; } @@ -400,15 +557,25 @@ .add-issues-header { margin: -25px -15px -5px; + border-top: 0; border-bottom: 1px solid $border-color; border-top-right-radius: $border-radius-default; border-top-left-radius: $border-radius-default; > h2 { + margin: 0; font-size: 18px; } } +.add-issues-search { + display: flex; + + .issues-filters { + flex: 1; + } +} + .add-issues-list-column { width: 100%; @@ -422,6 +589,8 @@ } .add-issues-list { + display: flex; + flex: 1; padding-top: 3px; margin-left: -$gl-vert-padding; margin-right: -$gl-vert-padding; @@ -438,6 +607,14 @@ } } +.add-issues-list-loading { + align-self: center; + width: 100%; + padding-left: $gl-vert-padding; + padding-right: $gl-vert-padding; + font-size: 35px; +} + .add-issues-footer { margin: auto -15px 0; padding-left: 15px; @@ -465,6 +642,27 @@ border-radius: 50%; } +.modal-filters { + display: flex; + + > .dropdown { + display: none; + margin-right: 10px; + + @include media-breakpoint-up(sm) { + display: block; + } + } + + .dropdown-menu-toggle { + width: 100px; + + @include media-breakpoint-up(md) { + width: 140px; + } + } +} + .board-card-info { color: $gl-text-color-secondary; white-space: nowrap; |