diff --git a/core/modules/toolbar/css/toolbar.module.css b/core/modules/toolbar/css/toolbar.module.css index 69eb7c2..ba67b89 100644 --- a/core/modules/toolbar/css/toolbar.module.css +++ b/core/modules/toolbar/css/toolbar.module.css @@ -14,6 +14,7 @@ line-height: 1; margin: 0; padding: 0; + position: static; vertical-align: baseline; } @media print { @@ -60,11 +61,11 @@ * is active. The toolbar container, that contains the bar and the trays, is * position absolutely so that it scrolls with the page. Otherwise, on smaller * screens, the components of the admin toolbar are positioned statically. */ -body.toolbar-fixed .toolbar-oriented, +.toolbar-oriented, .toolbar-oriented .toolbar-bar, .toolbar-oriented .toolbar-tray { left: 0; - position: absolute; + position: fixed; right: 0; top: 0; } @@ -72,15 +73,10 @@ body.toolbar-fixed .toolbar-oriented, .toolbar-oriented .toolbar-bar { z-index: 502; } -/* Position the admin toolbar fixed when the configured standard breakpoint is - * active. */ -body.toolbar-fixed .toolbar-oriented .toolbar-bar { - position: fixed; -} /* When the configured narrow breakpoint is active, the toolbar is sized to wrap * around the trays in order to provide a context for scrolling tray content * that is taller than the viewport. */ -body.toolbar-tray-open.toolbar-fixed.toolbar-vertical .toolbar-oriented { +body.toolbar-tray-open.toolbar-vertical .toolbar-oriented { bottom: 0; width: 240px; width: 15rem; @@ -182,14 +178,14 @@ body.toolbar-tray-open.toolbar-fixed.toolbar-vertical .toolbar-oriented { /* When the configured standard breakpoint is active and the tray is in a * horizontal position, the tray is fixed to the top of the viewport and does * not scroll with the page contents. */ -body.toolbar-fixed .toolbar .toolbar-tray-horizontal { +.toolbar .toolbar-tray-horizontal { position: fixed; } /* When the configured standard breakpoint is active and the tray is in a * vertical position, the tray does not scroll with the page. The contents of * the tray scroll within the confines of the viewport. */ .toolbar .toolbar-tray-vertical.is-active, -body.toolbar-fixed .toolbar .toolbar-tray-vertical { +.toolbar .toolbar-tray-vertical { height: 100%; overflow-x: hidden; overflow-y: auto; @@ -208,23 +204,23 @@ body.toolbar-fixed .toolbar .toolbar-tray-vertical { } /* When the configured standard breakpoint is active, the tray appears to push * the page content away from the edge of the viewport. */ -body.toolbar-tray-open.toolbar-vertical.toolbar-fixed { +body.toolbar-tray-open.toolbar-vertical { margin-left: 240px; /* LTR */ margin-left: 15rem; /* LTR */ } @media print { - body.toolbar-tray-open.toolbar-vertical.toolbar-fixed { + body.toolbar-tray-open.toolbar-vertical { margin-left: 0; } } -[dir="rtl"] body.toolbar-tray-open.toolbar-vertical.toolbar-fixed { +[dir="rtl"] body.toolbar-tray-open.toolbar-vertical { margin-left: auto; margin-left: auto; margin-right: 240px; margin-right: 15rem; } @media print { - [dir="rtl"] body.toolbar-tray-open.toolbar-vertical.toolbar-fixed { + [dir="rtl"] body.toolbar-tray-open.toolbar-vertical { margin-right: 0; } } diff --git a/core/modules/toolbar/js/models/ToolbarModel.js b/core/modules/toolbar/js/models/ToolbarModel.js index 357692c..0b6ec48 100644 --- a/core/modules/toolbar/js/models/ToolbarModel.js +++ b/core/modules/toolbar/js/models/ToolbarModel.js @@ -22,9 +22,7 @@ * @prop activeTab * @prop activeTray * @prop isOriented - * @prop isFixed * @prop areSubtreesLoaded - * @prop isViewportOverflowConstrained * @prop orientation * @prop locked * @prop isTrayToggleVisible @@ -59,14 +57,6 @@ isOriented: false, /** - * Indicates whether the toolbar is positioned absolute (false) or fixed - * (true). - * - * @type {bool} - */ - isFixed: false, - - /** * Menu subtrees are loaded through an AJAX request only when the Toolbar * is set to a vertical orientation. * @@ -75,15 +65,6 @@ areSubtreesLoaded: false, /** - * If the viewport overflow becomes constrained, isFixed must be true so - * that elements in the trays aren't lost off-screen and impossible to - * get to. - * - * @type {bool} - */ - isViewportOverflowConstrained: false, - - /** * The orientation of the active tray. * * @type {string} diff --git a/core/modules/toolbar/js/views/BodyVisualView.js b/core/modules/toolbar/js/views/BodyVisualView.js index 7499646..a0466ea 100644 --- a/core/modules/toolbar/js/views/BodyVisualView.js +++ b/core/modules/toolbar/js/views/BodyVisualView.js @@ -17,7 +17,7 @@ * @augments Backbone.View */ initialize: function () { - this.listenTo(this.model, 'change:orientation change:offsets change:activeTray change:isOriented change:isFixed change:isViewportOverflowConstrained', this.render); + this.listenTo(this.model, 'change:orientation change:offsets change:activeTray change:isOriented change:isFixed', this.render); }, /** @@ -27,7 +27,6 @@ var $body = $('body'); var orientation = this.model.get('orientation'); var isOriented = this.model.get('isOriented'); - var isViewportOverflowConstrained = this.model.get('isViewportOverflowConstrained'); $body // We are using JavaScript to control media-query handling for two @@ -38,8 +37,6 @@ // then the CSS becomes simpler and more robust. .toggleClass('toolbar-vertical', (orientation === 'vertical')) .toggleClass('toolbar-horizontal', (isOriented && orientation === 'horizontal')) - // When the toolbar is fixed, it will not scroll with page scrolling. - .toggleClass('toolbar-fixed', (isViewportOverflowConstrained || this.model.get('isFixed'))) // Toggle the toolbar-tray-open class on the body element. The class is // applied when a toolbar tray is active. Padding might be applied to // the body element to prevent the tray from overlapping content.