diff options
author | Paul Slaughter <pslaughter@gitlab.com> | 2018-08-31 13:19:55 +0300 |
---|---|---|
committer | Phil Hughes <me@iamphill.com> | 2018-08-31 13:19:55 +0300 |
commit | 29dc365622142fcbc97604a3f1d4d58b4aee9433 (patch) | |
tree | 9a5419f0f2872a4fcde64fe7cbbd8abf24d23f1a /app/assets | |
parent | 2f398b51119847cb0fbdf4fb7e2761becf2df792 (diff) |
Resolve "Persistent banner creates problem for web ide"
Diffstat (limited to 'app/assets')
-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 |
4 files changed, 49 insertions, 63 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 { |