Skip to content
Snippets Groups Projects
Commit c242c772 authored by Lukas Eipert's avatar Lukas Eipert Committed by Phil Hughes
Browse files

Make issue boards height calculation clearer and remove magic numbers

parent d0eee137
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
app/assets/stylesheets/framework/contextual_sidebar.scss
+ 6
− 20
View file @ c242c772
@@ -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
+ 2
− 3
View file @ c242c772
@@ -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
+ 44
− 25
View file @ c242c772
@@ -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
+ 28
− 13
View file @ c242c772
@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;
}
}
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