Commit c242c772 authored by Lukas Eipert's avatar Lukas Eipert Committed by Phil Hughes

Make issue boards height calculation clearer and remove magic numbers

parent d0eee137
...@@ -9,7 +9,8 @@ ...@@ -9,7 +9,8 @@
padding-left: $contextual-sidebar-width; 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; padding: 10px 0 15px;
} }
} }
...@@ -61,7 +62,8 @@ ...@@ -61,7 +62,8 @@
} }
.nav-sidebar { .nav-sidebar {
transition: width $sidebar-transition-duration, left $sidebar-transition-duration; transition: width $sidebar-transition-duration,
left $sidebar-transition-duration;
position: fixed; position: fixed;
z-index: 400; z-index: 400;
width: $contextual-sidebar-width; width: $contextual-sidebar-width;
...@@ -75,7 +77,7 @@ ...@@ -75,7 +77,7 @@
&:not(.sidebar-collapsed-desktop) { &:not(.sidebar-collapsed-desktop) {
@media (min-width: $screen-sm-min) and (max-width: $screen-md-max) { @media (min-width: $screen-sm-min) and (max-width: $screen-md-max) {
box-shadow: inset -2px 0 0 $border-color, box-shadow: inset -2px 0 0 $border-color,
2px 1px 3px $dropdown-shadow-color; 2px 1px 3px $dropdown-shadow-color;
} }
} }
...@@ -234,7 +236,7 @@ ...@@ -234,7 +236,7 @@
border-radius: 0 3px 3px 0; border-radius: 0 3px 3px 0;
&::before { &::before {
content: ""; content: '';
position: absolute; position: absolute;
top: -30px; top: -30px;
bottom: -30px; bottom: -30px;
...@@ -305,7 +307,6 @@ ...@@ -305,7 +307,6 @@
} }
} }
// Collapsed nav // Collapsed nav
.toggle-sidebar-button, .toggle-sidebar-button,
...@@ -454,18 +455,3 @@ ...@@ -454,18 +455,3 @@
z-index: 300; 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});
}
...@@ -184,7 +184,6 @@ ...@@ -184,7 +184,6 @@
} }
.container-fluid { .container-fluid {
.navbar-nav { .navbar-nav {
@media (max-width: $screen-xs-max) { @media (max-width: $screen-xs-max) {
display: -webkit-flex; display: -webkit-flex;
...@@ -337,7 +336,7 @@ ...@@ -337,7 +336,7 @@
.breadcrumbs { .breadcrumbs {
display: -webkit-flex; display: -webkit-flex;
display: flex; display: flex;
min-height: 48px; min-height: $breadcrumb-min-height;
color: $gl-text-color; color: $gl-text-color;
} }
...@@ -466,7 +465,7 @@ ...@@ -466,7 +465,7 @@
padding: 0 5px; padding: 0 5px;
line-height: 12px; line-height: 12px;
border-radius: 7px; 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 { &.issues-count {
background-color: $green-500; background-color: $green-500;
......
...@@ -5,9 +5,9 @@ $grid-size: 8px; ...@@ -5,9 +5,9 @@ $grid-size: 8px;
$gutter_collapsed_width: 62px; $gutter_collapsed_width: 62px;
$gutter_width: 290px; $gutter_width: 290px;
$gutter_inner_width: 250px; $gutter_inner_width: 250px;
$sidebar-transition-duration: .3s; $sidebar-transition-duration: 0.3s;
$sidebar-breakpoint: 1024px; $sidebar-breakpoint: 1024px;
$default-transition-duration: .15s; $default-transition-duration: 0.15s;
$contextual-sidebar-width: 220px; $contextual-sidebar-width: 220px;
$contextual-sidebar-collapsed-width: 50px; $contextual-sidebar-collapsed-width: 50px;
...@@ -129,7 +129,6 @@ $theme-green-800: #145d33; ...@@ -129,7 +129,6 @@ $theme-green-800: #145d33;
$theme-green-900: #0d4524; $theme-green-900: #0d4524;
$theme-green-950: #072d16; $theme-green-950: #072d16;
$black: #000; $black: #000;
$black-transparent: rgba(0, 0, 0, 0.3); $black-transparent: rgba(0, 0, 0, 0.3);
$almost-black: #242424; $almost-black: #242424;
...@@ -163,7 +162,7 @@ $gl-text-color-secondary: #707070; ...@@ -163,7 +162,7 @@ $gl-text-color-secondary: #707070;
$gl-text-color-tertiary: #949494; $gl-text-color-tertiary: #949494;
$gl-text-color-quaternary: #d6d6d6; $gl-text-color-quaternary: #d6d6d6;
$gl-text-color-inverted: rgba(255, 255, 255, 1); $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-color-disabled: #919191;
$gl-text-green: $green-600; $gl-text-green: $green-600;
$gl-text-green-hover: $green-700; $gl-text-green-hover: $green-700;
...@@ -262,6 +261,7 @@ $highlight-changes-color: rgb(235, 255, 232); ...@@ -262,6 +261,7 @@ $highlight-changes-color: rgb(235, 255, 232);
$performance-bar-height: 35px; $performance-bar-height: 35px;
$flash-height: 52px; $flash-height: 52px;
$context-header-height: 60px; $context-header-height: 60px;
$breadcrumb-min-height: 48px;
/* /*
* Common component specific colors * Common component specific colors
...@@ -296,7 +296,7 @@ $tanuki-yellow: #fca326; ...@@ -296,7 +296,7 @@ $tanuki-yellow: #fca326;
*/ */
$gl-primary: $blue-500; $gl-primary: $blue-500;
$gl-success: $green-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-info: $blue-500;
$gl-warning: $orange-500; $gl-warning: $orange-500;
$gl-danger: $red-500; $gl-danger: $red-500;
...@@ -331,8 +331,11 @@ $diff-jagged-border-gradient-color: darken($white-normal, 8%); ...@@ -331,8 +331,11 @@ $diff-jagged-border-gradient-color: darken($white-normal, 8%);
/* /*
* Fonts * Fonts
*/ */
$monospace_font: 'Menlo', 'DejaVu Sans Mono', 'Liberation Mono', 'Consolas', 'Ubuntu Mono', 'Courier New', 'andale mono', 'lucida console', monospace; $monospace_font: 'Menlo', 'DejaVu Sans Mono', 'Liberation Mono', 'Consolas',
$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"; '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 * Dropdowns
...@@ -343,16 +346,16 @@ $dropdown-max-height: 312px; ...@@ -343,16 +346,16 @@ $dropdown-max-height: 312px;
$dropdown-vertical-offset: 4px; $dropdown-vertical-offset: 4px;
$dropdown-link-color: #555; $dropdown-link-color: #555;
$dropdown-link-hover-bg: $row-hover; $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-border-color: $border-color;
$dropdown-shadow-color: rgba(#000, .1); $dropdown-shadow-color: rgba(#000, 0.1);
$dropdown-divider-color: rgba(#000, .1); $dropdown-divider-color: rgba(#000, 0.1);
$dropdown-title-btn-color: #bfbfbf; $dropdown-title-btn-color: #bfbfbf;
$dropdown-input-color: #555; $dropdown-input-color: #555;
$dropdown-input-fa-color: #c7c7c7; $dropdown-input-fa-color: #c7c7c7;
$dropdown-input-focus-border: $focus-border-color; $dropdown-input-focus-border: $focus-border-color;
$dropdown-input-focus-shadow: rgba($dropdown-input-focus-border, .4); $dropdown-input-focus-shadow: rgba($dropdown-input-focus-border, 0.4);
$dropdown-loading-bg: rgba(#fff, .6); $dropdown-loading-bg: rgba(#fff, 0.6);
$dropdown-chevron-size: 10px; $dropdown-chevron-size: 10px;
$dropdown-toggle-active-border-color: darken($border-color, 14%); $dropdown-toggle-active-border-color: darken($border-color, 14%);
$dropdown-item-hover-bg: $gray-darker; $dropdown-item-hover-bg: $gray-darker;
...@@ -367,9 +370,9 @@ $dropdown-hover-color: $blue-400; ...@@ -367,9 +370,9 @@ $dropdown-hover-color: $blue-400;
/* /*
* Contextual Sidebar * Contextual Sidebar
*/ */
$link-active-background: rgba(0, 0, 0, .04); $link-active-background: rgba(0, 0, 0, 0.04);
$link-hover-background: rgba(0, 0, 0, .06); $link-hover-background: rgba(0, 0, 0, 0.06);
$inactive-badge-background: rgba(0, 0, 0, .08); $inactive-badge-background: rgba(0, 0, 0, 0.08);
/* /*
* Buttons * Buttons
...@@ -397,14 +400,14 @@ $status-icon-margin: $gl-btn-padding; ...@@ -397,14 +400,14 @@ $status-icon-margin: $gl-btn-padding;
/* /*
* Award emoji * 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-bg: #fed159;
$award-emoji-positive-add-lines: #bb9c13; $award-emoji-positive-add-lines: #bb9c13;
/* /*
* Search Box * 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-focus-shadow-color: $dropdown-input-focus-shadow;
$search-input-width: 220px; $search-input-width: 220px;
$location-badge-active-bg: $blue-500; $location-badge-active-bg: $blue-500;
...@@ -429,7 +432,7 @@ $zen-control-color: #555; ...@@ -429,7 +432,7 @@ $zen-control-color: #555;
* Calendar * Calendar
*/ */
$calendar-hover-bg: #ecf3fe; $calendar-hover-bg: #ecf3fe;
$calendar-border-color: rgba(#000, .1); $calendar-border-color: rgba(#000, 0.1);
$calendar-user-contrib-text: #959494; $calendar-user-contrib-text: #959494;
/* /*
...@@ -452,6 +455,17 @@ $ci-skipped-color: #888; ...@@ -452,6 +455,17 @@ $ci-skipped-color: #888;
*/ */
$issue-boards-font-size: 14px; $issue-boards-font-size: 14px;
$issue-boards-card-shadow: rgba(186, 186, 186, 0.5); $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 * Avatar
...@@ -567,14 +581,14 @@ $label-padding: 7px; ...@@ -567,14 +581,14 @@ $label-padding: 7px;
$label-padding-modal: 10px; $label-padding-modal: 10px;
$label-gray-bg: #f8fafc; $label-gray-bg: #f8fafc;
$label-inverse-bg: #333; $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; $label-border-radius: 100px;
/* /*
* Animation * Animation
*/ */
$fade-in-duration: 200ms; $fade-in-duration: 200ms;
$fade-mask-transition-duration: .1s; $fade-mask-transition-duration: 0.1s;
$fade-mask-transition-curve: ease-in-out; $fade-mask-transition-curve: ease-in-out;
/* /*
...@@ -642,7 +656,6 @@ $stat-graph-selection-stroke: #333; ...@@ -642,7 +656,6 @@ $stat-graph-selection-stroke: #333;
$select2-drop-shadow1: rgba(76, 86, 103, 0.247059); $select2-drop-shadow1: rgba(76, 86, 103, 0.247059);
$select2-drop-shadow2: rgba(31, 37, 50, 0.317647); $select2-drop-shadow2: rgba(31, 37, 50, 0.317647);
/* /*
* Todo * Todo
*/ */
...@@ -679,7 +692,6 @@ CI variable lists ...@@ -679,7 +692,6 @@ CI variable lists
*/ */
$ci-variable-remove-button-width: calc(1em + #{2 * $gl-padding}); $ci-variable-remove-button-width: calc(1em + #{2 * $gl-padding});
/* /*
Filtered Search Filtered Search
*/ */
...@@ -706,7 +718,14 @@ Repo editor ...@@ -706,7 +718,14 @@ Repo editor
*/ */
$repo-editor-grey: #f6f7f9; $repo-editor-grey: #f6f7f9;
$repo-editor-grey-darker: #e9ebee; $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 Performance Bar
...@@ -717,8 +736,8 @@ $perf-bar-staging: #291430; ...@@ -717,8 +736,8 @@ $perf-bar-staging: #291430;
$perf-bar-development: #4c1210; $perf-bar-development: #4c1210;
$perf-bar-bucket-bg: #111; $perf-bar-bucket-bg: #111;
$perf-bar-bucket-color: #ccc; $perf-bar-bucket-color: #ccc;
$perf-bar-bucket-box-shadow-from: rgba($white-light, .2); $perf-bar-bucket-box-shadow-from: rgba($white-light, 0.2);
$perf-bar-bucket-box-shadow-to: rgba($black, .25); $perf-bar-bucket-box-shadow-to: rgba($black, 0.25);
/* /*
Issuable warning Issuable warning
......
@import "./issues/issue_count_badge"; @import './issues/issue_count_badge';
[v-cloak] { [v-cloak] {
display: none; display: none;
...@@ -72,22 +72,37 @@ ...@@ -72,22 +72,37 @@
} }
.boards-list { .boards-list {
height: calc(100vh - 105px); height: calc(100vh - #{$issue-board-list-difference-xs});
width: 100%; width: 100%;
padding-top: 25px; padding: $gl-padding ($gl-padding / 2);
padding-bottom: 25px;
padding-right: ($gl-padding / 2);
padding-left: ($gl-padding / 2);
overflow-x: scroll; overflow-x: scroll;
white-space: nowrap; white-space: nowrap;
min-height: 200px;
@media (min-width: $screen-sm-min) and (max-width: $screen-sm-max) { @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) { @media (min-width: $screen-md-min) {
height: calc(100vh - 160px); height: calc(100vh - #{$issue-board-list-difference-md});
min-height: 475px; }
.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 @@ ...@@ -454,7 +469,7 @@
&.boards-sidebar-slide-enter-active, &.boards-sidebar-slide-enter-active,
&.boards-sidebar-slide-leave-active { &.boards-sidebar-slide-leave-active {
transition: width $sidebar-transition-duration, transition: width $sidebar-transition-duration,
padding $sidebar-transition-duration; padding $sidebar-transition-duration;
} }
&.boards-sidebar-slide-enter, &.boards-sidebar-slide-enter,
...@@ -473,7 +488,7 @@ ...@@ -473,7 +488,7 @@
right: 0; right: 0;
bottom: 0; bottom: 0;
left: 0; left: 0;
background-color: rgba($black, .3); background-color: rgba($black, 0.3);
z-index: 9999; z-index: 9999;
} }
...@@ -490,7 +505,7 @@ ...@@ -490,7 +505,7 @@
padding: 25px 15px 0; padding: 25px 15px 0;
background-color: $white-light; background-color: $white-light;
border-radius: $border-radius-default; border-radius: $border-radius-default;
box-shadow: 0 2px 12px rgba($black, .5); box-shadow: 0 2px 12px rgba($black, 0.5);
.empty-state { .empty-state {
display: -webkit-flex; display: -webkit-flex;
...@@ -568,7 +583,7 @@ ...@@ -568,7 +583,7 @@
.card { .card {
border: 1px solid $border-gray-dark; 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; 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