diff options
| -rw-r--r-- | app/assets/javascripts/flash.js | 1 | ||||
| -rw-r--r-- | app/assets/javascripts/ide/components/ide.vue | 4 | ||||
| -rw-r--r-- | app/assets/stylesheets/framework/layout.scss | 39 | ||||
| -rw-r--r-- | app/assets/stylesheets/page_bundles/ide.scss | 68 | ||||
| -rw-r--r-- | app/controllers/ide_controller.rb | 2 | ||||
| -rw-r--r-- | app/views/ide/index.html.haml | 2 | ||||
| -rw-r--r-- | app/views/layouts/fullscreen.html.haml (renamed from app/views/layouts/nav_only.html.haml) | 4 | ||||
| -rw-r--r-- | changelogs/unreleased/46591-fix-ide-height-issues.yml | 5 |
8 files changed, 58 insertions, 67 deletions
diff --git a/app/assets/javascripts/flash.js b/app/assets/javascripts/flash.js index a0af2875ab5..a29de9ae899 100644 --- a/app/assets/javascripts/flash.js +++ b/app/assets/javascripts/flash.js @@ -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, diff --git a/app/assets/javascripts/ide/components/ide.vue b/app/assets/javascripts/ide/components/ide.vue index 2c8305aa0cc..6a5ab35a16a 100644 --- a/app/assets/javascripts/ide/components/ide.vue +++ b/app/assets/javascripts/ide/components/ide.vue @@ -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" diff --git a/app/assets/stylesheets/framework/layout.scss b/app/assets/stylesheets/framework/layout.scss index 52b5f059f20..d4bae4cb137 100644 --- a/app/assets/stylesheets/framework/layout.scss +++ b/app/assets/stylesheets/framework/layout.scss @@ -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; + } + } +} diff --git a/app/assets/stylesheets/page_bundles/ide.scss b/app/assets/stylesheets/page_bundles/ide.scss index f2db1510e5e..5ff4e487d04 100644 --- a/app/assets/stylesheets/page_bundles/ide.scss +++ b/app/assets/stylesheets/page_bundles/ide.scss @@ -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 { diff --git a/app/controllers/ide_controller.rb b/app/controllers/ide_controller.rb index 1ff25a45398..96bb2237d90 100644 --- a/app/controllers/ide_controller.rb +++ b/app/controllers/ide_controller.rb @@ -1,5 +1,5 @@ class IdeController < ApplicationController - layout 'nav_only' + layout 'fullscreen' def index end diff --git a/app/views/ide/index.html.haml b/app/views/ide/index.html.haml index 4cae9c51acc..d8bd37fe986 100644 --- a/app/views/ide/index.html.haml +++ b/app/views/ide/index.html.haml @@ -1,4 +1,4 @@ -- @body_class = 'ide' +- @body_class = 'ide-layout' - page_title 'IDE' - content_for :page_specific_javascripts do diff --git a/app/views/layouts/nav_only.html.haml b/app/views/layouts/fullscreen.html.haml index 0811211f7b2..95db8313821 100644 --- a/app/views/layouts/nav_only.html.haml +++ b/app/views/layouts/fullscreen.html.haml @@ -1,7 +1,7 @@ !!! 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 diff --git a/changelogs/unreleased/46591-fix-ide-height-issues.yml b/changelogs/unreleased/46591-fix-ide-height-issues.yml new file mode 100644 index 00000000000..d161bda6ab1 --- /dev/null +++ b/changelogs/unreleased/46591-fix-ide-height-issues.yml @@ -0,0 +1,5 @@ +--- +title: Fix IDE issues with persistent banners +merge_request: 21283 +author: +type: fixed |