BigW Consortium Gitlab

Skip to content

G
gitlab-ce
Commit e1739e47 by Phil Hughes
Options

Merge branch 'le-issue-boards-height-calculation' into 'master'

Make issue boards height calculation clearer and remove magic numbers See merge request gitlab-org/gitlab-ce!17791
parents d0eee137 c242c772
Showing with 80 additions and 61 deletions
app/assets/stylesheets/framework/contextual_sidebar.scss
......@@ -9,7 +9,8 @@
padding-left: $contextual-sidebar-width;
}
.issues-bulk-update.right-sidebar.right-sidebar-expanded .issuable-sidebar-header {
.issues-bulk-update.right-sidebar.right-sidebar-expanded
.issuable-sidebar-header {
padding: 10px 0 15px;
}
}
......@@ -61,7 +62,8 @@
}
.nav-sidebar {
transition: width $sidebar-transition-duration, left $sidebar-transition-duration;
transition: width $sidebar-transition-duration,
left $sidebar-transition-duration;
position: fixed;
z-index: 400;
width: $contextual-sidebar-width;
......@@ -75,7 +77,7 @@
&:not(.sidebar-collapsed-desktop) {
@media (min-width: $screen-sm-min) and (max-width: $screen-md-max) {
box-shadow: inset -2px 0 0 $border-color,
2px 1px 3px $dropdown-shadow-color;
2px 1px 3px $dropdown-shadow-color;
}
}
......@@ -234,7 +236,7 @@
border-radius: 0 3px 3px 0;
&::before {
content: "";
content: '';
position: absolute;
top: -30px;
bottom: -30px;
......@@ -305,7 +307,6 @@
}
}
// Collapsed nav
.toggle-sidebar-button,
......@@ -454,18 +455,3 @@
z-index: 300;
}
}
// Make issue boards full-height now that sub-nav is gone
.boards-list {
height: calc(100vh - #{$header-height});
@media (min-width: $screen-sm-min) {
height: calc(100vh - 180px);
}
}
.with-performance-bar .boards-list {
height: calc(100vh - #{$header-height} - #{$performance-bar-height});
}
app/assets/stylesheets/framework/header.scss
......@@ -184,7 +184,6 @@
}
.container-fluid {
.navbar-nav {
@media (max-width: $screen-xs-max) {
display: -webkit-flex;
......@@ -337,7 +336,7 @@
.breadcrumbs {
display: -webkit-flex;
display: flex;
min-height: 48px;
min-height: $breadcrumb-min-height;
color: $gl-text-color;
}
......@@ -466,7 +465,7 @@
padding: 0 5px;
line-height: 12px;
border-radius: 7px;
box-shadow: 0 1px 0 rgba($gl-header-color, .2);
box-shadow: 0 1px 0 rgba($gl-header-color, 0.2);
&.issues-count {
background-color: $green-500;
......
app/assets/stylesheets/framework/variables.scss
......@@ -5,9 +5,9 @@ $grid-size: 8px;
$gutter_collapsed_width: 62px;
$gutter_width: 290px;
$gutter_inner_width: 250px;
$sidebar-transition-duration: .3s;
$sidebar-transition-duration: 0.3s;
$sidebar-breakpoint: 1024px;
$default-transition-duration: .15s;
$default-transition-duration: 0.15s;
$contextual-sidebar-width: 220px;
$contextual-sidebar-collapsed-width: 50px;
......@@ -129,7 +129,6 @@ $theme-green-800: #145d33;
$theme-green-900: #0d4524;
$theme-green-950: #072d16;
$black: #000;
$black-transparent: rgba(0, 0, 0, 0.3);
$almost-black: #242424;
......@@ -163,7 +162,7 @@ $gl-text-color-secondary: #707070;
$gl-text-color-tertiary: #949494;
$gl-text-color-quaternary: #d6d6d6;
$gl-text-color-inverted: rgba(255, 255, 255, 1);
$gl-text-color-secondary-inverted: rgba(255, 255, 255, .85);
$gl-text-color-secondary-inverted: rgba(255, 255, 255, 0.85);
$gl-text-color-disabled: #919191;
$gl-text-green: $green-600;
$gl-text-green-hover: $green-700;
......@@ -262,6 +261,7 @@ $highlight-changes-color: rgb(235, 255, 232);
$performance-bar-height: 35px;
$flash-height: 52px;
$context-header-height: 60px;
$breadcrumb-min-height: 48px;
/*
* Common component specific colors
......@@ -296,7 +296,7 @@ $tanuki-yellow: #fca326;
*/
$gl-primary: $blue-500;
$gl-success: $green-500;
$gl-success-focus: rgba($gl-success, .4);
$gl-success-focus: rgba($gl-success, 0.4);
$gl-info: $blue-500;
$gl-warning: $orange-500;
$gl-danger: $red-500;
......@@ -331,8 +331,11 @@ $diff-jagged-border-gradient-color: darken($white-normal, 8%);
/*
* Fonts
*/
$monospace_font: 'Menlo', 'DejaVu Sans Mono', 'Liberation Mono', 'Consolas', 'Ubuntu Mono', 'Courier New', 'andale mono', 'lucida console', monospace;
$regular_font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
$monospace_font: 'Menlo', 'DejaVu Sans Mono', 'Liberation Mono', 'Consolas',
'Ubuntu Mono', 'Courier New', 'andale mono', 'lucida console', monospace;
$regular_font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif,
'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
/*
* Dropdowns
......@@ -343,16 +346,16 @@ $dropdown-max-height: 312px;
$dropdown-vertical-offset: 4px;
$dropdown-link-color: #555;
$dropdown-link-hover-bg: $row-hover;
$dropdown-empty-row-bg: rgba(#000, .04);
$dropdown-empty-row-bg: rgba(#000, 0.04);
$dropdown-border-color: $border-color;
$dropdown-shadow-color: rgba(#000, .1);
$dropdown-divider-color: rgba(#000, .1);
$dropdown-shadow-color: rgba(#000, 0.1);
$dropdown-divider-color: rgba(#000, 0.1);
$dropdown-title-btn-color: #bfbfbf;
$dropdown-input-color: #555;
$dropdown-input-fa-color: #c7c7c7;
$dropdown-input-focus-border: $focus-border-color;
$dropdown-input-focus-shadow: rgba($dropdown-input-focus-border, .4);
$dropdown-loading-bg: rgba(#fff, .6);
$dropdown-input-focus-shadow: rgba($dropdown-input-focus-border, 0.4);
$dropdown-loading-bg: rgba(#fff, 0.6);
$dropdown-chevron-size: 10px;
$dropdown-toggle-active-border-color: darken($border-color, 14%);
$dropdown-item-hover-bg: $gray-darker;
......@@ -367,9 +370,9 @@ $dropdown-hover-color: $blue-400;
/*
* Contextual Sidebar
*/
$link-active-background: rgba(0, 0, 0, .04);
$link-hover-background: rgba(0, 0, 0, .06);
$inactive-badge-background: rgba(0, 0, 0, .08);
$link-active-background: rgba(0, 0, 0, 0.04);
$link-hover-background: rgba(0, 0, 0, 0.06);
$inactive-badge-background: rgba(0, 0, 0, 0.08);
/*
* Buttons
......@@ -397,14 +400,14 @@ $status-icon-margin: $gl-btn-padding;
/*
* Award emoji
*/
$award-emoji-menu-shadow: rgba(0, 0, 0, .175);
$award-emoji-menu-shadow: rgba(0, 0, 0, 0.175);
$award-emoji-positive-add-bg: #fed159;
$award-emoji-positive-add-lines: #bb9c13;
/*
* Search Box
*/
$search-input-border-color: rgba($blue-400, .8);
$search-input-border-color: rgba($blue-400, 0.8);
$search-input-focus-shadow-color: $dropdown-input-focus-shadow;
$search-input-width: 220px;
$location-badge-active-bg: $blue-500;
......@@ -429,7 +432,7 @@ $zen-control-color: #555;
* Calendar
*/
$calendar-hover-bg: #ecf3fe;
$calendar-border-color: rgba(#000, .1);
$calendar-border-color: rgba(#000, 0.1);
$calendar-user-contrib-text: #959494;
/*
......@@ -452,6 +455,17 @@ $ci-skipped-color: #888;
*/
$issue-boards-font-size: 14px;
$issue-boards-card-shadow: rgba(186, 186, 186, 0.5);
/*
The following heights are used in boards.scss and are used for calculation of the board height.
They probably should be derived in a smarter way.
*/
$issue-boards-filter-height: 68px;
$issue-boards-breadcrumbs-height-xs: 63px;
$issue-board-list-difference-xs: $header-height +
$issue-boards-breadcrumbs-height-xs;
$issue-board-list-difference-sm: $header-height + $breadcrumb-min-height;
$issue-board-list-difference-md: $issue-board-list-difference-sm +
$issue-boards-filter-height;
/*
* Avatar
......@@ -567,14 +581,14 @@ $label-padding: 7px;
$label-padding-modal: 10px;
$label-gray-bg: #f8fafc;
$label-inverse-bg: #333;
$label-remove-border: rgba(0, 0, 0, .1);
$label-remove-border: rgba(0, 0, 0, 0.1);
$label-border-radius: 100px;
/*
* Animation
*/
$fade-in-duration: 200ms;
$fade-mask-transition-duration: .1s;
$fade-mask-transition-duration: 0.1s;
$fade-mask-transition-curve: ease-in-out;
/*
......@@ -642,7 +656,6 @@ $stat-graph-selection-stroke: #333;
$select2-drop-shadow1: rgba(76, 86, 103, 0.247059);
$select2-drop-shadow2: rgba(31, 37, 50, 0.317647);
/*
* Todo
*/
......@@ -679,7 +692,6 @@ CI variable lists
*/
$ci-variable-remove-button-width: calc(1em + #{2 * $gl-padding});
/*
Filtered Search
*/
......@@ -706,7 +718,14 @@ Repo editor
*/
$repo-editor-grey: #f6f7f9;
$repo-editor-grey-darker: #e9ebee;
$repo-editor-linear-gradient: linear-gradient(to right, $repo-editor-grey 0%, $repo-editor-grey-darker, 20%, $repo-editor-grey 40%, $repo-editor-grey 100%);
$repo-editor-linear-gradient: linear-gradient(
to right,
$repo-editor-grey 0%,
$repo-editor-grey-darker,
20%,
$repo-editor-grey 40%,
$repo-editor-grey 100%
);
/*
Performance Bar
......@@ -717,8 +736,8 @@ $perf-bar-staging: #291430;
$perf-bar-development: #4c1210;
$perf-bar-bucket-bg: #111;
$perf-bar-bucket-color: #ccc;
$perf-bar-bucket-box-shadow-from: rgba($white-light, .2);
$perf-bar-bucket-box-shadow-to: rgba($black, .25);
$perf-bar-bucket-box-shadow-from: rgba($white-light, 0.2);
$perf-bar-bucket-box-shadow-to: rgba($black, 0.25);
/*
Issuable warning
......
app/assets/stylesheets/pages/boards.scss
@import "./issues/issue_count_badge";
@import './issues/issue_count_badge';
[v-cloak] {
display: none;
......@@ -72,22 +72,37 @@
}
.boards-list {
height: calc(100vh - 105px);
height: calc(100vh - #{$issue-board-list-difference-xs});
width: 100%;
padding-top: 25px;
padding-bottom: 25px;
padding-right: ($gl-padding / 2);
padding-left: ($gl-padding / 2);
padding: $gl-padding ($gl-padding / 2);
overflow-x: scroll;
white-space: nowrap;
min-height: 200px;
@media (min-width: $screen-sm-min) and (max-width: $screen-sm-max) {
height: calc(100vh - 90px);
height: calc(100vh - #{$issue-board-list-difference-sm});
}
@media (min-width: $screen-md-min) {
height: calc(100vh - 160px);
min-height: 475px;
height: calc(100vh - #{$issue-board-list-difference-md});
}
.with-performance-bar & {
height: calc(
100vh - #{$issue-board-list-difference-xs} - #{$performance-bar-height}
);
@media (min-width: $screen-sm-min) and (max-width: $screen-sm-max) {
height: calc(
100vh - #{$issue-board-list-difference-sm} - #{$performance-bar-height}
);
}
@media (min-width: $screen-md-min) {
height: calc(
100vh - #{$issue-board-list-difference-md} - #{$performance-bar-height}
);
}
}
}
......@@ -454,7 +469,7 @@
&.boards-sidebar-slide-enter-active,
&.boards-sidebar-slide-leave-active {
transition: width $sidebar-transition-duration,
padding $sidebar-transition-duration;
padding $sidebar-transition-duration;
}
&.boards-sidebar-slide-enter,
......@@ -473,7 +488,7 @@
right: 0;
bottom: 0;
left: 0;
background-color: rgba($black, .3);
background-color: rgba($black, 0.3);
z-index: 9999;
}
......@@ -490,7 +505,7 @@
padding: 25px 15px 0;
background-color: $white-light;
border-radius: $border-radius-default;
box-shadow: 0 2px 12px rgba($black, .5);
box-shadow: 0 2px 12px rgba($black, 0.5);
.empty-state {
display: -webkit-flex;
......@@ -568,7 +583,7 @@
.card {
border: 1px solid $border-gray-dark;
box-shadow: 0 1px 2px rgba($issue-boards-card-shadow, .3);
box-shadow: 0 1px 2px rgba($issue-boards-card-shadow, 0.3);
cursor: pointer;
}
}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment