Commit 71b7b70f authored by Phil Hughes's avatar Phil Hughes

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

Resolve "Persistent banner creates problem for web ide"

Closes #46591

See merge request gitlab-org/gitlab-ce!21283
parents 2f398b51 29dc3656
......@@ -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'
= render "layouts/header/default"
= render 'shared/outdated_browser'
......@@ -10,5 +10,5 @@
= render "layouts/broadcast"
= yield :flash_message
= render "layouts/flash"
.content{ id: "content-body" }
.content-wrapper{ id: "content-body", class: "d-flex flex-column align-items-stretch" }
= yield
---
title: Fix IDE issues with persistent banners
merge_request: 21283
author:
type: fixed
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