Commit 0526e96a authored by Phil Hughes's avatar Phil Hughes

Merge branch 'ee-46591-fix-ide-height-issues' into 'master'

EE Port (Resolve "Persistent banner creates problem for web ide")

See merge request gitlab-org/gitlab-ee!6923
parents 5841fe78 74aa469d
......@@ -10,6 +10,7 @@ const hideFlash = (flashEl, fadeTransition = true) => {
flashEl.addEventListener('transitionend', () => {
flashEl.remove();
window.dispatchEvent(new Event('resize'));
if (document.body.classList.contains('flash-shown')) document.body.classList.remove('flash-shown');
}, {
once: true,
......
......@@ -78,13 +78,13 @@ export default {
</script>
<template>
<article class="ide">
<article class="ide position-relative d-flex flex-column align-items-stretch">
<error-message
v-if="errorMessage"
:message="errorMessage"
/>
<div
class="ide-view"
class="ide-view flex-grow d-flex"
>
<find-file
v-show="fileFindVisible"
......
......@@ -111,3 +111,42 @@ body {
.with-performance-bar .layout-page {
margin-top: $header-height + $performance-bar-height;
}
.fullscreen-layout {
padding-top: 0;
height: 100vh;
width: 100%;
display: flex;
flex-direction: column;
align-items: stretch;
overflow: hidden;
> #js-peek,
> .navbar-gitlab {
position: static;
top: auto;
}
.flash-container {
margin-top: 0;
margin-bottom: 0;
}
.alert-wrapper .flash-container .flash-alert:last-child,
.alert-wrapper .flash-container .flash-notice:last-child {
margin-bottom: 0;
}
.content-wrapper {
margin-top: 0;
padding-bottom: 0;
flex: 1;
min-height: 0;
}
&.flash-shown {
.content-wrapper {
margin-top: 0;
}
}
}
......@@ -28,11 +28,10 @@ $ide-tree-text-start: $ide-activity-bar-width + $ide-tree-padding;
.ide-view {
position: relative;
display: flex;
height: calc(100vh - #{$header-height});
margin-top: 0;
padding-bottom: $ide-statusbar-height;
color: $gl-text-color;
min-height: 0; // firefox fix
&.is-collapsed {
.ide-file-list {
......@@ -50,7 +49,7 @@ $ide-tree-text-start: $ide-activity-bar-width + $ide-tree-padding;
display: flex;
flex-direction: column;
flex: 1;
min-height: 0;
min-height: 0; // firefox fix
.file {
height: 32px;
......@@ -357,7 +356,7 @@ $ide-tree-text-start: $ide-activity-bar-width + $ide-tree-padding;
.multi-file-editor-holder {
height: 100%;
min-height: 0;
min-height: 0; // firefox fix
&.is-readonly,
.editor.original {
......@@ -546,7 +545,7 @@ $ide-tree-text-start: $ide-activity-bar-width + $ide-tree-padding;
border-left: 1px solid $white-dark;
border-top: 1px solid $white-dark;
border-top-left-radius: $border-radius-small;
min-height: 0;
min-height: 0; // firefox fix
}
}
......@@ -758,7 +757,7 @@ $ide-tree-text-start: $ide-activity-bar-width + $ide-tree-padding;
.ide-loading {
display: flex;
height: 100vh;
height: 100%;
align-items: center;
justify-content: center;
}
......@@ -772,60 +771,7 @@ $ide-tree-text-start: $ide-activity-bar-width + $ide-tree-padding;
.ide {
overflow: hidden;
&.nav-only {
padding-top: $header-height;
.with-performance-bar & {
padding-top: $header-height + $performance-bar-height;
}
.flash-container {
margin-top: 0;
margin-bottom: 0;
}
.alert-wrapper .flash-container .flash-alert:last-child,
.alert-wrapper .flash-container .flash-notice:last-child {
margin-bottom: 0;
}
.content-wrapper {
margin-top: 0;
padding-bottom: 0;
}
&.flash-shown {
.content-wrapper {
margin-top: 0;
}
.ide-view {
height: calc(100vh - #{$header-height + $flash-height});
}
}
}
}
.with-performance-bar .ide.nav-only {
.flash-container {
margin-top: 0;
}
.content-wrapper {
margin-top: 0;
padding-bottom: 0;
}
.ide-view {
height: calc(100vh - #{$header-height + $performance-bar-height});
}
&.flash-shown {
.ide-view {
height: calc(100vh - #{$header-height + $performance-bar-height + $flash-height});
}
}
flex: 1;
}
.drag-handle {
......@@ -1209,7 +1155,7 @@ $ide-tree-text-start: $ide-activity-bar-width + $ide-tree-padding;
}
.ide-context-body {
min-height: 0;
min-height: 0; // firefox fix
}
.ide-sidebar-project-title {
......
class IdeController < ApplicationController
layout 'nav_only'
layout 'fullscreen'
def index
end
......
- @body_class = 'ide'
- @body_class = 'ide-layout'
- page_title 'IDE'
- content_for :page_specific_javascripts do
......
!!! 5
%html{ lang: I18n.locale, class: page_class }
= render "layouts/head"
%body{ class: "#{user_application_theme} #{@body_class} nav-only", data: { page: body_data_page } }
%body{ class: "#{user_application_theme} #{@body_class} fullscreen-layout", data: { page: body_data_page } }
= render 'peek/bar'
= header_message
= render "layouts/header/default"
......@@ -11,6 +11,6 @@
= render "layouts/broadcast"
= yield :flash_message
= render "layouts/flash"
.content-wrapper{ id: "content-body" }
.content-wrapper{ id: "content-body", class: "d-flex flex-column align-items-stretch" }
= yield
= footer_message
---
title: Fix IDE issues with persistent banners
merge_request: 21283
author:
type: fixed
......@@ -55,15 +55,6 @@
margin-top: $system-header-height + $header-height;
}
.ide.nav-only {
// body element on WebIDE page
padding-top: $header-height + $system-header-height;
.ide-view {
height: calc(100vh - #{$header-height + $system-header-height});
}
}
// Performance Bar
// System Header
&.with-performance-bar {
......@@ -82,13 +73,6 @@
.right-sidebar {
top: $header-height + $performance-bar-height + $system-header-height;
}
// IDE adjustments
// body element on WebIDe view
.ide.nav-only {
padding-top: $header-height + $performance-bar-height + $system-header-height;
}
}
}
......@@ -98,8 +82,6 @@
// right sidebar eg: mr page
.nav-sidebar,
.right-sidebar,
// web IDE status bar
.ide-status-bar,
// navless pages' footer eg: login page
// navless pages' footer border eg: login page
&.devise-layout-html body .footer-container,
......@@ -108,83 +90,21 @@
}
}
@mixin ide-height-with($map) {
$height: 0;
$height: $height + $header-height; // header is always present
@if (map-get($map, performance) == true) {
$height: $height + $performance-bar-height;
}
@if (map-get($map, system-header) == true) {
$height: $height + $system-header-height;
}
@if (map-get($map, system-footer) == true) {
$height: $height + $system-header-height;
}
@if (map-get($map, flash) == true) {
$height: $height + $flash-height;
}
height: calc(100vh - #{$height});
}
// Space adjustments for the IDE UI
.ide.nav-only {
.ide-view {
.with-system-header & {
@include ide-height-with((system-header: true));
}
.with-system-footer & {
@include ide-height-with((system-footer: true));
}
.with-system-header.with-system-footer & {
@include ide-height-with((system-header: true, system-footer: true));
}
.with-performance-bar.with-system-header & {
@include ide-height-with((system-header: true, performance: true));
}
.with-performance-bar.with-system-footer & {
@include ide-height-with((system-footer: true, performance: true));
}
.with-performance-bar.with-system-header.with-system-footer & {
@include ide-height-with((system-header: true, system-footer: true, performance: true));
}
.fullscreen-layout {
.header-message,
.footer-message {
position: static;
top: auto;
bottom: auto;
}
// Repeat previous block of selectors but with addition of Flash
&.flash-shown .ide-view {
.content-wrapper {
.with-system-header & {
@include ide-height-with((system-header: true, flash: true));
margin-top: 0;
}
.with-system-footer & {
@include ide-height-with((system-footer: true, flash: true));
}
.with-system-header.with-system-footer & {
@include ide-height-with((system-header: true, system-footer: true, flash: true));
}
.with-performance-bar.with-system-header & {
@include ide-height-with((system-header: true, performance: true, flash: true));
}
.with-performance-bar.with-system-footer & {
@include ide-height-with((system-footer: true, performance: true, flash: true));
}
.with-performance-bar.with-system-header.with-system-footer & {
@include ide-height-with(
(system-header: true, system-footer: true, performance: true, flash: true)
);
margin-top: 0;
}
}
}
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